KiSAKU
技術系8分で読めます

wwwのあるなしで、別のサイトになる

公開 更新
wwwのあるなしで、別のサイトになる

kisaku.sitewww.kisaku.site。どちらを開いても同じサイトが出ます。

しかし機械から見ると、この2つは別のサイトです。今回、計測まわりの設定を3か所やって、そのすべてで「どちらを書くか」を選ばされました。選び方を間違えると、設定したのに数字がいつまでも0のままになります。

この記事で扱うこと

wwwありとwwwなしが別物として扱われる理由、apexドメインにCNAMEを置けないというDNSの制約、そして計測系の3つ(Search Console・GA4・OGP)で同じホスト名に揃える必要があること。

まず用語を整理する

呼び方 意味
apexドメイン
(ゾーンapex、ネイキッドドメイン)
kisaku.site いちばん短い形。前に何も付かない
サブドメイン www.kisaku.site
cms.kisaku.site/wp/
apexの前に名前を足したもの

www は特別なものではありません。cmsblog と同じ、ただのサブドメイン名です。慣習として広まっているだけで、技術的な地位は他と変わりません。

ここが出発点です。www が特別だと思っていると、なぜ別扱いされるのかが理解できません。

なぜ「どちらか」に決める必要があるのか

両方で同じ内容が見られる状態は、放っておくと3つの問題を生みます。

困ること 何が起きるか
検索エンジンから見て重複 同じ内容が2つのURLに存在する扱いになり、評価が分散する
計測が2つに割れる 同じ人が両方を訪れると別の訪問者として数えられる
Cookieが共有されない 片方でログインしても、もう片方では未ログイン扱いになりうる

だから正規のアドレスを1つ決めて、もう片方はそこへ転送する。これが標準的なやり方です。このサイトは www.kisaku.site を正規にして、kisaku.site から転送しています。

なぜ www 側を正規にしたのか

好みではなく、DNSの制約が理由です。

ドメインとサーバーを結びつけるとき、レコードの種類を選びます。

種類 指す先 apexに置けるか
A / AAAA IPアドレス 置ける
CNAME 別のドメイン名 置けない

apexドメインにはCNAMEを置けません。DNSの仕様上、CNAMEは「この名前は別名です」という宣言で、同じ名前に他のレコードを共存させられないためです。apexには NSMX といったレコードが必ず存在するので、CNAMEと同居できません。

これが効いてくるのは、VercelやNetlifyのようなサービスを使うときです。こうしたサービスは配信先のIPアドレスを固定していません。負荷や障害に応じて変わります。だからIPではなく名前で指してほしい——つまりCNAMEを求めます。

ALIAS / ANAME という回避策

「apexでもCNAMEのように振る舞う」独自レコードを用意しているDNSサービスもあります(ALIAS、ANAME、CNAMEフラットニングなど呼び方はさまざま)。ただしこれはDNSの標準ではなく、各社の独自拡張です。使えるかどうかは契約しているDNSサービス次第で、乗り換えの自由が下がります。

まとめると、www 側はCNAMEを素直に置けるのに対し、apex側は置けません。制約の少ないほうを正規にして、制約のあるほうを転送元にする。これが www を正規にした理由です。

逆に、自分でサーバーを持っていてIPアドレスが固定なら、apexを正規にする選択も普通にあります。どちらが優れているという話ではなく、構成によって答えが変わります。

転送しても、統合はされない

ここからが今回の本題です。

転送を設定すると、人が kisaku.site を開いても www.kisaku.site に飛びます。見た目には1つのサイトです。

しかし計測やSEOのツールは、転送を設定したからといって自動で統合してくれません。登録するときにどちらを書いたかで、拾えるものが変わります。

設定した場所 登録した値 間違えるとどうなるか
Search Console
(URLプレフィックス)
https://www.kisaku.site/ データが増えないまま。不具合との区別がつかない
GA4 データストリーム https://www.kisaku.site 設定上の表示がずれる
Next.js の metadataBase https://www.kisaku.site SNS共有時にOGP画像が出ない

