OGPタグとは？設定方法から画像サイズ・確認手順まで初心者向けにわかりやすく解説

SNSでWebページをシェアしたとき、タイトルや画像が正しく表示されず困った経験はありませんか。OGPタグを適切に設定することで、FacebookやX（旧Twitter）などで記事をシェアした際の見栄えを大幅に改善できます。OGPタグはOpen Graph Protocolの略称で、SNS上でのコンテンツ表示をコントロールするための重要な仕組みです。この記事では、OGPタグの基本的な概念から具体的な設定方法、推奨される画像サイズ、そして設定後の確認手順まで、初心者の方でも実践できるよう丁寧に解説していきます。

OGPタグの基本と仕組み

OGPタグの定義と役割

OGPタグとは、Webページの情報をSNSに正しく伝えるためのHTMLメタタグの一種です。Open Graph Protocolの頭文字を取ってOGPと呼ばれており、2010年にFacebookが提唱した規格として広まりました。

通常、SNSでURLをシェアすると、そのページのタイトルや説明文、サムネイル画像が自動的に表示されます。しかし、OGPタグを設定していない場合、SNS側がページ内容を自動判別するため、意図しない情報が表示されてしまうことがあります。OGPタグを適切に記述することで、シェア時の表示内容を管理者側でコントロールできるようになります。

OGPタグが重要な理由

OGPタグの重要性は、SNSからの流入増加に直結する点にあります。魅力的なタイトルと画像が表示されることで、ユーザーのクリック率が向上する傾向が見られます。

適切なOGP設定により、SNS上での視認性とクリック率の向上が期待できます。また、ブランドイメージの統一という観点でも、OGPタグは効果的な役割を果たします。どのSNSでシェアされても一貫した見栄えを維持できるため、企業やサービスの認知度向上にも貢献します。

OGPタグと通常のmetaタグの違い

通常のmetaタグが検索エンジン向けの情報提供を主目的としているのに対し、OGPタグはSNSプラットフォーム向けに特化しています。記述方法にも違いがあり、OGPタグでは「property」属性を使用します。

一般的なmetaタグとOGPタグの記述形式の違いを以下に示します。

種類	属性	主な用途
通常のmetaタグ	name属性	検索エンジン向け
OGPタグ	property属性	SNSプラットフォーム向け

両方のmetaタグを適切に設定することで、検索エンジンとSNSの双方で効果的な情報発信が可能になります。

OGPタグの種類と記述方法

必須のOGPプロパティ

OGPタグには最低限設定すべき必須プロパティがあります。以下の4つは、どのWebページにも設定しておくことが推奨されています。

これら4つのプロパティを正しく設定することが、OGPタグ活用の第一歩となります。og:titleには検索エンジン向けのtitleタグとは別に、SNS向けに最適化したタイトルを設定できます。

推奨のOGPプロパティ

必須プロパティに加えて、より詳細な情報を伝えるための推奨プロパティも存在します。og:descriptionは、ページの説明文を設定するプロパティで、SNS上でタイトルの下に表示されます。

og:site_nameはサイト名を指定するもので、ブランド認知に役立ちます。og:localeは言語と地域を指定するプロパティで、日本語サイトの場合は「ja_JP」と設定します。これらの推奨プロパティを追加することで、より完成度の高いOGP設定が実現できます。

OGPタグの基本的な書き方

OGPタグはHTMLのhead要素内に記述します。まず、html要素にOGPの名前空間を指定することが推奨されています。具体的には、prefix属性に「og: http://ogp.me/ns#」を追加します。

各プロパティの記述例を以下に示します。

プロパティ	設定内容	記述例
og:title	ページタイトル	meta property=”og:title” content=”タイトル”
og:description	説明文	meta property=”og:description” content=”説明文”
og:type	コンテンツ種類	meta property=”og:type” content=”website”
og:url	正規URL	meta property=”og:url” content=”https://example.com/”
og:image	画像URL	meta property=”og:image” content=”画像URL”

og:typeはトップページでは「website」、個別記事ページでは「article」と使い分けることが一般的です。URLは必ず絶対パスで記述し、相対パスは避けるようにしましょう。

SNS別の専用タグ設定

