コーディング

リッチな表示でSNSを拡散するためのOGP設定

2016.10.12

2017.05.24

スマホを2台同時使用

シェアボタンに必須の設定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クリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。