今まで GitHub Pages, Netlifyをメインで使っていたけど、Cloudflare Pages, Vercel も使ってみた。

モチベーションとしては、GitHub Pages の機能にはない、PRベースのPreview App機能が試したかったから。

その用途でさればNetlifyで実質事足りるのだけど、ナウい感じのサービスを使いたく今回前述の2つのサービスを使ったわけだ。

Cloudflare Pages, Vercelどちらも素晴らしかったけど、SEOが問題となった。メインとなるProductionページはGitHub Pagesを使いたいわけだけど、Preview Appを使ってしまうと各々のサービスの独自ドメイン上のProductionページにデプロイされてしまい、SEOにおける重複コンテンツとなってしまう。

Netlify Snippet injection

Netlify の Snippet injectionを使うとこれは解決できる。

つまり、HTMLの<head>セクション内に noindex を埋め込んでやると良い。

Snippet injection | Netlify Docs

残念ながらこの機能と同等なものは Cloudflare Pages, Vercel どちらにも存在しないようだ。

Google noindex

余談だがGoogle noindexの設定方法として robots.txtを利用する方法を考えていたが、robots.txtでnoindexは設定できないらしい。

重要: noindex ディレクティブが有効に機能するようにするためには、robots.txt ファイルでページをブロックせず、クローラがページにアクセスできるようにする必要があります。ページが robots.txt ファイルでブロックされるか、クローラがページにアクセスできないと、クローラは noindex ディレクティブを認識しません。そのため、たとえば他のページからリンクされていると、ページは検索結果に引き続き表示される可能性があります。

noindex を使用して検索インデックスをブロックする

下記2つの方法で noindex 設定が可能。

  1. metaタグ
    • <meta name="robots" content="noindex">
      
  2. HTTP レスポンス ヘッダー
    • X-Robots-Tag: noindex

Netlifyは2の仕組みでnoindexしている。

X-Robots-Tag: noindexというヘッダを返してくれるようになっています。これによりインデックス化されないようです。

Netlifyのプレビューは、 検索エンジンにインデックスされないように配慮されている - Qiita