alternateタグとcanonicalタグを正しく使ってスマホサイトの存在を伝えよう

alternateとcanonical
こんにちは、ferretのディレクターの青木です。

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

今回は、URLをデスクトップとスマホで分けて運用しているページの対策方法を解説していきます。

Curriculum pt3

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

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

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

対策をしなければいけないのは、URLを分けた場合です。

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

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

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

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

1.alternateタグを使う

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

alternateタグ

alternateタグ

link rel="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に伝えることになります。

リダイレクト設定をする

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

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

間違ったリダイレクト

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

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

ケーススタディ

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

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

まとめ

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

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

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

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

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

青木 哲郎

Webマーケティング事業部 ディレクター Ferretのサイト立ち上げから制作ディレクション、運営、サイト分析改善まで担当。

-Facebook:tetsuro.aoki
-Twitter:@te26_kun

Curriculum pt bt5
会員になると、お気に入りに保存ができたり、
便利な機能が使えるようになります。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

現会員266,426

会員になると限定機能が使えます。
or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

Curriculum pt r4

この記事に関連したタグ

人気記事ランキング

  • 昨日
  • 週間
  • 殿堂
  • はてブ

5月15日(金)にアクセスの多かった記事

1Thumb

ブログ開設におすすめしたい、日本における無料ブログサービス21まとめ

2Thumb

Tumblrでオススメしたいデザイン性の高いテンプレート50まとめ

3Thumb

就活生必見!2015年新卒がこっそり教える使ってよかった便利なサービス19選

4Thumb

【永久保存】和風な日本語のフリーフォント40選

5Thumb

【事例】Yahoo!プロモーション広告で売上を激増させた企業に学ぶ活用術8選