スマホとフィーチャーフォンの両方をサポートする [alternate] の記述法

カテゴリー：SEO・ホームページ制作

スマートフォンユーザーに向けてのコンテンツは、レスポンシブデザインが推奨されていますが、
後付けでスマートフォンサイトを増設するのが主な流れである昨今、
ページ数やCSSの記述が多いサイトほどレスポンシブデザインへの移行は困難です。

そのようにそれぞれが別のURLで存在する場合は「alternate」の記述で設定しましょう。

ここでは、PCサイト、スマホサイト、フィーチャーフォンそれぞれに別々のURLを割り当てる場合を説明します。

仮に以下の構成と仮定します。

・PCサイト……http://www.example.com/pc
・スマホサイト……http://www.example.com/sp
・フィーチャーフォンサイト……http://www.example.com/fp

それぞれURLは違いますが、コンテンツ内容は同じと仮定します。
重複コンテンツとみなされないように注意が必要です。
そのためにスマホサイト、フィーチャーフォンサイトに「canonical」を追記しましょう。

では早速、<head>〜</head>にアノテーションを追記します。

【PCサイト（http://www.example.com/pc）に】

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

【スマホサイト（http://www.example.com/sp）に】

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

rel=”canonical”でPC向けページに正規化します。

【フィーチャーフォンサイト（http://www.example.com/fp）に】

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

スマホサイトと同様に、rel=”canonical”でPC向けページに正規化します。

http://www.example.com/pc には「スマホサイト」と「フィーチャーフォンサイト」がそれぞれのURLで存在していますよ。
「スマホサイト」と「フィーチャーフォンサイト」は「PCサイト」の内容と同じですよ。
ということを伝えるための記述です。
検索エンジンに重複コンテンツとみなされないための対策にも有効かと思います。
記述方法を間違えると、ある日突然に検索エンジンのインデックスから除外される危険性も秘めているので慎重に行ないましょう。間違っても全てのページにPCサイトのインデックスへ向けてのcanonicalリンクは記述しないように注意しましょう。