こんにちは！コーダーのゆうしです。
コーディングを始めるとき、毎回 <head> タグの中身を一から書くのは手間がかかります。この記事ではコーディング開始時にとりあえず入れておきたい必須タグをまとめてコピペで使えるテンプレートとして紹介します。各タグの役割も合わせて解説しているので、「なんとなく書いていた」という方もぜひ参考にしてみてください。
コピペ用テンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<meta name="description" content="ページの説明文（120文字程度）">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ファビコン -->
<link rel="icon" href="img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<!-- OGP -->
<meta property="og:url" content="https://example.com/page/">
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="website">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/img/ogp.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!-- X（Twitter）Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@アカウント名">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ページの中身 -->
</body>
</html>素材が揃い次第、各プレースホルダーを実際の値に差し替えてください。
各タグの解説
charset（文字コード）
<meta charset="utf-8">ページで使用する文字コードを指定します。UTF-8 を指定することで日本語を含む多言語テキストを正しく表示できます。文字化けを防ぐために必ず最初に記述してください。
titleタグ
<title>ページタイトル</title>ブラウザのタブ・検索結果・SNSシェア時に表示されるページタイトルです。SEOにも直接影響するので、ページの内容を表すキーワードを含めた30〜35文字程度のタイトルを設定することを推奨します。
metaディスクリプション
<meta name="description" content="ページの説明文" />Googleの検索結果に表示される説明文です。SEOの直接的なランキング要因ではありませんが、クリック率に影響するので120文字前後でページ内容を端的にまとめておくことをおすすめします。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">スマートフォンなどのモバイル端末で表示したときの表示幅を指定します。width=device-width でデバイスの画面幅に合わせ、initial-scale=1 で初期のズーム倍率を1倍（等倍）に設定します。レスポンシブデザインには必須のタグです。
ファビコン
<link rel="icon" href="img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">ブラウザのタブやブックマークに表示されるアイコンです。apple-touch-icon はiPhoneやiPadでホーム画面に追加したときに表示されるアイコンで推奨サイズは180×180pxです。詳しくはこちらの記事を参考にしてください。
OGPタグ
<meta property="og:url" content="https://example.com/page/">
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="website">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/img/ogp.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:image" content="画像URL" />SNSでURLをシェアしたときに表示されるタイトル・説明文・画像などの情報です。og:image は**絶対パス（https://〜から始まるURL）**で指定してください。相対パスだと画像が表示されないことがあります。
| タグ | 内容 |
|---|---|
| og:url | ページのURL |
| og:title | シェア時のタイトル |
| og:type | ページの種類（トップページは website・記事は article） |
| og:description | シェア時の説明文 |
| og:image | シェア時に表示される画像（絶対パスで指定） |
| og:site_name | サイト名 |
| og:locale | 言語設定（日本語は ja_JP） |
OGPについて詳しくはこちらの記事も参考にしてください。
X（Twitter）Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@アカウント名">X（旧Twitter）でシェアされたときのカード表示形式を指定します。summary_large_image で大きい画像付きのカードが表示されます。og:title や og:description の情報をそのまま使うので、重複する項目はX側だけに書く必要はありません。
twitter:card の値 | 表示形式 |
|---|---|
| summary | 小さい正方形の画像 |
| summary_large_image | 大きい横長の画像 |
IE用のメタタグについて
以前のコードに含まれていた以下のタグは現在は不要です。
<!-- 現在は不要 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">Internet ExplorerはMicrosoftによるサポートが2022年6月に終了しており、現在ほとんどのプロジェクトでIE対応は求められなくなっています。新規プロジェクトではこのタグを省略してOKです。
まとめ
<head> タグの中身は毎回同じパターンで書くことが多いので、テンプレートとして手元に持っておくと作業効率が上がります。OGP画像は絶対パスで指定・og:locale のスペルに注意（og:local は誤りで og:locale が正しい）の2点だけ気をつけてください。
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
