最終更新日:2/8/2024

OGPとは？SEOへの効果や設定・確認方法を解説

「OGPのSEOに対する効果を知りたい」

「OGPの設定方法を知りたい」

このような考えをお持ちではありませんか？

今回は、ソーシャルメディアにおけるウェブサイトのシェア促進に重要な「OGP」について、SEOへの効果や設定方法を解説します。

SEO対策は、自社ウェブサイトやコンテンツをGoogleの検索結果で上位に表示させ、多くのユーザーから認識してもらうために非常に重要です。

SEOを強化したウェブサイトやコンテンツを作成したい方は、SEOに強いAIライティングツール「トランスコープ」もあわせてご覧ください。

OGP（Open Graph Protocol）とは？

OGPは「Open Graph Protocol」の略で、ソーシャルメディアで共有されるウェブページの表示方法を標準化するために、2010年にFacebookによって開発されたプロトコルです。

OGPでは、ウェブサイトがFacebookやX(旧Twitter)といったソーシャルメディアに投稿・シェアされた際に、どのように画像・タイトル・紹介文などが表示されるかを指定できます。

サイトがFacebookやX(旧Twitter)でシェアされる際、表示される画像やタイトルのレイアウトをコントロールすることは非常に重要です。

訴求力が高く魅力的なコンテンツを表示することにより、ソーシャルメディアでのシェアを促進し、クリック率を上げる効果があります。

OGPを設定しない場合は、SNS側が最適と予測した画像・タイトル・紹介文が自動的に表示されてしまいます。

自動的に選ばれるため、適切な画像が表示されない、古い情報が表示されるといった恐れがあります。

OGPのSEOに対する効果

OGPを適切に設定してサイトの魅力が伝わる画像や紹介文を表示すると、FacebookやX(旧Twitter)といったソーシャルメディア内で多くの人の目にとまります。

結果的にクリック率が向上し、サイトへのアクセス数が増え、SEOの改善にも役立ちます。

総務省が令和3年6月に発表した調査「令和2年通信利用動向調査の結果」によると、令和2年（2020）の国内SNS利用率は前年より4.8％上昇し、73.8％にのぼります。

SNSの普及が進む近年では、ソーシャルメディアでシェアされることは、コンテンツをより多くの人に届けるために非常に有効です。

反対に、OGPを設定しておかないとシェアやクリックの機会を逃し、大切な外部リンク獲得の機会も逃してしまいます。

外部リンクの獲得方法や、外部リンクを増やすツールについては、SEO担当者必見！被リンク獲得方法9選を徹底解説やSEOを強化！被リンクを増やすリンクビルディングツール7選をぜひご覧ください。

OGPを設定する3つのメリット

OGPを設定するメリットは、以下の3つです。

  1. SNSでのシェアが促進する
  2. ブランド認知度が上がる
  3. 訴求力の向上によりアクセス数が上がる

それぞれ解説します。

1.SNSでのシェアが促進する

OGPを設定する1つ目のメリットは、SNSでのシェアが促進することです。

OGPを適切に設定してFacebookやX(旧Twitter)で表示されるコンテンツの見え方を整えると、サイトがシェアされた際により魅力的で有益なコンテンツとして認識してもらえます。

SNS内で人の目を引く魅力的なコンテンツとして表示できれば、目にとめた人がさらに拡散し、SNSでのシェアが促進します。

2.ブランド認知度が上がる

OGPを設定する2つ目のメリットは、ブランド認知度が上がることです。

OGPを設定すると、サイトがFacebookやX(旧Twitter)といったソーシャルメディアでシェアされた際の、コンテンツの見え方をコントロールすることが可能です。

サイト内で統一感のあるレイアウトに設定することでブランドの一貫性を維持し、認知度を上げられます。

設定の際は、画像やタイトルなど目に付きやすい部分にとくに気を配りましょう。

3.訴求力の向上によりアクセス数が上がる

OGPを設定する3つ目のメリットは、訴求力の向上によりアクセス数が上がることです。

SNSにおいて、写真による視覚的な情報は訴求力を高めるために非常に重要です。

目にとまりやすく内容が伝わりやすい画像を設定することで、アクセス数の向上が期待できます。

簡単に理想の画像を生成したいなら、画像生成AIツールのおすすめ6選とプロンプト結果を徹底比較のコラムをご覧ください。

画像生成時に入力するプロンプト（命令文）についてはSNSマーケティングで使えるChatGPTプロンプト20選のコラムも参考になるでしょう。

OGPを設定して魅力的なコンテンツを表示することは、より多くのシェアとクリック獲得につながるため、SEOの改善にも役立ちます。

