SNSで重要になるOGPの設定方法まとめ

SNSで重要になるOGPの設定方法まとめ

もはやSNS上で重要なシェアを実施するために欠かせないプロトコルとなったOGP。

上手に設定することでWEBページの情報をわかりやすく伝えられるだけでなく、視覚的にもアピールできるため、重要性はきわめて高いと言えます。

この記事ではOGPの設定におけるすべてを詳しくまとめています。

目次

OGPとは？

OGPについて説明します。

Open Graph Protocol（オープン・グラフ・プロトコル）の略称

OGPとは「Open Graph Protocol（オープン・グラフ・プロトコル）の略称です。

FacebookやTwitterをはじめとしたSNS上にて、Webサイトやページの内容をわかりやすく伝えるためのプロトコルになります。

設定することの意義

OGPを設定する意義としては、WebページのURLがシェアされたとき、以下の設定された情報（要素）が表示されるようになります。

・画像…サムネイルや設定した画像
・記事タイトル（サイト名）…任意のタイトルで表示することも可
・説明文…Webサイトやページの要約

OGPはSNSユーザーに対し、フィードもしくはウォール上でWebページの内容をわかりやすく伝えることができるプロトコルです。

わかりやすく簡潔に設定することでシェア率を高められるだけでなく、視覚的にもアピールできるため、Webサイトやページのアクセスアップはもちろんのこと、宣伝には欠かせません。

OGPを設定するメリット

OGPを設定するメリットについて解説します。

WEBページの内容がピックアップされて表示される

OGPを設定すると以下の3点がピックアップされて表示されます。

１） Webページ内の画像
２） Webサイトもしくはページのタイトル
３） 文章

要するにOGPはWebページが適切に要約されたわかりやすい状態で表示されるので、内容が的確になるだけでなく、訴求力の高いシェアが可能になります。

また、それぞれ要素を任意にピックアップして表示させることも可能です。

OGPを設定することによって得られるメリットは計り知れないものがあります。

意図した内容でシェアできるようになる

SNS上で効果的なシェアを行うためには、次の3点を意識する必要があります。

１） アピール力を高めること
２） 拡散力を高めること
３） Webページに対して適切な表示がされるよう工夫すること

OGPを設定することで上記3点をクリアできるだけでなく、意図した内容でシェアできるようになります。

よって、多くのユーザーからのレスポンスを期待できるようになります。

OGPの設定方法

OGPの設定方法について詳しく解説します。

metaタグを記述する

OGPを機能させるためには、以下のmetaタグをhtml内のhead内に記述する必要があります。

このようにOGPでは適切な設定ができるため、それぞれを正しく入力することでWEBページの情報を要約することができます。

それでは各記述の内容について具体的に解説していきます。

og:title

フィード上もしくはタイムライン上に表示されるシェアの「WEBページのタイトル」を指定する記述になります。

og:type

SNS上でシェアされるWebページの種類を指定する記述になります。

例えば、WEBサイトのトップページの場合は「content=”website”」と記述、記事ページなどは「content=”article”」を指定します。

og:url

SNS上でシェアされるWebページのURLを指定する記述になります。

注意すべきは指定するURLを原則として“絶対パス”で記述する点です。

og:site_name

SNS上でシェアされるWebページのサイト名を指定する記述になります。

og:description

SNS上でシェアされるWebページにおける要約文（紹介文）を指定する記述になります。

Webページがどういった情報を配信しているのかを伝える重要な部分になるので、わかりやすい要約文になっていることが前提になります。

og:image

SNS上でシェアされた場合に表示される「サムネイル画像（アイキャッチ画像）」のURLを指定する記述になります。

注意すべきは指定するURLを原則として“絶対パス”で記述する点です。

その他任意で設定できる記述

以下の記述は任意で設定できるものです（そこまで重要性はなく、必要に応じて記述する内容になります）。

なお、どの記述も以下タグの○○部分を設定したいものにすることで反映することができます。

例）メールアドレスを設定する場合

任意で設定できる記述は次のように「連絡先情報」「地域情報」「動画情報」「音楽情報」の4種類があります。

連絡先情報

「og:email」
メールアドレスを設定する記述になります。

