Cloudflareを使ってwwwあり・なしURLを正規化する方法

URLの正規化とは？

Googleなどの検索エンジンは、同じコンテンツを複数のURLでアクセスできるページのことを「重複コンテンツ」と呼んでいます。この重複した状態を回避するのが「URLの正規化」です。

重複した URL を統合する

Github PagesなどでURLを正規化したい場合

Github Pagesなどのサーバーレスホスティングサービスでは、リダイレクト機能が使えない場合があります。その場合は、何かしらの方法でURLの正規化を行ってあげる必要があります。

なお、同じサーバーレスホスティングでも、Netlifyはwwwあり・なしの正規化にデフォルトで対応しているだけでなく、301リダイレクトにも対応しているため、サイト移転など細かい設定が必要な場合は、Netlifyを選ぶことをオススメします。

CloudflareのページルールでURLを正規化する

今回は、Github Pagesなどサーバーサイドでのリダイレクトができないサービスを使っている前提で、CDNサービス・Cloudflareの便利な機能「ページルール」を使って、wwwあり・なしURLを正規化してみます。

ページルールの設定

Cloudflareにログインしたら、設定したいドメインページに入って、上のメニューから「Page Rule」を開きます。Cloudflareでは、無料プランでもドメインごとに3つまでルールが作れるのが嬉しいところです。

今回は、example.comというドメインのwwwあり・なしを「wwwありに正規化」すると仮定して解説していきます。

各項目の設定値は下記の通りです。

各項目の解説

詳しく見てみましょう。

最初の「URL が一致する場合」の項目は、URLマッチパターンです。ここはCloudflareのマッチ記述方式で書きます。

アスタリスク記号がワイルドカードになるので、上記の例では「example.com/以降の全て」にマッチしますので、ドメイン全体に適用できます。

「その後の設定は:」では、「URLの転送設定」を選択肢、今回はURLの正規化なので「301 -永久リダイレクト」を選択します。同じURLの転送でも、メンテナンスなどで「一時的に引越し」をする場合などは302を選びます。

「リダイレクト先のURL」では、マッチしたURLをルールにしたがって変更します。アスタリスク記号は、指定した順番で「$ + 数字」変数に変換されます。

例えば、

example.com/img/*/*.jpg // 例：example.com/img/blog/20200826.jpg
↓
cdn.example.com/$1/imgs/$2.jpg // 例：cdn.example.com/blog/imgs/20200826.jpg

という感じで、使いこなすと、ある程度URLのディレクトリ構造が変わっても上手にリダイレクトできます。

詳しい設定は、公式ガイドをどうぞ。

ワイルドカードの一致と参照について

ページルールの設定を保存したら、即時ルールが適用されて転送が始まっているはずです。これで、サーバーレスでwwwあり・なしの正規化ができました。

Cloudflareを使ってwwwあり・なしURLを正規化する方法をみてきました。

一度設定を覚えておけば誰でも簡単にできるので、この機会にご自身のサイトのURLの正規化を確認しつつ、CloudflareでURLの正規化を設定してみてください。