お問い合わせはコチラから

【.htaccess】ディレクトリからページ内アンカーにリダイレクトする【Tips】

サイト運営

この記事は、縦長サイトでページ内アンカーを使っているときに、ディレクトリからページ内アンカーに.htaccessを使ってリダイレクトする方法について書かれています。

少し前に縦長サイトが流行しました。縦長サイトだとページ内アンカーにメニューからリンクを張りスムーズスクロールして移動することが多いです。

しかし、縦長サイトを運用しているといくつか問題が出てきます。

縦長サイトの問題点

縦長サイトは多くの場合、Webに時間をかけずに単一ページでとりあえず作ったということが多いです。運よくWebが成長してくるとコンテンツが増えてきてどんどん縦長になっていきます。

縦長サイトには以下のような問題点があります。

  1. コンテンツが増えてくるとサイトが長くなりすぎて、ユーザビリティが落ちる
  2. 内部リンクが他のページから張りにくく、SEO的に弱い
  3. 外部からリンクを張るときの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は本当はいらないはずだが、付けないと動作しないのでつけている

まとめ

こういう重箱の隅の話は、必要な時に探しても中々見つからないものですので自分用のメモとして残しておきます。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました