MENU

出張デモ

資料請求
見積依頼

お問い合わせ

CONTACT

お問い合わせ

サイト職人CMSに関する
お問い合わせ・ご相談はこちらまで

東京本社

0120-546-384

受付時間 平日9:30~18:00

関西オフィス

0120-546-218

受付時間 平日9:30~18:00

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. OGPの設定はお済みですか?

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

OGPの設定はお済みですか?

OGPの設定はお済みですか?

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設定ありの場合の画像

【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を設定できるようになりましょう。

PAGETOP