HTML 【メタデータ】2 ~ link要素(5)rel属性

Electronic technology devices emblem of monitor screen mobile smartphone and tablet computer with social media icons vector illustration

メタデータ・コンテンツの要素の1つであるlink要素の中で、今回は、rel属性を使って特定のサイトやページ等へ導く方法を紹介します。

link要素については、以下のページもご参照下さい。
HTML 【 metadata 】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【 metadata 】2 ~ link要素(2)CSSファイルの読み込み
HTML 【 metadata 】2 ~ link要素(3)media属性
HTML 【 metadata 】2 ~ link要素(4)@importと@media

目次

1.他言語版のページへ導く
2.優先URLを指定する
3.モバイル版へ導く
4.RSSやAtomをフィードする

1.他言語版のページへ導く

他言語版のページがある場合は、link要素のrel属性とhreflang属性を「rel=”alternate” hreflang=” “」と指定します。

alternateは、代替物という意味です。
hreflangは、href + langです。hrefは「Hyper Text Reference」の略で、リンク先のURLを示します。langは「language」の略です。

サイトに日本語版だけでなく、英語や中国語など他言語版がある場合、link要素で「rel=”alternate” hreflang=”言語コード”」と指定すれば、検索エンジンなどからサイトを開いた時に、その人の言語環境に合ったURLへ導くことができます。

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

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

「en」と「zh」は言語コードです。

▲目次へ戻る

2.優先URLを指定する

link要素のrel属性を「rel=”canonical”」と指定すると、優先URLを指定することができます。

canonicalは、標準的なという意味です。

検索エンジンは、アクセスの多いページを表示しますが、メインページを優先して表示して欲しい場合は、メインページ以外のページに「rel=”canonical”」として、メインページ(表示して欲しいページ)のURLを指定します。

また、「www.」や「/index.html」の有無によって、同じサイトなのに検索エンジンに別のサイトとして判断されるような場合には、サイト内の全ページに「rel=”canonical”」としてそれぞれのURLを指定すると、検索エンジンに別サイトと判断されるような不具合を回避できます。

link要素は次のように記述します。

<head>
<link rel=”canonical” href=”http://www.test.com/”>
</head>

この「link rel=”canonical”」は<head>の直後に書いた方が良いようです。

▲目次へ戻る

3.モバイル版へ導く

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

サイトにモバイル版もある場合は、この指定をすると、携帯の検索エンジンやソーシャルブックマークなどから、モバイル版にリンクさせることができます。

link要素は次のように記述します。

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

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

▲目次へ戻る

4.RSSやAtomをフィードする

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

RSSとは、サイトの更新情報を公開するのに使われてる、XMLファイルです。サイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などが書かれています。
AtomもRSSと同じ機能です。

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

RSSを指定する場合、link要素は次のように記述します。

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

type属性で、RSSファイルのMIMEタイプを指定しています。このtype属性は重要で、省略できません。
href属性で、RSSファイルのURLを書いていますが、ここでの拡張子は「.xml」でも「.rdf」でもOKです。

MIMEタイプについてはHTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧 1.MIMEタイプ一覧をご参照下さい。

Atomを指定する場合、link要素は次のように記述します。

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

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

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

link要素には、他にもたくさんの属性があっていろんな事ができます。

属性 概要
rel HTMLと外部ファイルの関係(relation)を示す (値) (値の概要)
stylesheet スタイルシート
(alternateとの併用で代替スタイルシートを示す)
alternate 代替え文書
(hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す)
icon ショートカットアイコン
search 検索ページ
help ヘルプ
prev 前へ
next 次へ
prefetch リンクを事前に読み込む
license 著作権
author 作者
href 外部ファイルのURLを示す 外部ファイルのURL
type 外部ファイルのMIMEタイプを示す text/css(CSS)、text/html(HTML)、application/pdf(PDF)など
media 外部ファイルが対象とするメディア(出力機)を示す all すべての機器
screen パソコンのディスプレイ
tv テレビ画面
handheld 携帯電話などの端末
print プリンタ
projection プロジェクタ
tty 文字幅が固定された機器(テレタイプなど)
speech
(以前のaural)
音声出力機
braille 点字ディスプレイなど
embossed 点字プリンタ
aural 音声出力機器
hreflang 外部ファイルの言語コードを示す ja (日本語)、en (英語)、es (スペイン語)、fr (フランス語)、ko (韓国語)、zh (中国語) など
sizes 「rel=”icon”」の場合のアイコンのサイズを示す 数字で「sizes=”16×16″」
または「sizes=”any”」
アイコンの普通サイズは16×16
他の数字を使う場合、先頭に0を付けないこと
title 外部ファイルのタイトルを示す グローバル属性の title と違って、これを書かなくても、親要素のtitleは継承されない
外部CSSのグループ化を示す リンクがCSSの場合、titleをつけるとCSSのグループ化ができ読込み優先度が変わる
また「rel=”alternate stylesheet”」とすることで、代替えCSSのグループ名になる

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です