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>

スポンサーリンク

関連記事

スポンサーリンク

アプリが実行されるまでの流れ ソースコードから実行まで

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る