rel=”canonical”をHTTP headerに追加

静的ファイルのURL正規化

cssファイルにcanonical属性を付加する方法

ブラウザのキャッシュを制御する目的でダミーのGet引数を追加してキャッシュファイルを参照しない方法がある。cssやjsファイルなどの静的なファイルの末尾に時間値などを付けてURLを毎回異なるものにすることでキャッシュファイルの参照を回避する方法があげられる。具体的には、

<link rel="stylesheet" type="text/css" href="/css/foundation.css?1387072929" />

上のようにGet引数を付加する方法のことで、キャッシュファイルの参照問題については効果的な方法になる。しかし、検索エンジンなどのクローラも同様のURLで静的ファイルを参照しているため、毎回異なるURLをクロールしている状況はクローラビリティの観点から問題になる可能性がある気がしている。検索エンジンのロボットに対しては、以下のように引数を付加しないURLで静的ファイルを読ませる方法もあるが、

<link rel="stylesheet" type="text/css" href="/css/foundation.css" />

このやり方は悪質ではないものの、クローキングに該当する可能性がなくもない。

seoの手法として

URLの正規化

という方法がある。一般的にはHTMLページのhead内にcanonical属性を記述することでURLの正規化は行われる。しかし、今回の場合はHTMLファイルではなく、cssファイルである。cssやjsファイルの正規化する方法を以下に書いてみたい。

apacheのconfでHTTP headerを追加しcssのURLを正規化

cssやjsファイルにはhtmlのhead領域というものが無い。しかし、canonical属性はhead領域だけでなく、HTTP headerにも記述することができる。HTTP headerの設定は、apacheのconfやhtaccessで設定を行うことができる。

<LocationMatch "/css/foundation.css?">
    Header add Link "<http://test.net/css/foundation.css>; rel=\"canonical\""
</LocationMatch>

LocationMatchで条件を設けたうえで、headerを追加している。

条件については、最後のクエスチョンマークがポイントで、?が無い場合は、headerを追加しないことなる。上のようにapache側で設定するとレスポンスヘッダとして、

Link	<http://test.net/css/foundation.css>; rel="canonical"

という項目が追加される。

http headerはfirefoxやchromeなどのコンソール機能を利用して確認することができる。この方法でURLの正規化を行うことで検索エンジンのロボットが繰り返しランダムな引数を付けたURLにアクセスする現象を回避できるのか確認し、その結果をブログで報告できればと思う。

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

rel=”canonical”をHTTP headerに追加の記事にコメントを投稿