はじめに

自分で作ったWebページのURLなどをfacebookのポストに貼り付けて共有しようとすると、その内容が自分の思ったとおりにいかないことがある。特に先に最小限の体裁を整えて公開し、後で微修正しようなどとすると修正前の情報のままで固定されて、困ったことになる。ここでは、作成されるサブネイルをこちらの意図通りにカスタマイズする方法を紹介する（リマインダ）

手順

カスタマイズの手順は以下の通り

作成したページのヘッダにOGプロトコルに基づいて、カスタマイズしたい情報をメタタグとして入力する
サブネイルキャッシュの更新ページに更新したいページのURLを貼付け、デバッグボタンを押す
- https://developers.facebook.com/tools/debug/

単純に情報を更新したい場合は、2.だけで十分だ。さらに、その内容を自分の意図通りに更新したい場合は手順1.と2.を実行する。

OGプロトコルの編集

OG(Open Graph)プロトコルは、webページがソーシャルグラフと連携することを可能にする。OGPをWebページに含めることで、そのページはFacebookページと同等に扱わる。でも、有り体に言えば、サブネイル作るときの詳細指定できるよ・・ってのが一番わかりやすい（もちろん、他の効果もあるのだろうけども）。

Facebookだけでなく、google+、gree、mixiなどでも使われているので、それらのSNSで共有されることを考えているならば、設定していて損はないし、そんなに手間でもない。具体的には以下のメタ情報をヘッダに書いておくだけ。

<head>
    …
    <meta property="og:title" content="記事のタイトル" />
    <meta property="og:type" content="article" /> //トップページはwebsite、個別ページはarticle
    <meta property="og:description" content="記事の説明" />
    <meta property="og:url" content="記事のURL" />
    <meta property="og:image" content="画像のURL" />
    <meta property="og:site_name" content="サイトのタイトル" />
    …
</head>

上記を書いておくと、手順2.のデバッグボタンを押したときにその情報の確認画面が出てきて、意図通りの内容であるかを確認できる。

以下は入れておいた方が良いらしいが、ないからといってサブネイルが作られないということはない。

<meta property="og:locale" content="言語" />
<meta property="fb:app_id" content="facebookのアプリID" />
<meta property=“fb:admins” content=“facebookのユーザーID” /> //できればfb:app_idを利用

また、htmlのxmlnsも設定した方が良いらしいが、なくても大丈夫だった。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

おわりに

昨今のWebページなら、SNSで共有されないことの方が珍しい。ほとんどコピペで作れるOGPのメタ情報は忘れずに入れておきたい。

FacebookでURLを貼付けたときにでてくるサブネイルをカスタマイズする方法

はじめに

手順

OGプロトコルの編集

おわりに