君のブログにはもうOGPを忍ばせているか!


OGP_logo

OGP(Open Graph Protocol)とは、みなさんご存知?

The Open Graph protocol公式サイト(英語)

OGPを設定することでSNSなどでシェアされた時に、的確にページ情報を表示させることができるようになります!このOGPの設定自体は難しくないので、ちょろっと設定してしまいましょう!

設定方法

設定方法はまずhtml内の<head>タグに以下のようなタグを入れ込みます。

OGPを設定する基本的なMETAタグ

&lt;meta property=&quot;og:title&quot; content=&quot;ページタイトル&quot;&gt;
&lt;meta property=&quot;og:type&quot; content=&quot;ページの種類&quot;&gt;
&lt;meta property=&quot;og:url&quot; content=&quot;ページURL&quot;&gt;
&lt;meta property=&quot;og:image&quot; content=&quot;サムネイル画像のURL&quot;&gt;</p>

<p>

  • og:title > ページタイトル
  • og:type > ページの種類(例:blog, website, articleなどが選べます。)
  • og:url > ページURL
  • og:image > サムネイル画像のURL

公式サイトを見ると、SSLを使用しているページの画像を使用したい場合は以下のpropertyを使うと良いみたいです。

  • og:image:secure_url

一般的に薦められるオプション設定


  • og:description > ページの説明
  • og:site_name > サイト名

画像の作成方法

画像の推奨サイズは1200x630px以上です。かなり大きいですねぇ!
そして少し厄介なのが、横長に表示されるときと正方形に表示されるということです。

実際に作るとこんな感じ。

ogp_image

白くなっているところが正方形で表示されるエリアです。

ogp_image_02

制作した後に、どのように表示されるかを見たいときは下のURL先に画像をドラッグ&ドロップすると簡単にテストすることができます。

http://ogimage.tsmallfield.com/

画像をセットするとこんな感じで一目で確認することができます。

OGP画像シミュレータ

どんな感じに表示されるか確認する

最後にfacebookのデバッガーで他の情報もちゃんと設定できているかを確認します。

https://developers.facebook.com/tools/debug/

サイトURLを入力

チェックしたいサイトURLを入力して、「Fetch new scrape information」をクリック

デバッガーの表示結果

設定情報がうまく表示されているのが確認することができました。