サイト職人スタッフブログ

WebサイトやSNSでの集客に取り組んでいる方は、OGPという言葉を1度は目にしたことがあるかと思います。

OGPは、SNS上で記事をたくさん拡散してもらうために必須の仕組みです。

今回は、OGPとはどのような仕組みであるのか、各種SNSの具体的なタグの記述方法についてわかりやすく解説します。

OGPとは?

OGPとは、Open Graph Protocol（オープン・グラフ・プロトコル）の略称で、Facebookやtwitter、LINEなどのSNS上でホームページの内容を伝えるための情報のことです。

SNSの記事の中で、リンク先の表示でアイコンやタイトル、紹介文が表示されているのを見たことはありますか？

これらはOGPと言って、表示内容を自分で設定することが可能です。OGPを設定すれば、SNS上で拡散された際の、ページのタイトルやURL、アイキャッチ、コンテンツの概要、画像などを自分でコントロールできます。

・サイト職人のページ

https://www.site-shokunin.com/

OGP設定なしの場合の画像

設定がない場合は、トップページのタイトルや画像がデフォルトで表示されています。

OGP設定ありの場合の画像

設定した場合は、設定したタイトルや画像が表示されるようになります。

OGPを正しく設定することで、ホームページの情報を的確に表示できるため、SNSを利用するユーザーから注目を集めやすくなり、クリック率が上げWebサイトへの集客を促すことができます。

基本共通記述方法

headタグに、下記のメタタグを記述します。それぞれのSNSには、専用のタグがあるものの、次のタグを設定しておけば共通利用できます。

og:titleの記述のポイント

og:titleには、ページのタイトルに関する情報を記述します。例えば、ある状況下でページタイトルとは別の情報を表示させたくなったとします。その際は、og:titleに対して任意のタイトルを記述します。

SNSで拡散された際は、og:titleに対して任意で記述されたタイトルが優先的に表示されます。

og:typeの記述のポイント

og:typeでは、ページの種類を記述します。例えば、対象のコンテンツがTOPページなら「website」と記述します。もし、TOPページ以外の記事ページなら「article」と記述します。

Facebook用記述方法

FacebookでOGPを設定するには、上記の共通設定タグに加えて、記述すべきタグがあります。Facebookでは、App IDの取得が必要となるため、事前に取得しておきましょう。Facebook用のタグは、次のとおりです。

fb:app_idとは、FacebookでOGPを表示するための必須プロパティです。Webサイトによっては、fb:adminsを用いている場合もあるかもしれません。fb:adminsでは、adminIDと呼ばれる個人情報の表示が必要となるため、使用の際に危険が伴います。可能な限り、fb:app_idを利用するようにしましょう。

OGP画像シミュレータ

fb:app_idを用いてFacebookの設定が終わったら、OGP画像シミュレータを使って、タイムライン上でどのように表示されるのか確認してみましょう。OGP画像シミュレータを利用すれば、Facebookへ実際に投稿する前に、どのように表示されるのかをチェックできます。

【公式】OGP画像シミュレータ
http://ogimage.tsmallfield.com/

シェアデバッガ（facebookにログインが必要）

OGPの設定が終わっても、「初めての作業で不安。本当に、正しく設定できているかしら？」と思われる方もいるでしょう。その場合は、シェアデバッガを利用して、正しく設定できているかチェックしてみましょう。

もし、任意の情報を上手く表示できていなければ、対象のコンテンツを修正してください。修正が完了したら、「もう一度スクレイピング」をクリックして、再度新しい情報を読み込みましょう。

【公式】シェアデバッガ

https://developers.facebook.com/tools/debug/sharing/

Twitter用記述方法

Twitterでは、画像付きのリンク情報のことをTwitterカードといいます。Twitterカードは、下記のタグを利用して表示します。

Twitterカードは、ホームページやブログのHTMLタグを設定して、拡散したい記事やホームページのURLを記述することで表示できる仕組みとなっています。タグを記述する際は、下記の4種類のカードを目的に合わせて使い分けます。

Twitterカード一覧

• サマリーカード（summary）
• 大型画像付きサマリーカード（summary_large_image）
• アプリカード
• プレイヤーカード

それぞれのカードの詳細は、次のとおりです。

・サマリーカード（summary）

サマリーカードとは、アイキャッチ画像と記事タイトル、説明文を表示できるカードのことです。

・大型画像付きサマリーカード（summary_large_image）

大型画像付きサマリーカードとは、大型のアイキャッチ画像と記事タイトル、説明文を表示できるカードのことです。

・アプリカード

アプリカードとは、Twitter上でアプリのダウンロードの促進ページを表示できるカードのことです。

・プレイヤーカード

プレイヤーカードとは、Twitter上で音楽や動画を再生できるカードのことです。

Twitterカードの記述が終わったら、デバッガで確認します。

【公式】Card Validator（Twitterにログインが必要）

https://cards-dev.twitter.com/validator

まとめ

それぞれのSNSの仕様に合わせ、適切な画像やタイトル、説明文を設定すれば、SNSの記事の中で興味を引くことも可能です。少しの工夫で大きなアクセスアップが期待できるため、有効なSEO対策として技を習得し、適切なOGPを設定できるようになりましょう。