FacebookのOGタグ設定の簡略化
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/