ZIZO DESIGN ノート

お問い合わせ

FacebookのOGタグ設定の簡略化

imagetop

FacebookのOGタグを正しく記述した上で少しでも設定を省き、更新や管理をしやすくする方法を考えてみました。

Facebook用に設定できるOGタグ一覧

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website(トップページ),article(下層、個別ページ)" />
<meta property="og:description" content="ページの説明" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="OGP画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="fb:admins" content="facebookのユーザーID" />
<meta property="fb:app_id" content="facebookのアプリID" />

設定できるOGタグをきちんと設置していると、同じ記述を二度三度と設定しなければならない箇所が出てきます。

例えばウェブサイトであればほぼ設定されている「ページタイトル」、「ディスクリプション」と「ページのURL」の三点です。
これはOGタグで設定していない場合、ページのtitleタグ、descriptionタグが反映されます。ページのURLも現在のURLが自動的に反映されます。
自動的に反映される箇所については同じ記述をする場合、同じ内容を二度OGタグに設定することになるので不必要だと判断しました。
また、OGP画像に関してはブログ等のページ毎に表示を変えたい場合はOGタグを削除します。

次に「facebookのユーザーID」、「facebookのアプリID」は設定しなくても動作はしますが、facebook側からは設定を推奨されてるので、fb:admins、fb:app_idのどちらかを設定すればよいそうです。すぐに設定したい場合はとりあえずfb:adminsを設定しましょう。

これでかなりの数のOGタグを省いた内容が以下になります。

省略したOGタグ一覧

<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:type" content="website(トップページ),article(下層、個別ページ)" />
<meta property="og:image" content="OGP画像のURL" />

後は、必要に応じてfb:admins、fb:app_idを追加します。

追記した方が良いOGタグ

<meta property="fb:admins" content="facebookのユーザーID" />
<meta property="fb:app_id" content="facebookのアプリID" />

これにより、同じ内容を重複して記載する手間がかなり省けたかと思います。

また、OGPを変更した際情報が間違っていないか確認するために、以下のOGタグのデバッカーを用いて確認する事ができます。
変更した画像などのキャッシュの更新は、「Fetch new scrape information」のボタンをクリック反映されます。

Open Graph Debugger – Facebook Developers
https://developers.facebook.com/tools/debug/

facebookとtwitterのOGタグ生成ジェネレーターを作りました。(7/2)
http://blog.zizo.ne.jp/2015/07/02/01/23/24/