発端

福岡のコミュニティである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>