ホームページ（ウェブサイト）制作において、ユーザーが実際に画面で見るテキストや画像などのコンテンツとは別に、ブラウザや検索エンジンに対してページの情報を裏側から伝える設定が存在します。この「裏側の情報」をまとめるための領域を作るのがHTMLの「head」タグであり、その中で外部のファイルとページを繋ぐ役割を持つのが「link」タグです。
「head」タグは、HTML文書の構造において必ずページの最初に配置されます。このタグで囲まれた部分に記述された内容は、基本的にブラウザの画面上には表示されません。ここには、そのページのタイトル（titleタグ）、文字コードの設定、検索エンジン向けの概要文（メタディスクリプション）、そしてスマートフォン表示を最適化するためのビューポート設定など、ページ全体に関する重要な基本情報（メタデータ）を格納します。
そして、この「head」領域の中で頻繁に使用されるのが「link」タグです。「link」タグは、現在のページと外部のファイルや別のページとを関係づけるために使用します。最も代表的な使い方は、ページの見た目を装飾するCSS（カスケーディングスタイルシート）ファイルの読み込みです。これにより、HTMLで定義した文書構造に対して、適切なデザインを適用させます。また、ブラウザのタブに表示される小さなアイコン（ファビコン）を指定したり、内容が重複しているページが存在する場合にどれが正規のページであるかを検索エンジンへ伝える「canonical（カノニカル）」を設定したりする際にも「link」タグが活躍します。
これらのタグを正確に設定することは、SEO（検索エンジン最適化）において非常に重要です。検索エンジンのクローラーは、ページの内容を解釈する際、まずこの「head」領域の情報を読み取ります。ここで正しい設定が行われていなければ、どれほど充実したコンテンツを用意しても、事業の魅力が検索結果に適切に反映されないかもしれません。本ページでは、「head」タグに含めるべき必須の設定項目と、「link」タグを用いた効果的な外部ファイルの連携方法について詳しく解説します。
検索エンジンとブラウザに最適化するhead領域の構築
事業用のホームページ（ウェブサイト）において、質の高いコンテンツを作成することと同じくらい、そのコンテンツの情報をコンピューターに正しく伝達する環境づくりが重要です。ここでは、目には見えない「head」領域の設計がもたらす具体的な効果について解説します。
メタデータの適切な配置とクローラビリティの向上
「head」タグの中に配置する情報は、検索エンジンがページを評価するための重要な指標となります。例えば、検索結果のタイトルや説明文が適切に設定されていると、ユーザーがクリックして訪問する確率が高まります。また、文字化けを防ぐ設定や、SNSでシェアされた際に画像を綺麗に表示させるOGP（Open Graph Protocol）の設定なども、すべてこの「head」領域で行います。目に見えない部分の丁寧なマークアップが、事業用ホームページ（ウェブサイト）の信頼性を底上げします。
linkタグを活用した表示速度とSEOの改善
「link」タグを使用してCSSなどの外部ファイルを読み込む際、記述の順番や読み込みのタイミングを調整することで、ページの表示速度（ページスピード）を改善できるかもしれません。また、「alternate」属性を用いてスマートフォン専用ページとPCページの存在を関連付けたり、複数ページにわたる記事の「前」「次」を検索エンジンへ伝えたりするなど、サイト全体の構造をクローラーへ正確に理解させる高度なSEO施策においても、「link」タグは頻繁に活用されます。
head（ヘッド）
<head></head>
ホームページ制作（ウェブサイト制作）の際に使用する<head>タグについてのご説明です。
ホームページ制作において<head>（ヘッド）タグはホームページ（ウェブサイト）を構成する各部分の内、HTML文書のヘッダー情報を指定し、文書付加情報（メタ情報）をページに与えます。
<head>タグ内に記述されたソースコードやテキストなどは、タイトルなどの一部メタ情報を除き、ブラウザ上には表示されません。
ホームページ（ウェブサイト）の裏側で、検索エンジンやブラウザにページの情報を伝える役割を持つのがheadタグです。画面上には直接表示されませんが、SEO対策や表示速度の改善、多様なデバイスでの正確な表示を実現するために極めて重要な領域です。事業の成果を高めるための、現代の仕様に基づいたheadタグ内の適切な記述方法について解説します。
<head> HTML文書のヘッダ情報
<head>タグを使用して、html文書（ウェブページ）のタイトル、作者情報、検索エンジン向けの要約（説明）、キーワード、ウェブページに呼び出すcssやjs等 その文書に関する情報を記述します。
ブラウザ上には表示されないメタ情報の指定に使用します。
html文書は<html><head><body>から構成されます。
<head>タグはこの内、文書付加情報として、HTML文書のコンテンツ本体ではなく、文書本体に様々な属性を与える際に使用します。
ホームページ制作における<head>内の属性指定
<title></title>をはじめ、<head>タグ内には、以下のような属性が指定されます。検索エンジンに対してページの内容を正しく認識させ、ユーザーの閲覧環境に合わせて適切に表示させるための必須項目群です。まずはこれらの設定を正確に行うことが重要です。
titleタグによるページタイトルの定義
headタグ内で最も重要な要素の一つです。検索結果の画面やブラウザのタブに表示されるテキストを指定します。事業に関連する検索キーワードを含めつつ、ユーザーがクリックしたくなるような固有のタイトルを各ページに設定します。
<meta>属性
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" itemprop="description" content="" />
<meta name="keywords" itemprop="keywords" content="" />
metaタグによる文字コードとビューポートの指定
文字化けを防ぐため、meta charset=”UTF-8″ を記述して文字コードを指定します。また、スマートフォンでの閲覧時に画面サイズを最適化するビューポート設定（meta name=”viewport” content=”width=device-width, initial-scale=1.0″）は、現在のレスポンシブデザインにおいて指定が必須です。
metaタグによるディスクリプションの指定
meta name=”description” content=”ページの説明文” のように記述し、ページの内容を要約します。検索結果のスニペットとして表示されるため、クリック率を向上させるための魅力的な文章を作成します。なお、かつて使用されていたキーワード指定（meta name=”keywords”）は、現代の主要な検索エンジンでは評価の対象外となっているため、現在は記述を省略することが一般的です。
<link>属性
<link rel='next' href="'' />
<link rel="canonical" href="" />
<link rel="author" href="" />
<link rel="publisher" href="" />
linkタグによるURL正規化とページ関係の明示
重複コンテンツを避けて検索エンジンの評価を統合するため、link rel=”canonical” href=”正規のURL” を記述してURLの正規化を行います。また、ブログなどの複数ページにわたる記事では、rel=”next” や rel=”prev” を用いて前後のページ関係を伝えることで、クローラーがスムーズに巡回できるようになります。
CSSやjsファイルの呼び出し
<link rel='stylesheet' id='' href='' type='text/css' media='all' />
<script type='text/javascript' src=''></script>
CSSやJavaScriptファイルの効率的な呼び出し
デザインを適用する外部スタイルシートは、link rel=”stylesheet” href=”CSSファイルのURL” を用いて読み込みます。JavaScriptファイル（scriptタグ）の読み込みについては、ページの表示速度を落とさないよう、head内ではなくbodyタグの閉じタグ直前に配置するか、defer属性を付与して非同期で読み込ませる手法が現在の標準です。
headタグとSEO
ホームページ制作でheadタグ内に記述する内容は、SEO（SEO対策）に大きく影響を与えます。<body>内の記述がブラウザ表示される内容にはなりますが、そのページの属性や特徴、テーマをしっかりと検索エンジンに伝えるためには、headタグ内のmeta属性をしっかり記述する必要があります。
WordPressなどでは比較的簡単にheadタグ内を操作することができますが、headタグの中の記述の中には、SEO以外にも直接ページの描画に関係しているものもあり、無料ブログなどでは自由に操作できないことがほとんどです。
高品質なSEOを手がける場合にはheadタグ内の設定がキーポイントのひとつとなりますので、本格的なWebマーケティングを行うときには、headタグ内を自由に操作できる仕様のホームページやCMSを利用しましょう。
<head></head>
ホームページ制作・SEOの1ポイント
ホームページ制作においてこのヘッドの設定はブラウザに直接表示されない項目がほとんどのため、テンプレートなどを使用した場合は、同じような設定がなされているケースが良くあります。しかし、このヘッド部分の指定は、ホームページにアクセスしたユーザーに対するものというよりは、検索エンジンなどへ情報をうまく伝えるためにあるため、SEOを意識する場合は、入念に設定する必要があります。
link（リンク）
<link></link>
ホームページ制作（ウェブサイト制作）の際に使用する<link>タグについてのご説明です。
ホームページ制作において<link>（リンク）タグは、文書の関連性を示し、関連する文書ファイルを指定します。
ホームページ（ウェブサイト）の裏側で、外部のファイル（スタイルシートやアイコンなど）を読み込んだり、検索エンジンにページの関係性を伝えたりする重要な役割を持つのがlinkタグです。必ずheadタグ内に記述します。現代のウェブ制作では、単にデザインを読み込むだけでなく、表示速度の改善（パフォーマンスチューニング）やSEO対策において極めて重要な役割を担っています。
<link> 文書の関連性、関連する文書ファイルを指定
<link>タグは、そのHTML文書と関連する別の文書ファイルを指定し、その関係を定義します。リンク。
文字やイメージ（画像）をクリックして、別ページや別のサイトを表示する機能、ハイパーリンクの指定は、「<a>アンカーの定義 ハイパーリンクの指定」を使用します。
<link>タグは、<head>内に記述します。
現代のホームページ制作で基本となる主要属性
外部ファイルとの接続やリンクの役割をブラウザに正しく認識させるための基本的な属性です。適切に記述することで無駄な通信を抑え、表示の安定化につながります。
href（エイチレフ）属性
読み込むファイルや関連する文書のURLを指定します。href=”URL”のように記述します。ホームページ（ウェブサイト）内の階層に合わせた相対パスや、ドメインを含めた絶対パスのどちらでも指定できます。
rel（レル）属性
現在の文書から見た、リンク先のファイルやページとの関係性（リンクタイプ）を指定します。rel=”stylesheet”のようにキーワードを記述します。現代のlinkタグにおいて最も重要であり、そのタグがどのような役割を果たすかを決定づけます。
type（タイプ）属性
読み込むファイルのMIMEタイプを指定します。過去にはtype=”text/css”などの記述が一般的でしたが、現代のHTML5仕様ではCSSの読み込み時におけるtype属性は省略可能となっています。標準でtext/cssとして扱われるため、記述を省いてコードをシンプルに保つことが一般的です。
実務とSEO対策で多用される重要なrel属性（リンクタイプ）
より専門的には、検索エンジン（クローラー）への指示や表示速度の向上を狙う際、適切なrel属性を使い分けることが大きな効果を生みます。
stylesheet
外部のCSS（スタイルシート）ファイルを読み込むための指定です。ホームページ（ウェブサイト）のデザインを一括で管理するために最も頻繁に使用されます。
icon と apple-touch-icon
ブラウザのタブに表示されるファビコン（icon）や、スマートフォンのホーム画面にショートカットを追加した際に表示されるアプリアイコン（apple-touch-icon）を指定します。事業のブランドイメージを視覚的に伝えるために役立ちます。
canonical（カノニカル）
URLの正規化を行います。URLの末尾のパラメータや類似ページによって重複コンテンツが発生している場合、検索エンジンに対して正規のURLを明示し、ページの評価を一本化するための重要なSEO設定です。
alternate
代替バージョンとなる文書を指定します。多言語展開を行っているホームページ（ウェブサイト）での別言語ページや、更新情報を配信するRSSフィードのURLを明示する際に使用します。
preconnect、preload、prefetchによる速度改善
ページの表示速度を大幅に改善するための現代的な指定です。外部ドメインへ事前に接続を確立するpreconnect、現在のページで優先して使用するWebフォントなどを事前読み込みするpreload、次にユーザーが訪れる可能性が高いリソースを先読みしておくprefetchなどを指定し、体感速度を向上させます。
prev と next
ブログ記事の一覧や複数ページにまたがるコンテンツにおいて、前のページ（prev）や次のページ（next）の関係性を検索エンジンに伝えます。
レスポンシブデザインと多言語展開を支える属性
画面サイズや言語環境に応じて適切なリソースを出し分け、ユーザー体験を向上させるための属性です。
media（メディア）属性
読み込むスタイルシートを適用する条件（メディアタイプや画面サイズ）を指定します。media=”(max-width: 768px)”のように指定することで、特定の端末幅だけに適用するCSSを分離し、無駄な処理を省いて表示速度を最適化できます。
hreflang（エイチレフラング）属性
リンク先の言語コードを指定します。多言語対応のホームページ（ウェブサイト）において、rel=”alternate”と組み合わせて記述することで、検索エンジンが地域や言語に合わせた適切なページを検索結果に表示できるようになります。
as（アズ）属性
rel=”preload”を用いてリソースを事前読み込みする際に、それが何のファイル（style、script、font、imageなど）であるかをブラウザに正しく伝えます。これを正確に指定しないと事前読み込みが正しく機能しません。
現代のHTML仕様で廃止・非推奨となった属性と値
かつてはHTML内で細かく定義されていた属性や値ですが、仕様の整理やWeb技術の進化に伴い、現在は使用されなくなっています。
廃止された属性（rev、target、charset）
逆方向の関係性を示すrev属性、表示先フレームを指定するtarget属性、文字コードを指定するcharset属性は、現代のHTML5仕様で廃止されています。関係性はすべてrel属性に統一され、文字コードはサーバー側のHTTPヘッダーやmetaタグで制御します。
廃止・非推奨となったrelの値
かつて文書構造を細かく分けるために存在したstart、contents（目次）、index（索引）、glossary（用語集）、copyright（著作権）、appendix（付録）、help、bookmark、chapter（章）、section（節）、subsection（項）といった値は、現代では非推奨または廃止となっています。現在、ホームページ（ウェブサイト）の構造はnavタグやarticleタグなどの意味を持つHTMLタグや、構造化データ（Schema.org）を用いて検索エンジンに伝えます。
<link></link>
ホームページ制作・SEOの1ポイント
ホームページ制作やSEOの情報で「リンク」と表現されているものは、このリンクタグではなくほとんどアンカータグ（<a>）です。この「リンク」の場合は、メタ設定のリンク属性、という表現をされたりします。HTMLは、そのタグの持つ機能と、タグの名前が同じようになっているものがほとんどですが、こうした機能の異なるものもまれにありますので注意が必要です。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ（ウェブサイト）のHTML編集方法
ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作・SEO・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社（ホームページ制作会社）株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいておりますので、HTMLの修正をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
Related page
-
ホームページ（ウェブサイト）制作において、ブラウザや検索エンジンに対してページの設定情報や意味を伝えるためのmetaタグ（メタタグ）は、ユーザーの目には直接見えないものの、サイトのパフォーマンスやWebマーケティングの成果を左右する極めて重要な要素です。文字コードの指定、画面サイズの制御、検索結果に表示される説明文の定義など、ホームページ（ウェブサイト）の根
-
ホームページ（ウェブサイト）制作において、ユーザーがブラウザ上で実際に目にするすべてのコンテンツを囲むbodyタグは、ページを構成するための最も土台となる要素です。HTML文書は、裏側の設定を記述するhead要素と、表側の情報を記述するbody要素という2つの大きなブロックで成り立っています。テキスト、画像、リンク、表など、ホームページ（ウェブサイト）を訪れ
-
ホームページ（ウェブサイト）制作において、ページに動きをつけたり、ユーザーの行動を分析したりするために、JavaScriptをはじめとするプログラムは非常に重要な役割を果たしています。このプログラムをホームページ（ウェブサイト）内に組み込むために使用されるのが、HTMLの「script」タグです。また、これと対になって使用されることが多い「noscript」
-
ホームページ（ウェブサイト）制作において、ページを正しく表示し、検索エンジンに適切な情報を伝えるための第一歩となるのが、「DOCTYPE（ドキュメントタイプ）宣言」です。DOCTYPE宣言とは、そのHTML文書がどのバージョンのHTMLで記述されているかを、ブラウザや検索エンジンのクローラーに対して知らせるための重要な記述です。HTMLファイルの最も上の行（
-
ホームページ（ウェブサイト）制作において、文字の色を変えたり、画像の大きさを調整したりといった画面の見た目（デザイン）を制御するためには、CSS（カスケーディングスタイルシート）を使用します。このCSSの命令を、HTMLの文書内に直接書き込むために使用されるのが「style」タグです。 通常、ホームページ（ウェブサイト）の構造を作るHTMLと、デザインを作る
