headのタイトルにページ番号とカテゴリー名を追加する

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログテック」で詳しく書いていますので、そちらをご覧ください。

先日の記事「ブログ移転で rel=”canonical” は有効か？」で、このブログではヘッダのタイトルに「ページ番号」や「カテゴリー名」を追加していると書きました。よく考えたら、その方法を知りたい方がいるかもしれないと思いますので、この記事にまとめます。

先日の記事に書いた通り、このスクリプトを適用したら、ほんの数日でGoogleの検索結果に反映されるようになりました。この記事は、このブログを書いているファンブログを例にしていますが、他のブログでも充分応用が効く内容だと思います。

この記事の目次

ファンブログのスキンの初期状態
ファンブログのスキンに「記事のタイトル」を追加する方法
タイトルに「ページ番号」を追加するスクリプト
タイトルに「カテゴリー名」を追加するスクリプト
うまく表示されない場合の対処法
スクリプトの解説

現在、このブログのスキンは下の構成になっています。（2013年３月16日時点）

このスキンは独自仕様なので、ファンブログの物とは違います

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS" />
<meta name="description" content="{$BlogDescription$}" />
<meta name="keywords" content="HTML,css,JavaScript,スタイルシート" />
<meta name="author" content="Tom" />
<meta name="copyright" content="Copyright {$BlogName$}" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="start" href="{$BlogUrl$}" title="{$BlogName$}" />
<link rel="stylesheet" type="text/css" href="{$BlogUrl$}style.css" charset="Shift_JIS" media="all" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$BlogUrl$}index1_0.rdf" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>{$BlogEntryTitle$} | {$BlogName$}</title>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="" media="all" />
<script type="text/javascript" src=""></script>
<![endif]-->
<script type="text/javascript" src=""></script>
</head>
<body>
（省略）
</body>
</html>

この中のtitleタグの中身は{$BlogEntryTitle$} | {$BlogName$}です。

{$BlogEntryTitle$}は、記事のタイトルに、
{$BlogName$}はブログのタイトルに自動で変換されて表示されます。

ファンブログのスキンの初期状態

ただし、ファンブログのスキンの初期設定は
{$BlogName$} だけが書き込まれていて、{$BlogEntryTitle$}はありません。このままだと「ブログ名」だけが表示され、「記事のタイトル」は表示されません。これは検索結果にも同じように反映されます。

たとえば次のキーワードで検索してみます。

キーワード

その結果、今現在このブログの記事が１位に表示されています（2013年３月17日時点）。下のどちらかが実際の表示結果、もう片方は画像を加工した物ですが、この２つを比べてみてクリックされやすいと思うタイトルはどちらでしょう？

実際の検索結果表示画面
ブログタイトルのみの場合

左が実際の表示。右がファンブログのスキンのままだと表示される状態を再現したものです。検索した人の入力した２つのキーワード。これがタイトルに含まれる方がクリックされやすいと思います。ブログ名だけで、キーワードのない右は、せっかく1位にあってもそのままスルーされそうな気はしませんか？

ファンブログのスキンに「記事のタイトル」を追加する方法

ボタン

まず、ファンブログの管理画面左の「スタイルの編集」をクリック。
画面が変わったら「フリースキンの編集」と言う項目から「1記事」を選択。
「フリースキンの編集」は画面左にあり、次の一覧になっています。

スタイルシート
メイン
ポータル
アーカイブ
１記事
プロフィール

この中の「１記事」をクリックします。「1記事」の画面になったら画面右のタイトルが「１記事テンプレートの編集」になります。この右側の枠の中を編集します。

１記事テンプレートの編集で一番上から見ていくと、途中で下のように書かれた行があります。

<title>{$BlogName$}</title>

これを、次のように変更します。

<title>{$BlogEntryTitle$} | {$BlogName$}</title>

これで保存すれば、「記事のタイトル | ブログの名前」という風に表示されます。

参考記事：headのtitleタグの設定

タイトルに「ページ番号」を追加するスクリプト

