OGPとは？Web制作において意外と重要だったりする「Open Graph Protocol」をメモしました。

OGPとは？

OGPとは「Open Graph Protocol」の略称で
Webページの内容をSNS上でシェアするための仕組みです。

具体的に決まったフォーマットで情報を記載することによって
SNSでシェアされた際に情報が見やすく表示される様になります。

そのためwebページやブログの記事をSNS上でシェアしてもらうことを考えていいる場合は
設定した方が良い情報となります。

なぜ重要？

なぜ重要かといいますと
OGPを設定することでページや記事の情報を分かりやすくユーザーへ伝えることができます。

OPGを設定しなかった場合
リンクのURLしか表示されませんが

設定したサイトの場合
記事元のURL、ページタイトル、サイト説明、サムネイルが表示されます。

OGPの設置方法

HTMLファイルの「head」タグの中に以下のように設置します。
「facebook」のいいねボタンへ参照するには「fb:app_id」もしくは「fb:admins」のいずれかの設置が必須です。

php-templateCopy code<!-- og:locale 言語を指定します。 -->
<meta property="og:locale" content="ja_JP"/>
<!-- fb:app_id アプリのID -->
<meta property="fb:app_id" content="617728378296779"/>
<!-- fb:admins FacebookのID -->
<meta property="fb:admins" content="452057954923068" />
<!-- og:title Webページの名前 -->
<meta property="og:title" content="T-CREATOR とあるクリエイターのブログ"/>
<!-- og:description Webページの説明 -->
<meta property="og:description" content="web(ウェブ)のこと、HTML/CSSのこと、jquery/javascriptのこと、 ..."/>
<!-- og:url WebページのURL -->
<meta property="og:url" content="http://t-cr.jp/"/>
<!-- og:site_name Webページのサイト名 -->
<meta property="og:site_name" content="T-CREATOR とあるクリエイターのブログ"/>
<!-- og:type Webページのが何であるか blog,article,websiteのいずれか -->
<meta property="og:type" content="blog"/>
<!-- og:image Webページのサムネイル -->
<meta property="og:image" content="http://t-cr.jp/img/post/blog/tc-logo.gif"/>

確認方法

「OGP」が正しく設置されているかどうかは以下のページから確認できます。

facebook

上部の枠へOGPを設定したページのURLを入力します。

Facebook Open Graphデバッガー

Twitter

Card URLへOGPを設定したページのURLを入力します。

Card validator