headタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

Webページを作成する際、HTMLの基本的な構造を理解することは重要です。その中でも特に重要なのがheadタグです。headタグにはページを正しく読み込むための情報を定義すると同時に、検索エンジン向けのキーワードや説明などが含まれるため、非常に重要なタグです。この記事では、<head>タグの役割やその中に含まれる要素について詳しく解説していきます。

目次

headタグとは?

HTML文書の構造は大きく分けて<head>と<body>の2つのセクションに分かれます。<body>は実際にブラウザで表示されるコンテンツが含まれます。一方、<head>の内容はブラウザには表示されず、ページのタイトル情報やCSSやファビコンへのリンク、ページの著者情報などのメタデータを定義する場所です。

headタグの中でSEOに関連する要素

headタグ内には、SEO(検索エンジン最適化)に関連するいくつかの重要な要素があります。これらの要素を適切に使用することで、検索エンジンのランキングや表示を最適化することができます。以下は、SEOにおいて特に重要とされるheadタグ内の要素です。

タイトル 

<title>

ページのタイトルを記述します。ラウザのタブやブックマーク、検索結果画面のサイト名として表示されます。必ずつけてください。タイトルは、ユーザーが検索結果をクリックする際の判断材料となるため、関連性と魅力性が求められます。文字数は30文字以内推奨です。

参考:各ページに固有の正確なタイトルを付ける
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja#uniquepagetitles

サイトの説明(ディスクリプション)

<meta name=”description” content=”ここに説明文を入力します”>

description は検索エンジンの検索結果ページにおいて、タイトルの下に表示される説明文として使用されることが多いです。ページの概要や要約をキーワードとともに指定します。検索順位に直接影響を与えませんが、関連性の高い説明文を提供することで、クリックスルーレート(CTR)の向上が期待できます。文字数は120文字以内に収めます。

参考:メタ ディスクリプション タグを使用する
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja#descriptionmeta

検索エンジンのクローラーに対する指示

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

noindexは検索エンジンに対し、インデックスしないように要求する記述です。インデックスされなければ、そのページは検索結果画面に表示されません。

nofollowは、そのページ上のリンクを検索エンジンがたどらないようにする指示です。しかし、nofollow自体がクローラーのページ訪問を防ぐわけではありません。クローラーはページを訪問することはできますが、そのページのリンクをたどることはしません。

noindex, followであれば「検索エンジンの巡回は許可するが、インデックスしないでください」という意味になります。ただし、実際にはfollowという明示的な指示は存在せず、nofollowを指定しない場合がデフォルトで「follow」とみなされます。

参考:インデックス登録と表示に関する有効なルール
https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag?hl=ja#directives

あわせて読みたい
noindexタグとは noindexタグとは 「noindexタグ」とは、特定のページを検索エンジンにインデックスさせないようにするためのタグです。インデックスとは、検索エンジンのデータベースに...
あわせて読みたい
nofollowとは nofollowとは? nofollow属性とは、aタグ(アンカーテキスト)やメタタグに設定し、リンク先の外部ページを検索エンジンにクロールされたくないときに使用する属性値で...

URLの正規化

<link rel="canonical" href="正規化するURL">

重複コンテンツの問題を避けるために、ページの正規URLを指定します。同一のコンテンツに複数のURLでアクセス可能な場合、検索エンジンはそれらを重複コンテンツとみなす可能性があります。このタグを使用することで、検索エンジンにどのURLを正規として扱うかを伝えることができます。

例:
https://speever.jp               (wwwなし、httpsなし)
https://www.speever.jp       (wwwあり、httpsなし)
https://speever.jp              (wwwなし、httpsあり)
https://www.speever.jp     (wwwあり、httpsあり)

これらは全部同じ内容が表示されますが、このままでは検索エンジンは、同じ内容の4サイトが存在すると認識するため、

<link rel="canonical" href="https://speever.jp">

とすることで、https://speever.jpに正規化され、重複コンテンツ問題を回避できます。

参考:重複しているページの URL の正規化と正規タグの利用
https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls?hl=ja  :

あわせて読みたい
canonicalタグとは canonical(カノニカル)タグとは? canonicalタグとは、Webサイト内でURLが異なるが内容が重複している、または似ているページが存在するケースにおいて、検索エンジン...

