BloggerでOGPタグを出力する設定方法

というわけで TANAKA Kohji です。
Blogger の記事を facebook でシェアしようとすると、HTMLの先頭にある JavaScript が本文の代わりに読み込まれて困っていました。

そこで、OGPタグを出力するように変更してみました。

検索設定でメタタグ（description）を設定する

設定ー検索設定より、メタタグの設定を行います。

この部分は、ブログのトップページ等をシェアした場合等に使用される説明文です。

（metaタグのdescriptionや、og:descriptionに使用されます）

テンプレートのHTMLを修正する

ここは多少専門的な知識が必要になります。

テンプレートーHTMLの編集より、テンプレートを編集します。

（事前にページ右上の『バックアップ/復元』より現在のテンプレートのバックアップをとっておくと安全です）

以下を参考に、修正してください。

修正する前のコード（ctrl+f 等で該当箇所を探してください）

    <title><data:blog.pageTitle/></title>

修正後のコード

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <title><data:blog.pageTitle/></title>
    <b:else/>
        <title><data:blog.pageName/><b:if cond='data:blog.pageName'> | </b:if><data:blog.title/></title>
    </b:if>
    <meta expr:content='data:blog.title' name='og:site_name'/>
    <meta expr:content='data:blog.pageTitle' name='og:title'/>
    <meta content='blog' name='og:type'/>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
        <meta expr:content='data:blog.metaDescription' name='og:description'/>
    </b:if>

修正したら保存しましょう。

記事投稿時に『検索向け説明』を設定する

これはちょっと冗長なのですが、記事投稿時に、検索向け説明を設定する必要があります。

（投稿画面の右側）

ここは記事本文から自動的に設定してほしいところですが、いたしかたありません。

facebookでシェアする

あとは、記事公開後に、facebookでシェアすれば終了です。

というわけで設定していない方は、お試しください。