当ブログでも新しい記事を書いたときには、フェイスブックでシェアしてできるだけ皆さんに読んでもうと日々画策しているゴロドクです、どうも。
さて、フェイスブックにシェアしたいURLコピペするとちょっとしたプレビューが表示されます。
特にコピペしたときに設定などしなくても大抵の場合はそれなりのものが表示されるのですが、情報を提供する側としては確実にその内容が伝わるようにしておきたいものです。
そんなわけでフェイスブックでシェアしてもらうときやいいね！を押してもらったとき、プレビューをコーディングでどうコントロールするか、というお話です。
特に何も指定しないとtitleとmeta descriptionを拾われる
フェイスブックでシェアされたページは、特に何も指定しないとHTMLソースのhead内のtitleとmeta descriptionからプレビューが拾われる様です。
titleはまさしくそのページのタイトルをあらわす要素、meta要素にdescription属性を指定した場合はそのページに書いてある内容の要約を記述します。
titleは普通何がしか指定・設定していると思いますが、もしかしたらmeta descriptionは記述してない人もいるかもしれません。
SEO的な話だとmeta description内に拾って欲しいキーワードを詰め込んだからといって検索順位が上昇するわけではありません（meta descriptionとmeta keywordsは書く必要ないかも | SEOテンプレート比較参照）。
またgoogleのスニペット（要約プレビュー）も基本的に自動的に取得されるので必ずしもmeta descriptionが必要なわけではありませんが、本文内に適切に引用すべき箇所がない場合などにはここからスニペットを生成することもあるそうです。
上記参考リンクによれば、全ページ同一の内容ならdescriptionは書かないほうがいいようです。しかし自動処理が施せたり、まめにきちんと個別に書くことが出来るなら、シェアを見た人にとってはより的確に概要を掴みやすくすることができるのですから、できればきちんと記述しておくに越したことはありませんね。
OGPを利用した方法
さてフェイスブックのプレビューに適切な内容を渡すもうひとつの方法、それがOGPの利用です。OGPとはなんぞや、ということですが
OGP とは
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。
まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。
ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。
なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。
以上フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記より引用。
HTMLのmetaタグを用いて、ページの概要を表す特別な記法を拡張する方法、とでも言えばいいでしょうか。
より具体的には以下のようなタグをもって記述します。
- <meta property=”og:title” content=”hoge_title”>
- <meta property=”og:type” content=”hoge_type”>
- <meta property=”og:description” content=”hoge_description”>
- <meta property=”og:url” content=”hoge_url”>
- <meta property=”og:image” content=”hoge_image”>
- <meta property=”og:site_name” content=”hoge_site_name”>
- <meta property=”og:email” content=”hoge_email”>
- <meta property=”og:phone_number” content=”hoge_phone_number”>
これをこのままコピペし、hoge_ﾅﾝﾄｶｶﾝﾄｶを書き換えて使えるといいのですが、metaタグのproperty属性は通常のHTMLではサポートされていないので、htmlタグにさらに次のような属性を追記しなければなりません。
- xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”
ご覧いただいて察しはつくと思いますが、XML名前空間の指定です。ということはこれを利用するとHTML5では必ずインバリッド（則法的ではない）になります。まぁしょうがないですね。バリデーターで高い点を取るのがコンテンツを作る目的じゃないので、あまり気にしないようにしましょう。
先ほどのリストを順に説明するとこういう具合になります。
- 【og:title】そのページのタイトルを示す。通常titleタグに書くべき内容に準じる
- 【og:type】そのページがどのようなページなのかを示す。ブログなのかウェブページなのかアーカイブであるのか、など
- 【og:description】そのページの概要の説明。通常meta descriputionに書くべき内容に準じる
- 【og:url】そのページの正しいURL。ブログシステムなどでは「カテゴリ○○○の何記事目」といった変動するurlではなく、個々の記事のパーマネントリンクを指定する
- 【og:image】そのページを代表する画像のURL
- 【og:site_name】サイトそのものの名称
- 【og:email】連絡先メールアドレス
- 【og:phone_number】連絡先電話番号
emailとphone_numberについては必須ではありませんので、必要なければ特に書かなくても結構です。
おまけ：忍者ブログの場合の自動処理
ここから忍者ブログユーザー向けの内容になっちゃいますが、上を踏まえてOGPを記述するとこんな感じになります。
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- OGP用タグ -->
<meta property="og:title" content="<!--if_toppage--><!--$g_title--><!--/if_toppage--><!--if_not_toppage--><!--$g_page_title--> | <!--$g_title--><!--/if_not_toppage-->">
<meta property="og:type" content="blog">
<meta property="og:description" content="<!--if_entry--><!--entry--><!--$entry_description--><!--/entry--> <!--/if_entry--><!--if_not_entry--><!--$g_explanation--><!--/if_not_entry-->">
<meta property="og:url" content="<!--if_entry--><!--entry--><!--$g_url-->Enty/<!--$entry_no--><!--/entry--><!--/if_entry--><!--if_not_entry--><!--$g_url--><!--/if_not_entry-->">
<meta property="og:image" content="https://bfile.56doc.net/logo2.png">
<meta property="og:site_name" content="<!--$g_title-->">
<!-- OGP用タグここまで -->
</head>
<body>
</body>
</html>
関連する部分以外は割愛しています。
知らない人には全く見慣れないタグがいくつか含まれていますが、忍者ブログには変数や制御構造を示す独自タグ拡張があります。これによってかなりページ構造のカスタマイズができるのです。まぁWPやMT、忍者以外のブログサービス使ってる人には全然関係のない話ですねｗ
せっかくですのでついでに今回使ってる独自タグの解説もちょっとだけ書いておきます。
- 【<!–if_toppage–> ～ <!–/if_toppage–>】現在のページがトップページならばタグ内の記述を適用する
- 【<!–if_not_toppage–> ～ <!–/if_not_toppage–>】現在のページがトップページでないならばタグ内の記述を適用する
- 【<!–if_entry–> ～ <!–/if_entry–>】現在のページが個別の記事ページならばタグ内の記述を適用する
- 【<!–if_not_entry–> ～ <!–/if_not_entry–>】現在のページが個別の記事ページでないならばタグ内の記述を適用する
- 【<!–entry–> ～ <!–/entry–>】該当する記事についてタグ内の記述を繰り返し処理する
- 【<!–$g_title–>】ブログサービス登録時に決めたブログそのもののタイトルを示す変数
- 【<!–$g_page_title–>】各記事のタイトルを示す変数
- 【<!–$entry_description–>】各記事本文の先頭100文字（ただしhtmlタグを含む）を取得する変数
- 【<!–$g_explanation–>】ブログサービス登録時にきめたブログの説明文を示す変数
- 【<!–$g_url–>】ブログトップページのURLを示す変数
- 【<!–$entry_no–>】記事固有の番号を示す変数
これ以外にも様々な独自タグがあり、使い方を覚えれば既成のテンプレートでは実現できないようなかなりカスタマイズされたテンプレをつくることが出来ます。このあたりを好きにいじれるのが忍者ブログのいいところですね。
閑話休題でした。
まとめ
ページに記述されたOGPに関してはフェイスブックだけではなくgoogle+（私は今のところほとんど使ってない）やミクシィ（私は垢すら持っていない）など他のSNSにもそのまま利用されるらしいので、ソーシャル経由で拡散したときに間違いなく概要を伝えたい場合は、上記のようなことを参考に適切なコードを挿入しておくと良いともいます。
私はこの辺を知らずにテキトーにやっていたので、facebookに当ブログ記事のリンク貼ると、毎回ブログサービス登録時に設定した解説文が同じように表示され、しょうがないので投稿の前に手動で記事の本文の先頭をコピペして書き換える、というしょーもない状態でした。アフォですね。
各ブログサービスやブログシステムによって自動処理の方法は異なりそれについてここでは説明できませんが、利用できるものは利用して無駄な手間を省き、コンテンツ作りに専念できる環境をつくることも大事ですね。
コメント