【Blogger】head内のメタデータをカスタマイズ

2024/10/0116
アイキャッチ

当ブログでは HTML の <head>内で all-head-content タグによって Blogger が自動で出力するサイト情報(メタタグ)のデータの中身をカスタマイズして直接記述しています。また、QooQ 独自の OGP 設定も細かく設定し直しました。出力される内容に不要なものがあったり、書式が気に入らないものがあったので自分好みに整理したかった為です。
ちなみにメタタグによってどの様な情報が出力されているかは Ctrl + U でソースコードを表示すれば確認できます。

参考までに当ブログで独自にカスタマイズたコードについて書きたいと思います。

尚、今回のカスタマイズはこちらの「些細な日常」さんの記事を参考にさせていただきました。
まずこの記事をご覧になることをおすすめします。

ファビコン些細な日常
サムネイル
Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する
Bloggerの独自タグのall-head-contentの出力内容 が分かった。幾つものソースコードが含まれるけど、個別に記載するとカスタマイズがもっと可能になる。head内のブログの設定 だからSEO対策を中心に種々と改善できる。
https://www.nagahitoyuki.com/2018/08/i-decompose-blogger-data-tags-all-head-content-for-customization-in-the-head-of-my-blogger-blog-template.html
CONTENTS

当ブログ独自のカスタマイズコード

<b:include data='blog' name='all-head-content'/> タグ及び、QooQ 独自のコード(<!-- by QooQ.start -->から<!-- by QooQ.end -->までの所)を削除して、代わりに以下のコードを置いています。

もし試される場合は必ず予めバックアップを取った上で、自己責任でお願いします。また、画像URL等、当ブログ独自のコンテンツ部分は適宜変更してください。
※特に問題ないとは思いますが、順番や記述内容が適切でなかったり、不備な点等あるかもしれませんのであしからず(^^;

<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<!-- SEO -->
<b:if cond='data:view.isSingleItem or data:view.search.query'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:elseif cond='data:view.isLabelSearch'/>
<title>ラベル: <data:blog.pageName/> | <data:blog.title/></title>
<b:elseif cond='data:view.archive.month'/>
<title><data:view.archive.year/><data:view.archive.month/>月のアーカイブ | <data:blog.title/></title>
<b:elseif cond='data:view.archive.year'/>
<title><data:view.archive.year/>年のアーカイブ | <data:blog.title/></title>
<b:elseif cond='data:view.isError'/>
<title>404 | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<meta expr:content='data:view.description.escaped' name='description'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJkksrA0oiCg-Bn6Q3kA-g5NxSz0rTxdPjhnmKONlbDqmTWUqtZgQf7f24RMenLosN7dE-eUlW9upGY7z3LwDnH4mTXvBUbS7gGolaZ4ePO5FagLVQkoiohkgnZlKabzR4-uC3O8qfpik/s128/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<link expr:href='data:view.url.canonical + &quot;?m=1&quot;' media='only screen and (max-width: 640px)' rel='alternate'/>
<!-- Post Feed -->
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='service.post' type='application/atom+xml'/>
<!-- Comment Feed -->
<b:with value='data:view.isSingleItem ? &quot;/&quot; : &quot;&quot;' var='slash'>
<b:with value='data:view.isPost ? data:view.postId : data:view.pageId' var='path'>
<link expr:href='data:blog.homepageUrl + &quot;feeds&quot; + data:slash + data:path + &quot;/comments/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
</b:with>
</b:with>
<!-- OGP -->
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<b:if cond='data:view.isSingleItem or data:view.search.query'>
<meta expr:content='data:blog.pageName.escaped' property='og:title'/>
<b:elseif cond='data:view.isLabelSearch'/>
<meta expr:content='&quot;ラベル: &quot; + data:blog.pageName.escaped' property='og:title'/>
<b:elseif cond='data:view.archive.month'/>
<meta expr:content='data:view.archive.year + &quot;&quot; + data:view.archive.month + &quot;月のアーカイブ&quot;' property='og:title'/>
<b:elseif cond='data:view.archive.year'/>
<meta expr:content='data:view.archive.year + &quot;年のアーカイブ&quot;' property='og:title'/>
<b:elseif cond='data:view.isError'/>
<meta expr:content='404' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 560, &quot;16:9&quot;)' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbsaHeMy7q-yj2O-f1r84P9QlLCKnqsUzMH65N3FmiVA0wILskOkwT-jK7-sAouEc8d-P8mD-sfCkwS0ruGnD8gMdfzZGABqn_J01c02MOidF6K0oHazSC_CjtIqZ476mvk7nBWLUNaw/s560/ogimage.png' property='og:image'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>

各行のタグについて

1: 文字エンコーディング

<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>

2: サイト作成のソフトウェア

<meta content='blogger' name='generator'/>

3: 検索エンジンに伝えるサイト情報

タイトル情報はブラウザのタブなどにも表示されます。

4,5: 記事・固定ページ及び、検索結果ページのタイトル

<b:if cond='data:view.isSingleItem or data:view.search.query'>
<title><data:blog.pageName/> | <data:blog.title/></title>

表示例:
梅と月とインスタグラム | ふじろじっく
QooQの検索結果 | ふじろじっく

6,7: ラベルページでのタイトル

<b:elseif cond='data:view.isLabelSearch'/>
<title>ラベル: <data:blog.pageName/> | <data:blog.title/></title>

表示例:
ラベル: Blogger | ふじろじっく

