内部施策10（アノテーション）
最近はレスポンシブサイトが多いけど、
何らかの事情があってPCサイトとスマホサイトのURL
を分けることもあるケロね。
PCは○○.comなのに、
スマホだと○○.com/sp/等にL
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とスマホで分けて読み込むファイルを減らしたい等、仕方がない方もいるケロ。
今日は珍しく、ためになる話でしたね！
コイツめ･･･
アノテーションして、スマホサイトは
生徒がどんぐり君じゃないものにしてやろうか･･･