Web制作実務役立ち

サイトURLをindex.html無しに統一する方法【.htaccessで301リダイレクト】

本ページにはプロモーションが含まれています。

WebサイトのURLですが、デフォルトだといくつかの種類があり、Googleのクローラーが別ページと判断するので、

これがSEO上のマイナスになることがあります。

URLをindex.html無しに統一する方法【htaccessで301リダイレクト】

同じページ一枚だけなのに、4つのURLでアクセスできてしまい、Googleによるページ評価が分散するんですね。

よって、どのURLでアクセスしても、全部一つのURLにリダイレクトさせ、評価を集中させます。

例えばhttps://sample.com/index.htmlにアクセスしても、

https://sample/com/にリダイレクトさせるようにします。

今回紹介するのは、このindex.htmlを、無い方にリダイレクトさせる方法です。

これによって、ページ評価の分散を防げます。

httpをhttpsにリダイレクトさせたり、www.を無い方にリダイレクトさせるのはサーバーの管理画面からできるので、今回は割愛します。

URLをindex.html無しに統一する方法【htaccessで301リダイレクト】

本来はSEO考えるなら、これらもちゃんと設定したほうがいいです。

それでは、早速index.html無しに統一する方法を見ていきましょう。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

❶静的サイトの下層ページのディレクトリ構成について

まずはディレクトリ構成を確認してください。

今回は.htaccessを書いてリダイレクトさせますが、前提として以下のようなディレクトリ構成になっている必要があります。

URLをindex.html無しに統一する方法【htaccessで301リダイレクト】

トップディレクトリにHTMLファイルを乱雑に置くのではなく、ページの親子関係もディレクトリで再現します。

人によっては、トップのディレクトリにabout.htmlなどを置いているかもですが、原則ページ毎にディレクトリ(aboutなど)を切って、その中にindex.htmlを置く形式です。

これでも、https://sample.com/aboutとアクセスすれば、中にindex.htmlさえあれば、aboutページが表示されます。

index.htmlファイルは特殊で、ディレクトリ内で最優先に読まれるファイルになります。

しょーご

色んな名前の.htmlファイルがあると、この後の設定が面倒になります(汗)

サイトURLをindex.html無しに統一する方法【.htaccessで301リダイレクト】
ディレクトリ例

この手法については、「複数ページの静的HTMLサイトのおすすめディレクトリ/フォルダ構成を紹介」で解説しているので、こちらで準備しておいてください。

❷.htaccessでおまじないをかける

VSCodeなどで.htaccessファイルを作成して、以下のコードを貼ってください。

サイトURLの部分はご自身のURLに書き換えてください。

なお、特定のディレクトリにだけ書ける場合は、そこまで書いてください。

例:https://sample.com/about/

RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ https://sample.com/$1 [R=301,L]

これで完成です。

index.html着きのURLにアクセスしても、

自動的にindex.htmlがないページにリダイレクトしました。

補足:htaccessのリダイレクトコードの解説

一応コードの解説をしておきます。

RewriteEngine on

RewriteEngine 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リダイレクトとは?

301リダイレクトは、検索エンジンに古いURLが新しいURLに永続的に移動したことを通知し、検索エンジンのインデックスを更新するのに役立ちます。

今回の場合、SEO評価をindex.html無しの方に1本化できます。

.htaccessを触る時は最新の注意を!!

今回の操作はサーバー全体に影響を及ぼす可能性があります。

もし特定のディレクトリだけに301リダイレクトをかけるなら、そのディレクトリまでのサイトURLを必ず指定するようにしてください。

こういったリダイレクトなどの限りなく実務に近い練習ができる、指定納期ありの模擬コーディング案件課題も出していますので、興味があればチャレンジしてみてください。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});