FC2ブログの「<title>」タグをページ毎に切り替えるカスタマイズ方法

livedoorブログからFC2ブログに引っ越し大分FC2ブログの使い方にも慣れた。慣れて来るとやってみたくなるのがhtmlやCSSのテンプレートのカスタマイズ。

今回は、トップページ、個別記事ページ、アーカイブ、カテゴリ、検索結果で「<title>」で表示する内容を切り替える方法を考えてみた。
ページの表題になる「<title>」に適切な内容を記述することはユーザビリティ、検索エンジン対策の両方で重要だ。
多くの読者にブログを読んでもらいたいのなら、ページ内容に相応しい「<title>」を表示するのが良い。

「<title>」で記述した内容は、ブラウザ（Internet ExploreやFireFox等）のウィンドウの最上部に表示される。訪問してくれた人にページの内容を正確に簡潔に伝えるために「<title>」に適切な文言を記述をするのが良い。
また、主流のタブブラウザではタブに「<title>」タグで指定した文言が表示される。沢山のタブを開いている場合、同じ内容の「<title>」では読者はどのタブがどのページだったか迷うことになる（幸い？なことにこのブログのページを複数開くとは考えにくいけど・・・）。
更には、幸運なことに読者がお気に入りに登録してくれた場合、お気に入りに表示されるページ名は「<title>」で記述した内容になる。後でお気に入りから再びページにアクセスしようとした場合、「<title>」の内容が適切でないと、どういう内容のページだったか思い出せずアクセスされないことになってしまう。

検索エンジン対策の面からも「<title>」は重要になる。検索エンジンはあるキーワードで検索エンジンで検索された場合、検索結果で「<title>」に記述した内容の中に合致したキーワードがあると太字で表示される。また検索エンジンのクローラーにも「<title>」に記述されたキーワードを重視する。
インターネットの玄関口は検索エンジンになっているので、検索結果に表示されること、検索エンジン対策をすることはブログの訪問者数を増やす意味でも重要になる。

前置きが長くなってしまったが、「<title>」をカスタマイズする重要性は理解して貰えたと思う。それではFC2ブログでの「<title>」のカスタマイズ方法を説明する。

FC2ブログのほとんどのテンプレートでは、以下のように「<title>」タグは一つしか用意されていない。

<title><%blog_name> <%sub_title></title>

これではトップページ、個別記事ページ、アーカイブページ、カテゴリページのどのページでも同じ「<title>」になってしまう。

各ページ毎に表示する「<title>」の内容を切り替えたい訳だが、FC2ブログでは、htmlのテンプレートは一つしか用意されておらず、トップページや個別記事、カテゴリページ毎にhtmlテンプレートは用意されていない。つまり各ページ毎にhtmlテンプレートを編集するということは出来ない。

その代わりに、FC2ブログでは「変数」（テンプレート中で使える変数一覧）が用意されている。
「変数」を使うことであるページで表示したり、またあるページでは表示しなかったりと表示内容の切り替えをすることができる。例えばトップページだけに表示したい場合は「」を使い、個別記事ページだけに表示したい場合は「」を使うといった具合だ。
つまり、一つのhtmlテンプレートの中で変数を上手く使って表示内容を切り替えることになる。

FC2ブログの変数を使って、トップページ、個別記事ページ、アーカイブページ、カテゴリページ、検索結果ページで「<title>」を切り替える方法を考えてみた。

1.トップページの「<title>」
トップページだけに表示する場合は「～」を使う。この変数で挟まれた内容はトップページにだけしか表示されない。トップページはブログの玄関口であるため、単純にブログの名前で良いと考え「<%blog_name>」だけを指定する。

<!--index_area--><title><%blog_name></title><!--/index_area-->

2.個別記事ページの「<title>」
一番重要なのは個別記事ページの「<title>」だろう。余程の熱烈な読者や親しい友人でもない限り、わざわざブログのトップページを訪問することは無い。多くの人は検索エンジンの検索結果から訪れた人だろう。裏を返せば検索エンジン対策でも個別記事ページでしっかりとした「<title>」を記述するのが重要だ。
個別記事だけに表示する場合は「～」を使う。「<%sub_title>│<%blog_name><」という形で「記事のタイトル」と「ブログ名」を表示するようにしてある。「ブログ名」は無くても構わない。
本当は「記事のタイトル」とは別の内容を指定したいところだが、他に適切な方法が考えつかなかった。「記事タイトル」を「<title>」に使う以上は、「<title>」に表示されることを意識して「記事タイトル」を決める必要がある。

<!--permanent_area--><title><%sub_title>│<%blog_name></title><!--/permanent_area-->

3.アーカイブページの「<title>」
アーカイブページでは「～」を使う。「YYYY年MM月の記事一覧」という「<title>」にしたかったので、「<%sub_title>の記事一覧;│<%blog_name>」という形にした。

<!--date_area--><title><%sub_title>の記事一覧│<%blog_name></title><!--/date_area-->

4.カテゴリページの「<title>」
カテゴリページで表示する場合は「～;」で挟む。表示内容はアーカイブページと同じ。「<%sub_title>」にカテゴリ名が入るようになる。

<!--category_area--><title><%sub_title>カテゴリの記事一覧│<%blog_name></title><!--/category_area-->

5.検索結果ページの「<title>」
FC2ブログのプラグインの検索窓から検索した場合に表示されるのが検索結果ページ。「～」を使う。
「“検索キーワード”の検索結果」という「<title>」にするために、「<%sub_title>の検索結果」とした。

<!--search_area--><title><%sub_title>の検索結果│<%blog_name></title><!--/search_area-->

以上が各ページで表示される「<title>」となる。htmlテンプレートで記述する場合は以下のようにまとめて記述する。

6.「<title>」を各ページで切り替える方法のまとめ
以下の通りに記述することで各ページ毎に表示する「<title>」を切り替えることができる。気を付けなくてはならないのは、各変数を記述することを忘れないこと。

<!--index_area--><title><%blog_name></title><!--/index_area-->
<!--permanent_area--><title><%sub_title>│<%blog_name></title><!--/permanent_area-->
<!--date_area--><title><%sub_title>の記事一覧│<%blog_name></title><!--/date_area-->
<!--category_area--><title><%sub_title>の記事一覧│<%blog_name></title><!--/category_area-->
<!--search_area--><title><%sub_title>の検索結果│<%blog_name></title><!--/search_area-->

上で使っている変数は、「該当ページでのみ表示する」という処理を行う。変数を書き忘れたり書き損じたりしていると、全てのページで同じ「<title>」が表示されたり、ページのレイアウトが崩れてしまったりする。
レイアウトが崩れてしまうのはもっての他だし、HTMLの構文上「<title>」は一つだけと決まっている。検索エンジン対策を考える上で仕様に則ったHTMLを記述するのは絶対である。

FC2ブログで各ページ毎に「<title>」の記述内容を切り替える方法は以上。変数を上手く活用すればFC2ブログは相当なカスタマイズが出来るので色々と試行錯誤して欲しい。

5/16日追記
「次のページ」「前のページ」（page-1.htmlやpage-2.html、?all=）でtitleが表示されないことが発覚。以下を追記してtitleが表示されるようにしました。

<!--not_index_area-->
<!--not_permanent_area-->
<!--not_date_area-->
<!--not_category_area-->
<!--not_search_area-->
<!--not_tag_area-->
<title><%blog_name>の記事一覧</title>
<!--/not_tag_area-->
<!--/not_search_area-->
<!--/not_category_area-->
<!--/not_date_area-->
<!--/not_permanent_area-->
<!--/not_index_area-->