HTMLサイトのURLから「.html」を消してみた。htaccessで整える方法とは？

前回は、静的HTMLサイトをエックスサーバーに公開した話をしました。

前回の記事はこちらです。

静的HTMLサイトをエックスサーバーに公開してみた。アップロードと注意点とは？

HTMLサイトのURLから「.html」を消してみた

今回のコーポレートサイトは、静的HTMLサイトです。

そのため、ファイルとしては、次のようなHTMLファイルがあります。

index.html
guide.html
difference.html
reason.html
company.html
inquiry.html

普通に公開すると、URLは次のようになります。

https://conohaya.com/guide.html
https://conohaya.com/company.html
https://conohaya.com/inquiry.html

ただ、今回は、この形にはしませんでした。

次のように、拡張子なしのURLにしました。

見た目の違いは、小さいです。

でも、サイト全体の印象としては、意外と大きい部分でした。

なぜ、URLから「.html」を消したのか？

URLから「.html」を消した理由は、主に次の通りです。

URLを、すっきり見せたかった
WordPressサイトに近い、自然なURLにしたかった
ページ名を、分かりやすく見せたかった
サイト全体の印象を、整えたかった
今後の運用でも、URLを扱いやすくしたかった

静的HTMLサイトだからといって、URLまで昔ながらに見せる必要はありません。

中身はHTMLファイルでも、見えるURLは自然に整えられます。

URLは、サイトの印象にも関わる

URLは、細かい部分です。

でも、読者が目にすることがあります。

例えば、SNSで共有するとき。
メールで案内するとき。
ブログ記事からリンクするとき。

そのとき、URLがすっきりしていると、見た目の印象も良くなります。

今回のURL設計

今回のコーポレートサイトでは、次のようなURLにしました。

ファイルとしてはHTMLですが、URLとしてはシンプルに見えるようにしました。

.htaccessでURLを整えた

今回、URLから「.html」を消すために、.htaccessを使いました。

.htaccessは、Apache系のサーバーで使える設定ファイルです。

エックスサーバーでも、サイトのURL制御などに使えます。

.htaccessで行ったこと

今回の設定では、主に次のことを行いました。

index.htmlを、トップページへ転送する
.html付きURLを、.htmlなしURLへ転送する
.htmlなしURLで、対応するHTMLファイルを表示する
末尾スラッシュの扱いを、整える
404ページを、指定する

これにより、HTMLファイルを使いながら、見えるURLは拡張子なしにできます。

つまり、裏側では「guide.html」を表示しつつ、表側では「/guide」に見せる形です。

「.html付きURL」をどう扱うか？

URLから「.html」を消す場合、考えるべきことがあります。

それが、「.html付きURL」にアクセスされたときの扱いです。

2つのURLが存在すると、分かりづらい

仮に、次の2つが両方表示される状態だとします。

https://conohaya.com/guide
https://conohaya.com/guide.html

中身が同じでも、URLとしては別物です。

読者にとっても、検索エンジンにとっても、少し分かりづらくなります。

そのため、今回は「.htmlなしURL」を正規URLにしました。

301転送で、正規URLにそろえる

.html付きURLにアクセスされた場合は、.htmlなしURLへ転送するようにしました。

例えば、次のような形です。

https://conohaya.com/guide.html → https://conohaya.com/guide
https://conohaya.com/company.html → https://conohaya.com/company
https://conohaya.com/inquiry.html → https://conohaya.com/inquiry

このように、URLをひとつにそろえることが大切です。

サイト内リンクも、.htmlなしのURLに統一しました。

canonicalタグも、拡張子なしURLにした

URLを整えるときは、canonicalタグも確認します。

canonicalタグとは、検索エンジンに正規URLを伝えるためのタグです。

今回のサイトでは、canonicalタグも拡張子なしURLにしました。

canonicalタグの例

例えば、進め方ガイドの正規URLは、次の形です。