ようやくここからが、今回の本題です。今回やるのは「ページ番号」の追加と、「カテゴリー名」の追加です。「ページ番号」を追加するスクリプトは「メイン」スキンに書き加えます。まず、上の要領で「フリースキンの編集」から「メイン」を選択して開きます。ちなみに、このブログのメインスキンはtitleタグを下のように書き直してあります。

<title>{$BlogName$} | ブログインデックス</title>

メインスキンのheadに、次のコードを書き加えます。ソースの中の「ayzfqir5」はこのブログの場合です。各自、自分のブログのURLに変更してください。

自分のブログのURLから、赤字の部分を抜き出して、下のコードの「ayzfqir5」を書きかえます。
http://fanblogs.jp/ayzfqir5/

<script type="text/javascript"><!--
url=window.location.href.match(/^https?:\/\/fanblogs\.jp\/ayzfqir5(\/(([0-9]+)\/?)?)?$/);

if(url){
	var number=url[3]?url[3]:1;

	if(document.title){
		document.title+=' page'+number;
	}else{
		document.querySelector('title').innerHTML+=' page'+number;
	}
}
//-->
</script>

このソースを書き加えるのは、スキンのtitleタグ <title>{$BlogName$} | ブログインデックス</title> の直後、真下です。

この結果、トップページのタイトルは下の通りになります。「ブログインデックス」や「page」は、上のソースの青字部分を書きかえて、好みに変更してください。

ここにブログの名前を入れます | ブログインデックス page1

このブログの、トップページのURLは「http://fanblogs.jp/ayzfqir5/」ですが、記事が10個より多くある時は2ページ目「http://fanblogs.jp/ayzfqir5/2」が存在します。

その2ページ目「http://fanblogs.jp/ayzfqir5/2」が開かれるとタイトルは下のように変わります。

ここにブログの名前を入れます | ブログインデックス page2

うまく表示されない時は「うまく表示されない場合の対処法」を、スクリプトの内容を知りたい場合は「スクリプトの解説」を参照してください。

タイトルに「カテゴリー名」を追加するスクリプト

「カテゴリー名」を追加するスクリプトは「アーカイブ」スキンです。上の要領で「フリースキンの編集」から「アーカイブ」を選択して開きます。このブログのスキンは「アーカイブ」のtitleタグを下のように書き直してあります。

<title>{$BlogName$} | カテゴリー</title>

カテゴリー名を追加するのはページ番号を追加するより大変です。

まず、段取りとして「カテゴリー名」と「カテゴリーURL」の対応表を作る必要があります。書き方の説明の前に実例として、このブログの2013年３月16日時点での対応表を示します。

<script type="text/javascript"><!--
categories={
	"category_5":"HTML",
	"category_28":"超初心者HTML入門",
	"category_6":"スタイルシート",
	"category_7":"JavaScript",
	"category_27":"JavaScript（上級）",
	"category_30":"PHP",
	"category_34":"python",
	"category_35":"SQL",
	"category_33":"Twitter",
	"category_20":"スクリプト置き場",
	"category_13":"ブログカスタマイズ",
	"category_32":"ドロップシッピング",
	"category_24":"アフィリエイトとSEO",
	"category_18":"ファンブログのSEO",
	"category_15":"ファンブログ用情報",
	"category_26":"他のブログサービス",
	"category_16":"スパムの記録","icon",
	"category_19":"ふつうのブログ記事",
	"category_25":"ほのぼのニュース",
	"category_29":"かこ専",
	"category_31":"アゲハッピー。"
};
//-->
</script>

カテゴリー「HTML」の一覧を表示するURLは「http://fanblogs.jp/ayzfqir5/category_5/」です。

このcategory_5を左に、カテゴリー名「HTML」を右に書きます。

“category_5″:”HTML”

「category_5」と「HTML」は、それぞれ「”」（ダブルクォーテーション）で囲みます。その２つを「:」（コロン）でつなぎます。

これを、ひとつのブロックとして、ブロックとブロックは「,」（コンマ）で区切ります。

たとえば「ブロックA,ブロックB,ブロックC」の時、ブロックAの前には「,」（コンマ）はありません。同じくブロックCの後にも「,」（コンマ）はありません。左右にブロックがある時の区切りが「,」（コンマ）です。

