2016.10.12
2017.05.24
コーディング
リッチな表示でSNSを拡散するためのOGP設定
シェアボタンに必須の設定OGPとは
blogやサイトに設置するSNSへのシェアボタン。これらにはOGPの設定も合わせて行うことでblog記事やサイトの拡散に大きな効果が期待できます。
OGPとは、Open Graph Protocolの略でFacebookやtwitterなどにWebページをシェアするとき、そのページの記事のタイトル、URL、代表する画像、サマリーなどを正しく各ソーシャルメディアに伝えるためのHTMLの内に追加するメタ要素です。
今回はそんなOGPの基本的な設定方法についてまとめてみます。
記述先と最初にすること
OGPは、サイトのhead内のmeta要素にソースを記述をします。
専用プロパティが存在するのですが一番最初にprefix属性といって、OGPを使いますよと宣言するための記述が必要です。
以下が一例です。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
prefix属性の「:」のあとに、半角スペースを入れて指定します。
例の「fb:」はFacebookを意味し、「article:」はOGPのオブジェクトタイプを指定しています。
この指定がなくてもmeta要素としては認識されるようですが、OGP設定として正式にはこの記述が必要です。
指定できるプロパティ
OGPの公式サイト「The Open Graph protocol」では、以下の4つがOGP設定では必須のプロパティとされています
- og:title ページのタイトル
- og:type ページのタイプ
- og:image ページのサムネイル画像
- og:url ページのURL
記述方法は以下になります。
<meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="article" /> <!--またはwebsite, blog--> <meta property="og:url" content="ページのURL" /> <meta property="og:image" content="画像のURL" />
その他オプションプロパティとして以下の様なものがあります
<meta property="og:site_name" content="サイト名" /> <meta property="og:description" content="ページのディスクリプション" /> <meta property="og:audio" content="音声ファイルのURL" /> <meta property="og:video" content="動画ファイルのURL" /> <meta property="og:locale" content="ローカル言語。デフォは en_US " /> <meta property="og:locale:alternate" content="翻訳のための他言語" /> <meta property="og:determiner" content="タイトルの前に付く単語" />
twitterカード用の記述など、各SNS専用の記述も存在します。
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@[Twitter ID]">
よく使いそうな設定についてざっとまとめてみました。各項目などについても調べてみることで、利用サイトへの効果的な実装を行ってみましょう。
SHARE
この記事の筆者
Web＆Soundクリエイター 田村 培修
楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。
