HTMLのheadタグの使い方まとめ！

html

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

headタグは、Webページのメタデータ（データに関するデータ）や、ブラウザや検索エンジンがWebページを正しく処理するために必要な情報などを記述するために使用されます。
headタグ内に記述された内容は、通常、Webページ自体には表示されませんが、Webページの動作やSEO（検索エンジン最適化）、ソーシャルメディアでの共有などに大きな影響を与えます。

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

headタグは、HTMLドキュメントの<html>タグ内で、<body>タグの前にひとつだけ記述します。
headタグで囲まれた内容は、ブラウザのタブのタイトルバーや、検索結果のスニペットなどに表示されることがありますが、Webページの主要なコンテンツとしてはレンダリングされません。

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

headタグ内に記述する主要な要素

headタグ内には、Webページに関する様々な情報を記述するための要素が含まれます。主な要素は以下の通りです。

titleタグ

Webページのタイトルを指定します。
ブラウザのタブやウィンドウのタイトルバー、検索エンジンの検索結果に表示され、SEOにおいて非常に重要です。

<title>Webページのタイトル - サイト名</title>

metaタグ

Webページのメタデータを記述します。
name 属性と content 属性を組み合わせて、文字エンコーディング、キーワード、説明文、ビューポート設定、HTTPヘッダー情報などを指定します。

<meta charset="UTF-8">
<meta name="description" content="Webページの説明文を記述します。SEO対策として重要です。">
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

linkタグ

外部リソースとの関連を定義します。主に CSS ファイル (rel="stylesheet") やファビコン (rel="icon") を読み込むために使用されます。

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

styleタグ

Webページに直接CSSスタイルを記述します。
外部ファイルに記述するよりも優先度が高くなりますが、一般的には大規模なスタイルは外部ファイルに記述することが推奨されます。

<style>
  body {
    font-family: sans-serif;
  }
</style>

scriptタグ

JavaScriptコードを記述したり、外部のJavaScriptファイルを読み込んだりします。

<script src="script.js"></script>
<script>
  console.log('Hello from head!');
</script>

baseタグ

ドキュメント内の相対URLの基準となるベースURLを指定します。

<base href="http://example.com/images/">

noscriptタグ

JavaScriptが無効になっている環境で表示するコンテンツを提供します。

<noscript>このWebサイトはJavaScriptを必要とします。</noscript>

templateタグ

クライアントサイドのスクリプトで使用するために、レンダリングされないコンテンツのテンプレートを定義します。

<template id="my-template">
  <p>テンプレートの内容</p>
</template>

SEOにおけるheadタグの重要性

headタグ内に記述される情報は、検索エンジンのクローラーがWebページの内容を理解し、適切に評価するために非常に重要です。
特に以下の要素はSEOに大きな影響を与えます。

  • <title>: 検索結果のスニペットのタイトルとして表示され、クリック率に影響します。ページの内容を的確に表す、魅力的なタイトルを設定することが重要です。
  • <meta name="description">: 検索結果のスニペットの説明文として表示される可能性があり、クリック率に影響します。ページの内容を簡潔に説明する、SEOキーワードを含んだ記述が望ましいです。
  • <meta name="keywords">: 現在の主要な検索エンジンでは無視されており、記述の必要性はほぼありません。むしろ、キーワードの過剰な記述はスパムとみなされるリスクがあるため、使用は推奨されません。
  • <link rel="canonical">: 重複コンテンツが存在する場合に、正規のURLを検索エンジンに伝えるために使用します。SEOにおいて非常に重要です。
  • <meta name="robots">: 検索エンジンのクローラーの動作を制御するための指示（インデックスの可否、リンクの追跡可否など）を指定します。

アクセシビリティにおけるheadタグの役割

headタグ内の情報は、Webページのアクセシビリティ（情報へのアクセスしやすさ）にも貢献します。

  • <title>: スクリーンリーダーが最初に読み上げる情報であり、ユーザーがどのページにいるかを理解する上で非常に重要です。
  • <html lang="...">: <html>タグのlang属性で言語を指定することで、スクリーンリーダーが適切な発音でコンテンツを読み上げることができます。
  • <meta charset="...">: 正しい文字エンコーディングを指定することで、文字化けを防ぎ、コンテンツが正しく読み上げられるようにします。

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

  • <title> は必須: すべてのHTMLドキュメントに<title>タグを記述することが推奨されます。
  • <meta charset="..."> は最初に: 文字エンコーディングの指定は、headタグ内の早い段階で記述することが推奨されます。
  • 不要なメタタグは避ける: 関連性の低いキーワードを大量に記述するなど、スパムと認識される可能性のある記述は避けるべきです。
  • 外部リソースのパス: <link>タグや<script>タグで外部ファイルを指定する際のパスは、正しく記述する必要があります。
  • JavaScript の配置: JavaScriptの実行タイミングは、<script>タグの配置場所によって変わります。ページの読み込みを遅延させないために、<body>タグの閉じタグの直前に配置したり、asyncやdefer属性を使用したりすることが推奨されます。

headタグの構成例

以下は、一般的なheadタグの構成例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webページのタイトル - サイト名</title>
  <meta name="description" content="このWebページの説明文を記述します。SEO対策として重要です。">
  <meta name="keywords" content="キーワード1, キーワード2">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
</body>
</html>

まとめ

headタグは、Webページのタイトル、メタデータ、外部リソースの読み込みなど、Webページの裏側を支える重要な役割を担っています。
headタグ内に適切な情報を記述することで、SEOの向上、アクセシビリティの確保、そしてWebページの正常な動作に繋がります。

この記事を参考に、headタグの各要素の役割を理解し、適切に活用してください。

HTML
yasuaki

コメント