So-net ブログの OGP タグを修正する [So-net ブログカスタマイズ]

So-net ブログ

So-net ブログでも公式に Facebook コメントが利用出来るようになりましたが、自動挿入される『OGP タグ』が前から気になっていたので修正することにしました。

So-net ブログのタグがちょっと変

So-net ブログが自動で出力する OGP タグを見てみると何故か meta タグが閉じられていません。

So-net ブログのテンプレートXHTML だったような気がしたので確認してみたところ、やっぱり XHTML でした(テンプレートによっては違うのかもしれませんが)。

タグを閉じてないだけでブログが壊れるとかそういうことはないですが XHTML 宣言してるのにタグを閉じてない理由がよくわかりません。og:site_name も「So-net ブログ」だし、og:image も So-net ブログのプロフィール画像固定なのでそこも変更しようと思います。

コードの準備

Facebook

まずは Facebook のページへ行って OGP タグのコードをコピーします。Like ボタン設定の下に OGP のコードを出力出来る場所があります。今現在、自分のブログに自動挿入されている OGP タグをコピーしても OK。

Like Button - Facebook開発者

公式のコードだと og:description が含まれてないので追加しておきます。個人 ID ではなくアプリ ID を使う場合は fb:admins ではなく fb:app_id を使います。

<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:admins" content="" />
<!-- <meta property="fb:app_id" content="" /> -->

So-net ブログ

次はソネブロ(というか seesaa)の独自タグを用意します。

og:title

まず、ページのタイトルですが、記事タイトルを出力する独自タグを記事テンプレートから拾ってくるとエラーになるので HTML テンプレートの title 要素で使われているものを使います。記事ページ以外ではブログ名を出力します。

  • <% if:extra_title %><% extra_title | dismiss_pictograms | html %><% /if %>
  • <% blog.title | dismiss_pictograms | html %>

og:description

次にページの説明ですが、これが一番厄介かもしれません。記事テンプレートにある本文を出力する独自タグをそのまま使うと bodyfilter(article_info,blog) が邪魔をしてエラーになります(自動改行の有無を判別するものらしいです)。ここではちょっとカスタマイズして文字数を 240byte までにして、タグを削除する tag_strip と改行コードを取り除く online 関数を使います。本文と追記文を使う場合は article.entire_body、記事本文を使う場合は article.body を使います。文字数は環境に応じて変更。記事ページ以外ではブログの説明を出力するようにします。

  • <% article.entire_body | bodyfilter(article_info,blog) %>
  • <% article.entire_body | text_summary(240) | tag_strip | oneline | html %>
  • <% article.body | text_summary(240) | tag_strip | oneline | html %>
  • <% blog.description | nl2br | tag_strip %>

og:type

ブログのタイプは直接記述します。記事ページは「article」、それ以外は「blog」でいいと思います。

  • article
  • blog

og:url

ページの URL です。これは記事テンプレートの記事タイトルから拾ってきます。記事ページ以外ではブログの URL を出力するようにします。

  • <% article.page_url | html %>
  • <% blog.page_url %>

og:image

画像の URL です。自分で用意した画像を使いたい場合は画像の URL を記述します。記事内の画像を拾ってもらいたいときは入れないほうがいいです。ただし、img 要素で配置されてるアイコンとかを拾ってしまうこともあります。ページでどの画像が使われるかどうかは Facebook のデバッガで確認出来ます。

  • <% blog.page_url_profile_image('m') %>?<% blog.timestamp | break_sp %>

og:site_name

サイト名です。自動挿入のタグでは記事タイトルにくっつけられてしまって「So-net ブログ」になっていますが自分のブログ名にします。

  • <% blog.title | dismiss_pictograms | html %>

fb:admins

最後に Facebook ID を呼び出す変数。管理画面で ID を登録していないと出力されません。もちろん独自タグを使わずに直接記述しても OK です。

自分の Facebook ID がわからない場合や So-net ブログへの登録がわからない場合はサポートページへ。

Facebookコメント:使い方 マニュアル:So-netブログ

HTML テンプレート用カスタマイズコード

上のタグを組み立てたものが下のコードです。HTML テンプレートの <head>〜</head> 内に埋め込んで使えます。「記事ページ」と「それ以外のページ」で変化するようにしています。かなり改行を入れていますが独自タグが改行を無効にします。meta タグ前にタブスペースが1つ入っています。

So-net ブログの OGP タグの自動挿入を無効にする場合は HTML テンプレートの以下の部分を削除します。

html 要素に xmlns:fb="https://www.facebook.com/2008/fbml" を追加した方がいいかもしれません。

トップページの HTML 出力サンプル

記事ページの HTML 出力サンプル

動作チェック

埋め込みが済んだらデバッガでチェックします。

デバッガー - Facebook開発者

HTML の編集を誤るとブログがまったく表示されなくなる可能性があります。コードをそのままご利用される場合は自己責任でお願いします。また、コードは GitHub 側で変更する可能性があります。