head 要素の基本形テンプレをまとめてみた【初心者向け】

2024/12/13 Web

head 要素をコピペしたり、独自のテンプレを持っていたり、なんとなくコーディングしている人も多いかと思います。何が必要で、何が重要で、それぞれがどんな役割をしているか把握していますか？

今回は、そんな head 要素の内に入れる“要素”をまとめてみました。そしてそれらを踏まえてテンプレートも用意してみました。（テンプレートは最後の方にあります。）

この記事でわかること

head 要素に入れる各メタデータの種類と重要度
head 要素のテンプレ

head 要素とは

head 要素とは、その HTML ドキュメントの“メタデータ”をまとめて記述しておくための要素です。

The head element represents a collection of metadata for the Document.
W3C

この場合の“メタデータ”とは、具体的に言ってしまえば、title 要素や style 要素、そして、meta 要素などの HTML ドキュメントに関する情報を指します。

head 要素を記述する場所

head 要素は、
html 要素の子要素として記述します。

body 要素とたった二人の兄弟要素で、html 要素の直下の要素です！ブラウザが最初に読み込む部分ですので、<html>のまさに下、body 要素の前に記述します。

<html>
    <head>
        <!-- ここにメタデータを記述していく -->
    </head>
    <body>
        <!-- ここにコンテンツ部分を記述していく -->
    </body>
</html>

「head」の意味は「頭」ですから、
そのままですね。

head 要素内に
記述する要素

head 要素内に記述する“メタデータ”の要素をまとめてみました。

仕様上、必須の要素

HTML ドキュメントを作る上で、
head 要素内に記述する必要最低限、仕様上必須の要素を紹介します。

文字エンコーディング

meta 要素で指定。
HTML ドキュメントに対応する文字コードを指定します。

<meta charset="UTF-8">

不備があれば、
ブラウザによっては文字化けが発生する可能性があります。

とくに意図が無ければ、「UTF-8」を使用するので、まるっとコピペでOK！

meta 要素について気になる方は、
参考記事をチェックしてみてください！

いつもコピペだった「メタタグ」とちゃんと向き合ってまとめてみた。【初心者向け】

タイトル

title 要素で指定します。

<title>〇〇</title><!-- ページのタイトルを記述 -->

ブラウザのタブや検索結果などで表示されされます。

詳しくは、
参考記事をチェックしてみてください！

title 要素についてまとめてみた。【初心者向け】

超重要な要素

なくても Web ページとして表示自体はされますが、SEO や UI/UX、シェアリングにおいて、必須といっても過言ではない要素たちを紹介します。

表示領域

meta 要素で指定（meta 要素について参考記事はこちら）。
Web ページの表示領域を設定します。

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

レスポンシブデザイン（パソコン、スマホ、タブレットなどデバイスを選ばずに見やすく表示される柔軟なデザイン）がスタンダードな今の時代には重要な要素の１つです。

Google 推奨のコードですので、
とくに意図が無ければ、
まるっとこのままコピペでOK！

参考リンク

Google 検索セントラル

viewport メタタグ

ディスクリプション

meta 要素で指定（meta 要素について参考記事はこちら）。
Web ページの内容についての概要や説明を入れます。

<meta name="description" content="〇〇"><!-- ページの説明を記述 -->

検索結果の説明分としても表示される部分なので、SEOの観点からとても重要です！

特に文字制限はないようですが、120文字以上くらいで省略されてしまうので、それくらいで収まる内容にするのが良いですね。

重要な要素

こちらも『超重要な要素』には劣るものの、同様にSEO や UI/UX、シェアリングにおいて重要で、ほとんどの Web サイトで使用の検討必至の要素たちです！！

クローラーへの指示

meta 要素で指定（meta 要素について参考記事はこちら）。
ページのインデックス希望の有無についてのクローラーへの指示を設定します。

ページをインデックスしないように指示する場合は、下のコード例のように記述します。

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

