2009年07月01日

モバイルリンクディスカバリー、MTで個別ページやカテゴリも携帯ページへリダイレクトする方法

スポンサードリンク

当ブログはMT（Movable Type）でサイト構築し、モバイルサイトをMovableType用の携帯電話向け変換プログラム「MT4i」を使用して運営しています。

つまり、同じ記事がPC用と携帯用の２種類あるということです。

当然ですが、携帯電話でグーグル検索やヤフー検索を使ってアクセスしてきたユーザーには携帯用ページを見せたいものです。

しかし、モバイル検索エンジンは時にPC用サイトのみを検索結果に表示してしまいます。

その対応策として「モバイルリンクディスカバリー（Mobile Link Discovery）」というものがあります。

「モバイルリンクディスカバリー（Mobile Link Discovery）」のタグをPCサイトに仕込んでおくと、携帯用ページにリダイレクト（転送）してくれます。

以下、その方法です。

「モバイルリンクディスカバリー（Mobile Link Discovery）」は非常に簡単です。

ただ単に、以下のタグをHTMLのヘッダータグ内（<head>から</head>まで）に追加するだけです。

<link rel="alternate" media="handheld" href="携帯用ページのURL" />

たとえば、あなたのPCサイトのURLが、

http://www.example.com

で、ページの拡張子が「.html」だとします。

つまり、あなたのサイトのトップページのURLは、

http://www.example.com/index.html

ということです。

そして、あなたのサイトの携帯用サイトのURLが、

http://www.example.com/mobile/

だとします。

この場合は、「http://www.example.com」のindex.htmlファイルのヘッダに以下のタグを追加します。

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

これで、携帯ユーザーが「http://www.example.com」にアクセスしても、「http://www.example.com/mobile/」にリダイレクト（転送）されます。

MT（Movable Type）で製作したブログなら、トップページのヘッダに記述する「モバイルリンクディスカバリー（Mobile Link Discovery）」のタグは以下にようにしておくと、別のURLでブログを使った時にコピペできて便利です。

<link rel="alternate" media="handheld" href="<$MTBlogURL$>mobile/" />

ちなみに、当ブログのトップページのヘッダータグ内はこんな感じです。

トップページのヘッダータグ内

赤い部分が「モバイルリンクディスカバリー（Mobile Link Discovery）」のタグです。

ただ、ブログの場合は、問題は個別ページやカテゴリページですね。

これからする説明は、「Movable Type（PC用ブログ）」と「MT4i（PC用ブログを携帯用ブログに自動変換）」の組み合わせという前提です。

「MT4i」のURLには一定のルールがあります。

まずは、個別ページから。

【Movable Typeの個別ページにモバイルリンクディスカバリーを記述する方法】

たとえば、当ブログの「スティーブ・ジョブズが2ヶ月前に肝臓移植、6月末に復帰か？」という記事のPC用ページと携帯用ページは以下にようになっています。

○PC用ページ
http://www.nextglobaljungle.com/2009/06/26.html

○携帯用ページ
http://www.nextglobaljungle.com/m/index.cgi?mode=individual&eid=1878

上の「携帯用ページ」を見てもらえば分かると思いますが、「MT4i」の個別ページのルールは、

http://携帯サイトのトップページのURL/index.cgi?mode=individual&eid=エントリーID

となっています。

つまり、「エントリーID」でそれぞれの個別ページを識別しているんですね。

「エントリーID」以外の部分は、どのページも共通です。

Movable Typeで「エントリーID」を取得するには、「<$MTEntryID$>」というタグを使います。

つまり、Movable Typeで作ったブログの個別ページに「モバイルリンクディスカバリー（Mobile Link Discovery）」のタグを記述するには、以下のように書きます。

<link rel="alternate" media="handheld" type="application/xhtml+xml" href="<$MTBlogURL$>フォルダ名/index.cgi?mode=individual&eid=<$MTEntryID$>" />

「フォルダ名」はあなたの携帯用サイトが入っているフォルダ名を記述してください。

当ブログでは、携帯用サイトのトップページのURLは、

http://www.nextglobaljungle.com/m/

です。

つまり、「m」フォルダに携帯用サイトのファイルが入っているということです。

あなたのサイトの携帯用サイトが、

http://www.example.com/mobile/

なら、「フォルダ名」は「mobile」になります。

このタグをヘッダータグ内（<head>から</head>まで）に追加して、再構築します。

ちなみに、当ブログの個別ページのヘッダータグ内はこんな感じです。

個別ページのヘッダータグ内

【Movable Typeのカテゴリページにモバイルリンクディスカバリーを記述する方法】

次にカテゴリページ。

「MT4i」のカテゴリページにも一定のルールがあります。

たとえば、当ブログの「google」カテゴリのPC用ページと携帯用ページは以下にようになっています。

○PC用ページ
http://www.nextglobaljungle.com/internet/google/

○携帯用ページ
http://www.nextglobaljungle.com/m/index.cgi?cat=4&id=2

上の「携帯用ページ」を見てもらえば分かると思いますが、「MT4i」のカテゴリページのルールは、

http://携帯サイトのトップページのURL/index.cgi?cat=カテゴリID&id=ブログID

となっています。

つまり、「カテゴリID」でそれぞれのカテゴリを識別しているんですね。

