OGPとは？
SNSにサムネを表示させる方法とメリットを解説

#ブログ運用術

更新日: 2025.01.19

OGPとは？

OGPとは「Open Graph Protocol（オープングラフプロトコル）」の略で、ウェブページがSNSに投稿された場合に、タイトル、説明文、画像などの情報を表示する仕組みです。

リンク先の情報がより視覚的に分かりやすく表示されるため、SNSでの集客やクリック率向上が期待できます。

OGP設定以外にもアクセス数を増やすためのSEO対策はさまざまあります。以下の記事でまとめているので、確認してみましょう↓

初心者もできるSEO対策のやり方を全まとめ！上位表示に必要な方法と効果を解説

OGPの役割

OGPは、SNS上でリンクを共有する際にWebサイトのコンテンツを正確かつ魅力的に伝えるための要素として機能します。

例えば、記事のタイトルやサムネイル画像が適切に表示されることで、利用者は投稿内容を直感的に理解しやすくなります。また、OGPを適切に設定すると、投稿の視認性が向上し、SNSを通じた効果的な情報拡散が可能になります。

SNSとOGPの関係

OGPは、SNSとWebサイトをつなぐ橋渡しの役割を果たします。

例えば、X（旧Twitter）やFacebookにURLを貼り付けると、そのURLに設定されているOGPタグの内容が反映されて、画像や説明文が自動的に表示されます。

OGPが設定されていない場合、SNS側でランダムな情報が表示されることがあり、リンク先の魅力が伝わりにくくなることがあります。

WordPressを使用している場合でもプラグインやOGPに対応したテーマを使用することで簡単にOGP設定が可能で、投稿やページごとにカスタマイズできます。

なぜOGPが重要なのか？

OGPが重要である理由は主に3つあります。

まず、OGP設定を行うことで、SNSユーザーが共有する投稿に視覚的なアピールを加えられ、より多くの人の目に留まる可能性が高まります。

次に、OGPによって正確なコンテンツ情報が伝わるため、ユーザーがリンクをクリックするかどうかの判断材料を得やすくなります。

そして最後に、企業や個人が発信するブランドメッセージの訴求力を高める効果もあります。適切なイメージや説明をサムネイルで伝える事で、サイト全体の印象を統一し、ブランド価値を高めることができます。

OGPを設定するメリット

SNS上での視認性の向上

OGPを設定することで、SNS上に投稿されたときにタイトルや説明文、サムネイル画像などが適切に表示されるようになります。

特に画像があるとビジュアルで目を引くため、文字情報だけの投稿よりも視認性が高くなります。これは、X（旧Twitter）やFacebookといったプラットフォームでの情報の目立ちやすさに直結します。

推奨サイズの画像（Xの推奨例: 1200px × 630px）を設定すると、情報が正確かつ美しく表示され、ユーザーの興味を引く効果を高めます。

クリック率の改善効果

適切に設定されたOGPは、投稿のクリック率を向上させる効果があります。

視認性が高まり、タイトルや説明文が魅力的に表示されることで、リンクをクリックしてサイトを訪れるユーザーが増える傾向にあります。

ブランドイメージの向上

統一感のあるOGP画像やキャッチコピーを設定することで、ブランドイメージの向上につながります。視覚的なアイデンティティを強調することで、「この投稿はあの人（企業）だ」と印象付けることが可能になります。

特に企業や商品サイトでは、このような一貫性のあるデザインが信頼を高め、マーケティング効果を向上させる助けになります。

例えば、Google検索ではOGP画像が直接表示されないこともありますが、SNSで統一感のあるサムネイルが目立つことで、ブランドの認知度が高まります。

シェア拡散の促進

OGPを活用すると、SNS上でシェアされる際の内容が整然とし、ユーザーが情報を再シェアしやすくなります。

特に、画像や説明文の内容がターゲットユーザーの興味や関心を引く場合、拡散効果がさらに高まります。

結果として、サイトや投稿の露出が増加し、シェアを通じた新規ユーザーの流入が期待できます。

OGPを設定する方法

HTMLにOGPタグを記述する方法

OGPを手動で設定する場合、HTMLのheadタグ内にOGP用のmetaタグを記述します。

