OG(Open Graph Protocol)メタタグは、Facebookやmixi、GREEなどのSNSでシェアされる際に記事のタイトルや概要、シェアされた時に使用する画像などの情報をSNSに正しく伝えるためのメタ情報です。
FC2でこのOGメタタグを設定するための方法について覚書。
ブログの環境設定でOGメタタグを有効化
いつからか忘れましたが、FC2ブログの環境設定でOGメタタグの設定を行えるようになりました。
OGメタタグを任意で有効/無効に切り替えられます。
OGメタタグを有効にした場合に各種SNSに使用される画像は、記事中で一番最初に貼り付けられている画像のようです。
ちなみにこの記事のOGメタタグはこのようになっています。
<meta property="og:site_name" content="Excel、Access、VBA、ORACLE、iPhone、Android、その他覚書:My Knowledge Base">
<meta property="og:title" content="FC2ブログカスタマイズ:FC2ブログでOG(Open Graph Protocol)メタタグを設定してブログの記事をSNSに正しく伝える方法">
<meta property="og:type" content="article">
<meta property="og:url" content="https://selifelog.com/blog-entry-324.html">
<meta property="og:description" content="OG(Open Graph Protocol)メタタグは、Facebookやmixi、GREEなどのSNSでシェアされる際に記事のタイトルや概要、シェアされた時に使用する画像などの情報をSNSに正しく伝えるためのメタ情報です。 FC2でこのOGメタタグを設定するための方法について覚書。...">
OGメタタグの有効化手順
以下にOGメタタグの有効化の手順を記載します。
- FC2ブログの管理画面を開きます。
- 管理画面上部のメニューから[環境設定]をクリックします。
- [ブログ設定]メニューにマウスをポイントし、プルダウンされたメニューの中から[メタタグの設定]をクリックします。
- [メタタグの設定]項目の[OGP設定]のプルダウンメニューで[無効にする]から[有効にする]に変更します。
- [更新]ボタンをクリックします。
以上でOGメタタグの設定有効化は完了です。
OGメタタグをブログのテンプレートに設定する方法
あまり需要はないかとは思いますが、ブログのテンプレートにOGメタタグを直接埋め込むこともできます。
ブログのテンプレートに直接埋め込みたい場合は、テンプレートの<head>～</head>間に以下のメタタグを記載します。
<!--topentry-->
<meta property="og:site_name" content="<%blog_name>" >
<meta property="og:title" content="<%topentry_title>" >
<meta property="og:type" content="article" />
<meta property="og:url" content="<%topentry_link>" >
<meta property="og:description" content="<%topentry_description>" >
<meta property="og:image" content="<%topentry_image_url>" >
<!--/topentry-->
テンプレートにOGメタタグを直接埋め込む際の注意点
上記のOGメタタグをテンプレートに記載した場合、個別記事以外のページ(ホームやカテゴリー記事一覧など)でのOGメタタグの出力内容が若干おかしくなります。
基本的にはシェアされるのは個別記事という前提での記載例です。
テンプレートにOGメタタグを直接埋め込む場合は、トップページやカテゴリ別の一覧ページ、タグ別の一覧ページなど、個別記事以外のページについて各ページの内容と一致したOGメタタグが出力されるようにテンプレートのエリア変数などを使用して細かく設定する必要があります。
FC2の環境設定で"OGP設定"を有効にすれば特にそういった考慮の必要もありません。
FC2側でいい感じにOGメタタグを出力してくれるので特別な事情がない限りはブログの環境設定でOGP設定を有効化するのが一番よいです。
OGメタタグを有効化してもFacebookできちんとシェアされない問題について
OGメタタグを有効化した状態でFacebookでシェアしようとしても記事によってシェアされない場合があることがわかりました。
色々と調べた結果、原因と回避策(対処方法)がわかりましたので詳しくは以下の記事で紹介していますので参考にしてください。
コメント