8,9: 月別アーカイブページのタイトル

<b:elseif cond='data:view.archive.month'/>
<title><data:view.archive.year/>年<data:view.archive.month/>月のアーカイブ | <data:blog.title/></title>

表示例:
2021年3月のアーカイブ | ふじろじっく

実は一番変えたかったのはこれなんです。 デフォルトだと英語仕様のフォーマットで「3月 2021」というように年月が逆に表示されるのが気に入らなくて…それで今回のカスタマイズをしようという気になったと言っても過言ではないですw

10,11: 年別アーカイブページのタイトル

<b:elseif cond='data:view.archive.year'/>
<title><data:view.archive.year/>年のアーカイブ | <data:blog.title/></title>

表示例:
2021年のアーカイブ | ふじろじっく

12,13: 404ページのタイトル

<b:elseif cond='data:view.isError'/>
<title>404 | <data:blog.title/></title>

表示例:
404 | ふじろじっく

14~16: トップページ等、上記以外の全てのページのタイトル

<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

表示例:
ふじろじっく

17: 検索向け説明文、または記事の概要文

<meta expr:content='data:view.description.escaped' name='description'/>

表示例:
とあるブロガラーの取るに足らないブログ...

18: ファビコン

<link href='ファビコン画像URL' rel='icon' type='image/x-icon'/>

デフォルトでは16×16px サイズでしかアップロードされませんが、このタグを使用することにより、大きなサイズのファビコンのアップが可能になります。

19,20: ページの正規化URL

<link expr:href='data:view.url.canonical' rel='canonical'/>
<link expr:href='data:view.url.canonical + &quot;?m=1&quot;' media='only screen and (max-width: 640px)' rel='alternate'/>

Bloggerは モバイルで表示すると ?m=1 というパラメータが付くため、モバイル用のタグも設定しています。

21: 各種フィードURL

22~24: 記事フィード

<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='service.post' type='application/atom+xml'/>

25~30: コメントフィード

これは必要性が低いかもしれませんが、一応デフォルトで出力されているのでそれに合わせました。記事・固定ページ以外ではブログ全体のコメントフィード URL が出力されます。

<b:with value='data:view.isSingleItem ? &quot;/&quot; : &quot;&quot;' var='slash'>
<b:with value='data:view.isPost ? data:view.postId : data:view.pageId' var='path'>
<link expr:href='data:blog.homepageUrl + &quot;feeds&quot; + data:slash + data:path + &quot;/comments/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
</b:with>
</b:with>

31: Facebook や Twitter へ送るための OGP 情報

32: OG URL

<meta expr:content='data:blog.url.canonical' property='og:url'/>

33,34: 記事・固定ページ及び、検索結果ページの OGP タイトル

ページタイトルのみで、ブログ名は表示しないようにしています。(別に表示してもいいんだけど、シェア・ツイート時の本文に含まれてるので必要ないかなと…)

<b:if cond='data:view.isSingleItem or data:view.search.query'>
<meta expr:content='data:blog.pageName.escaped' property='og:title'/>

35,36: ラベルページの OGP タイトル

<b:elseif cond='data:view.isLabelSearch'/>
<meta expr:content='&quot;ラベル: &quot; + data:blog.pageName.escaped' property='og:title'/>

37,38: 月別アーカイブページの OGP タイトル

<b:elseif cond='data:view.archive.month'/>
<meta expr:content='data:view.archive.year + &quot;年&quot; + data:view.archive.month + &quot;月のアーカイブ&quot;' property='og:title'/>

39,40: 年別アーカイブページの OGP タイトル

<b:elseif cond='data:view.archive.year'/>
<meta expr:content='data:view.archive.year + &quot;年のアーカイブ&quot;' property='og:title'/>

41,42: 404ページの OGP タイトル

<b:elseif cond='data:view.isError'/>
<meta expr:content='404' property='og:title'/>

43~45: トップページ等、上記以外の全てのページの OGP タイトル

<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>

46: 検索向け説明文、または記事の概要文

<meta expr:content='data:view.description.escaped' property='og:description'/>

48~51: ページタイプ

記事・固定ページなら "article" それ以外は "blog"
一般的に "website" にしている場合が多いようですが、ブログは blog でいいのではないかと。

<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='blog' property='og:type'/>
</b:if>

52: サイト名

<meta expr:content='data:blog.title' property='og:site_name'/>

53~57: OGP 画像

<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 560, &quot;16:9&quot;)' property='og:image'/>
<b:else/>
<meta content='OGP画像URL' property='og:image'/>
</b:if>

58: Twitterカードのタイプ

大きい画像のカードを指定。

<meta content='summary_large_image' name='twitter:card'/>

デフォルトで出力される内容から除外したコード

  • Bloggerプロフィールのリンク
  • IE用のCSSハックの外部ファイルリンク
  • Google+プロフィールリンク
  • アダルトコンテンツ指定
  • IE用のCSSハックのマークアップ

表示の確認

コードが正しく設定されているかどうかは、以下の各ツールでも確認できます。

ファビコンOGP確認ツール
サムネイル
OGP確認ツール | OGP and Twitter Card
このサイトでは、WebサイトのOGP(Open Graph Protocol)とTwitterカードを簡単に確認することが出来ます。
https://ogp.buta3.net

※Twitterへのログインが必要です。

ファビコンTwitter Developers
Card Validator | Twitter Developersのスクリーンショット
Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator