この記事は2015年5月16日に公開された記事を再編集したものです。

ウェブサイトを運営していて、デスクトップ用サイトURLとスマホ用サイトURLを分けている場合あります。この場合、きちんと検索エンジン向けに設定を行わないとスマホ用サイトの存在を認識してくれないケースがあります。
それは主に、URLをデスクトップとスマホで分けて運用しているページの場合が多いです。

このような場合は、デスクトップ用URLとスマホ用URLの双方を検索クローラーに伝える必要があります。

今回は、canonical属性とalternate属性を使ってスマホページの存在を検索エンジン向けに伝える方法を紹介します。

目次

  1. canonicalとは
  2. alternateとは
  3. Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある
  4. URLを分けている場合の対策方法
  5. レスポンシブデザインの実装を検討しよう
  6. よくある質問とその回答
    1. デスクトップ用サイトにはあるが、スマホ用サイトには無いページがあります。この場合のalternate属性はどうしたらいいか?

canonicalとは

canonicalとは、「URLの正規化」を目的に使われる属性です。
これを用いることで、似た・同じ内容のページを一本化(正規化)することができ、検索エンジンからの評価が分散しなくなるという特長があります。

URLの正規化を行わないと、パンダアップデートのような質を重視するスパム対策に引っかかり、ページの評価を下げてしまう可能性があり、損失回避の観点からとても重要視されています。

<link rel="canonical" href="http://~~~~~~~~">

上記のように一本化させる先のページを指定することでcanonicalは行われます。

alternateとは

alternateとは、英語で「代替物」という意味を持っています。
現在のページの代替ページが存在している時に用いられ、主に、(URLは違うものの)内容が同じスマホページ、多言語版のページなどを指定して使われることが多いです。
これを指定することで、「検索エンジンが内容が同じなのにURLが違う=マイナス評価」ということを防ぐ意味があります。

Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある

Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類あります。

  1. レスポンシブデザイン
  2. 動的配信(UA別にHTML分けたりCSS分けたり)
  3. URLをわける

この3つの方法をGoogleはサポートしているのですが、レスポンシブデザインはURLがデスクトップ用サイトとスマホ用サイトで変わらないので、現時点で特に何かする必要は(2015/5/15)はありません。

動的配信に関しては、Googlebotに適切なコンテンツが存在することを伝えてあげる必要があるので、Vary HTTP ヘッダーを使いましょう。

※参考:動的な配信 - ウェブマスター向けモバイルガイド

今回は、URLを分けた場合について解説します。

URLを分けている場合の対策方法

URLを分けている場合というのは具体的には以下のようなURLの場合です。

-デスクトップ用URL:http://www.hogehoge.com/
-スマホ用URL:http://sp.hogehoge.com/

UA(ユーザーエージェント)でURLを出し分けると上記のような実装が可能です。
こういった場合、それぞれを適切に設定することで正しくgooglebotに認識してもらうことができます。適切な設定をしていない場合、スマホ用サイトのインデックスが遅れたり、重複ページと認識されることもあります。

手順1.alternate属性を使う

alternate属性というのは、googlebotにスマホ用サイトの存在を知らせるためのものなります。クローラーがデスクトップ用サイトを訪れたとき、このalternateが設定されていると、スマホ用サイトの存在を知ることができます。

属性

alternate属性はデスクトップ用サイトの該当ページのソースコードの中に、

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://sp.hogehoge.com/" />

と、記述します。

手順2.canonical属性を使う

そして、上記で指定したスマホ用ページのソースコードの中に、

<link rel="canonical" href="http://www.hogehoge.com/" />

と記述します。
これは、「このスマホ用ページはデスクトップページのスマホページです。」とgooglebotに伝えることになります。

手順3. リダイレクト設定をする

デスクトップ用トップページとスマホ用トップページ、デスクトップ用記事ページとスマホ用記事ページなど、それぞれをUA別にリダイレクト設定しましょう。
デスクトップ用ページだけあって、スマホ用ページを持っていないURLの場合は、リダイレクトするページがないわけですからしないほうがいいです。

全てをトップページリダイレクトするなどの対処法は、「間違ったリダイレクト」として、Googleはランキングでマイナス影響を与えると明言しています。

間違ったリダイレクト
画像引用:間違ったリダイレクト – ウェブマスター向けモバイルガイド

レスポンシブデザインの実装を検討しよう

上記色々と設定方法を解説しましたが、リダイレクトやcanonicalなどはミスをすると全く検索結果に表示されなくなることもあるなど、リスクもある方法です。
こういったミスを減らすためにも、Googleレスポンシブデザインを推奨しています。

ケーススタディ

Q.デスクトップ用サイトにはあるが、スマホ用サイトには無いページがあります。この場合のalternate属性はどうしたらいいか?

A.alternate属性は、canonicalと1対1の構成で使うため、スマホページがない場合は無理して使う必要はありません。

まとめ

いかがでしたでしょうか。
今回はスマホ用ページとデスクトップ用ページURLが分かれている場合の対処法についてご紹介しました。
スマホサイトへのアクセスを集めるためにも、canonical属性とalternate属性を正しく設定をしましょう。

このニュースを読んだあなたにおすすめ

SEO対策に関するカリキュラム
SEOはURLの正規化が重要
コンテンツSEOにおける魅力的なコンテンツの作り方

このニュースに関連するカリキュラム

SEO対策に関するカリキュラム

SEO対策に関するカリキュラム

SEO対策に関するカリキュラムを体系立てて学ぶことができます。