2023-04-25 2023-04-25 ナニコレコード

SEO対策でも必須のheadタグの構造について深掘る

<head>タグは、HTML文書のメタデータを含む部分で、ブラウザーが表示するWebページのタイトル、スタイルシート、スクリプト、検索エンジン向けの情報などを定義します。ここでは、初心者向けに<head>タグについて詳しく説明します。

<head>タグの構造

<head>タグは<html>タグ内にあり、<body>タグの前に配置されます。

以下は<head>タグの基本的な構造です。

<!DOCTYPE html>
<html>
  <head>
    <!--ここにメタデータを記述-->
  </head>
  <body>
    <!--ここにページのコンテンツを記述-->
  </body>
</html>

<head>タグ内の要素

<head>タグ内には、さまざまな要素が含まれることがあります。

以下はよく使われる<head>タグ内の要素です。

<title>タグ

<title>タグは、ブラウザーのタブに表示されるタイトルを定義します。

また、検索エンジンがWebページのタイトルとして表示するために使用されます。以下は<title>タグの例です。

<title>私のWebページ</title>

<meta>タグ

<meta>タグは、HTML文書に追加情報を提供するために使用されるタグです。通常、<head>タグ内に配置されます。

<meta name="keywords" content="Web開発,HTML,CSS,JavaScript">
<meta name="description" content="私のWeb開発に関する情報を紹介するページです。">

<meta>タグには、多数の属性がありますが、最も一般的な属性は以下の3つです。

charset

charset: 文書の文字エンコーディングを指定します。

例えば、UTF-8などがあります。以下は、UTF-8でエンコードされた文書を指定する例です。

<meta charset="UTF-8">

name

nameおよびcontent: name属性で指定された情報の種類を示し、content属性でその情報を指定します。

以下は、keywordsとdescriptionの情報を指定する例です。

<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="このサイトはHTML、CSS、JavaScriptに関する情報を提供しています。">

http-equiv

http-equivおよびcontent: HTTPヘッダの値を指定することができます。

例えば、以下の例では、ページが自動的にリフレッシュされることを示しています。

<meta http-equiv="refresh" content="10">

上記の例では、デバイスの幅に合わせてページの表示幅を調整することができます。

viewport

<meta>タグにはviewport属性があり、モバイルデバイスでの表示に関する設定を行うことができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

上記の例では、デバイスの幅に合わせてページの表示幅を調整することができます。

<meta>タグは、SEO（検索エンジン最適化）にも重要

<meta>タグは、SEO（検索エンジン最適化）にも重要な役割を果たします。

キーワード、説明、著作権、著者情報などを提供することができます。

また、<meta>タグを使用することで、ブラウザがウェブページを読み込む際の情報を最適化することができます。

後半でSEO対策に必要なタグ記述について見ていきます。

<link>タグ

<link>タグは、外部スタイルシートやアイコンなどのファイルを読み込むために使用されます。

以下は、外部のスタイルシートを読み込む<link>タグの例です。

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

<head>タグに記述する例

以下は、<head>タグに含まれる一般的な要素を使用した例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="keywords" content="Web開発,HTML,CSS,JavaScript">
    <meta name="description" content="私のWeb開発に関する情報を紹介するページです。">
    <title>私のWebページ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>ようこそ私のWebページへ！</h1>
    <p>ここではWeb開発に関する情報を紹介しています。</p>
    <img src="sample.jpg" alt="サンプル画像">
  </body>
</html>

この例では、<meta>タグを使用して、文字エンコーディング、キーワード、説明を定義し、<title>タグを使用してWebページのタイトルを定義しています。

また、外部スタイルシートを読み込むために<link>タグを使用しています。

<body>タグ内には、見出しや段落、画像などのコンテンツが含まれています。

このように<head>タグを適切に使用することで、Webページを効果的に制御し、検索エンジンにとっても優れた情報を提供できるようになります。

SEO対策に必要なタグ記述

SEO（Search Engine Optimization）とは、検索エンジン最適化のことを指します。

SEOを実施することで、自社サイトやブログなどのウェブサイトを、検索エンジン上位に表示させることができます。このために、<meta>タグを適切に使うことが重要です。

以下に、SEO対策で効果的な<meta>タグ記述方法を解説します。

titleタグ

<title>タグは、ウェブページのタイトルを指定するために使用されます。

検索エンジンは、タイトルを重視し、タイトルに含まれるキーワードによって検索結果の表示順位を決定します。

よって、適切なキーワードを含めた、わかりやすく意味のあるタイトルを設定することが重要です。

<head>
  <title>サイト名 | キーワード1 キーワード2</title>
</head>

以下が、<title>タグの詳細についてです。

必須要素：HTML文書には必ず1つの<title>タグが必要です。これは、Webページを開いたときに表示されるタイトルバーに表示されるタイトルを指定するためです。
文字数制限：一般的に、タイトルタグには55文字から60文字程度までが望ましいとされています。それ以上の文字数になると、検索エンジンで表示される際にカットされてしまう場合があります。
キーワードの重要性：<title>タグは、SEOにおいて非常に重要な要素です。タイトルには、Webページの内容を表す適切なキーワードを含めることが望ましいです。ただし、キーワードの過剰使用や不自然な表現は、検索エンジンからペナルティを受ける可能性があります。
表示方法：<title>タグで指定されたタイトルは、Webページのタイトルバーに表示されます。また、検索エンジンの検索結果ページにおいても、タイトルとして表示されます。そのため、タイトルはWebページの魅力的な表現や説明を行い、クリックしてもらえるように工夫することが重要です。

descriptionタグ

検索エンジンは、説明文を表示し、ユーザーが検索結果から選択する際の参考にします。

また、説明文に含まれるキーワードも検索結果の順位に影響します。

よって、適切なキーワードを含めた、わかりやすい説明文を設定することが重要です。

<head>
  <meta name="description" content="ここにウェブページの説明文を入力します。">
</head>

keywordsタグ

検索エンジンは、キーワードを重視し、キーワードに関連した検索結果を表示します。

ただし、最近の検索エンジンでは、このタグの重要性は低くなっているとされています。

<head>
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
</head>

robotsタグ

robotsタグの属性値によって、クローラーに対して、ウェブページをインデックスするかどうか、リンクを辿るかどうかなどを指示することができます。

<head>
  <meta name="robots" content="noindex,nofollow">
</head>

SEO対策は長期戦

正しい記述方法を行うことで、検索エンジンからのアクセス数を増やすことができます。