今回はhead内に書いておきたいタグを総まとめしていきます。

HTMLのheadタグとは？

みなさんが普段ネットサーフィンするときに見ているWebページはHTMLにより作られています。HTMLは、大きくheadと、bodyに分けることができます。

記事図表

  • head：<head>...</head>ではさまれた部分。ページの情報や関連ファイルを指定するタグを入れる。bodyのように本文としては描画されない
  • body：<body>...</body>ではさまれた部分。訪問者に見える部分がここに書かれる

皆さんが今この瞬間に見ているこのページの文字や画像は、bodyタグ内に書かれています。

headタグ内には、検索エンジンやブラウザに情報を提供したり、指示を出したりするためのタグを書きます。タグ自体はbodyのように本文として描画されませんが、titleやアイコンはブラウザのタブなどに現れ、CSSやJavaScriptはページの表示や動作に影響します。上の図は、headとbodyの役割を簡略化した図です。

headタグ内には主にmetaタグとlinkタグを入れる

metaタグをhead内に書くことで、文字コード、表示設定、検索エンジンへのインデックス（掲載）に関する指示などを指定します。headにはmetaやlinkのほか、title、style、scriptなども入ります。

あわせて読みたいメタタグとは？SEO効果は？metaタグ一覧と書き方まとめ

linkタグと呼ばれるものをhead内に書くことで、CSSファイルの読み込み指定をしたり、ページ同士の関係性を検索エンジンに伝えたりすることができます。

あわせて読みたいHTMLのlinkタグとは？基本的な書き方とrel属性まとめ

というわけで、今回はheadタグ内に書くべきものを、meta、linkタグ合わせて総まとめします。

headタグ内に書くべきもの一覧

それぞれのタグには、公開当時の重要度に応じたラベルをつけました。現在は目的や対象環境に合わせて選びます。IE・Windowsの旧設定を含め、すべてのタグを全ページへ貼り付けるという意味ではありません。

  • 重要：その用途で必要な設定。用途を問わず全タグを入れるという意味ではない
  • 推奨：できれば書いておきたい
  • SEO対策：検索エンジンへの情報や指示に関わるもの。順位の上昇を保証するものではない

1. 文字のエンコード

<meta charset="utf-8" />

重要 文字コードを指定するためのものです。日本語に限らず、現在のHTMLではUTF-8を使います。このmetaタグは文書の先頭1024バイト以内に置きましょう。HTTPのContent-Typeヘッダーで文字コードを宣言する方法もあります。

2. Internet Explorer用の設定

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

重要 IEには、過去のバージョンの表示に合わせるdocument modeがありました。IE=edgeは、そのIEが対応する最も新しいdocument modeを指定するための設定です。
このラベルとコードは公開当時のIE向けの説明です。IE11デスクトップアプリは一部のWindows 10でサポートが終了しており、現在の主要ブラウザ向けの必須設定ではありません。組織でIE mode等を使う場合は、その環境のポリシーも確認してください。

3. viewport設定

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

重要 スマホやタブレットの画面幅に合わせて表示するためのviewport設定です。width=device-widthで端末の幅を使い、initial-scale=1で初期倍率を指定します。これだけでレイアウトが自動対応するわけではなく、CSSでも画面幅に合わせた設計が必要です。

4. タイトルタグ

<title>そのページのタイトル</title>

重要 SEO対策
titleタグはページのタイトルを指定し、ブラウザのタブなどに表示されます。通常のHTML文書では、そのページを表すtitleを1つ用意します。Googleの検索結果のタイトルはtitleや本文の見出し等から生成されるため、指定した文字列がそのまま表示されるとは限りません。WordPress、はてなブログ、アメブロなどでの自動出力は、サービス・テーマ・設定によって異なります。下のブラウザと検索結果は公開当時の画面例です。

titleタグはブラウザのタブに表示される

titleタグは検索エンジンにも使われる

5. メタディスクリプション

<meta name="description" content="ページの内容を表す文章" />

