Googleなどのサーチエンジンに携帯版サイトを認識させる方法

携帯でGoogleなどの検索エンジンを使っている人は多いと思います。
しかしリンクした先がPC版のサイトでがっかりするケースもしばしば。

PC版もモバイル版もあるサイトを運営している人にとっては、やっぱり携帯端末からアクセスされたらちゃんとモバイル版をインデックスして欲しいものです。

そんなときには<head>と</head>の間に、<link>を書くと、サーチエンジン、ブログサイト、ソーシャルブックマーキングサイトといった外部のサイトのモバイル版ページから、モバイルページに正しくリンクすることができます。

<link media="handheld" href="【モバイル版URL】" type="text/html" rel="alternate" />

<link media="handheld" href="【モバイル版URL】" type="application/xhtml+xml" rel="alternate" />

記述例

<link media="handheld" href="http://www.example.com/mobile/" type="text/html" rel="alternate" />

これはRSSやAtomにも対応するように考えられています。

モバイル版のURLは、モバイル版のトップのURLを記述するのではなくて、対応するモバイル版のページのURLを記述します。
PC版が http://www.example.com/article123.html で、モバイル版が http://www.example.com/mobile/article123.html だったら

<link media="handheld" href="http://www.example.com/mobile/article123.html" type="text/html" rel="alternate" />

といったような感じです。

プロトコル

XHTML

<link rel="alternate" media="handheld" type="text/html" href="【モバイル版URL】" />

これは新しくつくられた仕様というわけではありません。@media アトリビュートの仕様は HTML4 仕様書に記述されています。

RSS

<rss xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:link rel="alternate" media="handheld" type="text/html" href="【モバイル版URL】" />

<xhtml:link> を <channel> や <item> の下に記述します。どちらも optional です。

Atom 1.0

<link rel="alternate" x:media="handheld" type="text/html" href="【モバイル版URL】" />

このような <link> エレメントを <feed> や <entry> の中に記述します。どちらも optional です。

キャリアごとの記述例

モバイル版にも記述すると、モバイルサイトがクローラーにちゃんと判別されるらしい。

docomo

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=shift_jis">
<title>タイトル</title>
<link media="handheld" href="【モバイル版URL】" type="application/xhtml+xml" rel="alternate" />
</head>

au EZweb

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
<link media="handheld" href="【モバイル版URL】" type="text/html" rel="alternate" />
</head>

Softbank

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
<link media="handheld" href="【モバイル版URL】" type="text/html" rel="alternate" />
</head>

XHTML Basic 1.0

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
<link media="handheld" href="【モバイル版URL】" type="text/html" rel="alternate" />
</head>