「og:phone_number」
電話における連絡先を設定する記述になります。

「og:fax_number」
FAX番号を設定する記述になります。

地域情報

「og:locale”」
サポートしている言語を設定する記述になります。日本語のみで作成されている場合は「ja_JP」と記述します。

「og:latitude」
緯度を設定する記述になります。

「og:longitude」
経度を設定する記述になります。

「og:street-address」
住所（番地）を設定する記述になります。

「og:locality」
市区町村を設定する記述になります。

「og:region」
都道府県を設定する記述になります。

「og:postal-code」
郵便番号を設定する記述になります。

「og:country-name」
国名を設定する記述になります。

動画情報

「og:video」
動画のファイルパスを設定する記述になります。

「og:video:height」
動画の高さサイズを設定する記述になります。

「og:video:width」
動画の横幅サイズを設定する記述になります。

「og:video:type」
動画のファイルタイプを設定する記述になります。

音楽情報

「og:audio」
音楽のファイルパスを設定する記述になります。

「og:audio:title」
音楽のタイトルを設定する記述になります。

「og:audio:artist」
音楽のアーティスト名を設定する記述になります。

「og:audio:album」
音楽のアルバム名を設定する記述になります。

「og:audio:type」
音楽のファイルタイプを設定する記述になります。

これらの情報はあくまで必要な場合のみに記述すればOKです。
少しでも有意義なシェアを実現しようと欲張ると、情報量が増え過ぎてしまうために残念なシェア表示になってしまいます。
有効なOGP設定を心がける上でのポイントは、あくまで伝えたい情報をわかりやすく完結にまとめて表示させることです。
極力ムダを省いた簡潔なシェアを目指すことが大切です。

Facebookでの設定方法

FacebookでのOGP設定は以下の2パターンあります。

１） fb:app_id
２） fb:admins

おすすめとしては１です。2は「adminID」といった個人IDを用いるため、ほぼ個人情報を晒すような形での設定になります（個人情報漏洩などのリスクが生じやすくなる）。

よって安全に設定したい場合は「fb:app_id」を選択すべきです。

では、それぞれの設定手順を解説します。

fb:app_id

設定手順は次のとおりです。

１：Facebookにログインし、「Facebook開発者」⇒「アプリ」を選択
２：右上に表示されている「＋新しいアプリケーションを作成」から、新規アプリケーションを作成を選択
３：アプリケーションの名前（サイト名）を入力（下の2項目は空欄でOK ）
４：セキュリティチェックを入力
５： app_idが表示される

なお、app_idを確認する方法は「Facebook開発者」⇒「アプリ」を選択することでいつでもチェックできます。

fb:admins

設定手順は次のとおりです。

１：Facebookにログインし、「Like Button」⇒「Facebook開発者」を選択
２：ページ中段あたりにある＜Step 2 – Get Open Graph Tags＞内にある「Get Tags」ボタンを押す
３：fb:adminsの値が表示される

特に難しい作業はありません。

両者の使い分け

fb:app_idのメリットとデメリットは次のとおりです。

メリット
管理者権限で複数の値を取得できるため複数人でサイトを運営しているケースにおすすめ

デメリット
個人IDを取得・入力する必要があるために個人情報を晒してしまうリスクがある

 

一方のfb:adminsにメリットとデメリットは次のとおりです。

メリット
安全性を確保できるので個人でサイトを運営している方におすすめ

デメリット
取得するまでの手順が複雑で面倒くさい

それぞれメリット・デメリットを持っているので、最適と思える方を選びましょう。

Twitterでの設定方法

TwitterでOGP設定をするには「Twitter Cards」を用います。

Twitter CardsはURLを含んだツイートを行うことで、Webページのタイトル・要約文・アイキャッチ画像（サムネイル）を表示させる仕組みのことです。

なお、タグは次のとおりです。

注目すべきは”twitter:card”の記述。

全部5種類の表示形式に対応しており、目的に応じて以下のパターンから最適な表示を実施することができます。

１）content=”summary”
OGPにおける一般的な表示形式になります。

２）content=”summary_large_image”
大きな画像が表示される形式になります。

３） content=”photo”
画像が優先されて大きく表示される形式になります。

４）content=”gallery”
複数の画像が表示される形式になります。

