「SEOに力を入れたいが､何をすればいいかわからない」
「リンクタグについて知りたい」
こういった悩みにお答えします｡
- 目次
リンクタグ(linkタグ)とは
リンクタグは､現在のページと外部のリソースとの関係を指定します｡
リンクタグはスタイルシートへのリンクに最もよく使用されますが､ファビコン､その他のことにも使用されます｡
このブログのトップページはこんな感じです｡
<link rel='stylesheet' id='style-css' href='(CSS)' type='text/css' media='all'> <link rel="canonical" href="(URL)"> <link rel="preload" as="font" href="(フォント)" crossorigin> <link rel="preload" as="font" href="(フォント)" crossorigin> <link rel="dns-prefetch" href="(ドメイン)"> <link rel="dns-prefetch" href="(ドメイン)"> <link rel="dns-prefetch" href="(ドメイン)"> <link rel="dns-prefetch" href="(ドメイン)"> <link rel="preconnect" href="(ドメイン)"> <link rel="apple-touch-icon" sizes="180x180" href="(ファビコン)"> <link rel="icon" type="image/png" sizes="192x192" href="(ファビコン)"> <link rel="icon" type="image/png" sizes="512x512" href="(ファビコン)"> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="(ファビコン)"> <link rel="icon" type="image/vnd.microsoft.icon" href="(ファビコン)">
リンクタグ(linkタグ)の書き方
メタタグと同じでhead内に書きます｡
「rel属性」「href属性」必須です｡
任意で以下の属性を使うこともあります｡
- type
- sizes
- media
- hreflang
- as
- crossorigin
<link rel='stylesheet' href='(CSSファイル)' type='text/css' media='all'>
リンクタグ(linkタグ)一覧
スタイルシート(CSS)
外部CSSの読み込みに使用します｡
ほぼ必須のリンクタグです｡
<link rel='stylesheet' href='(CSSファイル)' type='text/css' media='all'>
media属性はほとんど「all」で大丈夫ですが､印刷用にCSSが必要な場合は「print」にします｡
ページの関係性
canonical
URLの正規化をします｡
ページ分けやカテゴリ分けしたページを､1つの重要なページをcanonicalに指定することにより､評価の分散が避けられます｡
例えば､ページ分けされているページの2ページ目､3ページ目に1ページ目のURLを指定することによって1ページ目だけがGoogle検索にインデックスされる対象になります｡
<link rel="canonical" href="(URL)">
alternate
多言語サイト場合､検索インデックスさせたい言語を指定します｡
<link rel="alternate" hreflang="(言語)" href="(URL)">
prev､next
ページ分けをしている場合､前後のページを指定します｡
<link rel="prev" href="(URL)"> <link rel="next" href="(URL)">
以前はSEOに効果があったようですが､現在はGoogle検索順位の要因にはされていないようです｡
アイコン･ファビコン
ファビコンやiPhoneなどのショートカットアイコンを指定します｡
<link rel="apple-touch-icon" sizes="(サイズ)" href="(ファビコン)"> <link rel="icon" type="image/png" sizes="(サイズ)" href="(ファビコン)"> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="(ファビコン)"> <link rel="icon" type="image/vnd.microsoft.icon" href="(ファビコン)">
以下のサイトでファビコンを簡単に作成できます｡
コピペで使えるlinkタグも表示してくれますが､多すぎるので4つくらいで大丈夫だと思います｡
使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。
resource hints
ページの読み込みを最適化するための事前接続の指定をします｡
<link rel="dns-prefetch" href="(ドメイン)"> <link rel="preconnect" href="(ドメイン)"> <link rel="prefetch" href="(ファイル)" as="(ファイル分類)" crossorigin> <link rel="prerender" href="(URL)">
resource hintsの4つについては以下のページで紹介しています｡
【SEO】Webページ高速化 リソースへの事前接続【Resource Hints】
Webページ速度改善について知りたいですか？この記事では、リソースへの事前接続に有効なResource Hints（dns-prefetch、preconnect、prefetch、prerender）について紹介しています。ぜひご覧ください。
preload
resource hintsの「prefetch」と似ていますが､より強制的な事前接続をします｡
3秒以内に使用しないと警告がでるようです｡
「なんとなく大事だから先に読み込ませておこう」ではダメで開発ツールを見るなどして適切に設定する必要があります｡
<link rel="preload" href="(URL)" as="(ファイル分類)" crossorigin>
manifest
プログレッシブウェブアプリ (PWA) に対応する場合には必須です｡
<link rel="manifest" href="(JSON)">
PWAについては､以下のサイトで詳しく紹介されています｡
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装｜ハイクラス転職・求人情報サイト AMBI（アンビ）
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装ページです。AMBI（アンビ）は若手ハイキャリア向け転職サイト。年収500万円以上の案件が多数。職務経歴書を元にした三段階評価によって、選考通過の可能性がわかる。新規事業や外資系企業へのチャレンジも。
その他
以下のようなものもありますが､ほとんどのサイトで使われていないと思います｡
<link rel="author" href="(URL)"> <link rel="help" href="(URL)"> <link rel="license" href="(URL)"> <link rel="pingback" href="(URL)"> <link rel="search" href="(URL)"> <link rel="sidebar" href="(URL)"> <link rel="tag" href="(URL)">
まとめ
リンクタグ(linkタグ)について紹介しました｡
メタタグと比べると､ただ情報を伝えるだけでなく､どう読み込ませるかなど具体的な指定が必要なものもあり設定が少し難しいです｡
実際には､CSSとファビコン以外使っていないページも多いですが､適切な設定を知っておくとSEOに好影響があるかもしれません｡
SEOで重要！メタタグの確認方法、書き方、使えるメタタグ 25選
SEO対策に重要なメタタグについて知りたいですか？この記事では、メタタグの確認方法、メタタグの書き方、メタタグ一覧を紹介しています。ぜひご覧ください。