ブロックAが「”category_5″:”HTML”」
ブロックBが「”category_28″:”超初心者HTML入門”」
ブロックCが「”category_6″:”スタイルシート”」なら下の通りに書きます。

categories={
	"category_5":"HTML",
	"category_28":"超初心者HTML入門",
	"category_6":"スタイルシート"
};

「改行」と「行頭の空白」は見やすくするために付けただけで、コンピューターは無視します。つまり、こう書きかえても同じですが、見にくいです。

categories={"category_5":"HTML","category_28":"超初心者HTML入門","category_6":"スタイルシート"};

ここまでの説明に沿って、自分のブログの「対応表」を作ってください。それが出来れば、後は簡単です。

対応表が出来たら、その下に次のスクリプトを加えます。ソースの中の「ayzfqir5」はこのブログの場合です。各自、自分のブログのURLに変更してください。

自分のブログのURLから、赤字の部分を抜き出して、下のコードの「ayzfqir5」を書きかえます。
http://fanblogs.jp/ayzfqir5/

category_url=window.location.href.match(/^https?:\/\/fanblogs\.jp\/ayzfqir5\/(category_[0-9]+)\/(([0-9]+)\/?)?$/);

if(category_url){
	url=category_url[1];
	page=category_url[3]?category_url[3]:1;

	if(document.title){
		document.title+='「'+categories[url]+'」 page'+page;
	}else{
		document.querySelector('title').innerHTML+='「'+categories[url]+'」 page'+page;
	}
}

このブログの場合なら、下が完成形になります。これをスキンに書き加えますが、書き加えるのは、ページ番号を追加したメインのスキンの時と同じく、titleタグの直後です。

<script type="text/javascript"><!--
categories={
	"category_5":"HTML",
	"category_28":"超初心者HTML入門",
	"category_6":"スタイルシート",
	"category_7":"JavaScript",
	"category_27":"JavaScript（上級）",
	"category_30":"PHP",
	"category_34":"python",
	"category_35":"SQL",
	"category_33":"Twitter",
	"category_20":"スクリプト置き場",
	"category_13":"ブログカスタマイズ",
	"category_32":"ドロップシッピング",
	"category_24":"アフィリエイトとSEO",
	"category_18":"ファンブログのSEO",
	"category_15":"ファンブログ用情報",
	"category_26":"他のブログサービス",
	"category_16":"スパムの記録","icon",
	"category_19":"ふつうのブログ記事",
	"category_25":"ほのぼのニュース",
	"category_29":"かこ専",
	"category_31":"アゲハッピー。"
};

category_url=window.location.href.match(/^https?:\/\/fanblogs\.jp\/ayzfqir5\/(category_[0-9]+)\/(([0-9]+)\/?)?$/);

if(category_url){
	url=category_url[1];
	page=category_url[3]?category_url[3]:1;

	if(document.title){
		document.title+='「'+categories[url]+'」 page'+page;
	}else{
		document.querySelector('title').innerHTML+='「'+categories[url]+'」 page'+page;
	}
}
//-->
</script>

この結果「http://fanblogs.jp/ayzfqir5/category_5/」にアクセスすると、タイトルは下の通りになります。

ここにブログの名前を入れます | カテゴリー「HTML」page1

「http://fanblogs.jp/ayzfqir5/category_5/２」なら、こうなります。

ここにブログの名前を入れます | カテゴリー「HTML」page2

「カテゴリー」という文字やカギ括弧を変更する時は、ソースを書きかえてください。

うまく表示されない場合の対処法

ファンブログの標準スキンは下のようになっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="" />
<meta name="description" content="{$BlogDescription$}" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{$BlogUrl$}index1_0.rdf">
<link href="{$BlogUrl$}style.css" rel="stylesheet" type="text/css" />
<title>{$BlogName$}</title>
</head>
<body>
</body>
</html>

日本語を使うときは、日本語が出てくる前に
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS” /> がなければいけません。

そして、スクリプトを使うときは、最初のスクリプトよりも前に
<meta http-equiv=”Content-Script-Type” content=”text/javascript” /> がなければいけません。

