「Blogger」ブログにOGPの設定を追加したい
 |
BloggerのブログにOGPの設定を追加しようと悪戦苦闘しています。
人気のあるSNSでは、想定通りの表示ができるようになりましたが、すべてのSNSで想定通りに画像が表示されるわけではないので、まだまだ改善の余地があります。
個人的には、Twitterだけでなく、他のSNS（Mastodon）でも画像が表示されるようにしたいところです。
OGPの設定
OGPの設定方法を色々調べてみて、以下のようにテンプレートに記述してみました。
<meta content="ページのURL" property="og:url"> <meta content="ページのタイトル" property="og:title">
<meta content="ページのタイプ" property="og:type">
<meta content="記事の抜粋" property="og:description">
<meta content="画像のURL" property="og:image">
<meta content="カード種類" name="twitter:card">
<meta content="@Twitterユーザー名" name="twitter:site">
<meta content="サイト名" property="og:site_name">
<meta content="ja_JP" property="og:locale">
しかし、ウェブサイトでは、画像が表示されるのですが、ブログではトップページを共有した際に、画像イメージが表示されないことがあり、何でだろう？とさらに調べてみた結果。
以下のように、さらに変更しました。
<meta content="summary_large_image" name="twitter:card">
<meta content="summary_large_image" name="twitter:card">
<meta expr:content="data:blog.homepageUrl" name="twitter:domain"> <b:if cond="data:blog.pageType == "item"">
<meta expr:content="data:blog.canonicalUrl" name="twitter:url">
<meta expr:content="data:blog.pageName" name="twitter:title">
<meta expr:content="data:blog.postImageUrl" name="twitter:image:src"> <b:else>
<meta expr:content="data:blog.homepageUrl" name="twitter:url">
<meta expr:content="data:blog.pageTitle" name="twitter:title">
<meta content="Image URL" name="twitter:image:src">
</b:else>
<b:if cond="data:blog.metaDescription">
</b:if>
上のソースコードを、テンプレートのブログタイトルのソースコードの下あたりに、メタタグのところに貼り付けて、完成なのですが、上のソースコードの"Image URL"に表示させたい画像のパス（URL）を記述するのを忘れないようにしてください。
さらに、調査と合わせて、試行錯誤をした結果。以下の内容になりました。
とはいえ、まだMastodonに画像が想定通りに表示されません。（お手上げｗ）
実は、調べていくうちに、テンプレートにあった<b:include data='blog' name='all-head-content'/>がどうやら、悪さをしていたようで、いや悪さというか。このタグでOGPの設定が含まれていることが分かった。
つまり、Bloggerのテンプレートによっては、TwitterのOGPだけ追加すれば、大体大丈夫ってことである。
しかし、上に記述したタグを使用すると、トップページをシェアした際「画像」を投稿記事の画像を紐づけてしまう。この設定をBloggerの管理者が変更することはできないため、以下のように、<meta content='blogger' name='generator'/>に置き換えました。
すると、元々のOGPの設定は表示されなくなるので、OGPの設定を以下のように付け加える。結果、トップページをシェアした際、トップページの画像を指定してシェアできるようになる。
<meta content='summary' name='twitter:card'/>
<meta content='@mizuncoo' name='twitter:site'/>
<meta content='@mizuncoo' name='twitter:creator'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/> </b:if> <b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/> <b:else/>
<meta content='Image URL' name='twitter:image'/>
</b:if>
</b:if>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.pageName'> <meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/> <b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if> <b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/> <b:else/>
<meta content='Image URL' property='og:image'/>
</b:if>
ちなみに、Bloggerの新しいテンプレート（Essential）を使用していた場合の説明となるので、他のテンプレートで同様のことができるかは、<b:include data='blog' name='all-head-content'/>のタグがあるか。確認していただきたい。
SNSでシェアする前に確認する
Twitterでは、「Card validator」というツールで、OGPを設定したURLをシェアした際の表示を確認することができます。
Twitterでは、想定通りに表示されましたが、Mastodonでは表示されませんでした。
Card validator
- 【外部URL】https://cards-dev.twitter.com/validator
Twitterでは、想定通りに表示されましたが、Mastodonでは表示されませんでした。
何かいい方法がないか。調査中。
 |
また、画像が変更されない場合、ブラウザのキャッシュなどを削除することで、改善されることもあるようです。
OGP画像シュミレーター
こちらを利用するとシェアした際の画像サイズが最適かどうか確認することができます。
- 【外部URL】http://ogimage.tsmallfield.com/
OGP確認ツール
OGPの設定がどのように解析されたか確認することができるツールです。
- 【外部URL】https://ogp.buta3.net/
