リモート開発メインのソフトウェア開発企業のエンジニアブログです

netlifyで独自ドメインを利用するときのリダイレクト設定

netlifyは静的サイトを(基本)無料でホスティングでき、githubとの連携も優れていて簡単にデプロイできるために最近よく利用していますが、netlifyに静的サイトをデプロイすると、以下のようなnetlifyのサブドメインのURLが割り当てられてアクセスすることができます。

https://foo-bar-123abc.netlify.app/

これに自分で取得した独自ドメインを設定することもnetlifyの管理画面から簡単にできますが、このようにして例えばmy-own-domain.jpなどの独自ドメインを設定すると以下の2つのURLから同じページにアクセスすることができていしまい、SEO上の懸念があるためにリダイレクト設定やcanonicalリンクの追加などの対応が必要になります。

https://foo-bar-123abc.netlify.app/

https://my-own-domain.jp/

実際は特に何もしなくても大丈夫だった

このような場合の適切な対処法を調べてみたのですが、結論から書くと同じコンテンツで異なるURLからアクセスできてしまうというSEO上の懸念に関しては「netlifyの方で適切に設定してくれるので特に何もする必要がない」ということがわかったのですが、調べたことを簡単にまとめます。

netlifyのサブドメインへのアクセスはcanonicalリンクが自動的に追加される

netlifyのリダイレクト設定を行うことのできる_redirectsファイルをstaticフォルダ以下に例えば以下のように設定することでnetlifyのサブドメイン(foo-bar-123abc.netlify.app)にアクセスした場合に自動的に独自ドメイン(https://my-own-domain.jp)に301リダイレクトを行うことができ、以前はこのような設定が推奨されていたようでした。

https://foo-bar-123abc.netlify.app/* https://your-own-domain.jp/:splat 301!

参考リンク: https://www.yo1000.com/netlify-subdomain-redirects

しかし、2020年3月25日のnetlifyの記事による発表によると、netlify側でこのような設定をする必要のないように新たな変更が加えられたようで、現在では自動的にcanonicalリンクが付与されることで、SEO上の懸念はなくなったようなので、こちら側では特に何かを設定する必要はなくなりました。

試しにcurlの—headオプションで実際にcanonicalリンクが設定されているか確認してみますと、netlifyのサブドメインにアクセスした場合はきちんとcanonicalリンクが設定されていることがわかりました。(urlはダミーのものです)

curl https://foo-bar-123abc.netlify.app —head

HTTP/2 200
cache-control: public, max-age=0, must-revalidate
content-length: 0
content-type: text/html; charset=UTF-8
date: Wed, 24 Jun 2020 03:58:33 GMT
etag: "a6c6629461738611341a643e6bcbf9d8-ssl"
link: <https://my-own-domain.jp/>; rel="canonical"    // canonicalリンクが付与されている!
strict-transport-security: max-age=31536000
age: 0
server: Netlify

ただ、このようなcanonicalでの対応ですと、SEO上の問題はないものの以前のURLにアクセス自体は可能になっていることにはご注意ください。もしnetlifyサブドメインにユーザーがアクセスできないようにする必要があるのでしたら_redirectsファイルを作成しての設定が必要になりそうですが、基本的にはユーザーがnetlifyのサブドメインを知ることのできる方法はないと思うので、引き続きアクセスできるようにしておいて問題なさそうです。

まとめ

netlifyは静的サイトを無料でホスティングできる便利なサービスですが、今回の記事に関することなど使い勝手が更によくなっているようですので、今後も積極的に使っていきたいと思います!


← 前の投稿

TypeScriptを手軽に実行できるPlayground環境の作り方

次の投稿 →

PayPal vs. Stripe

コメントを残す