つまり順番として次の通りである必要があります。ただし、この順番で隣接させる必要はありません。この順番が守られていれば、間に何が挟まれていても大丈夫です。

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<title>{$BlogName$}</title>
追加したスクリプト

そして、追加したスクリプトよりも前に「script」タグがあるなら、それを全部出てきた順番で追加したスクリプトの後にずらします。

スクリプトの解説

基本的にはdocument.writeで追加しているだけなので説明することもないんですが、1ヵ所だけ注意する事があります。

IEの場合はtitleタグのinnerHTMLに書き込もうとするとエラーになります。その場合はdocument.titleに書き込めばうまくいきます。

if(document.title){
	// IE用
	document.title+=' page'+number;
}else{
	// その他のブラウザ
	document.querySelector('title').innerHTML+=' page'+number;
}

「headのタイトルにページ番号とカテゴリー名を追加する」への4件のフィードバック

かこより:

2013年3月17日 08:18

以前、タイトルの重複を避けるために、おーとえすさんの記事の方法で
ファンブログのメインとアーカイブのタイトルにページ番号を追加して、
効果がありました。

さくらのブログにも、使えたらいいなぁ、とちょうど
思っていたところなので、時間があるときによく読んでやってみようと思ってます。
すぐにはできないと思うけど。記事にしてくれてありがとう。

返信
れんげ より:

2016年8月26日 11:30

こんにちは。

こちらの、記事をタイトルに追加する方法は、旧ファンブログ用なのは承知しているのですが、現在のファンブログのスキンに
{$BlogEntryTitle$} |を追加することはできますか？
1 %> ():

title～/titleの中身が全く違うので、やはり不可能でしょうか？

返信
1. Tom より:
  
  2016年8月27日 23:24
  れんげさん、ファンブログの方のコメントに返事してなくてごめんなさい。
  
  このページの質問ですが、今のファンブログのテンプレートではもともと記事ページのタイトルが書き込まれています。
  
  例えば「愛娘らの幼児返り: 〜私のお得感〜今更なチャレンジ♪」
  というように記事のタイトルの後にブログタイトルが表示されています。
  
  ただし、トップページのように元々記事のタイトルがないページではブログタイトルだけしか表示されません。
  
  ファンブログのテンプレートは
  
  <% blog.title %>
  がブログのタイトルで
  
  <% extra_title | remove_emoji %>
  は記事のタイトルです。
  
  下は今のファンブログのテンプレートからの抜粋です。
  本当は１行で書いてありますが説明しやすいように改行して複数行にしています。
```
<title>
<% if:extra_title %>
　　<% extra_title | remove_emoji %>
　　<% if:current_page > 1 %> (<% current_page %>)<% /if %>: 
<% /if %>
<% blog.title %>
</title>
```
  これを説明すると
```
<title>

<% if:extra_title %>
もし、ページの記事タイトルがあれば<% /if %>までをやる

　　<% extra_title | remove_emoji %>
　　ページタイトルを表示（ただし、絵文字があってエラーになるといけないので絵文字は削除）

　　<% if:current_page > 1 %> (<% current_page %>)<% /if %>: 
　　もし２ページ目以降ならカッコ()の中にページ番号を表示

<% /if %>
ここまで

<% blog.title %>
最後に（ifの条件がないので必ず）ブログタイトルを表示

</title>
```
  となります。今のままで問題はないと思いますが何か違う表示をしたいのなら教えてください。
  
  ファンブログの方の質問への返信してなくて申し訳ないですが、そちらはちょっとややこしい説明になるので追ってお答えします。
  返信
れんげ より:

2016年8月29日 18:15

こんにちは。

コメントの返信ありがとうございます。

ちょっと難しいですね…。
せっかく丁寧に説明して下さっているのに、意味がよく分からないくて理解が出来ずです(自爆)

今のままで問題がないのでしたら、そのままでいじらずにいます。

あ！前回の分も、今の私には難しいのかもです。(思考能力が鈍っていて…元々鈍かったりして(苦笑))

なので、前回と今回のコメント返信のことは、気になさらないで下さい。

せっかく教えて下さったのに、こちらこそすいませんでした。

また、学習しに訪問させて頂きます。

ありがとうございました。

返信