SEOに強いコンテンツの制作や改善に役立つOpenAIのオススメGPTsについて知りたい方は、SEOを飛躍的に強化するOpenAIのオススメGPTs10選もあわせてご覧ください。

OGPの設定方法

OGPを設定するためには、HTMLソースコードにmetaタグを記述します。

基本的な設定とあわせて、FacebookやX(旧Twitter)向けの追加設定を行いましょう。

HTMLについては【2024年版】SEOに強いメタタグ・HTMLコーディングとは？で詳しく解説しておりますので、ぜひご覧ください。

1.OGPの設定方法

OGPは、OGPを設定したいウェブサイトのHTMLソースコード内に必要なタグを記述することで設定できます。

OGPの基本的な設定手順は、以下のとおりです。

  1. head要素に、prefix属性を追加
  2. headタグ内に、所定の要素を追加

まずはheadタグ内にprefix属性を追加し、OGPの使用を宣言します。

<head prefix="og: https://ogp.me/ns#">

続いて、所定の要素を追加します。

設定しておきたい主な要素は、以下の6つです。

<meta property="og:url" content="ページのURL">
<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:image" content="ページのアイキャッチ画像のURL">
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content=" ページの説明や紹介文" />

HTMLタグ6種類の設定内容と設定時の注意点については下記の表をご覧ください。

OGPタグのプロパティ属性は他にもありますが、上記の6つを設定しておけば問題なくソーシャルメディアでのシェアを最適化できるでしょう。

2.Facebookの追加設定

Facebook用の追加設定を紹介します。

基本的なOGP設定とあわせて、「fb:app_id」を記述しましょう。

<meta property=”fb:app_id” content=”App-ID（15文字の半角数字）”>

ただし、指定しなくてもコンテンツは正しく表示されるので、あえて指定しなくても問題はありません。

App-IDを指定するとFacebookからのトラフィックを分析できるようになるため、希望する場合は設定しましょう。

「fb:app_id」を設定するにはIDを取得する必要があり、「Meta for Developers」で取得できます。

3.X(旧Twitter)の追加設定

X(旧Twitter)では、基本的なOGP設定に加えて「twitter:card」および「twitter:site」を記述します。

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />

X(Twitter)のカードとは、ツイートに貼られたリンクURLの画像やページタイトルが表示される機能です。

 Twitterカードの設定有無で比較すると、設定ありのほうがリンクが目立ち、クリックされやすくなります。

カードの種類は、以下の4つです。

  • summary（画像・記事タイトル・紹介文が表示される）
  • summary_large_image（大きな画像・記事タイトル・紹介文が表示される）
  • app（アプリのインストールリンクが表示される）
  • player（動画のダイジェストなどを再生できる）

ウェブサイトの場合は、「summary」または「summary_large_image」を使用しましょう。

「summary_large_image」を選択するとX(旧Twitter)で画像をより大きく表示できるため、より目を引くコンテンツとして表示できます。

X(旧Twitter)投稿における適切な画像サイズや表示の確認方法については、X(Twitter)の推奨画像サイズを攻略！綺麗に表示させて印象アップを狙おうをご覧ください。

OGPの設定を確認できる3つのツール

OGPを設定したら以下のツールを使用して、シェアされたときの表示を確認しておきましょう。

  1. シェアデバッガー
  2. OGP画像シミュレーター
  3. ラッコツールズ

それぞれ解説します。

1.シェアデバッガー

引用：シェアデバッガー

シェアデバッガーは、Facebookから公式に提供されているツールです。

URLを入力して「デバッグ」をクリックすると、サイトがFacebookやMessengerでシェアされた際の表示を確認できます。

このとき、Facebookでまだシェアされていない記事の場合は、警告文が表示されます。

警告文内の「新しい情報を取得」をクリックして表示を確認しましょう。

OGP設定を更新した際は「もう一度スクレイピング」を選択すると、更新後の表示を確認できます。

2.OGP画像シミュレーター

引用：OGP画像シミュレーター

OGP画像シミュレーターを使うと、OGPで設定した画像がX(旧Twitter)やFacebookでどのようにトリミングされて表示されるかを確認できます。

チェックしたい画像を指定すると、各SNSでの画像の見え方をシミュレーションした結果が表示されます。

titleやdescriptionも入力でき、画像サイズや色、タイトルや紹介文を含めて、実際の仕様に沿った表示で確認が可能です。

3.ラッコツールズ

引用：ラッコツールズ

ラッコツールズの1つ「OGP確認」では、確認したいサイトのURLを入力すると、各SNSでシェアされた際のプレビューを確認できます。