そして、
インデックスしてほしい場合は記述しません。

coment 属性の属性値については、本記事では割愛しますが、初心者のうちは、まるっとそのまま使ってしまって問題ないかと思います。

CSS やアイコンなどの読み込み

link 要素を使用します。
CSS やアイコンなどを読み込むために使用します。

<link rel="icon" href="〇〇"><!-- ファビコン画像のパスを記述 -->
<link rel="apple-touch-icon-precomposed" href="〇〇" /><!-- スマホ用アイコン画像のパスを記述 -->
<link rel="stylesheet" href="〇〇.css"><!-- CSSファイルのパス -->

詳しくは、
参考記事をチェックしてみてください！

link 要素を何気なく使っていたので、ちゃんと向き合ってみた。

OGP 関連

meta 要素で指定。
OGP（Open Graph Protocol）は、SNS（ X や LINE など）での共有時に使用される“メタデータ”を指定します。アイキャッチ画像やサムネイル画像、表示されるテキストなどを設定することが可能です。現在のように SNS が普及している時代では、ほとんど必須といっても過言ではないかもしれません。

OGP を使用する際は、
まず、
head 要素に prefix 属性を追加して『OGPを使用する』宣言をする必要があります。（html 要素に追加流派もあるみたいですが、今回は head 要素に追加する方法にて紹介します。。）

<head prefix="og: http://ogp.me/ns#">

</head>

上記の「og: http://ogp.me/ns#」という属性値は、最低限の記述です。基本的にはこれだけで OGP を使用可能になりますが、より厳密な設定（「fb: http://ogp.me/ns/fb#」や「website: http://ogp.me/ns/website#」を含む場合など）については、用途に応じて追加可能ですが、本記事では割愛いたします。

そして、
以下のようなメタデータを head 要素内に記述することで、基本的な OGP 対応が可能です。

<meta property="og:url" content="〇〇"><!-- ページのURLを記述 -->
<meta property="og:locale" content="ja_JP"> <!-- 日本向けならこれでOK！ -->
<meta property="og:type" content="website"> <!-- ページの種類を記述 ※下記参照 -->
<meta property="og:title" content="〇〇"><!-- ページタイトルを記述 -->
<meta property="og:description" content="〇〇"><!-- ページの説明を記述 -->
<meta property="og:image" content="〇〇"><!-- アイキャッチ画像パスを記述 --
<meta property="og:site_name" content="〇〇"><!-- サイト名を記述 -->

og:type について

通常の Web ページであれば
<meta property="og:type" content="website">

ブログなどの記事であれば
<meta property="og:type" content="article">

用途に応じて他にも以下のような属性値も使用できます。

・book
・music
・video

上記で紹介したコードは、
基本的な OGP 対応が可能な最低限な項目に加えて、よく使う項目を合わせたオススメセットです！

さらに、Facebook や X などの特定の SNS での最適化や、ページの種類や用途に応じた追加設定も行うことが可能です。例えば、

<!-- X 用-->
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:image:alt" content="〇〇"><!-- 画像の代替テキストを記述 -->

<!-- Facebook のアプリ連携用-->
<meta property="fb:app_id" content="〇〇"><!-- FacebookアプリIDを記述 -->

これらを追加することで、SNSごとの表示をより最適化できたりします。興味がある方は公式ドキュメントや他で紹介されているサイトなどをググってみてください！

その他のメタデータ

その他の head 要素内に記述することができる“メタデータ”の要素をいくつか紹介いたします。場合に応じて利用を検討するとよいです！

X 共有時のカードの形式

meta 要素で指定。
X で共有されたときのカード形式を指定することができます。

<meta name="twitter:card" content="summary_large_image"><!-- カードの形式を記述 ※下記参照 -->

上記の例では、
大きな画像付きの概要カードを表示します。

「summary_large_image」の他にも、以下のような属性値も使用できます。

・summary：小さなサムネイル画像とテキスト
・app：アプリ情報のカード
・player：動画や音声を再生できるカード

