T-CREATOR

OGPとは?Web制作において意外と重要だったりする「Open Graph Protocol」

OGPとは?Web制作において意外と重要だったりする「Open Graph Protocol」
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

OGPとは?

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

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

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

なぜ重要?

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

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

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

OGPの設置方法

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

php-template<!-- 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

記事Article

もっと見る