この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「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文字以内推奨です。
サイトの説明（ディスクリプション）
<meta name=”description” content=”ここに説明文を入力します”>description は検索エンジンの検索結果ページにおいて、タイトルの下に表示される説明文として使用されることが多いです。ページの概要や要約をキーワードとともに指定します。検索順位に直接影響を与えませんが、関連性の高い説明文を提供することで、クリックスルーレート（CTR）の向上が期待できます。文字数は120文字以内に収めます。
検索エンジンのクローラーに対する指示
<meta name="robots" content="noindex, nofollow">noindexは検索エンジンに対し、インデックスしないように要求する記述です。インデックスされなければ、そのページは検索結果画面に表示されません。
nofollowは、そのページ上のリンクを検索エンジンがたどらないようにする指示です。しかし、nofollow自体がクローラーのページ訪問を防ぐわけではありません。クローラーはページを訪問することはできますが、そのページのリンクをたどることはしません。
noindex, followであれば「検索エンジンの巡回は許可するが、インデックスしないでください」という意味になります。ただし、実際にはfollowという明示的な指示は存在せず、nofollowを指定しない場合がデフォルトで「follow」とみなされます。
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に正規化され、重複コンテンツ問題を回避できます。
レスポンシブ対応
<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">こちらはファビコンの設定です。サイトにファビコンが設定されている場合、検索結果に表示することができます。
その他のよく使われる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の技術の進歩とともに新たに登場するタグも日々出てきますので、情報をキャッチアップしていきましょう。
