[42-3] link要素の「rel属性」の値(リンクタイプ)

最終更新日:2017年11月27日  (初回投稿日:2012年06月29日)

<link>要素の「rel属性」と「hreflang属性」で指定した「他言語版ページ」がある場合、検索エンジンはユーザの言語環境にあわせて自動的に検索結果を切り替えることができます。
そのほかにも「rel属性」を使って、検索エンジンに情報を提供することができます。

今回は、<link>要素の「rel属性」の値(リンクタイプ)と、その使い方を見てみましょう。

<link>要素は内容が多いため 記事を分けています。

[42-1] link要素で 外部CSSファイルの読み込み・グループ化をしよう
<link>要素全体の話と、外部CSSファイルの読み込み方法
[42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう
media属性で外部CSSファイルを切り替えます。
(ちょっとメモ)CSSの @import と @media(メディアクエリ)
CSSファイル上で CSSを切り替える方法です。
[42-3] link要素の「rel属性」の値(リンクタイプ) ←今日はココ
たくさんの言語に対応したサイトの場合、<link>要素で言語の切り替えができます。
[42-4] link要素で ショートカットアイコン(favicon)を表示させよう
ショートカットアイコンを設定します。
本日のINDEX
  1. <link>要素の rel属性の値(リンクタイプ)
  2. rel="alternate" hreflang=" " で他言語版ページへ
  3. rel="alternate" で RSSフィードへ
  4. rel="alternate" で PDFファイルへ
  5. 「rel="canonical" 」で優先URLを指定しよう

<link>要素の rel属性の値(リンクタイプ)

「rel属性」の値は リンクタイプ(Link types)を使います。
<link>要素の「rel属性」で使う「リンクタイプ」の一覧をまとめておきます。

alternate 現在のドキュメントの代替表現を提供。
・type属性が「application/rss+xml」なら RSSフィード。
・type属性が「application/pdf」なら PDFファイル。
・media属性を設定した場合、別のデバイス向けの代替えページ。
・hreflang属性を設定した場合、別の言語の代替えページ。
author 著者へのリンクを提供。
help ヘルプへのリンクを提供。
icon ショートカットアイコンをインポート。
license 現在のドキュメントのメインコンテンツは、参照ドキュメントに記述されたコピーライトライセンスが及ぶことを示す。
next 続きモノのコンテンツで「次」のドキュメントは参照ドキュメントであることを示す。
prev 続きモノのコンテンツで「前」のドキュメントは参照ドキュメントであることを示す。
search 現在のドキュメントとその関連ページを通して検索するために使うことができるリソースへのリンクを提供。
stylesheet スタイルシートをインポート。

参考:
4.8.6. Link types - HTML 5.1 2nd Edition | W3C Recommendation
Link types - HTML | MDN

*リンクタイプは <a>要素、<area>要素の「rel属性」でも使います。それらには上記以外に「bookmark、nofollow、noreferrer、tag」という値もあります。詳細は上記参考サイトをご覧ください。

icon」と「stylesheet」は外部ファイルをその HTMLドキュメントに読み込みます。
それ以外の値は、<link>要素で使う場合は、検索エンジンのために 他のページへの ハイパーリンクを提供します。

例えば、あるページの <head>要素に下記の記述があったら、

<head>
<link rel=”prev” href=”http://example.com/chapter1.html”>
<link rel=”next” href=”http://example.com/chapter3.html”>
</head>

検索エンジンは、このページとその前後のページをシリーズとして認識し、検索結果画面で前後関係も正しく表示してくれます。

また、次の場合なら、

<head>
<link rel="author license" href="http://example.com/about">
<link rel=”help” href=”http://example.com/help”>
</head>

検索エンジンは、著者・ライセンスにに関する情報のページと、ヘルプページを把握し、検索結果画面に表示することができます。

rel="alternate" hreflang=" " で他言語版ページへ

alternateは、代替物という意味。

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

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

Google の「rel="alternate" hreflang="x" について 」で詳細がありますので、そちらも参考にしてください。

サンプルソースコードです。

<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="alternate" で RSSフィードへ

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

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

RSS用のソースの例です。

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

type属性で指定するMIMEタイプは「application/rss+xml」です。

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

余談ですが、<a>要素で直接的に RSSフィードを表示することもできます。
(この「ほんっとに...」のRSSです)
この場合も <link>要素と同じように「link rel="alternate"」と type属性を使います。

<a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a>

rel="alternate" で PDFファイルへ

プリント用に PDFファイルを作っておいて、「link rel="alternate"」に type属性で PDFを指定すれば、PDFファイルに切り替えられます。

<head>
<link rel="alternate" media="print" href="print.pdf" type="application/pdf">
</head>

「print.pdf」を HTMLファイルの代替え書類として、「media属性」で「print」にして印刷用に指定しています。
type属性で指定するMIMEタイプは「application/pdf」です。

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

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

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

復数のURLから同じページにアクセスできるけど、Googleの検索エンジンに使用する URLを1つに絞りたいと知らせるのに rel="canonical" で指定できます。
URLの標準バージョンを検索エンジンに知らせるんです。
参考:正規 URL を使用する - Search Console ヘルプ

「www.」の有無によって、同じサイトなのにサーチエンジンに別物のサイトとして見られる場合(「www.example.com」と「example.com」とか)には、サイト内の全ページにそれぞれの正規のURLを書きます。

サーバ側で「.htaccess」を使ってURLの正規化をするのが一般的だそうですが、サーバの環境でこれができない場合に、この「rel="canonical"」を使うと良いのだそうです。

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

<head>
  <link rel="canonical" href="https://example.com/dresses/green-dresses/">
</head>

また、色違いの商品ページなどがたくさんあるサイト(color-red.html、color-pink.html、color-blue.html...が単なる商品の画像違いとか)は、検索エンジンに重複ページ(レベルが低いサイト)と判断されるかもしれません。
これを避けるために、優先ページを決め、それ以外のページに rel="canonical" でこの優先ページを指定します。

<head>
  <link rel="canonical" href="https://blog.example.com/dresses/color-red.html">
</head>

URLは、相対パスよりも 絶対パスで書いたほうがエラーになりにくいそうです。
この <link rel="canonical"> は <head>要素の最上部に書いた方が確実なんだって。

次回予告

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

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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.