当ブログでは 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='"text/html; charset=" + 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 + "?m=1"' media='only screen and (max-width: 640px)' rel='alternate'/> <!-- Post Feed --> <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/> <link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='service.post' type='application/atom+xml'/> <!-- Comment Feed --> <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> <!-- 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='"ラベル: " + data:blog.pageName.escaped' property='og:title'/> <b:elseif cond='data:view.archive.month'/> <meta expr:content='data:view.archive.year + "年" + data:view.archive.month + "月のアーカイブ"' property='og:title'/> <b:elseif cond='data:view.archive.year'/> <meta expr:content='data:view.archive.year + "年のアーカイブ"' 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, "16:9")' 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='"text/html; charset=" + 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 + "?m=1"' media='only screen and (max-width: 640px)' rel='alternate'/>
Bloggerは モバイルで表示すると ?m=1 というパラメータが付くため、モバイル用のタグも設定しています。
21: 各種フィードURL
22~24: 記事フィード
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='service.post' type='application/atom+xml'/>
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
<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='"ラベル: " + 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: 検索向け説明文、または記事の概要文
<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, "16:9")' 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 DevelopersCard Validator | Twitter Developershttps://cards-dev.twitter.com/validator
コメントを投稿
別ページに移動します16 件のコメント (新着順)
匿名
なるほど・・・。
根本的な解決はBloggerの改善を待つしかなさそうですね。ご回答ありがとうございました。
ふじやん
>匿名さん
はい。そういうことになります。
このパラメータ除去だけではインデックスに有利になるような効果はないと思われます(^^;
匿名
ふじやんさま。お忙しいところ度々恐縮です。
m=1は消えたのですが、これは「見えなくなった」ということでしょうか?スマホ用のクロールボットは相変わらずm=1を認識してインデックスしているということでしょうか?
もしそうなら今後もGoogleサーチでインデックスするときは、m=1を付けなければいけないということですね。
ふじやん
>匿名さん
お役に立てたなら何よりです!
また何かお困りのことがありましたら、お気軽にコメントして下さいね。
匿名
ふじやんさま。ご回答ありがとうございます。
凄いです!m-1が表示されなくなりました。これで何とかなるかもしれません。
よく拝見させて頂いておりますが、Bloggerを使っている人には、1番参考になるブログだと思います。有益な情報に感謝します。
ふじやん
>匿名さん、こんにちは。
BloggerブログがGoogleサーチコンソールでインデックスされにくいという問題は結構前から指摘されており、今の所は匿名さんがやられたような「?m=1」パラメータを付けるという対処方法が有効なようですが、根本的に解決するにはBloggerさんが改善してくれるのを待つしかないかもしれません。
当ブログ(F-lightテーマ)はJavaScriptでパラメータを除去しています。ページを読み込むと一瞬だけ?m=1が見えますが、すぐに消えるのが解かると思います。(iPhoneでは消えないかも?)
下記のコードを</body>の上に設置すればQooQでも機能すると思いますので宜しければお試しください。
<script>/*<![CDATA[*/
function rmurl(t){const r=new RegExp(/\?m=0|\?m=1|\&m=0|\&m=1/);return t=t.replace(r,''),history.replaceState({},document.title,t),t;}const currentUrl=rmurl(location.toString());
/*]]>*/</script>
匿名
ふじやんさま、初めまして。こんにちは。
ここ半年ほど、Blogger(QooQ)の記事が、リダイレクトエラーでインデックスされない状態が続きました。理由を調べたところ、スマホのURLの末尾がm-1になることが原因だと分かりました。スマホのクロールとPCのクロールで違いがあるそうです。
そこでGoogleサーチで末尾に?m-1を付けてインデックスしたところ、すぐに登録されました。ですが、根本的解決になっているのか不安です。
ふじやんさまのブログのURLをスマホから見たところ、m-1が付いていないことに気づきました。これは何かスマホに付けない方法があるのでしょうか?
今回の内容と関係のない質問で大変恐縮ですが、ご教授頂けましたら幸いです。
ふじやん
詳細な解説ありがとうございます。
JavaScript に関してほとんど無知(&勉強嫌い)な私にはほぼ理解できてないですが(笑)
私みたいな素人にも分かりやすい記事を期待しております(^^)
アタル
アタルです。 私は最初から「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 はなんとなく解る「アタル」でした(笑)
ふじやん
ちなみに私が記事ごとの metaDescription について調べようと思ったきっかけはTwitterフォロワーさんのツイートだったのですが、その方も解決策にはたどり着けなかったようです。
同一投稿日の記事が複数ある場合に先頭記事しか投稿日が出ないのは、Bloggerを始めた当時に使っていた公式のシンプルテーマでもそういう状態で、私はこちらのp--qさんの記事を参考に JavaScript で対処していました(document.write が使われてるので今は非推奨ですね)。
「Blogger:日付ヘッダーを必ず表示させる方法 - p--q」
<b:if cond='data:post.timestampISO8601'> で改善できるんですね。これは私も知りませんでしたので、ぜひ記事化してみてくださいね(^^)
ちなみに当ブログは QooQ カードタイプで、元々トップでは更新日用のコードは付けてませんよ。
コメントでHTMLタグなどを書く場合はエンコードさせないと一部の記号が消えてしまうので要注意です。
アタル
アタルです。 あれ、肝心の部分が消えちゃった。
b:if cond='data:post.dateHeader' を b:if cond='data:post.timestampISO8601' に置換。
"<" と ">" で挟んでください。
これだけで、バグ回避できました!
アタル
ふじやん様、今回も即答ありがとうございます!
[1] 記事ごとの metaDescription の表示、無理そうですか。 残念ですが、あきらめます。
ちょっと頑張ればできそうなので2〜3日調べて、お手製の JavaScript も投入したのですが、実現できませんでした。
「投稿」時なら、あっさり表示されるのにね。
ブログの metaDescription と 「記事ごとの metaDescription」が同じタグで取得とか、不可思議な仕様のせいかな?
SEO的にも Twitterカード的にも、(記事ごとのキャッチアップ画像も含めて)重要なタグのはずなので、 Blogger の次のリリースで しれっと 取得可能 になっている事を期待します!
ライブドアブログでは、スマホ表示で 「(キャッチアップ)画像+投稿日付+(投稿タイトル)+ metaDescription 」をタイル状に縦に10件表示してました。
Blogger でも ちょっと頑張れば 同様の機能を実現できるかと思っていましたが、甘かったようです。
「運用」で逃げますかね。 記事の先頭に「記事ごとの metaDescription」と(ほぼ)同じ内容を書けば良いので...
[2] 「EntryImageUrl 」に関しては、できたらと思っただけで大丈夫です。 head内のメタデータをカスタマイズしたら、ついでに設定されたみたいな?ことを期待していました。
幸い、 Twitter も LiNE もブログ記事のURL から First Image を自動取得してくれますので、問題ありません。
あと、偶然見つけたQooQ List時のバグ対応なのですが...
List時の「data:post.dateHeader は同じ日に複数記事を投稿した場合 先頭の記事のみに日付が入ります 先頭以外の記事には日付が入りません」
という不可思議な仕様はご存知だと思います。
そのため、QooQテーマのままでは「同一日複数記事」の場合、投稿日付と更新日付が正しく表示されません。
を
に置き換えたところ、上記バグ?を回避して、List時に常に正しい「投稿日付と更新日付」を取得できました。
あら! 現在は更新日付は表示されていないのですね?
QooQ List時の「投稿日付と更新日付」表示の記事は検索したところ無いみたいなので、記事に纏める予定です。
既に気付かれていたなら、ただのお節介で申し訳ありません。
ご対応、ありがとうございました!
ふじやん
アタルさん、こんばんは。
まず、記事ごとの metaDescription の表示に関してですが、実は以前私も色々調べてみたのですが、どうもこれは無理そうな感じでしたね…100%不可能とは言い切れませんが、難しいのではないかと。
EntryImageUrl に関しては…申し訳ないですが、私にはちょっとわかりかねますね(^^;
CSS や HTML ならば多少のお役には立てるかもしれませんが、それ以外のことに関してはほんとに疎いのです(~_~;)
この記事でも参考にもさせてもらっている「些細な日常」さんならひょっとしたら何かしらヒントを得られるかもしれませんのでお尋ねになってみては如何でしょうか?
アタル
こんばんは、アタルです。 昨晩は ご対応ありがとうございました。
本日はこの記事を拝見して勉強中ですが、正直 ちょっと難しくて、理解できるまで時間がかかりそうです。
そんな私めにヒントを頂きたく、コメントいたしました。
知りたいのは以下の2点に関してで、「頑張っても無駄」あるいは「かなり困難」「簡単に対応可能」かどうかです。
ちょっと頑張れば実現可能なのであれば、モチベーションも上がるかなと...
[1] List(トップページ)に現在 仕方なく表示している snippet を、投稿ごとの metaDescription を表示する方法
表示したら、全明細に同じ内容(設定で記載した、metaDescription)が表示されたため。
理想としたら、snippet に「投稿ごとの metaDescription 」を設定できたら、取り扱いが一番ラクかなと... snippet は関数を利用すればどこでも(好きな文字数で)取得可能なのでは?
スマホの場合に、「(キャッチアップ)画像+投稿日付+更新日付+(投稿タイトル)+ metaDescription 」をタイル状に縦に5〜10件表示したいためです。
[2] ATOM (RSS) Feed の EntryImageUrlタグ の中身が空(カラ)のため、設定する方法。
上記タグが空(カラ)のため、投稿時に自動で LINE メッセージ送信する際に EntryImageUrlタグ を送るのを現在中断中。
"IFTTT" を利用して実現しており、IFTTT アプレット の アクション部分の設定内容となります。
以上2点につきまして、 3段階位で 対応可能かどうか ご教授頂けると嬉しいです。
ふじやん様が「実現はかなり困難」と判断されるのであれば、あっさり見送る所存です(笑)
急ぎではありませんので、お時間がある時に検討していただければ十分です。
それでは、失礼いたします。
ふじやん
ひき太郎さん、コメントありがとうございます。
私はひき太郎さんやFumaさんのようなJavaScriptの知識は皆無で勉強する気もないのでただありがたく使わせていただくだけですけど、デザインとかHTMLとかになると自分が納得いくまで無駄に凝ってしまうんですよね(^^;
なのでこういう記事は楽しくすらすら書けて全然疲れないですw
ひき太郎
こんにちは^^
僕はGIF画像のURLをなんとかしたくてOGP設定のところにしか目がいっていませんでしたが、年月変更表示をここで変更できるのは便利ですね^^いまはブログ以外のところでコードをいじって遊び中ですが、修正したくなったら参考にさせて頂きます。
それにしても結構色々と修正していますね^^;さすがのこだわり具合。僕なら面倒臭がって適当なところで妥協していると思います^^;
記事の執筆お疲れさまですm(_ _)m