https://conohaya.com/guide

そのため、canonicalタグでも、このURLを指定します。

ページの表示URL、サイト内リンク、canonicalタグをそろえることで、サイト全体が整理されます。

サイト内リンクも、すべて見直した

URLから「.html」を消す場合、サイト内リンクも見直す必要があります。

ページ本体のURLだけ整えても、リンクに「.html」が残っていると、統一感がありません。

見直したリンク

今回のサイトでは、次のようなリンクを確認しました。

ヘッダーメニュー
フッターメニュー
トップページ内のリンク
下層ページ内のリンク
CTAボタン
規約ページへのリンク
お問い合わせページへのリンク

これらを、基本的に拡張子なしURLへ統一しました。

例えば、以下のような形です。

/guide
/difference
/reason
/mission
/company
/inquiry

小さな作業ですが、サイト全体の整い方に関わります。

sitemap.xmlも、拡張子なしURLにした

サイトマップも、拡張子なしURLにしました。

sitemap.xmlは、検索エンジンにサイト内のURLを伝えるためのファイルです。

ここに「.html付きURL」が残っていると、正規URLとのズレが出ます。

サイトマップに入れたURL

今回のサイトマップでは、次のようなURLを入れています。

https://conohaya.com/
https://conohaya.com/guide
https://conohaya.com/difference
https://conohaya.com/reason
https://conohaya.com/mission
https://conohaya.com/company
https://conohaya.com/template
https://conohaya.com/inquiry

サイト内リンク、canonicalタグ、サイトマップ。

この3つをそろえると、URL設計がかなり整理されます。

URLから「.html」を消すメリットとは？

URLから「.html」を消してみて、良いと感じた点があります。

メリット1：URLがすっきり見える

一番分かりやすいメリットは、URLがすっきり見えることです。

https://conohaya.com/guide.html
https://conohaya.com/guide

比べると、後者の方が自然に見えます。

小さな違いですが、サイト全体の印象に関わります。

メリット2：WordPressサイトのように見える

WordPressでは、拡張子なしのURLが一般的です。

そのため、静的HTMLサイトでも拡張子なしにすると、URLとして自然に見えます。

「いかにもHTMLファイル」という印象が弱くなります。

メリット3：リンクしやすい

短くて分かりやすいURLは、リンクしやすいです。

ブログ記事から、リンクしやすい
SNSで、共有しやすい
口頭でも、案内しやすい
資料にも、載せやすい

今回の実践記でも、コーポレートサイト内の各ページへ何度もリンクしています。

URLがすっきりしていると、記事内でも自然に使えます。

メリット4：サイト設計が整って見える

URLは、サイト設計の一部です。

見た目のデザインだけでなく、URLまで整っていると、サイト全体がきちんとして見えます。

細部ですが、信頼感にも関わる部分です。

URLから「.html」を消すときの注意点

一方で、注意点もあります。

URLを変える作業は、サイト全体に関わるため、慎重に進める必要があります。

注意点1：.htaccessの書き方に注意する

.htaccessは、便利ですが、書き方を間違えるとサイトが表示されなくなることがあります。

特に、転送設定や内部表示の設定は、慎重に扱います。

無限リダイレクトになっていないか？
トップページが、正しく表示されるか？
下層ページが、正しく表示されるか？
存在しないページで、404が出るか？
画像やCSSの読み込みに、影響がないか？

変更したら、必ず公開環境で確認します。

注意点2：リンクの書き換え漏れに注意する

URLを拡張子なしにする場合、サイト内リンクの書き換え漏れに注意します。

HTMLファイルのどこかに「.html付きURL」が残っていると、URL統一が中途半端になります。

ヘッダー
フッター
ボタン
本文リンク
フォームの参照URL
構造化データ
サイトマップ

見えるリンクだけでなく、見えない設定も確認することが大切です。

注意点3：キャッシュの影響に注意する

URLや.htaccessを変更したあとは、キャッシュの影響にも注意します。

