皆さんメリークリスマス！
今日も元気にSEOやってる3人娘です！
コラムも第三回を迎え、しかも今日はクリスマス。見計らったかのようなタイミング！しかし書くことはクリスマスのことではありません！
スマートフォンが普及している今、デバイス毎にサイトを持っている、なんてサイトさんも多いのではないでしょうか？そんな時に使うアノテーションタグとは？そんなところに着目をしてみます。
クリスマスなんて関係ないぜ！コラムスタートです☆
アノテーションタグってどんな効果があるの？
担当者：きょん
みなさんが普段ご覧になるサイトは、デスクトップで閲覧した時と、スマートフォンで閲覧した時とではURLが変わるでしょうか？
有名なサイトのほとんどはURLが変わらずにそれぞれのデバイスに合わせたレイアウトに切り替わることが多いと思います。
実際にGoogleも１つのURLからそれぞれのデバイスに合わせて閲覧ができるこちらの方法を推奨していますが、そういったサイトばかりではありません。
世の中には同じサイトなのにデバイス毎にURLが存在するサイトが多数ありますので、今回はそういったパターンの時のお話です^^
例えば
【デスクトップ用】http://example.com/
【スマートフォン用】http://smart.example.com/
【モバイル用】http://mobile.example.com/
という、同じ内容のサイトなのに3つのURLが存在するとします。
ロボットはこの3つをURLが違う＝別サイトとし、同じサイトだと認識できない場合があります。
そうなると何が問題なのか…
同じ内容のサイトが複数存在することとなり、サイトに対するGoogleからの評価が拡散してしまう可能性があるのです(T_T)
こうなるとSEO的にも大・問・題ですね！
そこで！この問題を解決するのに必要となってくるのが、今回のテーマである『アノテーションタグ』です。
さっそく「アノテーションってなに？」って方もいらっしゃるかと思いますが、アノテーション自体の意味としては「代替え」「交互」といった意味になります。
要はロボットにhttp://example.com/のサイトにはスマートフォンver.とモバイルver.もあるよ！って教えてあげるためのタグなのです。
際の記述方法としては
デスクトップ用URL：http://examplecom/ のHTMLに
<link rel="alternate" media="only screen and(max-width:640px)"href="http://smart.example.com/"/><!-- スマートフォン用サイトの記述 --> <link rel="alternate" media="handheld" href="http://mobile.example.com/" /><!-- モバイル用サイトの記述 -->
と記述します。
この記述をすることによって
という関係性をロボットに伝えることができるのです☆
そして、最後にもう一つ。めっちゃ大事なこと。
デスクトップ用URLからみたスマートフォン用・モバイル用URLの関係性はアノテーションタグで解決なのですが、今度は逆にスマートフォン用・モバイル用URLからみたデスクトップ用URLとの関係も示さないといけません。
このままだと片思いみたいな感じなので両思いにしてあげましょう(!?)
その方法として「canonicalタグ」を使用します。
canonicalタグを使用する際のよくあるパターンですが、
http://examplecom/ [wwwあり]
http://www.examplecom/ [wwwなし]
といったURLは違うけど同一ページが複数ある時に使用します。
こちらも最初にお話した内容と同様に、Googleからの評価を拡散させないためにURLを1つに統一する必要があります。
http://examplecom/ のURLに統一する場合は、同一ページ全てのheadタグ内に
<link rel="canonical" href="http://examplecom/">
といったcanonicalタグを記述するのです。これで1つのURLに統一され、Googleからの評価も集約されます。
そして今回のスマートフォン用URLとモバイル用URLにもこのタグを記述することにより
といった双方の関係性を示すことができるのですっ！
設置する際の注意点ですが、アノテーションタグ＆canonicalタグは必ず対になるようにしてください。対になるような該当ページがない場合は無理矢理しなくてOKです！
つまり、デバイス毎のトップページだけではなく、ページ毎にそれぞれ設置する必要があるので、ページ数が多いサイトさんは大変ですね(´・ω・｀)
URLが変わらないのに…
担当者：つじさん
ではここで、パソコンで見た時とスマホで見た時にURLが変わらないサイトの仕組みをちょっとだけ紐解きたいと思います。
PCサイトとスマホサイトで見た目が全然違うのに、なんでURLは一緒なの？
ということが一番の疑問ですが、これは「こういうデザイン」だからなんです。以前にご説明したCSS。このCSSが実はそれを可能にしているんです！すげぇ！
そのデザインを「レスポンシブウェブデザイン」と言い、1つのHTMLを、見るデバイスによって「見方を変える」というデザイン方法です。
Googleも推奨しているこの方法は知識さえあれば簡単に出来る…と思います！(笑)
使うHTMLはたった1つ、あとは表示を切り替えたいデバイス分だけCSSを準備するだけです。あとは専用のタグを使ってデバイスの画面の大きさごとにCSSを切り替えるだけ。これで完成です。
ちょっと聞くだけなら簡単そうですよね！(聞くだけなら！)
このレスポンシブウェブデザインは何と言っても使うHTMLが1個で済むため管理がとっても楽です。しかもデバイス毎にURLが変わることがないので、アノテーションの設置も不要です。
だってどれもページは同じなんですもの！
同じように、1つのHTMLを使いCSSを切り替えてサイトを管理する方法として、「転送」をしてCSSを割り振る方法もあります。
中にはHTMLもデバイス専用のモノへと切り替えてしまうサイトもありますが、これは厳密に言えばレスポンシブウェブデザインではありません。さらに言えば使う技術も違ってきます。
ただ、使っているユーザーからしたら、URLは変わらず見える画面が違うので、同じような感覚ですね。
上記や下記のようにURLを切り替えてユーザーを導く方法や、レスポンシブウェブデザイン等を使用してURLを変えずにデバイス対応のページを見せる方法を使い、様々なサイトに対応したサイトのことを、「モバイルフレンドリー」なサイトといいます。
モバイルフレンドリーであればどんなデバイスを使ってサイトを閲覧しても綺麗なサイトが見えるのです。これはユーザーとしても使いやすいです。
サイト作成者としてはデザインだけでなく、Googleにちゃんとデバイス別サイトの存在を伝えてあげないといけないのでタグもしっかりと覚えておきましょう！
こんな場合のアノテーション、どうするの？
担当者：おかもっさん
次はわたくし、おかもっさんがアノテーションタグの応用編について書こうと思います。
「うちモバイルサイト運営してないけど？ヽ(´ｴ`)ﾉ」
「スマホサイト無いんだけど…(´・ω・｀)」
このようなケースの時、アノテーションタグをどう記述すればいいのかを解説します。
PCサイトと同じコンテンツが掲載されているスマートフォンページをアノテーションタグで統一する際は既に解説している通り、このように記述します。
<link rel="alternate" media="only screen and(max-width:640px)"href="スマホサイトURL"/>
この時、存在しないモバイル向けのアノテーションタグは設置しなくてOKです。^^
たまに…
<link rel="alternate" media="only screen and(max-width:640px)"href="スマホサイトURL"/> <link rel="alternate" media="handheld" href="スマホサイトURL" />
このように記述しているサイトがありますが、モバイル向けのアノテーションタグは必要ありません！
逆にPCサイトと別URLのモバイルサイトのみが存在する場合ですが、この場合も同じくモバイル向けのアノテーションタグのみを記述すればいいのです。
<link rel="alternate" media="handheld" href="モバイルサイトURL" />
先ほどのように、スマートフォンサイトが存在しないのにスマートフォン向けのアノテーションタグにモバイルサイトのURLの記述をしてはいけません。
こんな初歩的なミスしないよ！とおっしゃる方も居るかと思いますがこのミスは意外と多いです。
このようにモバイルサイト・スマートフォンサイトの両方存在しない時は運営している各デバイスへ向けたアノテーションタグのみを記述して下さい。
ではどのデバイスで見てもURLが変わらないレスポンシブサイトの時はどう記述すればいいのでしょうか？
この時、PCサイトと同一のスマートフォンURLをアノテーションタグで記述する必要はありません。
<link rel="alternate" media="handheld" href="モバイルサイトURL" />
このようにモバイル向けのアノテーションタグのみを設置しましょう！
PCサイトとモバイルサイトのURLが同一で別URLのスマートフォンサイトが存在する場合も同じく、スマートフォン向けのアノテーションタグのみを設置しましょう。
少し混乱するかもしれませんがサイトのデータを軽くする為に無駄なタグを無くす事も大切です。
もし既に不要なアノテーションタグを設置してしまっているのでしたら削除する事を推奨します！ヽ(´ｴ`)ﾉ
さて、ご自分のスマホサイト、モバイルサイトはいかがですか？
Googleはスマホサイトの最適化にもとても力を入れています。パソコンだけでなく、どんな媒体からも見える優れたサイトを推奨しているようです。
どのような運営方法を取るかは自由ですが、せっかくデバイス毎のサイトを作成するなら、最もベストな形にしておきたいものですね。
早いもので今年の金曜日は今日が最後です。ということは…
今年のSEO女子コラムは今日が最後なんです！
まだ三回しかやってないのに！(笑)もちろん来年もコラム更新は続けてきますよー！次の更新は年明け8日になるかと思います。
次の金曜は1日ですが、流石にその日はSEO女子達もお正月なのです(笑)つじさんはどうやら何かするようですが(フラグ？)
コラムの頭でクリスマスをお祝いして最後ではお正月のお話をするという日本らしいコラムになりました(*´･ω･)少し早いですが、皆様良いお年を！
SEO女子一同！