「ブログID」は気にしなくていいです。

当ブログでは「2」となっていますが、これは最初に失敗して、もう一度作り直したからです。1個目に作ったブログなら「1」になっているはずです。

「ブログID」は「MT4i」で吐き出されたIDをそのまま変更することなく使います。

当ブログの場合は、

http://www.nextglobaljungle.com/m/index.cgi?cat=4&id=2

なので、最後の「&id=2」は変更することなく、そのまま記述するということです。

大切なのは「カテゴリID」。

Movable Typeで「カテゴリ ID」を取得するには、「<$MTCategoryID$>」というタグを使います。

つまり、Movable Typeで作ったブログのカテゴリページに「モバイルリンクディスカバリー（Mobile Link Discovery）」のタグを記述するには、以下のように書きます。

<link rel="alternate" media="handheld" type="application/xhtml+xml" href="<$MTBlogURL$>フォルダ名/index.cgi?cat=<$MTCategoryID$>&id=ブログID" />

「フォルダ名」にはあなたの携帯サイトのフォルダ名、「ブログID」は、あなたのブログに合った数字を入力して下さい。

変更したら、このタグをヘッダータグ内（<head>から</head>まで）に追加して、再構築します。

もし、「ブログID」の部分で混乱してしまったら、「ブログID」を取得する「<MTBlogID>」タグを使うのも手です。

モバイルリンクディスカバリーのタグは以下のようになります。

<link rel="alternate" media="handheld" type="application/xhtml+xml" href="<$MTBlogURL$>フォルダ名/index.cgi?cat=<$MTCategoryID$>&id=<MTBlogID>" />

これだと、「フォルダ名」だけ、あなたのサイトに合ったものに変更すればOKです。

ちなみに、当ブログのカテゴリページのヘッダータグ内はこんな感じです。

カテゴリページのヘッダータグ内

以上で、Movable Typeで作ったブログの「個別ページ」と「カテゴリページ」に「モバイルリンクディスカバリー（Mobile Link Discovery）」のタグ埋め込むことができました。

これで、携帯電話からのアクセスがPC用ページにあった時に、携帯用ページにリダイレクト（転送）されます。

では、次に「モバイルリンクディスカバリー（Mobile Link Discovery）」がちゃんと機能しているか確かめて見ましょう。

まずは、このサイト。

Mobile Link Discovery Validator

モバイルリンクディスカバリーがちゃんと記述されているか、確認することができます。

PC用ページの個別ページのURLを入れて、「Validate」ボタンをクリック。

モバイルリンクディスカバリーが記述されているページだと、以下のように携帯用ページのURLが表示されます。

携帯ページのURLが表示

URLをクリックして、携帯用ページが表示されるか確認しておきましょう。

一方、モバイルリンクディスカバリーが記述されていないページだと、以下のように赤字で「Error: Mobile Link Discovery not found.」と表示されます。

Error: Mobile Link Discovery not found.

カテゴリページも同様にチェックしておくといいでしょう。

次に、ちゃんとリダイレクト（転送）されるかどうかのチェックです。

リダイレクト（転送）チェックをするには、以下のGoogleのサイトを使います。

http://www.google.co.jp/gwt/n

Googleのリダイレクトチェックサイト

グーグルらしいシンプルなサイトです。

というか、このサイトは一般には公開されていないんでしょうね。

テキストボックスにPC用サイトの個別ページやカテゴリページのURLを入れて、「Go」ボタンをクリック。

モバイルリンクディスカバリーのタグがちゃんと記述されていれば、携帯用ページに転送されるはずです。

記述されていないと、以下のようにグーグルが携帯電話対応形式に変換します。

グーグルが携帯電話対応形式

上のキャプチャは「ニュース」カテゴリのものです。

携帯電話からPC用の「ニュース」カテゴリにアクセスすると、こんな感じのデザインに変換されるんですね。

一応、グーグルの「モバイルリンクディスカバリー」についての説明もチェックしておきましょう。

「ウェブマスター/サイト所有者ヘルプ」の「携帯電話での表示用にウェブページが調整される仕組みを教えてください。」には次にように説明しています。

ウェブページを変換することを望まない場合は、ユーザーがトンランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするように Google にリクエストしてください。リダイレクトをリクエストするには、ページの HTML ファイルの <HEAD> セクションに次の行を含めてください。

<link rel="alternate" media="handheld" href="alternate_page.htm" />

というわけで、グーグル（Google）ではモバイルリンクディスカバリー（Mobile Link Discovery）が有効だということが分かりました。

では、ヤフー（Yahoo! Japan）は？

調べたのですが、ヤフー（Yahoo! Japan）はモバイルリンクディスカバリー（Mobile Link Discovery）についての説明がこの記事を書いている段階ではないですよね。。

yahooさん、アナウンスお願いします！

最後に、Movable Typeの運営会社「six apart（シックスアパート）」。

「Mobile Link Discovery 仕様」には次のような説明があります。

http://yoursite.example.com/ の XHTML に、以下のように記述します。

<link rel="alternate" media="handheld" type="application/xhtml+xml" href="http://yoursite.example.com/mobile" />

これは、http://yoursite.example.com/mobile はモバイル版に最適化された XHTML コンテンツを出力することを意味しています。

スポンサードリンク