FacebookやX(旧Twitter)のほか、はてなブックマークとLINEに対応しており、ページを各SNSでシェアした際の画像・タイトル・紹介文を確認できます。

PC版・スマートフォン版・アプリ版で表示サイズや表示文字数が異なる場合は、全てのパターンが表示されます。

OGP設定が反映されないケースと対処法

OGP設定が反映されない原因は、主に以下の3つです。

  • キャッシュが各SNSのサーバーに残っている
  • 画像をSVGで設定している
  • 相対パスで画像を設定している

キャッシュが各SNSのサーバーに残っていることが原因で、OGPで設定した画像・タイトルが反映されないケースが多くあります。

シェアデバッガーなどの各SNSのキャッシュクリアを利用して、キャッシュを消去してみましょう。

また、OGPで使えるファイル形式はPNG、JPG、GIF、WebPの4つであり、SVG画像を設定してしまうと画像が表示されません。

他にも、相対パスで画像を設定している場合は、OGP設定が反映されません。

OGPの画像設定では相対パスは使わず、絶対パスで設定しましょう。

OGPを設定するときの注意点

OGPを設定する際には、以下の3点に注意しましょう。

  • 紹介文の文字数は80文字程度にする
  • 画像のサイズは見切れない大きさにする
  • ページごとにOGPを設定する

descriptionに入力する紹介文の文字数が多すぎると、シェアされた際に表示しきれず、ユーザーに伝えたいことが伝わりません。

FacebookとX(旧Twitter)両方で途切れずに表示するためには、紹介文の文字数は80文字程度にしましょう。

また、表示されたが画像が途切れている場合も、コンテンツの魅力は半減してしまいます。

正方形を使っているメディアでも見切れずに表示できるよう、設定する画像のサイズにも気を配りましょう。

OGPの設定後は、確認ツールで画像が途切れていないか確認することも重要です。

また、OGPはページごとに最適なものを設定することも大切なポイントです。

異なる複数のページに同一のOGPを設置してしまうと、同じ画像やタイトル、紹介文ばかりがシェアされてしまいます。

それぞれのページに最適な画像・タイトル・紹介文を設定し、シェアされた際のアピール力を高めましょう。

SEOに強いAIライティングツール「トランスコープ」には、ページに最適な画像を自動生成する機能もあります。

画像の自動生成について知りたい方は、記事に最適な画像を自動生成して、記事作成を効率化するをご覧ください。

OGPを適切に設定してSEOへの効果を最大化しよう

今回は、OGPのSEOに対する効果、OGPの設定方法などについて解説しました。

OGPを適切に設定し、デザイン性や訴求力の高い画像や紹介文を表示できると、FacebookやX(旧Twitter)といったソーシャルメディア内で多くの人の目にとまります。

多くの人から注目されシェアが進むと、結果的にクリック率が向上し、サイトへのアクセス数が増えてSEOの改善にも役立ちます。

SNSを利用して集客をしている場合は必ずOGPを設定し、SNSでのシェアを最適化しましょう。

また、シェアやクリック率の向上だけでなくSEOもより強化したいという方には、SEOに強いAIライティングツール「トランスコープ」がおすすめです。

トランスコープについては、以下の動画で詳しく紹介しています。

AIでSEOに強いブログ記事作成！SEOに強いAIライティングツール「トランスコープ」とは？

さらに、【トランスコープの評判・導入事例】では、トランスコープを実際に取り入れた企業の導入事例を掲載しています。

ぜひご確認ください。

トランスコープは、無料で体験ができます。

ご興味がございましたら、お気軽にお試しください。

■SEOに強いAIライティングツール「トランスコープ」

https://transcope.io/

最終更新日:2/8/2024

監修者

X logo

シェアモル株式会社 代表取締役

齋藤 康輔

大学在学中に半導体のシミュレーションを専攻する傍ら、人材会社にてインターン。
インターン中に人材会社向け業務システムを開発し、大学卒業後の2007年3月に上記システム「マッチングッド」を販売する会社、マッチングッド株式会社を設立。
12年の経営の後、2019年1月に東証プライム上場企業の株式会社じげんに株式譲渡。
売却資金を元手に、シェアモル株式会社を設立。
AIを利用したM&A・事業承継の仲介サービス「シェアモルM&A」とSEOに強い文章をAIが作成する「トランスコープ」を展開中。

Contact

以下から登録またはX（旧Twitter）をフォローすると
お役立ち情報を無料で受け取れます！

SEOに強いAIライティングツールの
トランスコープとは？お役立ちコラム一覧を見る
SEOに強いAIライティングツールAIならトランスコープ

© Transcope.