推奨 ページの内容を正確に要約する文章を書きます。100字という固定上限はありません。Googleはmeta descriptionや本文から検索結果の説明文を生成し、画面幅等に応じて省略するため、この文章がそのまま表示されるとは限りません。
検索ユーザーが内容を判断しやすい説明を目指しましょう。descriptionを書くだけで直接順位が上がるとはしません。下の図は公開当時の検索画面です。

メタタグがどう表示されるか

メタデスクリプションについての詳しい解説を見る

6. meta robots

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

重要 SEO対策
この例のnoindexは検索結果に掲載しない指示、nofollowはこのページ上のリンクをたどらないようにする指示です。noindex自体はクロールを止めません。検索エンジンが指示を読めるよう、robots.txtでページへのクロールを遮断しないでください。
通常の掲載を希望するページに、この例をそのまま貼り付けないでください。index/followは既定の動作なので省略できますが、content="index,follow"を書いてもクロールや検索掲載が保証されるわけではありません。

meta robotsの詳しい解説を見る

7. OGPタグ/twitterカード

<meta property="og:url" content="https://example.com/article" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="article">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_account" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<!-- Facebookアプリを使う場合だけ: <meta property="fb:app_id" content="YOUR_APP_ID" /> -->

重要 FacebookやX（旧Twitter）などで、シェアされたページの情報を伝えるための設定です。OGPの基本項目はtitle・type・image・urlで、description・site_name・localeなどは任意項目です。twitter:siteやfb:app_idも、該当するアカウントやアプリを使う場合の設定で、すべてのサイトに一律で必要という意味ではありません。
サンプルのURL・文章・アカウントを自分のものへ置き換えてください。表示方法は各サービスにも依存し、設定だけで表示や流入増を保証するものではありません。下のTwitterカードは公開当時の画面です。

Twitterカードとは

詳しくはこちらの記事をどうぞ。

あわせて読みたい【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

8. URLの正規化（link rel="canonical"）

<link rel="canonical" href="https://example.com/article" />

推奨 SEO対策
複数のURLに同じ、または非常に類似する内容があるとき、代表として扱ってほしいURLを検索エンジンに伝えます。canonicalはGoogleへの強い手掛かりですが、採用や評価の統合を保証する命令ではありません。
例えば、PC用とスマホ用でURLが分かれ、内容が重複している場合に、スマホ用ページのheadからPC用URLを示す使い方があります。
<link rel="canonical" href="https://example.com/article">のように指定します。canonical自体が訪問者を転送するわけではありません。

canonicalの詳しい解説を見る

9. サイトアイコンの指定

<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png" /> 
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />  
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png" /> 
<link rel="icon" href="/favicon-62.png" sizes="62x62" type="image/png" />

ファビコン

推奨 ブラウザのタブやブックマーク等で使うサイトアイコンを指定します。複数ある場合は、ブラウザがtype・media・sizesなどから選びます。sizesには、リンク先の画像に実際に用意されている寸法を書きます。上の62x62も62pxの画像を用意する場合の例です。
PNGやICOがよく使われ、透過が必要ならPNGを選べます。GIFのMIMEタイプはtype="image/gif"です。JPEGはHTML仕様で禁止されているわけではありませんが、形式の対応はブラウザにも依存します。上の図は公開当時のファビコン表示です。

IE8〜10に対応する方法

以下は、IE8〜10向けに.ico形式を指定していた公開当時の補足です。現在の主要ブラウザ向けの追加必須設定ではありません。古いIEを個別に対象にする場合だけ、その環境の表示を確認してください。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

↑旧IE向けの例は参考として残しています。現在のサイトでは通常、先のrel="icon"を使い、必要なブラウザでアイコンが表示されることを確認します。

10. スマホ用アイコン画像

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />

サイトのブックマークアイコンとしても使われる

推奨 iPhoneやiPadでホーム画面にページを保存したときのアイコンを、PNG画像で指定する例です。現在の例はrel="apple-touch-icon"を使い、180x180のPNGを用意した場合のsizesも示しています。端末や用途に合う寸法を選び、sizesと実画像を合わせましょう。
apple-touch-icon-precomposedは旧iOSでの見た目の効果に関する指定でした。上のホーム画面は公開当時の例で、150pxがすべての端末に共通する推奨値という意味ではありません。