キャノニカルタグ

link 要素で指定。
指定したページの「正規URL」を検索エンジンに伝えます。

<link rel="canonical" href="〇〇"><!-- 正規URLを指定 -->

同じ内容のページが複数のURLでアクセス可能な場合に、重複コンテンツとして評価されるのを防ぎ、SEO 対策にも役立ちます。複数の URL に心当たりがなくとも、URL パラメータ（例: ?utm_source= や ?session_id=）が付与されたりするので、基本的には設定しておくことが推奨されます。

ひと手間ですがやっておきましょう！

相対リンクの基準

base 要素で指定。
HTML ドキュメント内の相対パスの基準を指定します。

<base href="https://example.com/">

HTML ドキュメント内のリンクやリソース（画像やCSSファイルなど）の相対パスを統一的に管理するために使われます。主に大規模サイトで活躍します。

スタイル

style 要素で指定。
ページ固有のスタイルを記述します。

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

link 要素で他のリソースの CSS を読み込むのとは別に、その HTML ドキュメントに直接スタイルを記述してしまうイメージです。

基本的に、
スタイルは link 要素で読み込む方が、現在では主流です。が、ふとした時に出会う場合も多々ありますので、一応知識として知っておきたいものです。

テンプレを
用意してみました

上述の内容を鑑みて、
私なりに必要最低限、汎用的な骨組みだけのテンプレを用意してみました。

<head prefix="og: http://ogp.me/ns#">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>〇〇</title><!-- ページタイトル -->
<meta name="description" content="〇〇"><!-- ページの説明 -->
<link rel="canonical" href="〇〇.html"><!-- 正規URL -->

<!-- OGP -->
<meta property="og:url" content="〇〇.html"><!-- ページのURL-->
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website"><!-- 必要に応じてarticleなどに変更-->
<meta property="og:title" content="〇〇"><!-- ページタイトル -->
<meta property="og:description" content="〇〇"><!-- ページの説明 -->
<meta property="og:image" content="〇〇"><!-- アイキャッチ画像パス -->
<meta property="og:site_name" content="〇〇"><!-- サイト名 -->
<!-- X -->
<meta name="twitter:card" content="summary_large_image">

<!-- icon -->
<link rel="icon" href="〇〇"><!-- ファビコン -->
<link rel="apple-touch-icon-precomposed" href="〇〇" /><!-- スマホ用アイコン画像のパス -->

<!-- CSS -->
<link rel="stylesheet" href="〇〇.css">

</head>

いかがでしょうか？
クローラーの設定は入ってないので、インデックス不要なページには下記コードを追加しましょう！

<meta name="robots" content="index, follow">

その他、必要に応じていろいろ改良したり、自分自身にピッタリのテンプレを、皆さんもぜひ作ってみてください！

まとめ

head 要素には、その HTML ドキュメントの“メタデータ”を記述します。SEO や UI/UX、シェアリングにおいて重要な設定なので丁寧な記述を心がけましょう！

また、WordPress などのブログサービスを利用していると、自動で設定されたり、プラグインを活用したり、またコーディングする際もテンプレートを活用すれば、そこまで知識がなくともイイ感じの設定にはできると思います。

でもせっかく Web デザインをするのであれば、一度はどのような“メタデータ”があるのか確認してみることをオススメします！きっと新たな発見もあり、各種サービスの活用でもより高いレベルで出来るようになること間違いなしです！！

参考・出典

・W3C. 「4.2.1 The head element」. https://html.spec.whatwg.org/multipage/semantics.html#the-head-element, 2024年12月12日閲覧。

・MDN. 「<head>: 文書メタデータ（ヘッダー）要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/head, 2024年12月12日閲覧。

・Google 検索セントラル. 「レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす」. https://developers.google.com/search/blog/2012/04/responsive-design-harnessing-power-of?hl=ja, 2024年12月12日閲覧。