読者です 読者をやめる 読者になる 読者になる

とある技術の開発日記

Diary of irregular phrase programmer

GitHub PagesでFacebookとはてなブログ向けにOGP画像を設定した

HTML

発端

福岡のコミュニティであるFukuoka.NET(ふくてん)のサイトはGitHub Pagesで管理しているのですが、作成したままだとOGPタグがないのでSNSでリンクを貼りつけても寂しい感じになっていたのでOGPタグを張り付けて対策しました。

OGP(Open Graph Protocol)とは

普段からFacebookとかはてなブログでURLを参照すると、画像や概要などが表示されますよね?
具体的にはこんなやつです。

Facebook

f:id:airish9:20160328101855p:plain

はてなブログ

f:id:airish9:20160328101937p:plain

これ以外ではTwitter Cardとかもあります。

dev.twitter.com

これはサイトのmetaタグにOGPを設定していると表示されます。

OGPはFacebookで作成されていて、タグの詳細は以下のサイトを見れば確認できます。

The Open Graph protocol

やり方

まずはOGPタグを貼りつけないと始まらないのでページにOGPタグを設定します。
設定する際の詳細は以下のサイトを参考にしました。

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ! | *Web Design 覚え書き*

ふくてんのサイトで張り付けているOGPはこんな感じ

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <<中略>>
  <meta property="og:site_name" content="Fukuoka.NET(ふくてん)">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:title" content="Fukuoka.NET - ふくてん">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://fukuten.github.io/">
  <meta property="og:image" content="http://fukuten.github.io/img/ogp.jpg">
  <meta property="og:description" content="C#やVB.NETなどMicrosoftの.NETに関するコミュニティです。通称「ふくてん」。">
  <meta property="fb:app_id" content="246980395651503">
</head>

fb:app_idはイイネボタンをおかなかったりFacebookのインサイトを使わない場合は設定しなくていいです。

画像のサイズにハマった…

og:imageで画像を指定しますがサイズの指定でハマりました…。
Facebookの推奨サイズは「1200 x 630」です。推奨の最低サイズは「600 x 315」。最小サイズは「200 x 200」となっています。

詳細はFacebookのドキュメントを確認してください

Best Practices - Sharing - Documentation - Facebook for Developers

推奨サイズに従って「1200 x 630」を設定するとはてなブログで表示する際に正方形にトリミングされるので崩れます。
今回は勉強会用のページなのでコミュニティロゴが切り取られてしまうので困りました。

f:id:airish9:20160328110322p:plain

Facebookでの表示を確認するには確認用のサイトもあるので利用してみると良いかと思います。

ogimage.tsmallfield.com

この問題を解決するには「200 x 200」の最小サイズを貼っておくとFacebookとはてなブログで崩れずに表示されます。

Facebook

f:id:airish9:20160328110538p:plain

はてなブログ

f:id:airish9:20160328110554p:plain

画像を間違えた場合はFacebookにはキャッシュが残るのでDebugページからOGPのキャッシュを更新してください。

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

はてなブログの方はcdn.image.st-hatena.comドメインのCDNに保存されるのでしばらく待てば変更されます。