FacebookとX（旧Twitter）では、それぞれ固有のタグ設定が可能です。Facebookの場合はfb:app_idというプロパティでアプリIDを指定できます。

X向けには「twitter:card」「twitter:site」などのTwitterカード用タグを別途設定します。twitter:cardプロパティでは「summary」「summary_large_image」などの表示形式を選択できます。大きな画像でアピールしたい場合は「summary_large_image」を指定すると効果的です。

あわせて読みたい

SEO内部対策｜優先施策15選をわかりやすく解説 SEO内部対策は、サイト内部の構造やコンテンツを最適化し、検索エンジンからの評価を高める重要な施策です。外部リンクの獲得が難しい中、内部対策は自社で完結できる確...

OGP画像の推奨サイズ

各SNSの推奨画像サイズ

主要なSNSプラットフォームごとに、推奨される画像サイズは異なります。ただし、すべてのSNSに対応できる汎用的なサイズも存在します。

プラットフォーム	推奨サイズ	アスペクト比
Facebook	1200×630px	1.91:1
X（旧Twitter）	1200×628px	1.91:1
LINE	1200×628px	1.91:1
汎用推奨サイズ	1200×630px	1.91:1

1200×630pxの画像サイズを基準に作成すれば、主要なSNSすべてで適切に表示されます。このサイズは各プラットフォームの推奨サイズに近く、汎用性が高いとされています。

画像形式とファイルサイズ

OGP画像の形式としては、JPEGまたはPNGが一般的に使用されています。写真やグラデーションが多い画像にはJPEG、テキストやロゴが中心の画像にはPNGが適しています。

ファイルサイズについては、表示速度の観点から1MB以下に抑えることが推奨されています。画像の読み込みが遅いと、SNS側でサムネイル生成が失敗するケースも報告されています。画像圧縮ツールを活用して、品質を維持しながらファイルサイズを最適化しましょう。

OGP画像作成のポイント

効果的なOGP画像を作成するためには、いくつかの重要なポイントがあります。まず、画像内にテキストを配置する場合は、SNSによってトリミングされる可能性を考慮し、中央寄りに配置することが大切です。

画像の端がトリミングされても重要な情報が欠けないよう、余白を十分に確保することが重要です。また、スマートフォンでの表示を考慮し、小さな画面でも視認性を確保できるデザインを心がけましょう。

あわせて読みたい

ブログのクリック率向上！Canvaで効果的なアイキャッチ画像を作成する方法 この記事でわかること Canvaでアイキャッチ画像を作成する基本手順と適切なサイズ設定 デザイン初心者でも、Canvaの無料アカウントを作成し、WordPressに最適な1200×630...

OGPタグの設定手順

HTMLへの直接記述

静的なHTMLサイトやフルスクラッチで開発されたサイトでは、head要素内に直接OGPタグを記述します。まず、html開始タグにprefix属性を追加し、OGPの名前空間を宣言します。

head要素内の適切な位置にmeta要素を配置し、各プロパティの値を設定していきます。og:imageには必ず絶対URLを指定し、og:urlも同様に完全なURLを記述します。相対パスで指定すると、SNS側で正しく認識されない場合があるため注意が必要です。

WordPressでの設定方法

WordPressを使用している場合、OGP設定を簡単に行える複数の方法があります。最も手軽なのは、SEO対策プラグインを活用する方法です。

多くのSEOプラグインにはOGP設定機能が含まれており、管理画面から各ページのタイトルや説明文、画像を個別に設定できます。テーマによってはOGP出力機能が標準搭載されているものもあります。プラグインを使用する場合は、テーマ側の設定と重複しないよう確認することが大切です。

設定時の注意点

OGPタグを設定する際には、いくつかの重要な注意点があります。複数の方法でOGPタグが出力されていると、予期しない表示になる可能性があります。

og:titleは30〜35文字、og:descriptionは100〜120文字程度に収めることが推奨されています。文字数が長すぎると、SNS上で途中で切れて表示される場合があります。

あわせて読みたい

【2026年最新】HTML・CSSの独学に最適な本15選｜初心者から実務レベルまで徹底解説 この記事でわかること 初心者から上級者まで、レベル別に最適なHTML・CSS学習書籍15選 初心者には「いちばんよくわかるHTML5&CSS3デザインきちんと入門」などの基礎固め...

