SNSで重要なOGPとは?SEOとの関係性や設定方法を解説

study

  • OGPってSEOに関係あるの?

    OGPを設定するメリットって何?

    この記事を読んでいるということは、あなたもこのような疑問をお持ちではないでしょうか。

    OGPとはWebページをSNSでシェアする際に、SNS上にページのタイトルや画像などを表示させる仕組みを指します。

    ではOGPは実際にSEOに関係があるのでしょうか?

    この記事ではOGPとSEOの関係をはじめ、OGPを記述するメリットや記述方法もお伝えします。

    OGPについて詳しく知りたい方はぜひ参考にしてください。

    OGPとは?SEOとの関係性

    冒頭でも解説したとおり、OGPとはWebページをTwitterやFacebookなどのSNSでシェアする際に、SNS上にWebページのタイトルやアイキャッチ画像などを表示させる仕組みのことです。

    OGPを設定することで、以下の画像の赤枠内に示されているように、Webページのタイトルやアイキャッチ画像、メタディスクリプションなどが表示されます。

    TwitterのOGP表示例

    仮にOGPが設定されていない場合には、SNS側でOGPが自動で設定されてしまいます。

    また、OGPとSEOの関係性ですが、OGPを設定することに関して、SEOに直接的な効果はありません

    しかし間接的にSEOの効果が生まれることは十分に考えられます。

    というのも、OGPを設定することでSNSでのシェアを最大化できるかもしれないからです。

    SNSでシェアが増加すると、サイテーションや二次拡散の機会が増え、結果的にSEOに影響がある可能性はあります。

    次の章ではOGPを設定するメリットを紹介します。

    OGPを設定するメリット

    OGPを設定するメリットは、SNSでのシェアを最大化できる点です。

    OGPを設定することで、Webページの魅力をより的確にSNSのユーザーに伝えることができるため、SNSでのシェア増加に期待できます。

    仮にOGPが設定されていなければ、ページの内容がユーザーにうまく伝わらずシェアされないどころか、Webページにアクセスしてもらうこともできません。

    またOGPを正しく設定することで、発信者側が本当に伝えたい情報をSNSでも表示できます

    つまり、OGPを見たユーザーが齟齬を起こさないというリスクヘッジ的な観点でもOGPの設定は重要だと考えられます。

    次の章ではOGPの記述方法について解説します。

    まだWebサイトにOGPを設定していない方や、記述の方法がわからないという方は是非参考にしてください。

    OGPの記述方法

    OGPを設定するには、Webサイトに以下のようなHTMLを記述する必要があります。

    基本的な記述

    • OGPを宣言する記述
    • ページのURL
    • ページタイプ
    • ページタイトル(og:title)
    • ページの説明文(og:description)
    • サイト名(og:site_name)
    • 画像のURL(og:image)

    SNS別の追加設定

    • Facebookの設定
    • Twitterの設定

    それぞれ解説します。

    OGPを宣言する記述

    まずはページのhead要素に以下を記述しましょう。

    この記述は「このページではOGPを使う」という宣言をする記述です。

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

    ページのURL

    ページのURLの設定には以下の記述をしましょう。

    <meta property="og:url" content=" WebページのURL" />

    URLは全て記述して、絶対パスにしてください。

    相対パスだとOGPに反映されません

    ページタイプ

    ページタイプの設定には以下の記述をしましょう。

    <meta property="og:type" content=" ページタイプ" />

    トップページであれば「website」、それ以外のページには「article」と記述しましょう。

    ページタイトル

    ページタイトルの設定には以下の記述をしましょう。

    <meta property="og:title" content=" ページタイトル" />

    ページタイトルは、そのページのタイトルタグに設定されている文言を設定することが多いです。

    サイト名は別で記述するので、ページタイトルにはサイト名は含めないようにしましょう。

    また20字程度で設定することが良いと言われています。

    ページの説明文

    ページの説明文の設定には以下の記述をしましょう。

    <meta property="og:description" content=" ディスクリプション" />

    そのページのmeta descriptionと同じ文言を設定することが一般的ですが、「og:description」の文字数は80〜90文字が望ましいと言われています。

    90文字を超えて設定すると文字が切れてしまうため、meta descriptionの文字数が90文字を超える場合には90文字以内に調節しましょう。

    サイト名

    サイト名の設定には以下の記述をしましょう。

    <meta property="og:site_name" content="サイト名" />

    そのページが掲載されているサイト名を副題も含んだ正式名称で記述してください。

    画像のURL

    画像のURLの設定には以下の記述をしましょう。

    <meta property="og:image" content=" 画像URL" />

    SNSでシェアする際に表示させたい画像のURLを設定します。

    画像のURLも絶対パスで記述しましょう。

    OGPに設定する画像の推奨サイズ

    OGPに設定する画像サイズは1200px×630pxが推奨されています。
    1200px×630pxでなければいけないわけではなく、縦横比が1.91:1であれば問題ありません。
    縦横比が1.91:1になっていない場合には、画像が切り取られて表示され、意図しているように表示されないため注意しましょう。

    Facebookの設定

    FacebookのOGPを設定する場合には、次の記述もしましょう。

    <meta property="fb:app_id" content="FacebookのアプリID " />

    この記述はFacebookにサイト名やサイトの運営者を伝えるためのものです。

    この記述をすることで、FacebookインサイトというFacebookの分析ツールを使えるようになり、いいねやシェアの数、訪問者数や訪問時間などを確認できるようになります。

    Twitterの設定

    Twitterの設定では以下2つの記述をしましょう。

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

    TwitterではOGPが表示されるカード(フォーマット)を以下の4つから選択できます。

    • summary(最も一般的なカードでタイトル・画像・説明文が表示される)
    • summary_large_image(summaryよりも画像が大きく表示される)
    • app(アプリ配布用のカード)
    • player(ビデオやオーディオを表示するカード)

    目的に応じて適切なものを設定しましょう。

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

    次にOGPを設置するときの注意点を解説します。

    OGPがうまく反映されていない場合には、次の2点を確認してみましょう。

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

    • OGPは1ページごとに設定する
    • OGP設定ができないサイトもある

    それぞれ解説します。

    OGPは1ページごとに設定する

    OGPは1ページごとに設定するものです。

    特定のページに設定したからといって、全てのページに反映されるものではありません。

    そのためOGPが正しく反映されていないという場合には、まずはそのページにOGPが設定されているかを確認しましょう

    もしOGPが設定されていた場合には、それぞれの記述が正しいかを確認してください。

    OGP設定ができないサイトもある

    WordPressのテーマによってはOGPが設定できないサイトもあります。

    このような場合にはOGPを設定するWordPressのプラグインを導入しましょう。

    これらのプラグインを導入するとOGP設定を行えるようになります。

    OGPの確認方法

    記述が正しくされていることを確認したら、表示が正しくされているか確認しましょう。

    OGPが正しく表示されているかは、ツールを使うことで確認できます

    OGP確認ツール

    • Twitterは「Card validator」
    • Facebookは「シェアデバッガー」

    それぞれ簡単に解説します。

    TwitterのOGPを確認するツール.Card validator

    Card validatorはTwitterカードが正しく表示されているかを確認できるツールです。

    Twitterにログインして、Card validatorに当該ページのURLを入力することでTwitter上でOGPがどのように表示されるかを確認できます。

    Card validatorでOGPのプレビューが表示される様子

    Card Validator | Twitter Developers

    FacebookのOGPを確認するツール.シェアデバッガー

    シェアデバッガーはFacebookでOGPが正しく表示されているか確認できるツールです。

    Twitter同様に、Facebookにログインして、シェアデバッガーに当該ページのURLを入力することでFacebook上でOGPがどのように表示されるかを確認できます。

    シェアデバッガー でOGPのプレビューを確認する様子

    シェアデバッガー – 開発者向けFacebook

    まとめ:OGPの設定はSNSからの流入やシェアに影響する

    OGPはSEOに直接的な影響はありませんが、SNSでの拡散を最大化することでSEOに影響する可能性があります。

    そのためOGPを正しく設定することは重要です。

    OGPは各ページに個別で設定する必要があり、それぞれの項目を正しく記述する必要があります。

    正しい記述方法については、この記事で紹介した方法を参考にしてみてください。

    OGPの設定方法を含め、SEOやWebサイトの改善に関してお悩みがあれば、お気軽に弊社にご相談ください。

    SEOのその悩み、
    エクスコアに相談してみませんか?/

    • 「SEOに取り組んでいるのに、
      上位表示されない」
    • 「上位を獲得しているけど、
      売上につながらない」
    • 「SEOを始めたいが、
      何から手をつけたら良いかわからない」

    このようにお悩みなら、
    ぜひエクスコアにご相談ください!
    エクスコアではお客様のSEO対策を
    サポートしております。

    お問い合わせ・資料ダウンロードは、
    どなたでも無料でご利用いただけます。
    どうぞお気軽にお問い合わせください。