headタグは、HTMLの冒頭に記述される重要な要素であり、検索エンジンにページ情報を伝える役割を担っています。設定次第でSEOにも影響を与えるため、自社サイトのheadタグが適切に組まれているかを把握しておくことは、ホームページ担当者にとって欠かせない内容です。
本記事ではheadタグの基本やheaderタグとの違い、記述するタグの種類、SEO効果まで、わかりやすく解説します。
headタグとは
headタグとは、HTMLの冒頭に記述されるタグで、ページ全体に関する情報や設定をまとめる役割を担います。具体的には次のように記述します。
<head> <meta charset="UTF-8"> <title>ページタイトル</title> <meta name="description" content="ページの説明文"> </head>
タイトル、文字コード、ディスクリプション、外部ファイルの読み込み指定など、ブラウザや検索エンジンがページを正しく解釈するための情報がheadタグ内に集約されます。
headタグの内容はサイト上に表示されません。裏側で機能する設定情報であり、訪問者の目に触れるのはbodyタグ内の本文や画像部分です。
ただし表示されない要素だからといって軽視できるものではなく、headタグの設定が適切かどうかは、検索エンジンへの情報伝達やページの表示速度、SNSでの共有時の見え方など、サイト全体のパフォーマンスに直結します。
SEOやユーザー体験を高めるうえで、headタグは欠かせない基盤です。
headタグとheaderタグの違い
headタグとheaderタグは名前が似ていますが、役割と記述位置が全く異なるタグです。
headタグはHTMLのbodyタグの外側、ドキュメントの冒頭に記述します。タイトルやディスクリプション、文字コードなど、ブラウザや検索エンジンに向けた情報をまとめる場所です。記述した内容はサイト上に表示されず、裏側で機能します。
一方のheaderタグはbodyタグの内側に記述し、ページ上部に表示されるロゴやグローバルナビゲーション、キャッチコピーなどをまとめる役割を担います。訪問者の目に直接触れる部分を構成するタグであり、ホームページの第一印象を左右する要素でもあります。
つまり、headタグはホームページの裏側で機能する設定情報、headerタグは表側に表示される上部コンテンツという違いがあります。両者は名称こそ似ているものの、果たす役割は全く別物です。混同せず、それぞれの目的に応じて適切に使い分けることが重要です。
headタグ内に記述するタグ一覧
headタグ内には、ブラウザや検索エンジンがページを正しく認識し、ユーザー体験を最適化するためのさまざまなタグを記述します。ここでは、headタグに含める代表的なタグとそれぞれの役割を紹介します。
文字のエンコード
文字のエンコードは、ページで使用する文字セットを指定するためのタグで、headタグ内の先頭付近に記述するのが一般的です。
<meta charset="UTF-8">現在は世界中の言語に対応したUTF-8の指定が標準となっており、日本語サイトでも欠かせません。エンコードを正しく指定していないと、ブラウザが文字を解釈できず、訪問者の画面に文字化けが発生する可能性があります。商品名や会社名が読めない状態では、訪問者の離脱や信頼性の低下につながりかねません。
headタグの基本中の基本となる要素のため、必ず記述しておきましょう。
viewport
viewportは、ページの表示サイズや拡大率を設定するためのタグで、headタグ内に記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">スマートフォンやタブレットから閲覧されることが当たり前になった現在、レスポンシブデザインを採用するうえで欠かせない設定です。viewportが指定されていないと、スマートフォンでもパソコン用の幅で表示されてしまい、文字が小さく読みづらい、操作しづらいといった問題が発生します。
Googleもモバイル端末での使いやすさを検索順位の要因としているため、headタグ内に必ず記述しておくべき要素です。
タイトル
タイトルは、ページのタイトルを指定するためのタグで、headタグ内に記述する要素のなかでも特に重要な存在です。
<title>ページタイトル</title>ブラウザのタブや検索結果ページに表示されるため、訪問者が最初に目にする情報となります。検索結果でクリックされるかどうかは、このタイトルの内容に大きく左右されます。SEOの観点でも、対策したいキーワードを自然な形で含めることが重要です。ページの内容を端的に表しつつ、訪問者の興味を引く内容にすることを意識しましょう。
headタグ内の数あるタグのなかでも、最も丁寧に作り込むべき要素です。
ディスクリプション
ディスクリプションは、ページの概要を説明するためのメタタグで、headタグ内に記述します。
<meta name="description" content="ページの概要説明">
検索結果ページのタイトル下にスニペットとして表示され、訪問者がクリックするかどうかを判断する材料になります。Googleはディスクリプションを直接の検索順位要因としていませんが、クリック率の向上を通じて間接的にSEOへ影響します。ページごとに内容を要約し、対策キーワードを自然に含めた80〜100文字前後の文章を設定するのが効果的です。
headタグ内の各ページに必ず個別で記述し、サイト全体で同じ内容を使い回さないことが重要です。
canonical
canonicalは、重複コンテンツを避けるために正規のURLを指定するタグで、headタグ内に記述します。
<link rel="canonical" href="https://example.com/">
同じ内容のページが複数のURLで存在する場合、検索エンジンはどれが本来評価すべきページかを判断できず、SEO評価が分散してしまいます。canonicalで正規ページを指定することで、評価を一本化でき、重複によるマイナス影響を防げます。スマートフォン向けページとパソコン向けページが別URLになる場合や、パラメータ付きURLが発生する場合などに必要です。
headタグの設定を見直す際には、canonicalが正しく指定されているかを確認しましょう。
favicon
faviconは、ブラウザのタブや検索結果、ブックマーク一覧などに表示される小さなアイコンを指定するタグで、headタグ内に記述します。
<link rel="icon" href="/favicon.ico">
訪問者がタブを切り替えるときの目印になるほか、検索結果のURL横に表示されることで視認性が向上します。自社のロゴや象徴的なマークをfaviconとして設定しておくと、ブランドの認知向上にもつながります。設定されていないと、検索結果にデフォルトのアイコンが並ぶ状態となり、競合サイトに埋もれやすくなります。
headタグに記述するべき要素のなかでも、ブランディング面で見落とせない設定です。
構造化データ
構造化データは、ページの内容を検索エンジンに正確に伝えるための情報を記述するもので、JSON-LD形式でheadタグ内に記載するのが一般的です。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "会社名",
"url": "https://example.com"
}
</script>会社情報・商品・口コミ・FAQなど、ページの内容に応じた形式で記述することで、検索結果にリッチリザルトとして星評価や追加情報が表示される可能性があります。視覚的に目立つことでクリック率の向上が期待でき、さらに検索エンジンに対してページの意味を正確に伝えられる点も大きなメリットです。
headタグ内に正しく設置することで、SEO効果を底上げできます。
OGP
OGPは、SNSでページが共有された際に表示される情報を設定するタグで、headタグ内に記述します。
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/image.jpg">FacebookやX、LINEなどでURLが共有されたときに、タイトル、説明文、画像が自動で展開されます。OGPが設定されていないとURLだけが表示され、視覚的なインパクトが弱くなりクリックされにくくなります。SNSからの流入を意識する場合はとくに重要で、headタグ内に必ず設定しておきたい要素です。
サムネイル画像は内容を直感的に伝えられるものを選ぶと効果的です。
robots
robotsは、検索エンジンに対してクロールやインデックスの可否を指定するタグで、headタグ内に記述します。
<meta name="robots" content="noindex, nofollow">noindexを指定すると検索結果に表示されなくなり、nofollowを指定するとページ内のリンクをクローラーがたどらなくなります。会員限定ページ、テストページ、サンクスページなど、検索結果に出すべきでないページに使用します。一方で、検索結果に表示したいページに誤ってnoindexを設定してしまうと、いくら良いコンテンツを作っても検索流入が得られません。
headタグの設定ミスでもっとも事故が多いのがこのrobotsタグであり、運用時には常に確認が必要です。
format-detection
format-detectionは、電話番号やメールアドレスを自動でリンクに変換する機能を制御するタグで、headタグ内に記述します。
<meta name="format-detection" content="telephone=no">
スマートフォンで閲覧した際、数字の並びが電話番号と認識されてリンク化されることがあります。日付や郵便番号、商品コードなど、本来電話番号ではない数字までリンク化されてしまうと、誤ったタップを誘発し操作性を損ねます。format-detectionで自動変換を無効化することで、こうした誤動作を防げます。
headタグ内で明示的に制御しておけば、訪問者にとってストレスのない表示を実現できます。
generator
generatorは、ページの作成に使用したツールやCMSの情報を示すタグで、headタグ内に記述されます。
<meta name="generator" content="WordPress 6.0">
WordPressをはじめとする多くのCMSは、このタグを自動で出力します。担当者が意識して設定するものではありませんが、ソースコード上に表示されるため、見慣れないタグとして気になるかもしれません。実害があるわけではないものの、使用しているCMSとそのバージョン情報が外部から確認できる状態は、セキュリティ面で好ましくないと指摘されることもあります。
headタグからgeneratorを削除するプラグインや方法もあるため、気になる場合は対策を検討するとよいでしょう。
外部ファイルの読み込み
外部ファイルの読み込みは、CSSやJavaScriptといった外部ファイルをページに反映させるための記述で、headタグ内に配置します。
<link rel="stylesheet" href="styles.css">CSSはサイト全体のデザインを統一するために、JavaScriptはアニメーションや動的な動作を実現するために必要です。headタグ内で読み込むことで、ページの表示前にデザインや機能が適用され、見た目の崩れを防げます。ただし、不要なファイルや重いファイルを大量に読み込むとページの表示速度が低下し、SEOにも悪影響を与えます。
headタグに記述する外部ファイルは必要最小限に絞り、読み込み順序にも配慮することが重要です。
headタグのサンプル
ここでは、当社のトップページで実際に使用しているheadタグを紹介します。ホームページ制作会社が運用するホームページのリアルな構成として、自社サイトを確認する際の参考にしてください。
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”format-detection” content=”telephone=no, email=no, address=no”>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@700&display=swap” rel=”stylesheet”>
<title>大阪のホームページ制作会社｜株式会社セブンデザイン｜成約を重視</title>
<link rel=”alternate” type=”application/rss+xml” title=”大阪のホームページ制作会社セブンデザイン » フィード” href=”https://www.sevendesign.biz/feed/” />
<meta name=”description” content=”大阪のホームページ制作会社セブンデザインです。創業17年、500件以上の実績でリピート率は70%。集客・成約・伴走の3つの力を軸に、中小企業や個人商店の問い合わせ獲得と売上向上を支えます。”>
<meta name=”robots” content=”index,follow”>
<link rel=”canonical” href=”https://www.sevendesign.biz/”>
<!– OGP –>
<meta property=”og:locale” content=”ja_JP”>
<meta property=”og:site_name” content=”株式会社セブンデザイン”>
<meta property=”og:type” content=”website”>
<meta property=”og:title” content=”大阪のホームページ制作会社｜株式会社セブンデザイン｜成約を重視”>
<meta property=”og:description” content=”大阪のホームページ制作会社セブンデザインです。創業17年、500件以上の実績でリピート率は70%。”>
<meta property=”og:url” content=”https://www.sevendesign.biz/”>
<meta property=”og:image” content=”https://www.sevendesign.biz/site/wp-content/uploads/2026/02/eye-catch.png”>
<!– Twitter Card –>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@sevendesign2010″>
<meta name=”twitter:title” content=”大阪のホームページ制作会社｜株式会社セブンデザイン｜成約を重視”>
<meta name=”twitter:image” content=”https://www.sevendesign.biz/site/wp-content/uploads/2026/02/eye-catch.png”>
<!– 構造化データ –>
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “Organization”,
“name”: “株式会社セブンデザイン”,
“url”: “https://www.sevendesign.biz/”,
“logo”: “https://www.sevendesign.biz/site/wp-content/uploads/2026/02/org_logo.png”,
“telephone”: “06-7494-1148”
}
</script>
<!– CSS –>
<link rel=”stylesheet” href=”/site/wp-content/themes/sd_ver26/assets/css/style.css”>
<!– Google Tag Manager –>
<script>
(function(w,d,s,l,i){…})(window,document,’script’,’dataLayer’,’GTM-XXXXXXX’);
</script>
<!– favicon –>
<link rel=”icon” href=”https://www.sevendesign.biz/site/wp-content/uploads/2026/03/cropped-fav-32×32.png” sizes=”32×32″ />
<link rel=”apple-touch-icon” href=”https://www.sevendesign.biz/site/wp-content/uploads/2026/03/cropped-fav-180×180.png” />
</head>
このサンプルには、文字エンコード、viewport、タイトル、ディスクリプション、canonical、OGP、Twitter Card、構造化データ、favicon、外部ファイルの読み込み、Google Tag Managerなどの解析タグといった要素が含まれています。
実運用しているホームページのheadタグには、SEO対策・SNS対策・アクセス解析といった目的別の記述が組み合わさっているのが一般的です。
すべてのホームページで同じ構成にする必要はなく、自社の運用方針や使用しているツールに応じて取捨選択することが大切です。サンプルをそのまま流用するのではなく、各タグの役割を理解したうえで、必要なものをheadタグに記述していきましょう。
サンプルは可読性を優先して整形しています。構造を把握する用途では十分です。
headタグのSEO効果
headタグはSEOにおいて大きな役割を担う要素です。ここでは、headタグが具体的にSEOへどのような効果を与えるのかを解説します。
検索エンジンにページ情報を正確に伝えられる
検索エンジンはページの内容を理解するために、まずheadタグ内の情報を参照します。
タイトルでページのテーマを把握し、ディスクリプションで概要を読み取り、構造化データで詳細なページ情報を解釈するという流れです。headタグが適切に整っているホームページは、検索エンジンに対してページの意図や内容を正確に伝えられるため、関連するキーワードでSEO評価を得やすくなります。
一方、headタグが不十分なホームページでは、検索エンジンがページ内容を正しく解釈できず、本来評価されるべきキーワードで表示されないことも起こります。
SEO評価の出発点はheadタグにあるといっても過言ではなく、適切な情報を集約しておくことが検索流入を獲得する前提条件になります。
ページの表示速度に影響を与える
headタグはページの読み込み順序の起点となる場所であり、内部の記述方法によって表示速度が大きく変わります。多くのCSSファイルやJavaScriptを無造作にheadタグ内へ並べると、ブラウザがそれらを読み込み終えるまでページ本体の表示が止まり、訪問者を待たせる原因となります。
Googleはページの表示速度をSEOの評価要因のひとつとしており、表示の遅いホームページは検索順位を落とす可能性があります。
headタグ内では、本当に必要なファイルだけを読み込む、読み込みを後回しできるスクリプトには遅延読み込みを設定するといった配慮が重要です。headタグの最適化は、SEOにおいて見落とされがちながら無視できない要素です。
まとめ
headタグはHTMLの冒頭に記述され、ページ全体に関する情報や設定をまとめる重要な要素です。サイト上に表示されることはないものの、検索エンジンへの情報伝達やページの表示速度、SNSでの見え方など、ホームページのパフォーマンスを左右する役割を担っています。
headタグとheaderタグは名前が似ているだけで、記述位置も役割も異なるため混同しないようにしましょう。headタグ内にはタイトル、ディスクリプション、canonical、構造化データ、OGPなどさまざまなタグを記述し、それぞれが検索エンジンや訪問者に対して必要な情報を提供します。
headタグの設定が適切であればSEO評価の土台が整い、不十分であれば検索順位や表示速度に悪影響を与えます。自社サイトのheadタグを一度確認し、必要な要素が正しく記述されているかを見直すことが、ホームページ運用の第一歩となります。