OGPタグの確認方法

Facebookデバッガーの使い方

Facebookが提供するシェアデバッガーは、OGP設定の確認に広く活用されています。Facebook for Developersのサイト内にあるシェアデバッガーにアクセスし、確認したいURLを入力するだけで診断が可能です。

デバッガーでは、取得されたOGP情報の一覧と実際の表示プレビューを確認できます。エラーや警告がある場合は、具体的な問題点も表示されるため、修正の参考になります。また、キャッシュのクリアもこのツールから行えます。

Xカードバリデーターの活用

X（旧Twitter）向けのOGP設定を確認するには、Card Validatorというツールが便利です。このツールでは、Twitterカードの表示プレビューとメタタグの取得状況を確認できます。

使用方法は、Card ValidatorのページにアクセスしてURLを入力し、「Preview card」ボタンをクリックするだけです。正しく設定されていれば、カードのプレビューが表示されます。表示に問題がある場合は、取得されたメタタグ情報を確認して原因を特定しましょう。

その他の確認ツール

Facebook、X以外にも、OGP設定を確認できるツールが複数存在します。LINE向けにはPage Pokerというツールが提供されており、LINEでシェアした際の表示を事前確認できます。

ツール名	対応プラットフォーム	主な機能
シェアデバッガー	Facebook	OGP確認・キャッシュクリア
Card Validator	X（旧Twitter）	カード表示プレビュー
Page Poker	LINE	シェア表示確認

汎用的なOGPチェックツールもWeb上で多数公開されています。複数のツールで確認することで、より確実な検証が可能になります。

キャッシュの更新方法

OGPタグを修正しても、SNS側にキャッシュが残っていると古い情報が表示され続けることがあります。この問題を解決するには、各プラットフォームのキャッシュをクリアする必要があります。

Facebookの場合はシェアデバッガーで「Scrape Again」ボタンをクリックすることで、最新情報を再取得できます。Xでは、Card ValidatorでURLを再度検証することでキャッシュが更新される場合があります。キャッシュの反映には時間がかかることもあるため、少し待ってから再確認することをおすすめします。

よくある質問

OGPタグを設定しないとどうなりますか

OGPタグを設定しない場合、SNS側がページ内容を自動判別して表示します。その結果、意図しないタイトルや画像が表示されたり、サムネイルが生成されなかったりする可能性があります。ユーザーにとって魅力的な見栄えにならず、クリック率の低下につながることが考えられます。

OGPタグはSEOに影響しますか

OGPタグは直接的な検索順位への影響はないとされています。ただし、SNSでの視認性向上によりシェア数やサイトへの流入が増加すれば、間接的にSEO効果につながる可能性はあります。OGPタグとtitleタグ、meta descriptionは別々に設定できるため、それぞれ最適化することが推奨されています。

OGP画像が表示されない場合の対処法は

OGP画像が表示されない原因としては、画像URLが絶対パスでない、画像サイズが小さすぎる、ファイルサイズが大きすぎる、画像URLへのアクセスがブロックされている、などが考えられます。まずは各SNSのデバッガーツールでエラー内容を確認し、原因を特定してから修正することをおすすめします。

ページごとにOGPタグを変える必要がありますか

はい、各ページの内容に合わせてOGPタグを設定することが推奨されています。すべてのページで同じOGPタグを使用すると、どのページをシェアしても同じ表示になってしまい、ユーザーにとって分かりにくくなります。特にog:title、og:description、og:image、og:urlは、ページごとに適切な値を設定しましょう。

まとめ

OGPタグは、SNSでWebページをシェアした際の表示をコントロールするための重要な仕組みです。og:title、og:type、og:url、og:imageの4つの必須プロパティを正しく設定することで、魅力的なシェア表示を実現できます。

OGP画像は1200×630pxを基準に作成し、重要な要素は中央に配置することがポイントです。設定後は各SNSのデバッガーツールで確認し、キャッシュが原因で反映されない場合は更新操作を行いましょう。

OGPタグの設定は一度行えば継続的に効果を発揮します。まだ設定していない方は、この記事を参考に、ぜひ自サイトへの導入を検討してみてください。適切なOGP設定により、SNSからの流入増加とブランド認知向上が期待できます。