５）content=”app”
Webサイトではなくアプリケーションの紹介に特化した形式になります。

このようにTwitterでのOGP設定は、表示形式を選べるようになっています。

Webサイトやページのイメージに合わせて適切な形式で表示を設定し、シェア率を高めましょう。

OGP設定で得られる効果

OGPはWEBページの各情報を設定する重要なプロトコルです。

HTML内に適切な情報を記述することで、意図した内容でのシェアが可能になります。

わかりやすく丁寧な設定を心がけることで、FacebookやTwitterをはじめとしたSNSにおける拡散効果を期待できます。

OGPの設定がうまく反映されない時の対処法

OGPの設定がうまく反映されない時の対処法について解説します。

Facebookでの対処法

Facebook上でOGPがうまく反映されない時の対処法としては、「手動でクリアする」やり方をおすすめします。

Facebook公式のDebug ページを用いることで簡単に対処可能です。

「Object Debugger」
https://developers.facebook.com/tools/debug/og/object/

操作方法としては対象となる URL を入力し、「Fetch new scrape information」をクリックするだけ。たったこれだけでキャッシュがクリアされ、新しく取得したページの情報が反映されます。

さらに表示イメージも確認できるため、変更されていることをしっかり把握できます。

Twitterでの対処法

Twitterk上でOGPがうまく反映されない時の対処法としては、専用ツールの実施をおすすめします。

次のTwitter公式の強制クロールページを用いることで簡単に対処できます。

「Twitter Card Validator」
https://cards-dev.twitter.com/validator

使い方はとても簡単でURLを入力してプレビューを確認するだけ。プレビューが表示されれば、ほぼ正常に稼働していると判断してOK。

TwitterはFacebookとは異なり、キャッシュをクリアするという考え方ではなく、クロールされているかどうかが判断基準になります。

よって、クロールされていない場合はOGPがうまく表示されない可能性があるので、上記ツールを用いて強制クロールさせるといいでしょう。

OGP設定の確認方法

OGPが正しく設定されているかを確認する方法について解説します。

Facebookでの確認方法

Facebook上でOGPが正しく設定されているかどうか確認するためには以下のツールを用います。

「シェアデバッカー」
https://developers.facebook.com/tools/debug/

Facebookの公式ツールということもあって、Facebook上でのOGPの設定確認はこれひとつで問題ありません。

使い方はとても簡単で、OGP設定を確認したいWebページのURLを入力⇒「Debug」ボタンを押すだけ。エラーがあれば詳細が表示されるため、スムーズな修正作業を行うことができます。

Twitterでの確認方法

Twitter上でOGPが正しく設定されているかどうか確認するためには以下のツールを用います。

「Card validator（Twitterカード）」
https://cards-dev.twitter.com/validator

Twitter公式のTwitterカード向けの確認ツールとなっています。

使い方はとても簡単でWebページのURLを入力するだけ。簡単にTwitter上のOGP表示を確認できます。

正しく設定して拡散効果を高めよう

OGPはSEOと同様、Webコンテンツへのアクセスアップにおいてきわめて重要になっています。

誰でも簡単に導入できるプロトコルではあるものの、わかりやすく具体的に表示させているケースは意外にも少ないと言えます。

OGPは拡散効果を高めたり、ライバルサイトに差をつける意味でも正しく設定することが重要です。

特に画像の推奨サイズをクリアすることはとても重要。縦横比をいい加減に設定していると残念な画像表示になってしまいます。未然に防ぐためにも、Webページを作成する段階で画像の縦横比を強く意識しましょう。

CTA-IMAGE
CTA-IMAGE

関連記事

筆者紹介

本当に効果のあるSEO対策をしませんか？

            CTA-IMAGE ファイナルSEOは運営10年以上の実績を誇り、日本全国の企業へ常に最先端のSEOソリューションを提供し続けてきました。 『SEOはサイト運営の基本だからこそ、一時しのぎではなく長く効果をもたらすものを』 その想いからファイナルSEOでは長期的に効果が持続する本質的なSEO対策に取り組んでおり、事実4,200以上の企業から選ばれています。            
メール無料相談はこちら

SEO知識カテゴリの最新記事