結城永人Bloggerブログのページタイトルの変更、またはtitleタグのカスタマイズはトップと記事／追加とアーカイブとラベルの四種類に分かれている。テンプレートが公式テーマだと2017年のContempoなどからそれぞれのHTMLのタイトルの出力が変わっている。使われる独自タグが違うためで、 前以て注意しておかなくてはならない。
新しいタイトルの独自タグと表示
<data:view.title.escaped/>- トップページ＿ブログ名
- 記事／追加ページ＿記事／追加名
- アーカイブページ＿ブログ名
- ラベルページ＿ブログ名
古いタイトルの独自タグと表示
<data:blog.pageTitle/>- トップページ＿ブログ名
- 記事／追加ページ＿ブログ名: 記事／追加名
- アーカイブページ＿ブログ名
- ラベルページ＿ブログ名
テーマによらず、タイトルの独自タグはどちらでも使えるけど、表示が一つだけ異なる。記事／追加ページの場合に新しいのは記事／追加名だけで、古いのは先頭にブログ名が付け加えられる。
Bloggerではトップページのブログ名以外で振り分けの独自タグと共にタイトルの出力に使えるページ名の独自タグもあるんだ。
トップページとその他に振り分けた際のページ名の独自タグと表示
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>- トップページ＿ブログ名
- 記事／追加ページ＿記事／追加名
- アーカイブページ＿日付
- ラベルページ＿ラベル名
二つのタイトルの独自タグと全く異なるのがアーカイブページの日付とラベルページのラベル名の出力で、そのままでも四種類のページのタイトルを完全に区別できるし、振り分けの独自タグでタイトルの独自タグと組み合わせて使うとブログのタイトルのカスタマイズに役立つ。
古いタイトルの独自タグはページの振り分けの独自タグを使うとラベルページの表示が少し変わる。トップページとその他ではラベル名だけでブログ名が出ないけれどもインデックスページとその他に振り分けた場合にはブログ名に続いてラベル名が表示される。
インデックスページとその他に振り分けた際の古いタイトルの独自タグと表示
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>- トップページ＿ブログ名
- 記事／追加ページ＿ブログ名: 記事／追加名
- アーカイブページ＿ブログ名: 日付
- ラベルページ＿ブログ名: ラベル名
記事／追加とアーカイブページにページ名ではなくて古いタイトルの独自タグを合わせるとブログの四種類のページのタイトルを先頭にブログ名を付けながら区別できる。
新しいタイトルの独自タグは振り分けの独自タグに入れても元のままの仕方でしかタイトルは表示されない。
Bloggerブログは振り分けの独自タグとタイトルやページ名の独自タグの組み合わせによって様々にカスタマイズが可能なので、どんなデザインが可能か、幾つかのソースコードを取り上げてみたい。
ブログ名を日付とラベル名の前に付けて記事／追加名の順番を入れ換える
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:elseif cond='data:blog.pageType == "archive"'/>
<title><data:blog.pageTitle/></title>
<b:elseif cond='data:blog.pageType == "item"'/>
<title><data:blog.pageName/>｜ブログ名</title>
</b:if>- トップページ＿ブログ名
- 記事／追加ページ＿記事／追加名｜ブログ名
- アーカイブページ＿ブログ名: 日付
- ラベルページ＿ブログ名: ラベル名
ブログで記事／追加ページはメインのコンテンツなので、タイトルの記事／追加名はブログ名よりも前に置かれれると訪問者の利便性が高いと思うし、検索エンジンからのアクセスアップへのSEO（検索エンジン最適化）対策でもサイト評価に有利かも知れない。
サンプルの「｜ブログ名」は他のメッセージに置き換えても何でも構わないし、または記載しなければ記事／追加ページのタイトルからブログ名を消すこともできる。
三つのtitleタグは一つ目がトップページとラベルページ、二つ目がアーカイブページ、三つ目が記事／追加ページのタイトルに対応しているので、サンプルの「｜ブログ」とか前後に何かを記載するとそれぞれに反映する。
サンプルはトップページとラベルページが一つになっているので、それも切り離すと四種類のページのタイトルを全て個別にカスタマイズできるようになる。
四種類に振り分けたページのタイトルの表示を個別に変更する
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/>｜メッセージ</title>
<b:elseif cond='data:blog.pageType == "archive"'/>
<title>ブログ名: <data:blog.pageName/>（アーカイブ）</title>
<b:elseif cond='data:blog.searchLabel'/>
<title>ブログ名: <data:blog.pageName/>（ラベル）</title>
<b:elseif cond='data:blog.pageType == "item"'/>
<title><data:blog.pageName/>｜ブログ名</title>
</b:if>- トップページ＿ブログ名｜メッセージ
- 記事／追加ページ＿記事／追加名｜ブログ名
- アーカイブページ＿ブログ名: 日付（アーカイブ）
- ラベルページ＿ブログ名: ラベル名（ラベル）
アーカイブとラベルページのページ名の独自タグは古いタイトルの独自タグに置き換えるとブログ名は自動的に表示されるし、新しいタイトルの独自タグを使っても大丈夫で、 四種類のページのタイトルを振り分けたそれぞれのtitleタグが自由にカスタマイズできるソースコードだ。
一つ注意しなくてはならないのはトップページの振り分けの独自タグにはインデックスページ用は使えない。トップページ用に絞り込まないとラベルページにトップページのカスタマイズ（メッセージの追加など）が反映してしまう。トップページのカスタマイズを行わなければインデックスページ用で振り分けてもブログ名がラベル名の前に自動的に付けられる他はラベルページのデザインは崩れない。
新しいタイトルの独自タグを使ったtitleタグの簡単なカスタマイズ
<title><data:view.title.escaped/><b:if cond='data:view.isHomepage'>｜メッセージ<b:elseif cond='data:isArchive'/>: <data:blog.pageName/>（アーカイブ）<b:elseif cond='data:view.isLabelSearch'/>: <data:blog.pageName/>（ラベル）</b:if></title>- トップページ＿ブログ名｜メッセージ
- 記事／追加ページ＿記事／追加名
- アーカイブページ＿ブログ名: 日付（アーカイブ）
- ラベルページ＿ブログ名: ラベル名（ラベル）
些細な日常で実際に取り入れている。新しいタイトルの独自タグで、以前、トップページのブログ名にメッセージを付けたけど、アーカイブとラベルページがブログ名しか出ないので、それぞれを新たに振り分けてページ名の独自タグで日付とラベル名を表示しながら補足も追加してみた。
少しだけ変更するならばtitleタグの内側でタイトルの独自タグの前後に振り分けの独自タグからページ名の独自タグなどを記載するのが簡単だと思う。
作業としてはページ毎に振り分けの独自タグで個々のカスタマイズを追加するだけだからソースコードの流れ（どんな順番で振り分けるべきか）を考える必要がない。
古いタイトルの独自タグを使っても同じようにできるけれども記事／追加ページのタイトルでブログ名が必ず出るのを避けるのが無理なんだ。
titleタグのカスタマイズに使える振り分けの独自タグ
古いタイプのソースコード
トップページ
<b:if cond='data:blog.url == data:blog.homepageUrl'></b:if>個別ページ（URL）
<b:if cond='data:blog.url == "URL"'></b:if>※ソースコードの「URL」を個別に記入する。
インデックスページ（トップページとラベルページなど）
<b:if cond='data:blog.pageType == "index"'></b:if>記事／追加ページ
<b:if cond='data:blog.pageType == "item"'></b:if>アーカイブページ
<b:if cond='data:blog.pageType == "archive"'></b:if>ラベルページ
<b:if cond='data:blog.searchLabel'></b:if>エラーページ
<b:if cond='data:blog.pageType == "error_page"'></b:if>新しいタイプのソースコード
トップページ
<b:if cond='data:view.isHomepage'></b:if>マルチプルページ（トップ、ラベル、ブログ内の検索結果）
<b:if cond='data:view.isMultipleItems'></b:if>記事／追加ページ
<b:if cond='data:view.isSingleItem'></b:if>記事ページ
<b:if cond='data:view.isPost'></b:if>追加ページ
<b:if cond='data:view.isPage'></b:if>アーカイブページ
<b:if cond='data:view.isArchive'></b:if>サーチページ（ラベル、ブログ内の検索結果）
<b:if cond='data:view.isSearch'></b:if>ラベルページ
<b:if cond='data:view.isLabelSearch'></b:if>ブログ内の検索結果ページ
<b:if cond='data:view.search.query'></b:if>エラーページ
<b:if cond='data:view.isError'></b:if>※古いタイプの「==」は「!=」に、古いタイプと新しいタイプの「data」は「!data」に書き換えるとそれぞれに反対の振り分け（トップページが対象ならば入れ替わってトップページ以外が対象になるように）が可能になる。
サンプルの記事／追加ページのタイトルにブログ名をさらに追加するならば記事／追加ページの振り分けの独自タグを使って記載すると反映する。
<title><data:view.title.escaped/><b:if cond='data:view.isHomepage'>｜メッセージ<b:elseif cond='data:view.isSingleItem'/>｜ブログ名<b:elseif cond='data:view.isArchive'/>: <data:blog.pageName/>（アーカイブ）<b:elseif cond='data:view.isLabelSearch'>: <data:blog.pageName/>（ラベル）</b:if></title>- トップページ＿ブログ名｜メッセージ
- 記事／追加ページ＿記事／追加名｜ブログ名
- アーカイブページ＿ブログ名: 日付（アーカイブ）
- ラベルページ＿ブログ名: ラベル名（ラベル）
振り分けの独自タグを消すと反映せずに元のままのタイトルの表示になる。部分的にカスタマイズするのが簡単だと思う。タイトルの独自タグは新しいのだけではなくて古いのを使っても大丈夫だけど、ただし記事／追加ページのタイトルでブログ名と記事／追加名が必ず表示されるので、それぞれの位置採りは変えられなくなってしまう。振り分けの独自タグを何れかのタイトルの独自タグの前に置くとカスタマイズで追加する要素の順番も変更できる。
現状、Bloggerの公式テーマは何もしないとトップとアーカイブとラベルページにブログ名のみが表示されて同じになる。訪問者の利便性が高いかどうかに疑問が残るし、SEO対策でもコンテンツの重複タイトルはサイト評価に不利かも知れないので、もうちょっと細かくタイトルを変更するカスタマイズに取り組みたくなった。
初期設定のままでもアーカイブとラベルページに日付とラベル名を付けておくとブログの四種類のページで固有のタイトルを持つように表示できる。
ブログ内の検索結果ページに固有のタイトルを出す
四種類のページとは別にブログ内の検索結果のページはタイトルの独自タグを使うと新しいのはブログ名だけで、古いのはブログ名に続いてキーワードに対応した「～の検索結果」という表示になる。なのでブログ内の検索結果ページのタイトルを固有に出すためにはブログの古いタイトルの独自タグを使うと大丈夫だ。titleタグにそのままで記載するか、ページ毎に振り分ける場合にはインデックスページの独自タグに入れなくては反映しない。
するとラベルページのカスタマイズでラベル名と共にブログ名が付くかどうかが変わって来るから注意しなくてはならない。
<title><data:view.title.escaped/><b:if cond='data:view.search.query'>: <data:blog.pageName/></b:if></title>- トップページ＿ブログ名
- 記事／追加ページ＿記事／追加名
- アーカイブページ＿ブログ名
- ラベルページ＿ブログ名
- ブログ内の検索結果ページ＿ブログ名: （キーワード）の検索結果
振り分けの新しいタイプの独自タグにブログ内の検索結果ページ用があるので、使うとブログ内の検索結果ページに固有のタイトルが出せるようになる。
タイトルの新しい独自タグだからtitleタグの内側で振り分けるのが簡単で、ページ名の独自タグを記載するとキーワードに対して「～の検索結果」と表示されるんだ。
エラーページのタイトルのカスタマイズ
<b:if cond='data:blog.pageType == "error_page"'>
<title>エラーページ｜ブログ名</title>
</b:if>- エラーページ＿エラーページ｜ブログ名
ブログのエラーページは新しいタイトルの独自タグでブログ名が表示されて古いタイトルの独自タグでは何も表示されない。
エラーページの振り分けの独自タグを使ってtitleタグを記載すると反映する。
トップページ／インデックスページに古いタイトルの独自タグを使っている場合には何も表示されないからエラーページの振り分けタグは他のページのタイトルのソースコードに組み込んでも切り離しておいても構わない。反対に新しいタイトルの独自タグを使っている場合にはエラーページを組み込んで振り分けないとブログ名と両方が記載されてしまう。
ブラウザにはエラーページの振り分けが優先して読み込まれるみたいなので、実用上、問題はないけれども振り分けるのが正確だ。
<b:if cond='data:view.isError'><title>エラーページ｜ブログ名</title><b:else/><title><data:view.title.escaped/></title></b:if>- トップページ＿ブログ名
- 記事／追加ページ＿記事／追加名
- アーカイブページ＿ブログ名
- ラベルページ＿ブログ名
- エラーページ＿エラーページ｜ブログ名
エラーページの振り分けの独自タグでエラーページとその他のページを切り離すと大丈夫なんだ。その他のページの四種類のタイトルもソースコードを書き換えると個別にカスタマイズできる。
コメント