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

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

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

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

現在、このブログのスキンは下の構成になっています。(2013年3月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$}はありません。このままだと「ブログ名」だけが表示され、「記事のタイトル」は表示されません。これは検索結果にも同じように反映されます。

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

キーワード

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

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

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

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

ボタン

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

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

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

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

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

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

<title>{$BlogEntryTitle$} | {$BlogName$}</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>

“headのタイトルにページ番号とカテゴリー名を追加する” の続きを読む

N95マスク 最安値追記 子供用

2013年3月16日 追記

「LOHACO」で住友スリーエム 3M 防じんマスクVフレックスDS2 1箱(20枚入)9105J DS2を税込1,360円で販売中です。(DS2はアメリカのN95にあたる日本での類似の規格です

同じく「LOHACO」でN95マスク 7500 1箱(20枚入)山本光学を1,400円引きのセール販売中。2013年4月12日18時00分まで税込1,960円です。

2013年3月15日 追記

現在「爽快ドラッグ」で【訳あり】MoLdex2200 N95 マスク(20枚入)が税込1,690円で販売されています。訳ありと言っても「弊社での販売が在庫限りで終了となるため訳あり処分価格」だそうです。N95マスクを買うなら、現在の最安値に近いと思われます。

子供向けなら「ケンコーコム」にMOLDEX N95マスク XSサイズ 女性子供向け 5枚入がありますが、お値段は税込で2,625円します。

ケンコーコム
 
爽快ドラッグ
 
LOHACO


Amazon

R
楽天市場 


Yahoo!ショッピング


セブンネットショッピング

今、話題の「N95マスク」とは?

N95クラスとは、米国の防じんマスク規格のひとつです。「N」=耐油性が無く、「95」=0.1~0.3ミクロンの粒子を95%以上捕集できる素材という意味で、医療用とか粉塵現場作業用といった区別はありません。日本での類似の規格はDS2です。

「N95マスク」の規格

規格 N95マスク
試験粒子の種類 NaClエアロゾル
試験粒子の大きさ 数量中位径 0.075±0.02μm
機可標準偏差 ≦1.86
粒子捕集効率試験流量 毎分85リットル
粒子捕集効率の判定 粒子200mg負荷するまでの最低捕集効率
粒子捕集効率規格値 ≧95%
吸・排気抵抗値試験流量 ≦196Pa
排気抵抗値規格値 ≦294Pa

取扱い業者

アイドラッグストアーは、厚生省指導に完全準拠している個人輸入代行サイトです。海外の正式な薬局から調達していますので100%安心です。 国内の試験検査機関にかけ合格したものだけを輸入代行しています。

在庫あり(2013年3月12日 12:00 pm 時点)

3M N95 8211マスク

Gerson N951730マスク Respirator

North N95マスク 7130

医療現場で採用!世界の3M N95マスク 8210plus

MOLDEX DIRT DAWGS 1200N95マスク

“N95マスク 最安値追記 子供用” の続きを読む

WordPressマルチサイトでエラー! "The site you have requested is not installed properly."

WordPressを使って、マルチサイトにしていたブログが突然アクセスできなくなった。正確にはサーバーとはアクセス出来ている。ただしブラウザには、ブログではなく、こんなメッセージが表示される。

The site you have requested is not installed properly. Please contact the system administrator.

Googleの翻訳にかけるとこういう意味だ。「あなたが要求したサイトが正しくインストールされていません。システム管理者に連絡してください。」

ふざけるな。俺がシステム管理者なんだよ!

WordPressのマルチサイトだけに起こるエラー

調べたところ、これはマルチサイト特有のエラーらしいです。もっとも参考になったのは「Labor Of Love – Laughing Out Loud」さんの記事。

とりあえず、PhpMyAdminで、全テーブルにチェックを入れ「テーブルを最適化」。
上手くいきました。元通り、エラーなく表示することができました。

早速、テーブルの最適化をやってみます。ただし、PhpMyAdminは入れていないのでコマンド処理。-u の後のuser_nameにユーザー名、database_nameにデータベース名を入れます。

mysqlcheck -o -u user_name dabatabe_name -p

こう入力してEnterを押すと「Enter password:」と表示されるので、パスワードを入力して、もう一度 Enter。するとテーブルの最適化が始まります。

xxxxxxxxxx.wp_blog_versions                   Table is already up to date
xxxxxxxxxx.wp_blogs                           OK
xxxxxxxxxx.wp_bp_activity                     OK
xxxxxxxxxx.wp_bp_activity_meta                OK
.............(省略)

最適化は数秒で終了。早速ブラウザをリロード!無事にブログが表示されました。

そういえば今年に入って、これとは別のマルチサイトでアクセス不能になったことがあります。その時はログイン出来たので違う原因かもしれませんが、スパムを全部削除したら直りました。データベースはマメに整理した方が良さそうです。

うちのブログはまだ、復旧しただけですが「Labor Of Love – Laughing Out Loud」さんの記事には再発防止のための対策も書かれています。

大島優子等身大フィギュアOPEN

2013年3月15日、お台場に「マダム・タッソー東京」がOPENする!

マダム・タッソーというのはロンドン発のセレブ体験アトラクション!世界の名だたるセレブたちに会えるぞ!ただし、フィギュアだけど。でも驚くな、お台場と言えば等身大。マダム・タッソーのフィギュアも、みんな等身大だ!しかし、ガンダムはいないから注意してくれ!

では誰がいるのか?これがすごい。

世界のセレブ
アンジェリーナ・ジョリー ジョニー・デップ ジョージ・クルーニー ブラット・ピット レディ・ガガ ジュリア・ロバーツ レオナルド・ディカプリオ ケイト・ウィンスレット
映画スター
トム・クルーズ オードリー・ヘップバーン マリリン・モンロー ブルース・ウィルス スパイダー・マン リチャード・ギア ジャッキー・チェン
世界のリーダー
ウィリアム王子 キャサリン妃(ケンブリッジ公爵夫人) バラク・オバマ ダイアナ妃 ダライ・ラマ ネルソン・マンデラ 吉田茂
創始者
アルベルト・アインシュタイン マダム・タッソー レオナルド・ダ・ヴィンチ 坂本龍馬 スティーブ・ジョブス
スポーツ選手
王貞治 アイルトン・セナ ダルビッシュ有 リオネル・メッシ デイビット・ベッカム
ミュージック・スター
マイケル・ジャクソン ビヨンセ マドンナ 葉加瀬太郎 坂本龍一 大島優子

場所は東京、お台場のデックス東京ビーチ内。レゴランド・ディスカバリー・センターに隣接しているらしい。営業時間は10時~21時。ただし最終入場は19時だ。

当然だけど、カメラ持ち込み、撮影自由。

チケットは、3歳未満無料。3歳から小学生までは1,500円。中学生以上が大人料金なんだけど、今はオンライン早割チケットや、年間パスポートも割引中。

今年の春休みはお台場に決まり!チケット予約はこちらから!

春休み東京旅行
東京スカイツリー(R)へ行こう!|ぽけかる倶楽部

東京─大阪間が2,000円台から!バスならこんなに安く行ける

ブログ移転で rel="canonical" は有効か?

Yahoo!JAPANの「カスタムサーチ」のページで「内容が重複する複数のURLをまとめるよう、検索エンジンに通知」という記事を見つけました。

サイトには、URLは異なるがウェブページの内容は変わらないというケースがあります。たとえば、URLがトラッキング用のパラメータを含んでいる場合や、URLに含まれるパラメータをもとに閲覧環境によってウェブページの表示を最適化しているような場合です。

  • http://www.example.com/products?trackingid=feed
  • http://www.example.com/products?sessionid=hgjkeor2
  • http://www.example.com/products?printable=yes&trackingid=footer

このような場合、検索エンジンのインデックスに個々のURLで登録されると、同じ内容のウェブページが検索結果に表示されたり、同じ内容のウェブページであるにもかかわらず、各URLにクローラーが巡回し、サーバーに負荷をかけてしまう、また、サイト内の巡回が効率的に行われないといった不都合が発生することがあります。このようなことを避けるため、サイト管理者がウェブページのなかで<link>タグを利用して、重複を避けるように検索エンジンに通知する方法が用意されています。

具体的にはヘッダに下の様に書いたとすると「このページはhttp://www.example.com/と同じ内容です」と宣言したことになるようです。

<link rel=”canonical” href=”http://www.example.com/”>

ということは、ここでひとつの疑問が出てきます。

別のドメインでもcanonicalは適用できるのだろうか?

その回答はGoogleの「rel=”canonical” 属性について – ウェブマスター ツール ヘルプ」にありました。

rel=”canonical” 属性を使用して、まったく別のドメイン上の URL を指定できるか

リダイレクトは簡単に設定できない場合があります。たとえば、サーバーサイドのリダイレクトを作成できないウェブ サーバーを使用しているときに、新しいドメイン名に移行する場合などです。このような場合には、rel=”canonical” リンク要素を使用して、このドメインでインデックス登録の対象になる正確な URL を指定できます。rel=”canonical” リンク要素は絶対的な指示ではなく、ヒントとしてみなされますが、Google では可能な限りこの要素を追跡します。

つまり、解釈が間違っていなければ「rel=”canonical” 属性」は、次のような使い方が出来るということでしょうか?

ブログやサイトを別ドメインに移転した。今までに作ったページも新しいドメインにコピーした。今後は新ドメインで運用するが、これまでの遺産として古いドメインにも記事を残しておきたい。しかし、そうすると後から作った新しいサイトがコピーサイトとして検索エンジンに低く扱われる可能性がある。

そうならないために、今までの(古い)サイトのHTMLに「rel=”canonical” 属性」でコピー済みの新しいサイトの記事を指定しておく。そうすることで検索エンジンには、新サイトを優先するよう要望する。

そうすると「Google では可能な限りこの要素を追跡」してくれるのでしょうか?実は最近、この条件に合致した移転ブログがあります。

パート派遣主婦のぐーたら子育て生活 (長いので以下「パー…」と省略表記)

「パー…」は最近、独自ドメインを取って「ココロデザイン」というサイトに移転しました。その移転の際のリポートを「技術のタマゴ」というブログに書いています。

ということで「技術のタマゴ」を開いたら、こんな記述が見つかりました。

※rel=”canonical”で重複記事の中で、新記事を一番だと主張する
 という案もありましたが、同一ドメイン間じゃないと
 使えないということで、却下になりました。

rel=”canonical”は使わなかったようです。しかしGoogleのページには、こう書いてあります。「リダイレクトを作成できないウェブ サーバーを使用しているときに、新しいドメイン名に移行する場合などです。このような場合には、rel=”canonical” リンク要素を使用して、このドメインでインデックス登録の対象になる正確な URL を指定できます

そうであるなら「同一ドメイン間じゃないと使えない」というのは間違いじゃないでしょうか?

追記:今ご覧いただいているこのブログの移転で試したところrel=”canonical”は適用されました。尚「技術のタマゴ」の記事は訂正されています。

しかし、rel=”canonical” で新サイトを指定できるとしても、ブログで実際にどうやればいいのかという問題があります。すべての記事のヘッダにrel=”canonical”属性で、新しいURLを書き込まないといけませんが、多くの無料ブログのテンプレートでは1記事ごとに違うURLを指定する事は出来ません。

記事の中に書いたら記事毎にURLを変えられるがどうだろうか、と思い調べてみたのですが「rel=canonicalタグによくある5つの間違い | 海外SEO情報ブログ」によると「間違い その5: <body>内のrel=”canonical”」という項目で次のように書いてありました。記事の中に書いても有効化されないようです。

rel=”canonical”はHTMLドキュメントの<head>セクションだけに出現しなければならない。またHTMLの読み取りの問題を避けるために<head>の先頭にできるだけ近いほうがいい。

<body>にrel=”canonical”が出てきたときは無視する。

ファンブログハックの記事から

ファンブログハックに「「タイトルタグの重複」をjavascriptで回避する(ファンブログ、FC2)」という記事があります。JavaScriptを使ってHTMLに書いてあるのと違うタイトルに書きかえたところ、Googleには書きかえたタイトルが反映されたという内容です。

実はこのブログ(移転前の旧ブログ)は今月1日に新しいスキンに変えているんですが、「site:fanblogs.jp/ayzfqir5」をググるとおもしろい結果が出ます。このブログのスキンには、タイトルにページ番号やカテゴリー名を表示させる機能がありません。なので、JavaScriptで書き加えているんですが、スキンを変えて数日で、検索結果に反映されるようになりました。ファンブログハックの記事の通りです。

赤枠内はスクリプトで追加したものですが、見事に反映されています。

検索結果にはJavaScriptで修正したタイトルが表示されている

ヘッダにrel=”canonical” 属性を追加するスクリプト

ということは、JavaScriptで、ヘッダにrel=”canonical” 属性を追加すれば、検索に反映されるのではないだろうか?つまり、新しいサイトを優先して表示してくれるのではないだろうか?と仮定できるのです。もし、それが出来るなら「パー…」にnoindexを指定する必要はなくなります。

とは言ったものの、ページ数がたくさんある時は大変です。ちなみにページが数ページしかない時には、下のようなスクリプトで実現できると思います。

実際にスクリプトを使った処理で rel=”canonical” が適用されるかは不明です。このブログの実際の移転では、この下の「新ドメイン側の.htaccessに旧URLを渡して、振り分ける」方法を使って適用に成功しました。

前提条件として、古い記事のURLはすべて「http://old_url.com/archive/xxx」というフォーマットになっているものとします。URLの中のxxxは数字です。この数字ごとに新しいURLをヘッダに書き加えます。新しいサイトでは、記事の内容ごとに違うブログに分けていたとしても大丈夫です。

<script type="text/javascript"><!--
var urls={
	"001":"http:\/\/hoge.example.com/page_001.html",
	"002":"http:\/\/moge.example.com/page_002.html",
	"003":"http:\/\/kome.example.com/page_003.html"
};

var key=window.location.href.match(/\/archive\/([0-9]+)/);

if(key){
	document.write('\<link rel="canonical" href="'+urls[key[1]]+'"\>');
}
//-->
</script>

これをheadタグの中で、なるべく上の方に書けばいいと思います。古い記事のURLがhttp://old_url.com/archive/001なら「http://hoge.example.com/page_001.html」というように、それぞれの新URLをヘッダに追記します。

しかし、記事が何百ページもあったら上のやり方では無理があります。

新ドメイン側の.htaccessに旧URLを渡して、振り分ける

大抵の無料ブログでは.htaccessは使えないし、だからこの記事のような困りごとになるわけですが、新しいサイトでは.htaccessが使えます。だから新サイトの.htaccessにパラメータを渡してリダイレクトさせればいいわけです。

旧ブログのヘッダには次のように書き加えます。スクリプトで追記したタグが有効に作用するとは断言出来ないので完全なURLを書き込むようにしました。

<link rel=”canonical” href=”http://new_domain.com/url_converter.php?old_url={記事のURLを書き出すタグ}“>

{記事のURLを書き出すタグ}はブログによって違いますが

  • ライブドアブログなら {$ArticlePermalink$}
  • FC2ブログなら <%topentry_link>

となります。

参考:
独自タグ一覧(変数) – livedoor ブログ ヘルプセンター
FC2ヘルプ | FC2ブログ | テンプレート用 変数一覧

これで古いブログのURLが「http://old_url.com/archive/001」である記事が開かれると、ヘッダの中に次のタグが書き込まれます。URLエンコードが出来ないのが心配ですが、このブログでは無事にパラメータを渡せました。

<link rel=”canonical” href=”http://new_domain.com/url_converter.php?old_url=http://old_url.com/archive/001“>

Googleなどの検索エンジンがこのタグを読んだら、新ドメインのサーバに「http://new_domain.com/url_converter.php?old_url=http://old_url.com/archive/001」を問い合わせます。新しいサーバには古いURLがパラメータで渡されるので、それを判断材料に新しいURLに誘導すれば(リダイレクトさせれば)いいわけです。

参考記事:GET送信とは?

サーバー側のリダイレクト手順

ということで、サーバー側で.htaccessを使ってリダイレクトと書きましたが、何百個もある記事を、一定のパターンに沿って書きかえるならともかく、記事ごとに違うブログに振り分けるとなると.htaccessでは大変です。こうなると、旧URLと新URLを紐付けたデータベースを作って処理する方が簡単ではないでしょうか。作るデータベースのtableはこんな仕様になると思います。

CREATE TABLE url(
	old varchar(256),
	new varchar(256)
);

このテーブルに、URL対応表を作ってから、PHP等のインタープリタでアクセスすればいいと思います。アクセスする際は「SELECT new FROM url WHERE old=’xxx’」というクエリで新URLを取れるでしょう。

PHPの場合のソースは次のようになります。

<?php
$host='localhost';
$db='detabase_name';
$user='user_name';
$pwd='password';

$old=$_GET['old_url'];

if(empty($old)){
	header('HTTP/1.1 400 Bad Request');
	return;
}

try{
	$pdo=new PDO('mysql:host='.$host.'; dbname='.$db,$user,$pwd);
	$stmt=$pdo->query('SELECT new FROM url WHERE old="'.$old.'"');
	$row=$stmt->fetch(PDO::FETCH_ASSOC);

	if($row){
		header('HTTP/1.1 301 Moved Permanently'); 
		header('Location: '.$row['new']);
	}else{
		header('HTTP/1.1 404 Not Found'); 
	}
}catch (PDOException $e){
	header('HTTP/1.1 500 Internal Server Error');
}

$pdo=null;

余談ですがPHPコードのみからなるファイルでは、終了タグは書かない方がいいようです。
Zend Framework: Documentation: PHP ファイルの書式 – Zend Framework Manualより

PHP コードのみからなるファイルでは、終了タグ (“?>”) は決して含めてはいけません。これは必須なものではなく、 終了タグを省略することで、ファイルの最後にある空白文字が出力に影響することを防ぎます。

私はHTMLとの混合PHPの場合でも、最後がPHPの場合はいつも閉じタグを書きませんが、エラーが出たことはありません。

このブログが実際に使っているスクリプト

データベースを使わない場合は、連想配列で処理します。実際にこのブログで使っているのはデータベースを使わない以下のスクリプトです。

<?php
if(empty($_GET['old_url'])||!preg_match('|/ayzfqir5/archive/(\d+)|',$_GET['old_url'],$m)){
	header('HTTP',TRUE,400);
	exit();
}

$url_table=array(
	"826" => "1264",
	"825" => "1263",
	"824" => "1262",
	(中略)
	"12" => "587",
	"9" => "586",
	"6" => "585"
);

if(empty($url_table[$m[1]])){
	header('HTTP',TRUE,404);
	exit();
}

header('Location: http://dwm.me/archives/'.$url_table[$m[1]],TRUE,301);

$url_tableの左側のキーが旧ブログのURL、右が新しいブログのURLに当たります。

古いブログのURLは http://fanblogs.jp/ayzfqir5/archive/xxx/0 という形でした。xxx の部分だけ記事毎に違う数字です。その数字部分を正規表現で抽出してキーにします。新しいこのブログのURLは http://dwm.me/archives/xxx という形ですが、古いブログとは番号が違います。それを古いブログのキーと照らし合わせて抜き出し http://dwm.me/archives/ にくっつけて、header関数で返しています。

このブログは実際の移転でこの手法を使い、rel=”canonical”を発動させる事に成功したのですが、どのような効果を発揮したかを別記事「ブログの引越しで rel="canonical" が適用されたら検索結果とアクセス数がこう変わった」にまとめました。