ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

アフィリエイト広告を利用しています

  1. TOP
  2. ブログ
  3. 【SEO】リンクタグ（linkタグ）とは？書き方、一覧

【SEO】リンクタグ（linkタグ）とは？書き方、一覧

この記事は、最初の投稿から4年以上が経過しています。

最終更新から1756日が経過しています。

【SEO】リンクタグ（linkタグ）とは？書き方、一覧

「SEOに力を入れたいが､何をすればいいかわからない」
「リンクタグについて知りたい」

悩み

こういった悩みにお答えします｡

目次
  1. リンクタグ(linkタグ)とは
  2. リンクタグ(linkタグ)の書き方
  3. リンクタグ(linkタグ)一覧
    1. スタイルシート(CSS)
    2. ページの関係性
      1. canonical
      2. alternate
      3. prev､next
    3. アイコン･ファビコン
    4. resource hints
    5. preload
    6. manifest
    7. その他
  4. まとめ

リンクタグ(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については､以下のサイトで詳しく紹介されています｡


Warning: simplexml_import_dom(): Invalid Nodetype to import in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php on line 32

Fatal error: Uncaught Error: Call to a member function xpath() on null in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php:38 Stack trace: #0 /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/blog/link-tag.php(207): get_ogp('https://employm...') #1 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template.php(812): require('/home/hashi84/h...') #2 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template.php(745): load_template('/home/hashi84/h...', false, Array) #3 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/general-template.php(206): locate_template(Array, true, false, Array) #4 /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/single-blog.php(100): get_template_part('blog/link-tag') #5 /home/hashi84/hsmt-web.com/public_html/wp/wp-includes/template-loader.php(106): include('/home/hashi84/h...') #6 /home/hashi84/hsmt-web.com/public_html/wp/wp-blog-header.php(19): require_once('/home/hashi84/h...') #7 /home/hashi84/hsmt- in /home/hashi84/hsmt-web.com/public_html/wp/wp-content/themes/hsmt-web/functions/custom_ogp.php on line 38