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

2021/03/18 ｜2023/03/14 ｜9

当ブログでは 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

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

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

もし試される場合は必ず予めバックアップを取った上で、自己責任でお願いします。また、画像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://1.bp.blogspot.com/-h3NQ3Dn_X98/YCkQD2uBwVI/AAAAAAAAUzA/kBfc50H7yA0xbKfz6LW0JcfgC5_qHfCbQCLcBGAsYHQ/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://1.bp.blogspot.com/-ImxMab8MplM/X-dt402WwaI/AAAAAAAAUQ8/jbvrXfoaBEoYOpL_jTr8nqA1bvbPADLuwCLcBGAsYHQ/s560/ogimage.png' property='og:image'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>

各行のタグについて

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

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

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: 検索向け説明文、または記事の概要文

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

18: ファビコン

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

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

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

21: 各種フィードURL

22～24: 記事フィード

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

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

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

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

32: 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='"ラベル: " + data:blog.pageName.escaped' property='og:title'/>

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

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

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

<b:elseif cond='data:view.archive.year'/>
<meta expr:content='data:view.archive.year + "年のアーカイブ"' 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: 検索向け説明文、または記事の概要文

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: サイト名

53～57: OGP 画像

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

58: Twitterカードのタイプ

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

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

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
https://cards-dev.twitter.com/validator

━ HATENA STAR ━

カスタマイズ

コメントを投稿

ログインせずにコメントされる場合は、匿名ではなく
名前/URL で何かしら名前を入れて頂けると助かります。
URL は空白でも構いません。
埋め込みフォームでコメントできない場合は別ページの方からどうぞ。埋め込みフォームが開きます別ページに移動します

9 件のコメント (新着順)

ふじやん

詳細な解説ありがとうございます。
JavaScript に関してほとんど無知(&勉強嫌い)な私にはほぼ理解できてないですが(笑)
私みたいな素人にも分かりやすい記事を期待しております(^^)

2021/05/18 23:53

アタルさん

アタルです。　私は最初から「QooQ 1.30 List」をカスタマイズしてます。　「QooQ 1.30 」もたぶん同じ実装だと思うのですが、確認しておきますね。
ごめんなさい。　いろいろな人の記事を参考にしているので、 List に更新日付を表示されてたのは他の人でしたか？（汗）

「QooQ List」で「同一投稿日・複数記事」の場合に最初から表示はされますが　正しくない日付（投稿日付 or 更新日付）が表示されます。
たぶん、「QooQ」でも同様の現象のはずですが、念のため「QooQ1.30」のXMLコードを確認しておきますね。

変数の値がセットされずにその値を参照するとその値は不正で、前回セットした値が返ったり　空（から）だったり　よく解らない結果が返ったり　プログラム言語によって異なります。
そのため、同一投稿日で先頭以外の記事の data:post.dateHeader は正しくない日付が表示されるようです。
（変数に不正な日付がセットされたまま残っていると）空ではないため、表示はされます。　で、不正な更新日付まで表示される。
コードを書かない人は納得できないかもしれませんが、（きちんと取得できない時に変数の初期化処理を怠ると）プログラム的にはよくあることです。

結果、'data:post.dateHeader'　は条件によって不正な値を返す時があるみたいですが、常に'data:post.timestampISO8601'には正しい日付が入るようです。　JavaScript でかなりテストしたので、問題ないはずです。

では、記事にまとめさせて頂きます！　ふじやん様の記事のように誰でもコピペで対応可能なよう、頑張りたいと思います。
その前に、「highlight.js」組み込まないといけませんが...

CSSは素人ですが、 Java は書いたことがあるので JavaScript はなんとなく解る「アタル」でした（笑）

2021/05/18 23:42

ふじやん

ちなみに私が記事ごとの metaDescription について調べようと思ったきっかけはTwitterフォロワーさんのツイートだったのですが、その方も解決策にはたどり着けなかったようです。

同一投稿日の記事が複数ある場合に先頭記事しか投稿日が出ないのは、Bloggerを始めた当時に使っていた公式のシンプルテーマでもそういう状態で、私はこちらのp--qさんの記事を参考に JavaScript で対処していました(document.write が使われてるので今は非推奨ですね)。
「Blogger：日付ヘッダーを必ず表示させる方法 - p--q」

<b:if cond='data:post.timestampISO8601'> で改善できるんですね。これは私も知りませんでしたので、ぜひ記事化してみてくださいね(^^)

ちなみに当ブログは QooQ カードタイプで、元々トップでは更新日用のコードは付けてませんよ。

コメントでHTMLタグなどを書く場合はエンコードさせないと一部の記号が消えてしまうので要注意です。

2021/05/18 23:04

アタルさん

アタルです。　あれ、肝心の部分が消えちゃった。

b:if cond='data:post.dateHeader'　を　b:if cond='data:post.timestampISO8601'　に置換。
"<"　と　">"　で挟んでください。

これだけで、バグ回避できました！

2021/05/18 21:52

アタルさん

ふじやん様、今回も即答ありがとうございます！

[1] 記事ごとの metaDescription の表示、無理そうですか。　残念ですが、あきらめます。
ちょっと頑張ればできそうなので２〜３日調べて、お手製の JavaScript も投入したのですが、実現できませんでした。
「投稿」時なら、あっさり表示されるのにね。
ブログの metaDescription と「記事ごとの metaDescription」が同じタグで取得とか、不可思議な仕様のせいかな？
SEO的にも Twitterカード的にも、（記事ごとのキャッチアップ画像も含めて）重要なタグのはずなので、 Blogger の次のリリースでしれっと取得可能になっている事を期待します！

