HTMLのlinkタグの使い方！外部リソースと連携する

html

HTMLのlinkタグについて書いています。

linkタグは、HTMLドキュメントと外部リソースとの関係性を定義するために使用され、<head>タグ内に配置されます。
主にCSSファイル（スタイルシート）やファビコン（favicon）を読み込んだり、preconnectやprefetchといったパフォーマンス最適化のためのヒントをブラウザに伝えたりするために利用されます。

linkタグの基本的な使い方と配置

linkタグは、<head>タグ内に記述する空要素であり、終了タグは必要ありません。
主にrel属性とhref属性を組み合わせて使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>linkタグの使い方！外部リソースとの連携を定義する重要要素</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <p>ページの内容はここに記述されます。</p>
</body>
</html>

linkタグの主要な属性と値

linkタグでよく使用される主要な属性とその値について解説します。

rel属性

現在のドキュメントとhref属性で指定されたリソースとの関係性を指定します。
最も重要な属性の一つです。

stylesheet

外部のCSSファイル（スタイルシート）を読み込むために使用します。

<link rel="stylesheet" href="style.css">

icon

Webサイトのファビコン（ブラウザのタブやブックマークなどに表示される小さなアイコン）を指定します。
通常、type 属性と組み合わせて使用します。

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

shortcut icon(非推奨)

iconと同じ目的で使用されていましたが、現在はiconのみを使用することが推奨されています。

alternate

代替スタイルシートや代替言語版のドキュメントへのリンクを示します。

  • 代替スタイルシート:
<link rel="alternate stylesheet" href="dark-theme.css" title="Dark Theme" disabled>
<link rel="alternate stylesheet" href="light-theme.css" title="Light Theme">
  • 代替言語版:
<link rel="alternate" href="https://example.com/en/" hreflang="en">
<link rel="alternate" href="https://example.com/ja/" hreflang="ja">

canonical

SEOにおいて、重複コンテンツが存在する場合に、検索エンジンに対して正規のURLを示すために使用します。

<link rel="canonical" href="https://example.com/page">

preconnect

ページが必要とする可能性の高いリソースへの早期接続をブラウザに指示することで、パフォーマンスを向上させます。
DNSルックアップ、TCPハンドシェイク、TLSネゴシエーションを事前に行います。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

crossorigin属性は、異なるオリジンへの接続の場合に必要となることがあります。

prefetch

ユーザーが将来的にアクセスする可能性の高いリソースを事前にダウンロードしておくことで、ページ遷移を高速化します。

<link rel="prefetch" href="/images/large-image.jpg">

dns-prefetch

preconnectよりも軽量で、DNSルックアップのみを事前に行います。
異なるオリジンのリソースへの接続が多い場合に有効です。

<link rel="dns-prefetch" href="https://analytics.example.com">

modulepreload

JavaScriptのESモジュールを早期にダウンロードして解析し、実行の準備を整えます。

<link rel="modulepreload" href="/js/module.js">

preload

現在のページで使用する重要なリソース（フォントや画像など）を先読みし、表示速度を向上させます。

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

href属性

外部リソースのURLを指定します。相対パスまたは絶対パスを使用できます。

<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="https://example.com/images/favicon.ico">

type属性

リンクされたリソースのMIMEタイプを指定します。
rel="stylesheet" の場合は省略可能ですが、rel="icon" の場合は推奨されます。

<link rel="icon" href="favicon.png" type="image/png">
<link rel="stylesheet" href="print.css" type="text/css" media="print">

media属性

リンクされたリソースが適用されるメディアの種類を指定します。
例えば、印刷時のみ適用するスタイルシートなどを指定できます。

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

title属性

代替スタイルシートの名前を指定するために使用します。

<link rel="alternate stylesheet" href="dark-theme.css" title="Dark Theme">

hreflang属性

rel="alternate" で代替言語版を指定する際に、リンク先のドキュメントの言語を指定します。

<link rel="alternate" href="https://example.com/en/" hreflang="en">

crossorigin属性

CORS（Cross-Origin Resource Sharing）を制御するための属性です。rel="preconnect" や rel="prefetch" などで使用されることがあります。

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

as属性

rel="preload"やrel="modulepreload"などで使用され、プリロードまたはモジュールプリロードするリソースの種類をブラウザにヒントとして伝えます。
適切な値を指定することで、ブラウザはリソースをより効率的に処理できます。

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="modulepreload" href="/js/module.js" as="script">

SEOとパフォーマンスにおけるlinkタグの役割

linkタグは、SEOとWebサイトのパフォーマンスの両面で重要な役割を果たします。

  • SEO:
    • rel="canonical": 重複コンテンツの問題を解決し、検索エンジンに正規のURLを伝えることで、評価の分散を防ぎます。
    • rel="alternate" hreflang="...": 異なる言語のページを検索エンジンに伝えることで、国際SEOを最適化します。
  • パフォーマンス:
    • rel="stylesheet": 外部CSSファイルを効率的に読み込み、レンダリングを最適化します。
    • rel="preconnect": 重要な外部ドメインへの接続を事前に確立し、リソースの読み込み時間を短縮します。
    • rel="prefetch": 将来的に必要となる可能性の高いリソースを事前にダウンロードし、ユーザー体験を向上させます。
    • rel="dns-prefetch": DNSルックアップを事前に行い、外部リソースの読み込み時間を短縮します。
    • rel="preload": 現在のページで必要となる重要なリソースを早期に読み込み、レンダリングをブロックする時間を減らします。
    • rel="modulepreload": ESモジュールを早期に読み込み、JavaScriptの実行を高速化します。

linkタグを使用する際の注意点

  • <head> タグ内に記述する: linkタグは、必ずHTMLドキュメントの<head>タグ内に記述する必要があります。
  • rel 属性は必須: リンクの種類を示すrel属性は、ほとんどの場合必須です。
  • 適切な href を指定: 外部リソースへのパスは、相対パスまたは絶対パスで正しく指定する必要があります。
  • type 属性の利用: 特にrel="icon"の場合は、type属性でMIMEタイプを明示的に指定することが推奨されます。
  • パフォーマンス最適化の検証: preconnectやprefetchなどのパフォーマンス最適化を行う場合は、実際に効果があるか、過度なリソースのプリロードになっていないかなどを検証することが重要です。
  • canonical タグの正確性: rel="canonical"を使用する場合は、正規のURLを正確に指定する必要があります。

linkタグの記述例

以下は、一般的な <head> タグ内のlinkタグの記述例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>linkタグの使い方！外部リソースとの連携を定義する重要要素</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://analytics.example.com">
  <link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="canonical" href="https://example.com/page">
  <link rel="alternate" href="https://example.com/en/" hreflang="en">
</head>
<body>
  <p>ページの内容はここに記述されます。</p>
</body>
</html>

まとめ

linkタグは、Webページと外部リソースを結びつけ、見た目の制御からパフォーマンスの最適化、SEO対策まで、多岐にわたる重要な役割を担っています。
各属性とその値を正しく理解し、適切にlinkタグを使用することで、より高品質でユーザーエクスペリエンスの高いWebサイトを構築することができます。

HTML
yasuaki

コメント