具体的には、以下のようなコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OGP画像の表示テスト</title>

    <!-- OGP基本タグ -->
    <meta property="og:title" content="OGP画像のテストページ">
    <meta property="og:description" content="これはOGP画像が正しく表示されるかテストするためのページです。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:image" content="https://example.com/ogp-image.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="Example Site">

    <!-- Twitterカードの設定 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="OGP画像のテストページ">
    <meta name="twitter:description" content="これはOGP画像が正しく表示されるかテストするためのページです。">
    <meta name="twitter:image" content="https://example.com/ogp-image.jpg">
    
</head>
<body>
    <h1>OGP画像のテストページ</h1>
    <p>このページをSNSでシェアすると、OGP画像が表示されるはずです。</p>
</body>
</html>

推奨される画像サイズは1200px × 630pxで、高品質なサムネイルを用意することで視認性が向上します。設定後は、SNS上でどのように表示されるか確認するために、公式のOGP確認ツールやデバッグツールを活用しましょう。

WordPressで設定する場合

WordPressでOGPを設定するのは比較的簡単で初心者の方でも設定可能です。

テーマやプラグインを利用することで、コードを直接記述する必要がなくなります。

多くのテーマにはOGP設定機能が組み込まれているものもあり、テーマのカスタマイズ画面からOGP情報を入力できます。

また、WordPressのデフォルト設定が不足している場合には、「Yoast SEO」や「All in One SEO Pack」などのSEOプラグインを利用すると便利です。

設定後の動作確認方法

OGPの設定後は、必ず正確に反映されているか確認することが重要です。確認にはSNSが提供する公式ツールを利用すると良いでしょう。

たとえば、X（旧Twitter）では「Card Validator」、Facebookでは「Sharing Debugger」というツールがあります。これらにサイトのURLを入力することで、設定したOGPが正しく機能しているかを確認できます。

もし設定したOGPが反映されていない場合は、キャッシュが原因になっている可能性があります。その際は、キャッシュをクリアして再度確認を行いましょう。

また、不具合が解決しない場合はHTMLに記述したmetaタグやプラグインの設定内容を再確認することをお勧めします。

OGP活用方法と注意点

最適なOGP画像サイズと選び方

OGPで使用する画像のサイズは視認性に大きく影響を与えます。

一般的に推奨される画像サイズは1200px × 630pxです。

サイズを推奨よりも大きかったり小さくしてしまうと途切れたり縮小されたりしてしまいます。

SNSごとの表示仕様の違いに対応

SNSごとにOGPの表示仕様や要件が異なるため、それぞれに合わせた最適化が重要です。

例えば、X（旧Twitter）では「Twitterカード」としてOGP情報が表示され、特にサムネイル画像の正確なサイズ設定が求められます。

一方、Facebookはタイトルや画像、説明文が大きく目立つデザインになっているため、文字制限や画像の配置をそれに合うよう調整します。

サイトの訪問者がどのSNSを主に利用しているのかを考慮しつつ、それぞれのルールに合わせてOGP設定を行うことが、効果的なシェア拡散につながります。

OGPがうまく表示されない場合の修正例

OGPを適切に設定したつもりでも、時にトラブルが発生することがあります。

例えば、OGP画像が表示されない場合、HTMLコード内のmetaタグに誤りがあることが考えられます。

また、キャッシュが原因で古い情報が表示されるケースもあり、その場合はキャッシュのクリアを試してください。FacebookのデバッガーツールやX公式のOGP確認ツールを利用することで、設定ミスを発見しやすくなります。

まとめ

OGPは、Webサイトや投稿コンテンツをSNS上で魅力的に見せるための重要な仕組みです。OGPの正しい設定によって、サイトへのアクセス数の向上やユーザーエンゲージメントの増加が期待できます。
サムネイル画像や説明文などの情報がSNS上で適切に表示されることで、コンテンツの視認性が向上し、クリック誘導率やブランドイメージの向上にも繋がります。
HTMLにOGPタグを記述することや、WordPressやプラグインを利用して簡単に設定する方法があります。
FacebookのデバッガーツールやX公式のOGP確認ツールを活用し、設定後の確認を行うことで、意図した情報が適切に表示されているか確認することができます。
OGP画像には推奨されるサイズがあり、たとえば1200px × 630pxが目安です。

SNS時代にOGPは必須なのにゃ！

OGPとは？
SNSにサムネを表示させる方法とメリットを解説