あそびラボ

お問い合わせ

MENU

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

内部施策10(アノテーション)2020.02.29

内部クエスト10

かえる先生
かえる先生

最近はレスポンシブサイトが多いけど、
何らかの事情があってPCサイトとスマホサイトのURL
を分けることもあるケロね。

どんぐり君
どんぐり君

PCは○○.comなのに、
スマホだと○○.com/sp/等にURLがなってるサイトですよね?

かえる先生
かえる先生

うん。
でも「内部施策2」で言ったように、
URLは基本的には1つの方がいいケロ。

どんぐり君
どんぐり君

でも、出来ない時はどうするんですか?

かえる先生
かえる先生

そのために今日は、「アノテーション」という設定を説明するケロ!

アノテーションとは?

アノテーションとは、PCサイトとスマホサイトを別々に作っていて複数のURLが存在する場合、
そのことを検索エンジンに認識させる設定のことを言います。

PCサイトとスマホサイト、それぞれの「headタグ」の中に適切なタグを設定することで、
URLは2種類あるけど同じサイトなんだよ~ということを検索エンジンに認識させることが出来ます。

どんな場合にアノテーションを使うの?

サイトの作りによっては、PCサイトとスマホサイトのURLが異なる時があります。
こういう場合にアノテーションの設定が必要になります

■例えば下記のようなURLの場合
———————————————-
PCサイト    https://example.com/
スマホサイト https://example.com/sp/
———————————————-

PCサイトとスマホサイトを分けて作っている場合でも、ほとんどの場合は内容は同じだと思います。
(見え方やデザインが異なる)

URLが2種類ある時にアノテーション設定をしていない場合、検索エンジンが重複サイトと認識してしまい、
SEO評価が落ちてしまう可能性があります。

それを解決してくれるのが、アノテーションです。

アノテーションの設定方法は?

PCサイト・スマホサイト、それぞれのページ内に指定のタグを設定します。

■PCサイト側の設定
headタグの中にlink rel=“alternate“を入れて、スマホサイトのURLを指定します。

■スマホサイト側の設定
headタグの中にrel=”canonical“を入れて、PCサイトのURLを指定します。

この設定をすることで、
—————————————-
・PCサイトの他にスマホサイトがある
・スマホサイトの他にPCサイトがある
—————————————-
ということを、PC・スマホサイトの両方から検索エンジンに認識させることができます。

■PCサイト(トップページ)の設定例

<link rel=”alternate” media=”only screen and (max-width: 750px)” href=”https://example.com/sp/” />

alternateタグを設定することで、このサイトには「別URLでスマホサイトがある」と
検索エンジンが認識してくれるため、関係性を考慮したうえでSEO評価をしてくれるようになります。

■スマホサイト(トップページ)の設定例

<link rel=”canonical” href=”https://example.com/” />

canonicalタグを設定することで、PCサイトとスマホサイトが相互に関係していることを
検索エンジンが認識してくれるようになります。

アノテーションは、必ず設定しないといけないの?

必ずしもアノテーション設定しないといけないわけではありません。
しかし、検索エンジンに重複サイト(コンテンツ)とみなされてしまった場合、
SEO評価が下がったり分散されてしまうため、上位表示が難しくなってしまいます。

また、外部からの被リンクの効果が下がる(分散する)可能性もあります。
せっかく外部から頂いた被リンクなので、評価が分散しないように、URLは2つあるけど
同じサイトなんだよ~と検索エンジンに伝えておいた方が安心です!

あと、アノテーションをしていない場合、Googleのモバイルフレンドリーテストを行った際に、
スマホ対応していないサイトだと評価されてしまうことがあります。

そのため、多少面倒でもアノテーションの設定をしておいた方がメリットがあるかと思います。

どんぐり君
どんぐり君

今日は難しかったですね・・・
でも、前から少し気になってたことなので助かりました。

かえる先生
かえる先生

本当は、URLもソースも1つの方が管理や更新もしやすいので
ベストなんだけどね。
デザインを完全に分けたい場合や、アクセス数が多すぎて、
CSS等をPCとスマホで分けて読み込むファイルを減らしたい等、
仕方がない方もいるケロ。

どんぐり君
どんぐり君

今日は珍しく、ためになる話でしたね!

かえる先生
かえる先生

コイツめ・・・
アノテーションして、スマホサイトは
生徒がどんぐり君じゃないものにしてやろうか・・・

へっぽこ SEO講座一覧へ

池袋・練馬近郊でSEO対策のご相談をされたい方はこちら ▶