こんにちは。NAKAIです。
今回はcanonicalタグとalternateタグについて書こうと思います。
というのも先日仕事をしていて、以下のような問題が起こりました。
「PCでサイト検索しているのに、別ディレクトリ（つまり別URL）で制作していたスマホ（以下、SP）サイトの方が上位に表示されている...。あるいはその逆の問題も起きている...。」
これはつまりどういうことかというと
例えば、
PC：https://www.kintoredaisuki.com/
SP：https://www.kintoredaisuki.com/sp/
（※サイト名は一例です。）
というようにPCとSPサイトでURLを別々にして作られたサイトで、
検索エンジンにPCサイト・SPサイトをきちんと認識させることができていなかったことから発生した問題でした。
そこで対策として
PC版のhtmlのソースにalternateタグを、
SP版のhtmlのソースにcanonicalタグを追記して
URLは違うがPC版・SP版それぞれ内容は同じですよ！と検索エンジンに教える必要がありました。
もっとも、最近はほとんどのサイトが「レスポンシブ」と言って1ソースの構造で作られています。
ブレイクポイントと言ってウィンドウ幅を設定し、それを取得することでPC版・SP版を切り分ける手法です。
ですので基本的にこういった問題は発生し得ないのですが、様々な制作状況によってはPC版をまず作成後、SPサイトを後からSP用ディレクトリを用意して制作するというような場合もあります。
今回はまさにこのパターンで、私が業界に入った時はレスポンシブが当たり前に浸透していたので問題が発生した時かなり面食らいました。
しかし対策作業としては意外と簡単です。
今後PC・SP別URLで分けて制作するどなたかの参考になればと思い書いていこうと思いました。
1、alternateタグをPC版のhtmlに記述
まず、PC版のhtmlのheadタグ内に以下を記述します。
<link rel="alternate" media="only screen and (max-width: 768px)" href="https://www.kintoredaisuki.com/sp/aaa.html">
※サイト名はテキトーです。。
mediaの中のwidthは任意の数値に変更してください。
このように記述することで「SP版はこっちにあります」と
検索エンジンに認識させることができます。
ちなみにalternateとは「代わりの」という意味があるようです。
余談ですがオルタナティブ・ロック（オルタナなどと称されてますね）というジャンルがありますが、これも意味的には似ていて「代わりの、代替の」とか「慣習的な方法をとらない」などといったことから由来するようですね。
2、canonicalタグをSP版のhtmlに記述
次に、SP版のhtmlのheadタグ内に以下を記述します。
<link rel="canonical" href="https://www.kintoredaisuki.com/aaa.html">
※しつこいですがサイト名はテキトーです...。
深く突っ込まないでください。。
こうすることで「このSP版ページは記述したURLのSP版のページです」と
検索エンジンに伝えることができます。
注意点としてはcanonicalタグを設定したページとhrefで記述したURLのページ内容は同じにしなくてはなりません。
以上で作業完了です。
その他の対策方法はないのか
その他の対策として、そもそもPC・SP別URLにするのをやめるという手もあります。
なぜなら、上記canonicalタグとalternateタグは対応するページ全てにそれぞれ記述する必要があるため、
数100ページ規模以上のサイトでなおかつ構築済みである場合には、後から設置するのはなかなかの作業量になってしまうからです。
しかも、設置ミスをした場合には、検索結果に表示自体されなくなってしまうこともあるようです。
ですので打開策として、
- 思い切ってレスポンシブに変更する
- ユーザーエージェントで切り分けられるようにする
の２つが候補に上がります。
レスポンシブにするのが可能であるのであれば、これに越したことはありません！
グーグルも基本的にレスポンシブを推奨しています。
ユーザーエージェントで切り分ける方法もありますが、こちらはこちらで注意することも多いので
慎重に進める必要があります。
１ページごとに対策するのが難しい場合は、上記の対策も視野に入れたほうがいいと思います。
まとめ
現在、新規でWEBサイトを作るという場合は、基本的にSPサイトも作ることが当たり前ですので
レスポンシブで構築されます。
ただ、今回のように様々な都合からディレクトリで分けて別URLとしてSPサイトを構築する場合（もしくは作られている場合）もなきにしもあらずなのではないでしょうか。
制作側としては、断然レスポンシブで対応したいところですが、WEB制作もお客さん商売である以上、そうはいかない場合もでてくると思います。
PC・SP別URLで構築する（されている）ならば、きちんとcanonicalタグとalternateタグを設置して検索対策をしていきたいところです。
最後までお読みいただきありがとうございました。
