URLの正規化とは、サイトのURLを一つに固定することを差します。
WebサイトのURLですが、実はデフォルトだといくつかの種類が混在していることがあります。
同じページなのに、4つのURLでアクセスできてしまい、Googleによるページ評価（SEO）が分散するんですね。
よって、どのURLでアクセスしても、全部一つのURLにリダイレクトさせ、評価を集中させる必要があります。
例えばhttps://sample.com/index.htmlにアクセスしても、https://sample/com/にリダイレクトさせるようにします。
今回紹介するのは、このindex.htmlを無い方に301リダイレクトさせる方法です。これによって、ページ評価の分散を防げます。
httpをhttpsにリダイレクトさせたり、www.を無い方にリダイレクトさせるのはサーバーの管理画面からできるので、今回は割愛します。
本来はSEO考えるなら、これらもちゃんと設定したほうがいいです。
それでは、早速index.html無しに統一する方法を見ていきましょう。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
❶静的サイトの下層ページのディレクトリ構成について
まずはディレクトリ構成を確認してください。
今回は.htaccessを書いてリダイレクトさせますが、前提として以下のようなディレクトリ構成になっている必要があります。
トップディレクトリにHTMLファイルを乱雑に置くのではなく、ページの親子関係もディレクトリで再現します。
人によっては、トップのディレクトリにabout.htmlなどを置いているかもですが、原則ページ毎にディレクトリ（aboutなど）を切って、その中にindex.htmlを置く形式です。
これでも、https://sample.com/aboutとアクセスすれば、中にindex.htmlさえあれば、aboutページが表示されます。
色んな名前の.htmlファイルがあると、この後の設定が面倒になります（汗）
この手法については、「複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介」で解説しているので、こちらで準備しておいてください。
❷.htaccessでおまじないをかける
VSCodeなどで.htaccessファイルを作成して、以下のコードを貼ってください。
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ https://sample.com/$1 [R=301,L]これで完成です。
index.html着きのURLにアクセスしても、
自動的にindex.htmlがないページにリダイレクトしました。
補足：htaccessのリダイレクトコードの解説
一応コードの解説をしておきます。
RewriteEngine onRewriteEngine on は、URLリライトと呼ばれる機能を提供します。
URLリライトは、ユーザーがブラウザで入力したURLをサーバーで処理する方法を変更することができます。
たとえば、特定のURLを別のURLにリダイレクトしたり、特定のパターンに一致するURLを別のファイルに転送したりできます。
RewriteCond %{THE_REQUEST} ^.*/index.htmlリクエストがindex.htmlを含むかどうかをチェックする条件を設定しています。
%{THE_REQUEST}は、HTTPリクエストライン全体を表します。
RewriteRule ^(.*)index.html$ https://tensaku-review.sakura.ne.jp/sample/$1 [R=301,L]リクエストが条件に一致した場合に適用されるリライトルールです。
^(.*)index.html$は、末尾がindex.htmlで終わるURLにマッチします。
リクエストのパス部分($1)は、新しいURLの中で保持されます。
[R=301,L]は、301リダイレクトとルールの最後での処理を指示します。
301リダイレクトは、検索エンジンに古いURLが新しいURLに永続的に移動したことを通知し、検索エンジンのインデックスを更新するのに役立ちます。
今回の場合、SEO評価をindex.html無しの方に１本化できます。
.htaccessを触る時は最新の注意を！！
今回の操作はサーバー全体に影響を及ぼす可能性があります。
もし特定のディレクトリだけに301リダイレクトをかけるなら、そのディレクトリまでのサイトURLを必ず指定するようにしてください。
こういったリダイレクトなどの限りなく実務に近い練習ができる、指定納期ありの模擬コーディング案件課題も出していますので、興味があればチャレンジしてみてください。
SEOをきちんと学んで仕事に繋げる
URLの正規化もそうですが、Web制作者として内部SEOもきちんと理解しておくと、案件営業の際に提案がしやすくなります。
そういったSEOの知識を持った制作者はかなりニーズが高く、多くの実装できるマーケターを排出しているのが、本サイトでおすすめしている「WEBMAEKS」になります。
マーケティングスクールの中で、一番実践形式で学べるスクールになるので、「実装×SEO/広告マーケティング」で高単価人材を目指したい人は、ぜひ検討してみてください！
私も受講しながら記事を書いています。↓
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