古い設定が残っているように見えることがあるからです。

ブラウザキャッシュ
サーバーキャッシュ
高速化機能
CDNを使っている場合は、CDNキャッシュ

反映されないときは、まずキャッシュを疑うと、切り分けしやすくなります。

注意点4：旧URLからの転送を考える

すでに「.html付きURL」を公開していた場合は、旧URLからの転送を考えます。

何もせずにURLを変えると、古いリンクから来た人が迷う可能性があります。

そのため、.html付きURLへアクセスされた場合は、拡張子なしURLへ転送するのが自然です。

今回も、その方針で整えました。

実際に確認したこと

URL設定を変更したあと、実際に公開環境で確認しました。

確認したURL

https://conohaya.com/
https://conohaya.com/index.html
https://conohaya.com/guide
https://conohaya.com/guide.html
https://conohaya.com/company
https://conohaya.com/company.html
https://conohaya.com/inquiry
https://conohaya.com/inquiry.html

確認したのは、主に次の点です。

.htmlなしURLで、ページが表示されるか？
.html付きURLが、.htmlなしURLへ転送されるか？
index.htmlが、トップページへ転送されるか？
存在しないURLで、404ページが表示されるか？
CSSや画像が、正しく読み込まれるか？
スマホでも、問題なく表示されるか？

URL設定は、見た目だけでは分かりません。

実際にアクセスして、動きを確認することが大切です。

SEOへの影響はどう考えたか？

URLを変更すると、SEOへの影響も気になります。

今回のように、正規URLを整理する場合は、次の点を意識しました。

SEOで意識したこと

正規URLを、ひとつにそろえる
canonicalタグを、正規URLに合わせる
サイト内リンクを、正規URLに統一する
sitemap.xmlも、正規URLにする
.html付きURLは、正規URLへ転送する

大切なのは、検索エンジンに「このURLが正規です」と分かりやすく伝えることです。

URLが複数ある状態より、ひとつにそろえた方が管理もしやすくなります。

静的HTMLサイトでも、URLは整えられる

今回やってみて感じたのは、静的HTMLサイトでも、URLは十分に整えられるということです。

WordPressでなくても、次のような設定はできます。

拡張子なしURL
301転送
canonicalタグ
サイトマップ
404ページ

静的HTMLサイトは、昔ながらの見た目にしなければいけないわけではありません。

作り方次第で、かなり自然なサイトにできます。

今回のコーポレートサイトでも、そこを大切にしました。

まとめ

今回は、HTMLサイトのURLから「.html」を消した話をしました。

要点をまとめます。

静的HTMLサイトでは、通常「.html付きURL」になりやすい
.htaccessを使うと、拡張子なしURLに整えられる
今回は、/guide や /company のようなURLにした
.html付きURLは、.htmlなしURLへ転送した
canonicalタグ、サイト内リンク、sitemap.xmlも、正規URLにそろえた
URLがすっきりすると、サイト全体の印象も整う
.htaccessの設定は、公開環境で必ず確認する
キャッシュやリンク漏れにも、注意が必要

URLから「.html」を消すことは、必須ではありません。

ただ、コーポレートサイトとして見せるなら、URLまで整えておく価値はあります。

今回のサイトでも、見た目のデザインだけでなく、URLの見え方も大切にしました。

実際のサイトはこちらです。

このは屋のコーポレートサイトを見る

このは屋

このは屋｜自分の商売を、自分で育てる。 AIとテンプレートを味方に、外注業者へ依存せず、商売の仕組みを自分の手でつくるための学び舎。

あなたが静的HTMLサイトを作る場合も、URLをどう見せるか、一度考えてみることをおすすめします。

小さな違いですが、サイト全体の印象や管理のしやすさに関わります。

次回は、AIで作ったサイトのスマホ改行を整えた話をします。

日本語サイトならではの、かなり地味で、かなり大切な調整です。