The HTML <link> element doesn’t display content; it tells browsers and search engines how this page is related to external resources like CSS, icons, canonical URLs, alternate languages, manifests, and performance hints such as preload or preconnect.
link は、ページ本文の中に文章や画像を「表示」するためのタグではありません。「このページは、外部の何と関係があるのか」を宣言するためのタグです。たとえば「このCSSを使う」「このアイコンがこのサイトの印」「このページの正規URLはこれ」「別言語版はここ」「先にこれを取りに行って」など、ブラウザや検索エンジンに“関連付けの札”を渡すイメージです。
いちばん大事なのは rel（relationship）です。rel に何を書くかで、<link> の役割がガラッと変わります。
<link> の主役は rel<link> はページと外部リソースの関係を宣言します。見た目は何も変わらなくても、読み込み・検索・共有・速度など“裏側の動き”が変わります。rel が意味（目的）を決めるrel="stylesheet" ならCSS、rel="icon" ならアイコン、rel="canonical" なら正規URL…のように、rel がスイッチになります。href は「どこ？」、as は「何の種類？」href は対象のURLです。速度最適化（preload 等）では as（script/style/fontなど）も重要になります。覚え方：rel = 目的、href = 場所、（必要なら）as = 種類。
まずは、これが書ければOKです。
HTML
<link rel="stylesheet" href="/assets/site.css">rel="stylesheet"href="/assets/site.css"<head>）<link> は基本的に <head> の中に置きます。理由はシンプルで、CSSやアイコン、正規URL、先読みヒントは「ページ本体を描く前に知っておいてほしい情報」だからです。
<head> が基本preload / prefetch を追加したいこともあります。そのときは <body> 内に挿入されることもありますが、まずは <head> に置く前提でOKです。rel でよく使うもの（実務の登場率が高い順）ここからは「よく見る書き方」を、目的別に整理します。どれも rel が違うだけで、目的も変わります。
stylesheet：CSSを適用するicon：サイトのアイコン（タブやブックマーク等）sizes を付けます。apple-touch-icon：iOS系のホーム画面アイコンcanonical：このページの正規URLalternate：別言語版、別形式（例：PDF）hreflang、形式なら type とセットになりやすいです。manifest：PWAのマニフェスト最小構成ならこれでも十分です（運用方針で増やしてOK）。
HTML
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">「どのサイズを用意すべきか」はサイト方針次第です。まずは “確実に1つ動く” を作ってから増やすのが安全です。
canonical（事故予防にも効く）canonical は「検索エンジン向けのやつでしょ？」と思われがちですが、運用が増えるほど“事故予防”になります。
https://example.com/page と https://example.com/page/ の両方で見えてしまう?ref=...）違いで同じ内容が量産されるこういうとき、正規URLを明示しておくと「代表はこれ」と揃えやすくなります。
HTML
<link rel="canonical" href="https://example.com/products/123">運用ルールの例：正規URLは常に200で表示できるURLにする／末尾スラッシュの統一／http→https の統一。
alternate + hreflang同じ内容を日本語ページと英語ページで持つ場合などに使います。ブラウザが勝手に切り替えるものではなく、「このページの別言語はこれ」と検索エンジン等に伝える用途が中心です。
HTML
<link rel="alternate" hreflang="ja" href="https://example.com/ja/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">言語ページ同士で相互に揃える（お互いに alternate を持つ）運用にしておくと、後から追加する時も迷いにくいです。
preload / prefetch / preconnectここからは “中級者以上で効いてくる” やつです。ページの体感速度が気になってきたら、<link> の出番が増えます。
preload：今の表示に必要だから、優先して取りに行ってprefetch：次に必要になりそうだから、余裕があるときに取っておいてpreconnect：次に使うドメインに、先に接続準備しておいてpreload の典型（CSS）
HTML
<link rel="preload" href="/assets/critical.css" as="style">
<link rel="stylesheet" href="/assets/critical.css">よくある事故：preload だけ書いて満足してしまう（＝予約したのに使っていない）。必ず “使用する書き方” をセットにします。
preconnect の典型（CDN）
HTML
<link rel="preconnect" href="https://cdn.example.com" crossorigin>crossorigin が必要かは配信形態次第です。特にフォントやCDNは絡みやすいので、問題が出たら “ここを疑う” くらいで覚えると実務で助かります。
integrity）と crossoriginCDNのCSS/JSを使うとき、「もし中身が差し替わったら？」という不安に備えるのが SRI（Subresource Integrity）です。ざっくり言うと、integrity にハッシュを書いておくと、ブラウザが一致しないファイルを拒否できます。
HTML
<link
rel="stylesheet"
href="https://cdn.example.com/lib/v1.2.3/lib.min.css"
integrity="sha384-..."
crossorigin="anonymous"
>integritycrossorigin実務メモ：CDNのURLをバージョン固定にする／integrity の更新手順を決めておく、までセットにすると運用が安定します。
<link> を書いたのに何も変わらないpreload が効かない（または警告が出る）preload は予約です。使う指定（CSSなら rel="stylesheet"、フォントなら実際にそのフォントを使うCSS等）が必要です。as の指定ミスでもズレます。favicon-v2.ico など）運用にすると楽になります。canonical のURLが間違っているこのサンプルは「よくあるセット」を1つの <head> に集めたものです。必要なものだけ残して削ってOKです。
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<!-- CSS -->
<link rel="stylesheet" href="/assets/site.css">
<!-- Icon -->
<link rel="icon" href="/favicon.ico">
<!-- Canonical (必要なら) -->
<link rel="canonical" href="https://example.com/page">
<!-- Performance hint (必要なら) -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
</head>大事なのは “全部盛り” ではなく、目的があるものだけ入れることです。<link> は便利ですが、増やしすぎると管理が難しくなります。
<link> と <a> は何が違いますか？<a> はユーザーがクリックして移動する“リンク”。<link> はブラウザや検索エンジンに渡す“関連付け”。用途が別物です。rel は必須ですか？rel が無いと「何の関係か」が分からず、<link> の意味が薄くなります。preload はとりあえず入れれば速くなりますか？integrity）は必ず必要ですか？href のパス違い／404。対処：DevToolsのNetworkでCSSが取得できているか確認します。preload の警告が出る（予約したのに使っていない系）preload が“取得予約”で止まっている。対処：CSSなら rel="stylesheet" を併記、JS/フォントも実際の使用をセットにします。preload でCORSっぽい問題が出るcrossorigin が必要な配信形態。対処：crossorigin を付ける／サーバー設定も確認します。canonical を入れたのにURLが揃わないlink は「このページと外部リソースは、こういう関係です」を伝える要素で、その“関係”を表す中心が rel です。rel（relationship）stylesheet / icon / canonical / preload など、関係の種類を指定します。まずは「rel が主役、href は相手の場所」と覚えると迷いにくいです。href（hypertext reference）base を使っていると相対パスの解釈が変わるので注意します。./ や ../ のように“基準からの位置”で書くURL、絶対URLは https:// から始まるフルのURLです。base（base URL）canonicalicon / apple-touch-iconsizes を付けて、適切なサイズを渡します。manifestpreload / prefetch / preconnect / dns-prefetch です。aspreload で「これは何として使う？」（style / script / font など）を宣言するための属性です。宣言がズレると効果が落ちたり警告が出たりします。integrity（SRI: Subresource Integrity）crossorigin / CORSpreload で重要になることが多いです。text/css、JavaScriptなら text/javascript や application/javascript のように、サーバーが返すヘッダーで決まります。alternate / hreflangmodulepreloadtype="module"）の読み込みを前倒しする仕組みです。依存モジュールを含めて効率よく準備できます。