いちばん厄介なのは1行目です。間違っていても、エラーは出ません。ただ数字が0のままになります。「まだ検索に載っていないのだろう」と思って何週間も待ってしまう、という失敗が起こりえます。

登録するのは「転送先」

迷ったら、ブラウザのアドレスバーに最終的に表示されているほうを登録します。転送元ではありません。このサイトなら www 付きです。

ドメインプロパティなら分かれない

Search Consoleには、URLプレフィックスとは別にドメインプロパティという種類があります。こちらは www の有無も http / https の違いも区別せず、すべてまとめて扱います。

URL プレフィックス ドメイン
対象 入力したURLの配下だけ すべてのサブドメイン・両プロトコル
確認方法 5種類から選べる DNSのTXTレコードのみ
www の有無 別プロパティになる 区別しない

「それなら最初からドメインで登録すればいい」と思えますが、そう単純でもありません。

ドメインプロパティはすべてのサブドメインを含みます。このサイトには cms.kisaku.site/wp/ というWordPress用のサブドメインがあり、そちらは検索結果に出したくありません。ドメインプロパティにすると、見せたくない側の数字も一緒に入ってきます。

また、確認方法がDNSのTXTレコード追加に限られます。DNSは設定を間違えるとサイト全体が見えなくなる場所です。手軽さでいえばHTMLタグを1行足すほうが安全です。

両方持つという選択

実際には、両方登録して並行して見ることもできます。URLプレフィックスで www 側を細かく見つつ、ドメインプロパティで全体を把握する。どちらか一方を選ばなければならない、という制約はありません。

フロント側での指定

Next.jsでは metadataBase に正規のURLを1か所書きます。

layout.tsx(要点)
const SITE_URL = "https://www.kisaku.site";

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  openGraph: {
    type: "website",
    siteName: "KiSAKU Portfolio",
    locale: "ja_JP",
    url: SITE_URL,
  },
};

これが必要なのは、SNSは相対パスの画像を読めないからです。OGP画像を /ogp.png のように書いても、共有先のサービスはそれをどのドメインの話か判断できません。metadataBase があると、Next.jsが絶対URLに変換して出力してくれます。

ここで www なしを書くと、共有時の画像URLが転送を挟む形になります。転送に対応していないサービスでは画像が表示されません。

確認の仕方

設定が効いているかは、実際にアクセスして確かめます。

転送されているかを見る
curl -sI https://kisaku.site/ | head -5

HTTP/2 308
location: https://www.kisaku.site/

308 は「恒久的な転送」です。検索エンジンに対して「こちらが正規です」と伝える意味を持ちます。302(一時的)だと、その意味が伝わりません。

ブラウザで確認するときの落とし穴

恒久的な転送はブラウザに強くキャッシュされます。設定を直したのに古い転送先へ飛び続ける、ということが起きます。以前、この勘違いで「本番が更新されていない」と思い込んだことがありました。実際にはURLの末尾に適当なクエリを付けるだけで、正しく転送されていることが確認できました。

今回の学び

まず、www は特別な存在ではないということ。cms と同じただのサブドメインです。ここを理解していないと、なぜ別サイト扱いされるのかが腑に落ちません。

次に、どちらを正規にするかは好みではなく制約で決まること。apexにCNAMEを置けないというDNSの仕様が、そのまま結論を導きました。構成が変われば答えも変わります。

そして、転送は人には効くが、ツールには効かないこと。転送を設定しても、Search ConsoleもGA4もOGPも、登録した値のとおりに動きます。3か所すべてで同じホスト名に揃える必要がありました。

最後に、エラーが出ない間違いがいちばん高くつくこと。ホスト名を間違えても、どこにも警告は出ません。ただ数字が増えないだけです。壊れているのか、まだ何も起きていないのか、区別がつきません。沈黙する設定ほど、入れた直後に確かめる価値があります。

← ブログ一覧へ戻る