COLUMNコラム
OGPとは？基本の設定方法から便利な確認ツールまで解説
せっかく作成したWebサイトでも、「なかなか認知されない」「流入数が伸び悩んでいる」といった問題を抱えている方もいるでしょう。SNSを通じて、運営しているWebサイトを広く知ってもらうには、OGPの設定が必要です。
この記事では、OGPの概要から基本的な設定方法まで紹介します。また、万が一設定が反映されない場合に役立つツールも紹介するので、併せて確認してみてください。
OGPとは？
OGPとは、「Open Graph Protcol」の略称です。各SNSでシェアした際に、Webサイト上の画像・タイトル・説明文・URLなどの情報を、正確に伝えるためのHTML要素のことを指します。
OGPの設定を行えば、ユーザーに対してページ内容を詳細に伝えることができ、Webサイトへのアクセス数アップが期待できるのです。
OGP設定のメリット・デメリット
OGP設定を行えば、Webサイトへのアクセス数が伸びるなどいくつかのメリットがあります。設定を検討している方の中には、メリットだけでなくデメリットもあるのではないかと考える方もいるでしょう。次はOGP設定のメリット・デメリットを紹介します。
OGP設定のメリット
OGP設定を行うことでSNS上での見え方を自由に指定でき、SNSのシェア・拡大を狙いやすくなるというメリットがあります。上から表示される画像・タイトル・説明文・URLを、よりキャッチーかつわかりやすいものに設定することが大切です。
反対にOGP設定しなければ、SNSのクローラーが自動抽出した情報が表示されてしまいます。本来見せたい説明や画像と異なるものが表示されると、流入数を増やす機会を逃しかねません。
ユーザーの共有範囲を限定しないためにも、適切なOGP設定を行うことが大切です。
OGP設定のデメリット
OGP設定を行うことで、HTMLヘッダーが長くなる傾向があります。かつては「長いHTMLヘッダー＝SEO対策で不利」といわれていましたが、現在はそれほど注視されていません。
OGP設定には目立ったリスクもないので、未設定の方は積極的に導入を検討してみてください。
OGP設定で重要なメタデータと各種SNSの設定方法
OGPを実際に設定する際は、基本となるメタデータ・追加オプションとなるメタデータについて知る必要があります。また、Twitter・Facebookでは、基本設定後にそれぞれ個別でやるべきことがあるのです。以下では、OGP設定で重要なメタデータと、各種SNSの設定方法について解説します。
基本となるメタデータ
まずメタデータとは、「データのデータ」とも呼ばれるように、データ本体に付属するサブ情報を表すデータのことを指します。OGP設定でやることは、HTMLのタグ中に必要情報を記述するだけです。設定方法は下記の通りとなっています。
OGP設定の際は、項目欄に使用する下記の4つの基本となるメタデータについて、役割を理解する必要があるのです。
- og:title（ページタイトル）
特にSEO対策で「パンくずリスト」を作成している場合、SNS用の短いタイトルを別途用意する - og:type（ページの種類）
サイトトップページなら「Website 」、 記事ページなら「Article」で使い分けるのが重要 - og:image（サムネイル画像のURL）
OGPの推奨スペックである「1200x 630px 以上」に画像を設定すると良い - og:url（ページURL）
正規化されているURLを指定するのがポイント
オプション追加可能なメタデータ
メタデータには4つの基本項目以外にも、下記の7つの追加オプションが存在します。
- og:audio（オーディオファイルのURL）
オーディオファイルに関係するURLの指定ができる - og:description（ページの説明文）
ページ概要を80～90ページ程に収めるのも重要 - og:determiner（タイトル前に表示される単語）
具体的には「a」「an」「the」「 “”（空白）」「auto」などから指定可能で、デフォルトは 「””」を、「auto」を選んだ場合は「a/an」から最適なものを選ぶとよい - og:locale（サポートしている言語）
ロケールとは国や地域の指定を意味し、「language_TERRITORY」の形式で記載する - og:locale:alternate（サポートしている言語が複数の場合）
複数のサポート言語は、同じ形式を用いて列挙すれば指定できる - og:site_name（サイト名）
サイト名・ブランド情報を記載する箇所なので、ページタイトルとは別物として考える - og:video（ビデオファイルのURL）
動画ページのURL指定ができる
TwitterのOGP設定方法
OGP設定の基礎がわかったら、次はTwitter上の個別設定についても把握しておきましょう。
Twitter上の記述では「twitter:card」「twitter:site」の2つが重要です。前者では下記のようにメタデータを記載します。以下の表で、4種類のカードの違いを整理してみましょう。
- Summary Card
リンク先のページのアイキャッチ画像・タイトル・説明文の表示が可能。 - Summary Card with large image
アイキャッチ画像をサマリーカードよりも大きく表示できる。 - player Card
Twitter上で動画ファイル・YouTubeの再生が可能。 - App card
ツイートにアプリのインストール画面を表示できる。
後者の場合、下記のように＠から始まるTwitterのユーザーIDを指定しましょう。
FacebookのOGP設定方法
FacebookでOGP設定を行いたい場合、Facebookにサイト管理者情報を伝えるタグの「fb:app id」の設定がおすすめです。
「fb:app id」を設定すれば、「Facebookインサイト」の利用が可能となります。いいね数・閲覧者数、ユーザーの閲覧数が多い時間帯などの把握が可能です。
FacebookのアプリIDが必要な場合は、下記の「Facebook for developers」から取得しましょう。
OGP設定で各SNSに適した画像サイズとは？
OGP設定を行う場合、各SNSに対応できるような画像サイズを選択することが重要です。ここではTwitter・Facebookに適した画像サイズを紹介します。
Twitterに適した画像サイズ
TwitterのOGP画像サイズは、サマリーカードまたは大型画像付きサマリーカードから選びましょう。
前者は、1:1の比率で画像サイズ「144x144px」以上、「4096x4096px」以下の設定ができます。対応フォーマットはJPG・PNG・WEBP・GIFです。
一方で後者は、約2:1の比率で画像サイズ「300x157px」以上、「4096x4096px」以下の設定ができます。対応フォーマットはサマリーカードと同じです。
Facebookに適した画像サイズ
FacebookのOGP画像サイズは、長方形で大きく表示する方法と正方形で小さく表示する方法の2通りあります。
前者で、Facebook上のサムネイルを意識するのであれば、最低でも「600×315px」以上に設定しましょう。よりスマートフォン向けのページを意識するのであれば、FacebookのOGP画像サイズとして推奨されている「1200×630px」以上に設定するのがポイントです。
後者なら「600×315px」以下に設定すると、FacebookのOGP画像を小さく表示できます。実際にサイズを指定する際は「200×200px」以上にしましょう。
なお、Twitter・FacebookのOGP画像サイズは併用可能です。設定する画像サイズに悩んだ場合は、より大きく表示される「1200×630px」を指定しましょう。
OGPの設定時に注意したい点
OGP設定はデメリットもなく、手順通りに進められれば設定自体は可能でしょう。しかし、注意点が2つあります。設定後のトラブルなどに発展しないよう、あらかじめ注意事項を確認しておきましょう。
ページごとに異なるOGP設定を行う
OGP設定を行えば、SNS上でシェアするページのタイトル・説明文・画像・URLを紹介できます。
しかし、仮に異なるページ上で同じOGP設定を行っていると、ページごとの魅力を正しく伝えられない場合があります。OGP設定の使いまわしをすれば、ユーザーへの訴求力も低下するため、避けるようにしましょう。
ユーザーの興味・関心を最大限に引き出したいなら、個別にOGP設定を行うように意識してみてください。
OGP設定が可能なサイトか確認する
仮にOGP設定ができないWebサイトの対応で試行錯誤しているとします。OGPの対応の有無を確認していないと、後々時間の浪費や予期せぬエラーに見舞わるリスクが高まるのです。
WordPressだとテーマ次第でOGP設定ができない場合があります。別途「All in One SEO」「Yoast SEO」などのプラグインを導入して対応しましょう。
OGP設定を行う際は全てのWebサイトに適用できるわけではない、という点も念頭に置くことが大切です。OGP設定ができるWebサイトかどうかを必ず確認しましょう。
OGPの設定が反映されない場合の対処法と便利ツール3選
せっかくOGP設定をしても、最新の情報が反映されないことがあります。次にOGP設定が反映されない場合の対処法と、便利ツール3点を紹介します。
キャッシュをクリアしてみる
OGP設定をしても、Twitter・Facebook上の画像が古いままだったり、画像付きリンクが正しく表示されなかったりするケースも見られます。OGP設定が古い状態のまま更新されない場合は、一度キャッシュをクリアしてみるのが効果的です。
以下では、Twitter・Facebookの両者で使用できる便利ツールを3点紹介します。各クローラーが最新情報を取得できるように、ぜひツールも上手に活用してみてください。
Twitter向けの「Card Validator」
Twitter上のOGP設定を確認する場合、「Card Validator」を活用するのがおすすめです。Twitterへのログイン＞OGP設定を確認したいページURLの入力＞「Preview card」ボタンを押すことで、「カードプレビュー」「ログ」が表示され、Twitter上での見え方が確認できます。
Facebook向けの「シェアデバッカー」
Facebook上のOGP設定を確認したい場合は、シェアデバッカーを利用するのをおすすめします。Facebookへのログイン＞OGP設定を確認したいページURLの入力＞「デバック」ボタンを押すと、「前回のURLのスクレイピングの日時とリンク情報」「設定されてるOGPのタグ情報」が確認可能です。Facebookの見え方を確認する際は、シェアデバッカーを活用しましょう。
Facebook向けの「OGP画像シミュレータ」
Facebook向けのOGP設定を行う際に、画像サイズに悩んだ経験がある方もいるでしょう。Facebook上ではOGP画像が正方形や縦長に表示されるため、デザイン決めが難しいという課題があります。
「OGP画像シミュレータ」を使えば、簡単にOGP画像の見え方確認が可能です。使い方は、下記のWebサイトへアクセス後「クリック」もしくは「ドラッグ＆ドロップ」で画像を追加するだけです。画像サイズ・デザインに違和感がある場合は、シミュレータで確認を行いながら微調整を行ってみてください。
まとめ
SNSが主流となる昨今において、Webサイトの認知度や閲覧者数を増やすためには、Twitter・Facebook上でのシェアが欠かせません。OGP設定が正しく行えれば、Webサイト上の画像・タイトル・説明文・URLをユーザーへと伝えられ、クリック数を増やせる効果が期待できます。
本記事ではOGP設定で重要なメタデータから各種SNSの設定方法、そして注意点と反映されない場合の対処法まで解説を行いました。OGP設定は基本的にノーリスクでWebサイトのアクセス数を伸ばせるので、まだ完了していない方は導入を検討してみてください。