ITコラム

プログラミングノウハウ

2017.01.26

#HTML入門

HTML【メタデータ】2～link要素（5）rel属性

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

メタデータ・コンテンツについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．他言語版のページへ導く
２．優先URLを指定する
３．モバイル版へ導く
４．RSSやAtomをフィードする

１．他言語版のページへ導く

他言語版のページがある場合は、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」は言語コードです。

▲目次へ戻る

２．優先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>の直後に書いた方が良いようです。

▲目次へ戻る

３．モバイル版へ導く

「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を指定します。

▲目次へ戻る

４．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 【メタデータ】２～ link要素（１）MIMEタイプ一覧と属性一覧　１．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は継承されない
title	外部CSSのグループ化を示す	リンクがCSSの場合、titleをつけるとCSSのグループ化ができ読込み優先度が変わるまた「rel=”alternate stylesheet”」とすることで、代替えCSSのグループ名になる