レスポンシブ対応

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

PCやモバイルデバイスの画面サイズにデザインを最適化させるためのviewport設定です。

モバイルデバイスでの表示を最適化するためには、このメタタグはほぼ必須です。「width=device-width」でviewportの幅を端末画面の幅や各種ブラウザのウィンドウの横幅に設定されます。逆に「width=1024」など数値を入れれば、viewportの横幅を固定することもできますが、非推奨です。

「initial-scale=1.0」では初期のズーム倍率を指定できます。

代替のページURL

<link rel="alternate" href="https://m.example.com/page/" media="only screen and (max-width: 640px)">

このタグは、モバイルデバイスや特定の言語のユーザー向けの代替のページを指定するために使用されます。例えば、モバイル専用のサブドメインや異なる言語のバージョンのページを指定することができます。

ソーシャルメディアでの共有時に表示される要素を指定

<meta property="og:title" content="タイトル">

FacebookやTwitterなどのソーシャルメディアプラットフォームでリンクを共有する際のプレビュー表示をカスタマイズするために使用されます。

<meta property="og:image" content="https://example.com/image.jpg">

ソーシャルメディアのタイムラインやニュースフィードでのリンクのプレビュー表示に表示される画像をカスタマイズすることができます。

特定のリソースの事前読み込み

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

このタグを使用することで、ページの読み込み速度を向上させることができます。特に、大きなファイルや重要なリソースを事前に読み込むことで、ページの表示速度を最適化することができます。

ドメインへのリクエストを高速化

<link rel="dns-prefetch" href="//example.com">

特定のドメインへのリクエストを高速化するために使用されます。ドメイン名の解決を事前に行うことで、ページの読み込み速度を向上させることができます。

ファビコン

<link rel="icon" type="image/png" href="favicon.png">

こちらはファビコンの設定です。サイトにファビコンが設定されている場合、検索結果に表示することができます。

参考:検索結果に表示されるファビコンを定義する
https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ja

あわせて読みたい
SEO内部施策とは SEO内部施策とは SEO内部対策とは、サイト内のコンテンツを対象として行うSEO対策の一種です。内部対策には、大きく分けて以下の3つがあります。 クロール対策検索エン...

その他のよく使われるheadタグ内の要素

電話番号、メールアドレスの自動リンクを無効化

<meta name="format-detection" content="telephone=no, email=no, address=no">

モバイルデバイスでは、サイト内に電話番号、メールアドレス、住所などの記載があると、リンクに自動変換されてしまいます。この機能を防ぐために指定します。

「content=”telephone=no, email=no, address=no”」を指定すればすべての自動リンクがオフになります。

文字コードを指定

 <meta charset=”UTF-8″>

charsetは文字コードを指定する属性で、文字化け対策です。

日本では、「UTF-8」、「Shift_JIS」、「EUC-JP」のいずれかが使用されているケースが多いです。現代のWebページでは、UTF-8が一般的に使用される文字コードです。

ページのキーワード

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

かつてはSEOのために使用されていましたが、現在の主要な検索エンジンはこのメタタグを無視する傾向にあります。

ページの著者情報

<meta name="author" content="著者名">

ページの著者や作成者の情報を指定するために使用されます。

iOSのホーム画面用アイコン

 <link rel="apple-touch-icon" href="apple-touch-icon.png">

apple-touch-iconはiOSでホーム画面に追加した時のアイコンです。

RSSフィード

<link rel=”alternate” type=”application/rss+xml” href=”RSSのURL”>

RSSフィードのURLです。

外部ファイル読み込み

<link rel=”stylesheet” href=”/style.css”>

上記では読み込むスタイルシートを指定しています。

<script src="script.js"></script>

上記では外部のJavaScriptファイルを読み込みます。

まとめ

headタグの内容はユーザーには直接見えませんが、ブラウザやデバイス、検索エンジンに対して重要な情報が記述されています。

今回紹介した以外にもたくさんの種類のタグがあります。今後Webの技術の進歩とともに新たに登場するタグも日々出てきますので、情報をキャッチアップしていきましょう。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次