11. Windows用タイル設定

<meta name="msapplication-TileImage" content="/tile.png" />
<meta name="msapplication-TileColor" content="#F89174"/>

Windowsのピン止めWindows8のピン留め機能

Windows 8とInternet Explorerで使われていた、ピン留めサイトの画像と背景色の設定です。コードと画面は公開当時の機能の参考として残しています。現在のWindowsやすべてのブラウザ向けに必要な設定ではありません。

12. CSSやJavaScriptファイルの読み込み

<link rel="stylesheet" href="/site.css" />
<script defer src="/site.js"></script>

外部のスタイルシート（CSS）とJavaScriptを読み込むタグです。この外部classic scriptの例ではdeferを指定し、HTMLの解析と並行して取得して、解析後に実行します。deferなしのclassic scriptは解析を止めて取得・実行するため、DOMを扱うコードでは実行時点にも注意しましょう。module scriptはasyncがなければ既定で解析後に実行されます。

13. フィードページのURLを指定

<link rel="alternate" type="application/rss+xml" title="フィード" href="/feed.xml" />

RSSリーダー等へフィードのURLを伝える設定です。WordPressでのフィードURLや自動出力はテーマ・設定にも依存するため、実際の出力を確認しましょう。

14. 分割ページ用のタグ

<link rel="prev" href="/article/1" />
<link rel="next" href="/article/3" />

主に1つの記事を複数ページに分割したとき、HTML上の前後関係を示します。1ページ目には<link rel="next" href="2ページ目のURL" />、最後のページには<link rel="prev" href="1つ前のページのURL" />、途中にはprevとnextの両方を指定します。上の構文枠は2ページ目から1・3ページ目を示す例です。Googleは現在、これらのlinkタグをページ送りのインデックス信号として使っていません。

15. 電話番号やメールアドレスの変換設定

<meta name="format-detection" content="telephone=no" />

ブラウザによっては電話番号・メールアドレス・住所を自動でリンクにすることがあります。ここではAppleのSafari向け文書にあるtelephone=noで、電話番号の自動検出を止める例を示します。公開当時の例にあったemail=noやaddress=noも含め、すべてのブラウザで同じように効くとはしません。対象ブラウザで確認してください。

書く必要のないもの

  • メタキーワード：Google検索はmeta keywordsを使わず、インデックスや順位に効果はありません。<meta name="keywords" content="キーワードを,で区切って指定">
  • metaによる言語設定：Google検索は本文から言語を判断するため、このmetaタグをSEO目的で追加する必要はありません。ページの言語を示す<html lang="ja">は別で、読み上げ等のために指定します。<meta name="language" content="Japanese" />
  • metaによる著者名：HTMLでは有効な著者情報ですが、GoogleのSEO対策として必須のタグではありません。著者情報そのものが不要という意味ではありません。<meta name="author" content="著者名">

Google公式ブログのheadタグには何が書かれている？

最後に、公開当時に調べたGoogleの公式ブログのheadを見てみましょう。以下の画像と一覧は当時の記録で、現在のGoogleブログの設定やGoogle検索の推奨一覧ではありません。

google公式ブログ

検索エンジンを開発する会社のサイトであっても、そのheadの構成だけでSEOに必要な設定が網羅されているとは判断できません。サイトの用途によって必要なタグは変わります。

  • 文字エンコード<meta charset="utf-8" />
  • IE対応<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  • タイトルタグ<title>~</title>
  • viewport設定<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  • メタデスクリプション<meta name="description" content="〜"/>
  • 外部CSSの読み込み<link rel="stylesheet" href="〜" />
  • 各種OGPタグ&Twitterカード

当時のheadには、上で重要をつけた基本項目が多く含まれていました。ただし、一覧内のIE設定や、拡大を制限するminimum-scale/maximum-scaleの指定を、現在の推奨としてそのままコピーしないでください。現在のviewport例では、利用者の拡大を制限する指定を加えていません。