ywork2020.com

Title

リレーション属性を使えば、ファイルの関係性を示すことができる

rel属性の概要

rel属性はlink要素においてhref属性を使い外部ファイルを参照する場合に、そのファイルとの関係性を明示する為の属性です。 よく使われるものとしてCSSのファイルを関連付けるときに「rel="stylesheet"」と記述します。
また、link要素の「rel="canonical"」を使ってSEOとしてURLの正規化を行う場合に使用することもあります。
尚、link要素はhead要素に内包されるように記述します。

サンプルコード

CSS,スタイルシートのファイルを読み込む場合

<head>
	<link rel="stylesheet" href="スタイルシートのURL">
</head>

Webサイトのアイコンを指定する場合

<head>
	<link rel="icon" href="画像のURL" sizes="32x32">
</head>

スマホのホーム画面用のアイコンを指定する場合

<head>
	<link rel="apple-touch-icon-precomposed" href="画像のURL">
</head>

代替ページの指定: RSSフィード版のページを指定する場合

<head>
	<link rel="alternate" type="application/rss+xml" title="フィード" href="RSSフィードページのURL">
</head>

代替ページの指定: モバイル版のページを指定する場合

最近のモバイルを縦使用した場合、widthは640px～650pxで綺麗に収まると思います。 
<head>
	<link rel="alternate" media="only screen and (max-width: 640px)" href="モバイルページのURL">
</head>

代替ページの指定: 他国語版のページを指定する場合

<head>
	<link rel="alternate" hreflang="外国語ページのURL">
</head>

1つの記事を複数のページに分割する場合

初めのページには「rel="next"」、最後のページには「rel="prev"」だけを書きます。 それ以外のページでは、「rel="next"」と「rel="prev"」のlink要素を2つ記述します。 
<head>
	<link rel="next" href="次のページのURL">
	<link rel="prev" href="前のページのURL">
</head>

正規URLを指定する場合

これはSEO対策として重要です。
検索エンジンに登録されるURLには、同じページなのに複数のURLでインデックスされてしまい、 評価が分散することによってページランクが下がってしまう現象を防ぐことできます。 
<head>
	<link rel="canonical" href="正規ページのURL">
</head>
同じページなのに複数のURLでインデックス登録されてしまう例のパターン
  • https://www.example.com (httpsプロトコルwww有り)
  • http://www.example.com (httpプロトコルwww有り)
  • https://example.com (httpsプロトコルwww無し)
  • http://example.com (httpプロトコルwww無し)
  • https://www.example.com/ (ドメインの後に/有り)
  • https://www.example.com/index.html (ドメインの後に/ファイル名)

どのURLでもページには接続できますが、1つの正規URLを指定しておくと検索エンジンは指定したURLのページだけを評価してくれます。 また、どのURLでも好きなものを選べばよいのですが、httpsプロトコルが使えるサーバーを利用しているなら、セキュリティーを考慮してhttpsを使うべきです。 これはGoogleの評価の対象にもなりますので注意してください。

正規URLを指定する方法には「.htaccess」ファイルを使った301リダイレクトの方法もありますが、このページの主旨とは違いますので割愛します。