[42-3] link rel="alternate" で他言語サイトやモバイル版へ導こう

最終更新日:-0001年11月30日  (初回投稿日:2012年06月29日)

今回は、<link>要素のrel属性「rel="alternate"」で、
・他言語版ページがある場合、ユーザの言語にあわせて自動的に切り替えさせる。
・モバイルサイトがある場合、サーチエンジンからモバイルユーザは直接そっちに飛ばす。

・RSSやAtomをフィードする。
をやってみましょう。

<link>要素第3弾です。
(第1弾は「[42-1] <link>で外部CSSファイルの読み込み、グループ化をしよう」
(第2弾は「[42-2] link media=" " で 外部CSSをメディア別に切り替えよう」

他言語版ページがあれば「rel="alternate" hreflang=" "」で指定しよう

alternateは、代替物という意味の名詞です。
hreflangは、hrefとlangの合成。hrefは「Hyper Text Reference」の略。リンク先のURLを示します。langは「language」の略。言語って意味です。

サイトに日本語版だけでなく、英語や中国語など「他言語バージョン」がある場合、
<link>要素で「rel="alternate" hreflang="言語コード"」と指定すれば、
サーチエンジンやソーシャルブックマークなどで見つけたとき、その人の言語環境に合ったURLへ導いてくれます。
サイト全部がそっくり他国語に翻訳されてなくても、一部だけに(ショップページとか値段のページとか)他言語ページがある場合、そのページにこれを書いておくと良いのだそうです。

Google のウェブマスターツールで「rel="alternate" hreflang="x" について 」でも詳しく書いていますので、そちらも参考にしてください。

例えば「http://www.example.com」というサイトがあるとして、
それに、英語版の「http://en.example.com」と中国語版の「http://zh.example.com」がある場合はメインの「http://www.example.com」にこのように指定します。

<head>
<link rel="alternate" hreflang="en" href="http://en.example.com/" >
<link rel="alternate" hreflang="zh" href="http://zh.example.com/" >
</head>

「en」「zh」は言語コードです。
言語コードについては「ISO 6391-1 形式」をご覧ください。一覧表があります。

「rel="canonical" 」で優先URLを指定しよう

canonicalは、標準的なという意味の形容詞です。

サーチエンジンはアクセスの多いページを表示するけど、メインサイトを優先して表示して欲しいって時にrel="canonical"」で URLの標準バージョンを指定します。
この場合は優先じゃないページに、優先したいURLを書きます。

また、「www.」や「/index.html」の有無によって、同じサイトなのにサーチエンジンに別物のサイトとして見られるような場合、
(www.example.com も example.com も www.example.com/index.html も example.com/index.html も、すべて同じページな場合です)

「index.html」は「デフォルトドキュメント」と言われます。
詳細は、「(ちょっとメモ)index.html という名のファイル」にまとめていますので、ご覧ください。

サーバに「.htaccess」を使ってURLの正規化をするのだそうですが、サーバの環境でこれができない場合に、この「rel="canonical"」を使うと良いのだそうです。
この場合は、サイト内の全ページにそれぞれの正規のURLを書きます。

下記のように指定します。href属性に優先にしたいURLを書きます。

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

この「link rel="canonical"」はソース最上部(<head>の直後)に書いた方が確実なんだそうです。

モバイル版へリンクさせよう

「rel="alternate" media="handheld"」で、サーチエンジンなどにモバイルサイトを認識させることができます。
handheldとは、片手で持てる大きさの、という意味の形容詞。media属性の"handheld"は「携帯電話などの端末」を指します。

サイトに「PC版もモバイル版もある」のなら是非これを使いましょう。携帯のサーチエンジンやソーシャルブックマークなどから、ちゃんとモバイル版にリンクさせることができます。

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

PC用サイトのページの<head>内です。href属性で、そのページのモバイル版のURLを指定します。

まずはPC用トップページに携帯用トップページを指定。あとは、PC版の必要なページ(携帯版があるページ)だけに携帯用のURLを指定して行きます。(携帯版が無いPCページには不要。ていうかNG)

この<link>を使った携帯版に飛ばす機能を MLD(Mobile Link Discovery)と言うそうです。
GoogleモバイルとYahoo!ケータイ(auとSoftBank…ってことです。)では、このMLDが使えて、ユーザを正しく携帯版のページへ自動転送するそうです。

Docomoのサーチエンジンは、2010年にGoogleモバイルからモバイルgooに変わって、MLDが効かなくなったのだそうです。DocomoだけMLDに頼らない方法でリダイレクト設定しなきゃなのですが、ごめんなさい、詳しくないのでそこは自力で調べてください。(最大手って(マイクロソフトもドコモも…)なぜか自分勝手。お客さんより会社が強いからなあ。)

ただし、スマホの場合は MLDを設定してあってもPCサイトの方が表示されます。
なので、スマホ対象サイトなら、スマホ画面幅に合わせたCSS設定をしておく必要があります。
・[42-2] link で 外部CSSファイルをメディア別に切り替えよう
・(ちょっとメモ)link よりスマートな CSSの @import と @media
を参考にしてください。

RSSやAtomをフィードしよう

「link rel="alternate"」に type属性で RSSやAtomだと指定してやると、Googleリーダーなどの「フィードリーダー」に見つけてもらえるようになります。

RSSとはサイトの更新情報を公開するのに使われてる、Webページの内容を要約する、XMLファイルです。サイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などが書かれます。
RSS1.0は「RDF Site Summary」の略。RSS2.0は「Really Simple Syndication」の略なんだそうで、1.0はRDF(Resource Description Framework)という形式をベースに、2.0はRDFとは関係ない形式をベースにしてるんだそうです。(あとで拡張子のことで関係あるので一応書いときました。)

Atomは、RSSと同じ機能なんですが、こっちの方が新しくて将来標準化されそうなんだそうです。

ブログサービスや、MovableTypeなどのCMSを使っていれば、RSSやAtomを書き出す機能があるので、自動的に配信されています。そのURLや拡張子は、ご利用のサービス先で確認してください。

まずはRSS用のソースです。

<head>
<link rel="alternate"  type="application/rss+xml"  href="http://○○○/rss.xml" >
</head>

type属性で、RSSファイルのMIMEタイプを指定しています。このtype属性まじ重要。省略禁止です。
href属性で、RSSファイルのURLを書いていますが、ここでの拡張子は「.xml」でも「.rdf」でもOK。
RSS1.0も2.0もAtomもみんなXMLなので「.xml」が無難だそうですが、中身がちゃんとしてれば拡張子はどっちでもいいみたいです。type属性でMIMEタイプがきちんと指定してあれば。

「MIMEタイプ」については「ちょっとメモ:MIMEタイプ」をご覧ください。

似たようなもんですがAtom用のソースです。

<head>
<link rel="alternate"  type="application/atom+xml"  href="http://○○○/atom.xml" >
</head>

RSSのと違うのは、type属性で指定したMIMEタイプだけですね。

このほかに、title属性で「title="○○○blog feed"」などとタイトルを付けることもできます。

<link>の属性とその値の一覧表

<link>にはたくさんの属性があり、属性の使い分けでいろんな事ができます。
「<link>要素の属性一覧表」を作っていますので、参考にしてください。
今回までで、ほとんど使ってみました。あとは「sizes属性」ですね。

次回予告

何だか今回は「だそうです」が多かったですね。他言語サイトへのリンク以外、あまり使った事が無いので。とにかく自分の今後の参考のために調べてみました。

次回は、ウェブページにショートカットアイコンを表示させてみます。
アイコンになる画像を用意して「rel="icon"」でブラウザに指定。「sizes属性」は、このアイコンのサイズを指定します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.