プラカンブログ
プラカンブログ

プラカンブログ

別URLのスマホサイトの制作にはcanonicalタグとalternateタグを使おう

こんにちは。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ページ規模以上のサイトでなおかつ構築済みである場合には、後から設置するのはなかなかの作業量になってしまうからです。
しかも、設置ミスをした場合には、検索結果に表示自体されなくなってしまうこともあるようです。

ですので打開策として、

  • 思い切ってレスポンシブに変更する
  • ユーザーエージェントで切り分けられるようにする

の2つが候補に上がります。

レスポンシブにするのが可能であるのであれば、これに越したことはありません!
グーグルも基本的にレスポンシブを推奨しています。
ユーザーエージェントで切り分ける方法もありますが、こちらはこちらで注意することも多いので
慎重に進める必要があります。

1ページごとに対策するのが難しい場合は、上記の対策も視野に入れたほうがいいと思います。

まとめ

現在、新規でWEBサイトを作るという場合は、基本的にSPサイトも作ることが当たり前ですので
レスポンシブで構築されます。
ただ、今回のように様々な都合からディレクトリで分けて別URLとしてSPサイトを構築する場合(もしくは作られている場合)もなきにしもあらずなのではないでしょうか。
制作側としては、断然レスポンシブで対応したいところですが、WEB制作もお客さん商売である以上、そうはいかない場合もでてくると思います。

PC・SP別URLで構築する(されている)ならば、きちんとcanonicalタグとalternateタグを設置して検索対策をしていきたいところです。

最後までお読みいただきありがとうございました。

この記事は NAKAI が書きました。

プラカン(PLUS DESIGN COMPANY)が目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

    • お客様のご要望、目的の達成
    • ホームページの利便性や満足度の向上
    • ブランドイメージの向上 など
  2. 仕事の進め方に
    満足していただく

    • スケジュール遅延のないスムーズな進行
    • お客様の理解度、知識、経験に応じた親切で分かりやすい進行
    • セキュリティ意識の高い安全な進行管理 など
  3. サポート・フォーローに
    満足していただく

    • 公開後も安心なサーバー保守、CMS保守、コンテンツの保守管理
    • 集客、コンバージョンを強化するためのアクセスログ解析
    • 集客、コンバージョンを強化するためのコンテンツの改善 など

詳しくはWEBコンサルティングをご覧ください

WEBコンサルティング

ホームページに関するご要望がございましたら、お気軽にご相談ください。

Contact Us

お問い合わせをお考えの方

お問い合わせ

Estimate

お見積りをご希望の方

お見積り

お電話でのお問い合わせ