ライブドアブログでは、スマホ表示で「（キャッチアップ）画像＋投稿日付＋（投稿タイトル）＋ metaDescription 」をタイル状に縦に１０件表示してました。
Blogger でもちょっと頑張れば同様の機能を実現できるかと思っていましたが、甘かったようです。

「運用」で逃げますかね。　記事の先頭に「記事ごとの metaDescription」と（ほぼ）同じ内容を書けば良いので...

[2] 「EntryImageUrl 」に関しては、できたらと思っただけで大丈夫です。　head内のメタデータをカスタマイズしたら、ついでに設定されたみたいな？ことを期待していました。
幸い、 Twitter も LiNE もブログ記事のURL から First Image を自動取得してくれますので、問題ありません。

あと、偶然見つけたQooQ List時のバグ対応なのですが...
List時の「data:post.dateHeader は同じ日に複数記事を投稿した場合先頭の記事のみに日付が入ります先頭以外の記事には日付が入りません」
という不可思議な仕様はご存知だと思います。
そのため、QooQテーマのままでは「同一日複数記事」の場合、投稿日付と更新日付が正しく表示されません。

　を　
に置き換えたところ、上記バグ？を回避して、List時に常に正しい「投稿日付と更新日付」を取得できました。

あら！　現在は更新日付は表示されていないのですね？
QooQ　List時の「投稿日付と更新日付」表示の記事は検索したところ無いみたいなので、記事に纏める予定です。
既に気付かれていたなら、ただのお節介で申し訳ありません。

ご対応、ありがとうございました！

2021/05/18 21:47

ふじやん

アタルさん、こんばんは。
まず、記事ごとの metaDescription の表示に関してですが、実は以前私も色々調べてみたのですが、どうもこれは無理そうな感じでしたね…100%不可能とは言い切れませんが、難しいのではないかと。

EntryImageUrl に関しては…申し訳ないですが、私にはちょっとわかりかねますね(^^;

CSS や HTML ならば多少のお役には立てるかもしれませんが、それ以外のことに関してはほんとに疎いのです(~_~;)

この記事でも参考にもさせてもらっている「些細な日常」さんならひょっとしたら何かしらヒントを得られるかもしれませんのでお尋ねになってみては如何でしょうか？

2021/05/18 21:11

アタルさん

こんばんは、アタルです。　昨晩は　ご対応ありがとうございました。
本日はこの記事を拝見して勉強中ですが、正直　ちょっと難しくて、理解できるまで時間がかかりそうです。

そんな私めにヒントを頂きたく、コメントいたしました。
知りたいのは以下の2点に関してで、「頑張っても無駄」あるいは「かなり困難」「簡単に対応可能」かどうかです。
ちょっと頑張れば実現可能なのであれば、モチベーションも上がるかなと...

[1] List（トップページ）に現在仕方なく表示している snippet を、投稿ごとの metaDescription を表示する方法
　表示したら、全明細に同じ内容（設定で記載した、metaDescription）が表示されたため。
　理想としたら、snippet に「投稿ごとの metaDescription 」を設定できたら、取り扱いが一番ラクかなと...　snippet は関数を利用すればどこでも（好きな文字数で）取得可能なのでは？
　スマホの場合に、「（キャッチアップ）画像＋投稿日付＋更新日付＋（投稿タイトル）＋ metaDescription 」をタイル状に縦に５〜１０件表示したいためです。

[2] ATOM (RSS) Feed の EntryImageUrlタグの中身が空（カラ）のため、設定する方法。
　上記タグが空（カラ）のため、投稿時に自動で LINE メッセージ送信する際に EntryImageUrlタグを送るのを現在中断中。
　"IFTTT" を利用して実現しており、IFTTT アプレットのアクション部分の設定内容となります。

以上2点につきまして、　3段階位で　対応可能かどうか　ご教授頂けると嬉しいです。
ふじやん様が「実現はかなり困難」と判断されるのであれば、あっさり見送る所存です（笑）

急ぎではありませんので、お時間がある時に検討していただければ十分です。
それでは、失礼いたします。

2021/05/18 20:39

ふじやん

ひき太郎さん、コメントありがとうございます。
私はひき太郎さんやFumaさんのようなJavaScriptの知識は皆無で勉強する気もないのでただありがたく使わせていただくだけですけど、デザインとかHTMLとかになると自分が納得いくまで無駄に凝ってしまうんですよね(^^;
なのでこういう記事は楽しくすらすら書けて全然疲れないですw

2021/03/19 16:16

ひき太郎さん

こんにちは^^
僕はGIF画像のURLをなんとかしたくてOGP設定のところにしか目がいっていませんでしたが、年月変更表示をここで変更できるのは便利ですね^^いまはブログ以外のところでコードをいじって遊び中ですが、修正したくなったら参考にさせて頂きます。

それにしても結構色々と修正していますね^^;さすがのこだわり具合。僕なら面倒臭がって適当なところで妥協していると思います^^;

記事の執筆お疲れさまですm(_ _)m

2021/03/19 8:15

コメントフォームにジャンプ