皆さんメリークリスマス!今日も元気にSEOやってる3人娘です!コラムも第三回を迎え、しかも今日はクリスマス。見計らったかのようなタイミング!しかし書くことはクリスマスのことではありません!第三回コラムテーマ「アノテーションタグ」スマートフォンが普及している今、デバイス毎にサイトを持っている、なんてサイトさんも多いのではないでしょうか?そんな時に使うアノテーションタグとは?そんなところに着目をしてみます。クリスマスなんて関係ないぜ!コラムスタートです☆アノテーションタグってどんな効果があるの?担当者:きょん別URLでサイト運営をした時のアノテーションの入れ方!みなさんが普段ご覧になるサイトは、デスクトップで閲覧した時と、スマートフォンで閲覧した時とではURLが変わるでしょうか?有名なサイトのほとんどはURLが変わらずにそれぞれのデバイスに合わせたレイアウトに切り替わることが多いと思います。実際にGoogleも1つの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からみたスマートフォン用・モバイル用URLの関係性はアノテーションタグで解決なのですが、今度は逆にスマートフォン用・モバイル用URLからみたデスクトップ用URLとの関係も示さないといけません。このままだと片思いみたいな感じなので両思いにしてあげましょう(!?)その方法として「canonicalタグ」を使用します。[wwwなし]といったURLは違うけど同一ページが複数ある時に使用します。こちらも最初にお話した内容と同様に、Googleからの評価を拡散させないためにURLを1つに統一する必要があります。href="http://examplecom/">といったcanonicalタグを記述するのです。これで1つのURLに統一され、Googleからの評価も集約されます。今回のスマートフォン用URLとモバイル用URLにもこのタグを記述することによりといった双方の関係性を示すことができるのですっ!設置する際の注意点ですが、アノテーションタグ&canonicalタグは必ず対になるようにしてください。́・ω・`)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サイトと別URLのスマートフォンサイトのみが存在する場合PCサイトと同じコンテンツが掲載されているスマートフォンページをアノテーションタグで統一する際は既に解説している通り、このように記述します。and(max-width:640px)"href="スマホサイトURL"/>この時、存在しないモバイル向けのアノテーションタグは設置しなくてOKです。/>このように記述しているサイトがありますが、モバイル向けのアノテーションタグは必要ありません!逆にPCサイトと別URLのモバイルサイトのみが存在する場合ですが、この場合も同じくモバイル向けのアノテーションタグのみを記述すればいいのです。/>先ほどのように、スマートフォンサイトが存在しないのにスマートフォン向けのアノテーションタグにモバイルサイトのURLの記述をしてはいけません。こんな初歩的なミスしないよ!とおっしゃる方も居るかと思いますがこのミスは意外と多いです。このようにモバイルサイト・スマートフォンサイトの両方存在しない時は運営している各デバイスへ向けたアノテーションタグのみを記述して下さい。例2PCサイトとスマートフォンサイトのURLは同一で別URLのモバイルサイトが存在する場合ではどのデバイスで見てもURLが変わらないレスポンシブサイトの時はどう記述すればいいのでしょうか?この時、PCサイトと同一のスマートフォンURLをアノテーションタグで記述する必要はありません。/>このようにモバイル向けのアノテーションタグのみを設置しましょう!PCサイトとモバイルサイトのURLが同一で別URLのスマートフォンサイトが存在する場合も同じく、スマートフォン向けのアノテーションタグのみを設置しましょう。混乱するかもしれませんがサイトのデータを軽くする為に無駄なタグを無くす事も大切です。́エ`)ノさて、ご自分のスマホサイト、モバイルサイトはいかがですか?Googleはスマホサイトの最適化にもとても力を入れています。パソコンだけでなく、どんな媒体からも見える優れたサイトを推奨しているようです。どのような運営方法を取るかは自由ですが、せっかくデバイス毎のサイトを作成するなら、最もベストな形にしておきたいものですね。早いもので今年の金曜日は今日が最後です。いうことは...今年のSEO女子コラムは今日が最後なんです!まだ三回しかやってないのに!(笑)もちろん来年もコラム更新は続けてきますよー!次の更新は年明け8日になるかと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。