BloggerブログでOGP設定の画像を全ページで一枚ずつ配信する方法

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像（og:image）が記事の抜粋の画像の掲載数に一致している。OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。 Bloggerブログの八つのOGP設定の画像（og:image）が記載されたソースコード

Bloggerブログの八つのOGP設定の画像（og:image）が記載されたソースコード

Contempo｜Blogger

旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではインデックスページにOGP設定の画像自体が記載されない。なのでContempoなどの新テーマのように表示速度を落とさなくて済むけれども固定の画像をカスタマイズで付けるとインデックスページのSNSへの共有でもっと使い易くなる。

Bloggerのシンプルなどの旧テーマでインデックスと画像なしの記事／追加ページにOGP設定の画像を記載する方法

新旧のどちらのテーマでも画像なしの記事／追加ページではOGP設定の画像が記載されないので、インデックスページと同じように固定の画像を付けると良いと思う。簡単な方法はもう既にBlogger用のTwitterカードの設定で取り上げている。Twitterカードのためのカスタマイズだけれども必要なコンテンツはOGP設定と共用できるから画像の出方をアレンジしていた。インデックスページと画像なしの記事／追加ページでも固定の画像が使えるように新しく追加したんだ。今回は新テーマのインデックスページのSNSの共有で使われない画像を減らすのが主な目的で、同時にソースコードを簡略化できるから表示速度を上げるのに役立つと喜ばしく取り上げるけど、ただしちょっと難しい。Bloggerブログのhead内の独自タグのall-head-content：<b:include data='blog' name='all-head-content'/>を分解しないとソースコードを適切に編集できない。デフォルトでOGP設定のマークアップが自動的に記載されるようになっているので、それを先ずは止めなくてはならない。Bloggerの独自タグのall-head-contentには他のマークアップも含まれているから一つ残らず、記載し直すのも手間がかかる。全ページで画像を一枚ずつ配信するOGP設定のソースコード<b:if cond='data:view.isMultipleItems'> <meta content='インデックスページの画像URL' property='og:image'/> <b:elseif cond='data:view.featuredImage'/> <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/> <b:else/> <meta content='画像なしの記事／追加ページの画像URL' property='og:image'/> </b:if>※太字の部分は画像ありの記事／追加ページの画像URLがBloggerで自動的に取り込まれる。
※帯文字の部分は使用する画像をブログ内や外部サービス（画像URLを取得できるImgurなど）に用意して手動で記載する。Bloggerの独自タグのall-head-contentを分解しなくても使えるし、後ろに置けば一般的に優先される。ただし新テーマの全ページでOGP設定の画像を一枚ずつ配信するためには必ずBloggerの独自タグのall-head-contentを分解して置き換えなくてはならない。画像ありのページで重複してしまうからソースコードが無駄にならざるを得ない。新テーマで独自タグのall-head-contentを分解して個別のマークアップに置き換える方法削除するデフォルトのソースコード<b:include data='blog' name='all-head-content'/>代わりに記載するソースコード<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/> <b:if cond='data:widgets'> <b:comment>Chrome, Firefox OS and Opera</b:comment> <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/> <b:comment>Windows Phone</b:comment> <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/> </b:if> <meta content='blogger' name='generator'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <link expr:href='data:view.url.canonical' rel='canonical'/> <data:blog.feedLinks/> <data:blog.meTag/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if> <b:if cond='data:blog.adultContent'> <meta content='adult' name='rating'/> </b:if> <meta expr:content='data:blog.url.canonical' property='og:url'/> <meta expr:content='data:view.title.escaped' property='og:title'/> <meta expr:content='data:view.description.escaped' property='og:description'/> 画像URLを入力した全ページで画像を一枚ずつ配信するOGP設定のソースコードを配置する独自タグのall-head-contentに含まれる内容を全て記載してさらにOGP設定の画像はカスタマイズのソースコードに編集する。分解しない場合はインデックスページの複数の画像がOGP設定に記載されるのを避けられないけれどもカスタマイズの手間は相当に減る。独自タグのall-head-contentを保持しながら画像なしのページにOGP設定の画像を追加するソースコード<b:if cond='!data:blog.postImageUrl'> <meta content='画像なしのページの画像URL' property='og:image'/> </b:if>インデックスと記事／追加ページで固定の画像を振り分ける場合<b:if cond='!data:blog.postImageUrl and data:view.isMultipleItems'> <meta content='画像なしのページのインデックスページの画像URL' property='og:image'/> </b:if> <b:if cond='!data:blog.postImageUrl and data:view.isSingleItem'> <meta content='画像なしの記事／追加ページの画像URL' property='og:image'/> </b:if>※帯文字の部分は使用する画像をブログ内や外部サービス（画像URLを取得できるImgurなど）に用意して手動で記載する。画像なしのページに対応するだけならば独自タグのall-head-contentの前後のどちらかに固定の画像のソースコードを追加する。旧テーマだと画像ありの記事／追加ページしかOGP設定の画像は記載されないからBloggerの独自タグのall-head-contentを分解しなくても一枚ずつ配信するのは容易い。画像ありの記事／追加ページ以外に固定の画像を追加するOGP設定のソースコード<b:if cond='!data:view.featuredImage'> <meta content='画像ありの記事／追加ページ以外の画像URL' property='og:image'/> </b:if>インデックスと記事／追加ページで固定の画像を振り分ける場合<b:if cond='data:view.isMultipleItems'> <meta content='インデックスページの画像URL' property='og:image'/> <b:elseif cond='!data:view.featuredImage'/> <meta content='画像なしの記事／追加ページの画像URL' property='og:image'/> </b:if>※帯文字の部分は使用する画像をブログ内や外部サービス（画像URLを取得できるImgurなど）に用意して手動で記載する。head内の<b:include data='blog' name='all-head-content'/>の前後のどちらかに置いて画像ありの記事／追加ページ以外でOGP設定の画像を追加できる。新テーマでも旧テーマと同じように使えるけど、ただしBloggerの独自タグのall-head-contentを分解して個別のマークアップに置き換えないとインデックスページで複数の画像が配置される可能性は残されるし、ブログのOGP設定の画像を全ページで一枚ずつに変えて表示速度を上げるようなカスタマイズにはならない。

コメント