この記事は、縦長サイトでページ内アンカーを使っているときに、ディレクトリからページ内アンカーに.htaccessを使ってリダイレクトする方法について書かれています。
少し前に縦長サイトが流行しました。縦長サイトだとページ内アンカーにメニューからリンクを張りスムーズスクロールして移動することが多いです。
しかし、縦長サイトを運用しているといくつか問題が出てきます。
縦長サイトの問題点
縦長サイトは多くの場合、Webに時間をかけずに単一ページでとりあえず作ったということが多いです。運よくWebが成長してくるとコンテンツが増えてきてどんどん縦長になっていきます。
縦長サイトには以下のような問題点があります。
- コンテンツが増えてくるとサイトが長くなりすぎて、ユーザビリティが落ちる
- 内部リンクが他のページから張りにくく、SEO的に弱い
- 外部からリンクを張るときのURLがページ内アンカーになり、不自然
縦長サイトの問題点を解消するには？
先ほど3つ挙げた縦長サイトの問題点の解決方法を見ていきましょう。
縦長ページを複数に分割する
問題点1～3を解決するには、縦長ページを複数に分割するのが解決策になります。しかし、そうするとURLが変わってしまいます。
URLが変更になっても、過去のURLから新しいページにリダイレクトしてやればいいわけです。ページ内アンカーをディレクトリにリダイレクトすれば、過去のURLへのリンクが残っていても問題ありません。
この場合は、『ページ内アンカーをディレクトリにリダイレクト』になります。
縦長ページのページ内アンカーをディレクトリに偽装する
ページ分割まではしたくないというのであれば、3番の問題点だけをリダイレクトによって解決することができます。
この場合は、『ディレクトリをページ内アンカーにリダイレクト』になります。
リダイレクトの設定
Apacheの.htaccessにリダイレクトの設定を書けば、アンカーもリダイレクトできます。
アンカーを含むリダイレクトは[NE]を使います。
NE|noescape
By default, special characters, such as & and ?, for example, will be converted to their hexcode equivalent. Using the [NE] flag prevents that from happening.RewriteRule “^/anchor/(.+)” “/bigpage.html#$1” [NE,R]
The above example will redirect /anchor/xyz to /bigpage.html#xyz. Omitting the [NE] will result in the # being converted to its hexcode equivalent, %23, which will then result in a 404 Not Found error condition.
『ページ内アンカーをディレクトリにリダイレクト』
#contactというアンカーを/contactにリダイレクトする例
こちらは、.htaccessでは対応できません。マッチ側の#がapacheに渡されないためです。
javascriptで行うことが可能です。
function locationHashChanged() {
if (location.hash === "#contact") {
window.location.replace("http://mysite.com/contact");
}
}
window.onhashchange = locationHashChanged;参考：Redirect an anchor link to a new URL
『ディレクトリをページ内アンカーにリダイレクト』
/contactをアンカー#contactにリダイレクトする.htaccessの例
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^contact /#contact [R,L,NE]
</IfModule>[R,L,NE]の説明
NEはNo escapeで#を含むときに必要
Rはアンカーにブラウザを飛ばす設定
Lは本当はいらないはずだが、付けないと動作しないのでつけている
まとめ
こういう重箱の隅の話は、必要な時に探しても中々見つからないものですので自分用のメモとして残しておきます。
