これまでなんとなくになっていたHTMLのheadの中身をちゃんと理解して正しい記述ができるようになる目的での学習録です。
【こんな人にオススメ！】
・HTMLのhead内部の理解がうやむやにしてしまっている人
・HTMLは一通り学び終わって知識を深めたい人
headタグの中身
head内に記載される可能性のあるものを全部集めてみました！
※漏れていたらごめんなさい…。
<head>
<meta charset="utf-8">
<meta name="viewport" content="=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="">
<meta name="application-name" content="">
<meta name="theme-color" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="googlebot" content="">
<meta name="google" content="">
<meta name="google-site-verification" content="">
<meta name="yandex-verification" content="">
<meta name="msvalidate.01" content="">
<meta name="alexaVerifyID" content="">
<meta name="p:domain_verify" content="">
<meta name="norton-safeweb-site-verification" content="">
<meta name="generator" content="">
<meta name="summary" content="">
<meta name="subject" content="">
<meta name="abstract" content="">
<meta name="rating" content="">
<meta name="referrer" content="">
<meta name="revisit_after" content="">
<meta name="reply-to" content="">
<meta name="format-detection" content="">
<meta http-equiv="x-dns-prefetch-control" content="">
<meta http-equiv="Window-Target" content="">
<meta http-equiv="default-style" content="">
<meta http-equiv="refresh" content="秒数; url=リンク先のURL">
<meta name="ICBM" content="">
<meta name="geo.position" content="">
<meta name="geo.region" content="">
<meta name="geo.placename" content="">
<meta name="monetization" content="">
<meta name="author" content="著者名">
<meta name="copyright" content="©会社名">
<link rel="stylesheet" href="">
<link rel="canonical" href="">
<link rel="amphtml" href="">
<link rel="manifest" href="">
<link rel="author" href="">
<link rel="license" href="">
<link rel="alternate" href="" hreflang="">
<link rel="me" href="" type="">
<link rel="archives" href="">
<link rel="index" href="">
<link rel="self" type="" href="">
<link rel="first" href="">
<link rel="last" href="">
<link rel="prev" href="">
<link rel="next" href="">
<link rel="EditURI" href="" type="" title="">
<link rel="pingback" href="">
<link rel="webmention" href="">
<link rel="micropub" href="">
<link rel="search" href="" type="" title="">
<link rel="dns-prefetch" href="">
<link rel="preconnect" href="">
<link rel="prefetch" href="">
<link rel="prerender" href="">
<link rel="preload" href="" as="">
<link rel="icon" sizes="" href="">
<link rel="apple-touch-icon" href="">
<link rel="mask-icon" href="" color="">
<meta property="fb:app_id" content="">
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<meta property="og:description" content="">
<meta property="og:site_name" content="">
<meta property="og:locale" content="">
<meta property="article:author" content="">
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="">
<meta name="twitter:dnt" content="">
<meta name="pinterest" content="" description="">
<meta name="apple-itunes-app" content="">
<link rel="apple-touch-startup-image" href="">
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="">
<meta name="apple-mobile-web-app-status-bar-style" content="">
<meta name="mobile-web-app-capable" content="">
<meta name="google-play-app" content="">
<link rel="chrome-webstore-item" href="">
<meta property="al:ios:url" content="">
<meta property="al:ios:app_store_id" content="">
<meta property="al:ios:app_name" content="">
<meta property="al:android:url" content="">
<meta property="al:android:app_name" content="">
<meta property="al:android:package" content="">
<meta property="al:web:url" content="">
</head>
めっちゃありますね…。
手動で設定してたらheadの設定だけで午前中は無くなりそうです…。
なのでWebサイトを作るなら「必須」か？の観点で精査していきます！
<head>に必須なタグ
最低限これだけは設定しておきたいタグを一覧化しました。
Emmetでテンプレートを呼び出すと出ていくるものがほとんどですが復習程度に確認してください！
Emmetで出力される<head>内の要素
Emmetとは、HTMLを省略記法で入力できるプラグインのことで利用している人がほとんどだと思います！
EmmetはHTMLの雛形も一瞬で出力してくれます！
「！（エクスクラメーションマーク）を打ち込んでtab」これで下記のHTMLが生成されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<meta charaset="UTF-8">
文字コードの指定に関する記述です。
最近では「UTF-8」が基本になりましたが、Windows環境では「Shift_JIS」を利用していました。
ここ10年で開発がWindows端末からMac端末に変わった会社などの場合古いファイルが「Shift_JIS」の指定になっていることがあり、文字化け（ファイルの文字形式とブラウザの文字形式が異なることによって起こる読めない文字として表示される現象）が発生します…。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorer（通称：IE）をサポートしたい場合の記述です。
互換モードと呼ばれる機能でIE8以降にはこの記述で対応できます！
「content=""」の箇所にどの互換モードを利用するかを指定します。
<!-- IE8の互換モード -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- 最新のIEの互換モード -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
2023年現在ではブラウザとしてのIEは使えなくなっており、「Microsoft Edge」が起動されるようになっているので設定が不要だとも言えます。
古いブラウザに対応しないといけない場合もあると思います。
その場合には記述をしないと表示崩れなどソフトウェアの不備につながる可能性があるので記述しておくことをオススメします！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
デバイスごとの表示領域を設定するための記述です！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
上記はGoogleが推奨する設定です。
設定できる属性値と何が設定できるのかは下記に一覧としてまとめました！
| 属性値 | 設定できること |
|---|---|
| width=device-width | 表示領域の幅で、端末画面の幅に合わせる指定ができる |
| user-scalable | ズームの操作で、許可する（yes）・許可しない（no）の指定ができる |
| initial-scale | 初期のズーム倍率で、倍率（minimum-scale～maximum-scale の範囲）指定ができる |
「minimum-scale」と「maximum-scale」を設定したい場合は下記のように記述します。
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>
HTML文書全体のタイトルを表すメタ要素です。
SEOの観点でも重要な項目になるので必ず設定しましょう！
head内に必要なmetaタグ
Emmetで生成されるmetaタグ以外にも設定しておいた方が良い、サイト制作で必要となるタグを紹介します！
<!--
コンテンツセキュリティポリシー（CSP）を指定する
文書に読み込まれる各種リソースに対して制限をかけられる
-->
<meta http-equiv="Content-Security-Policy" content="">
<!--
ページの説明文を記載します。SEO観点でも重要な項目なので必ず設定しましょう
検索結果ページタイトルの下に表示される文章です
-->
<meta name="description" content="">
<!--
検索エンジンにクローラーの動きを制御ができます
-->
<meta name="robots" content="">
<!--
Googleのクローラーに対して命令できます
noindexを指定するとGoogleの検索結果にのみ表示されないようにできます
-->
<meta name="googlebot" content="">
<!-- 「Bing」Webマスターの設定 -->
<meta name="msvalidate.01" content="">
<!-- ページの対象年齢を記載する -->
<meta name="rating" content="">
<!-- 送信されるリファラー情報の設定を記述する -->
<meta name="referrer" content="">
<!-- 電話番号の自動リンク機能を停止させる -->
<meta name="format-detection" content="">
<!--
ユーザーが進むことができるリンクや画像、CSS、JavaScriptなどを
事前に先読みしておく設定
-->
<meta http-equiv="x-dns-prefetch-control" content="">
name="robots"の補足
name="robots"のcontentにnoindexやnofollowが指定されてしまうとページが検索結果でヒットしなくなります。
SEO観点では非常に重要なタグなので設定には十分に気を払いましょう！
noindex, nofollowを指定したい時はcontent="none"で同じ意味になります！
恥ずかしながらこの記事を書いている時に知りました…。
meta name="referrer"の設定について
リファラーは個人情報の流出やセキュリティの観点から正しい設定をしたいものです…。
下記の記事が非常にわかりやすかったのです！
Chromのデフォルトの設定は「strict-origin-when-cross-origin」になってます。
その他必要に応じて利用するタグ
<!-- ページの関連キーワードを指定する -->
<meta name="keywords" content="">
<!-- Webページで実行されているアプリケーションの名前 -->
<meta name="application-name" content="">
<!--
ユーザーインタフェースの表示をカスタマイズするために仕様すべき色を設定
-->
<meta name="theme-color" content="">
<!-- 「Google Search Console」で所有権を明示する -->
<meta name="google-site-verification" content="">
<!-- 「yandex」 Webマスターの設定 -->
<meta name="yandex-verification" content="">
<!--
content="nositelinkssearchbox"を記述することで
検索結果に表示される検索ボックスを非表示にできます
-->
<meta name="google" content="">
<!-- アレクサ(Alexa)コンソールの設定 -->
<meta name="alexaVerifyID" content="">
<!-- Pinterest コンソールの設定 -->
<meta name="p:domain_verify" content="">
<!-- ノートンが発行しているサイトの安全性を示すタグ -->
<meta name="norton-safeweb-site-verification" content="">
<!-- どんなソフトを利用して作成されたサイトなのかを示す -->
<meta name="generator" content="">
<!-- ページの概要・主題・要約を記述する -->
<meta name="summary" content="ページ概要">
<meta name="subject" content="ページの主題">
<meta name="abstract" content="ページの要約">
<!-- 会社名や著作者名を指定するタグ -->
<meta name="author" content="著者名">
<meta name="copyright" content="©会社名">
<!-- 経度・緯度で住所を指定するタグ -->
<meta name="ICBM" content="">
<!-- 地理的緯度、その後ろに地理的経度を記述する -->
<meta name="geo.position" content="">
<!-- 国番号と地域番号の2つを技術する -->
<meta name="geo.region" content="">
<!-- 町の名称を記載する -->
<meta name="geo.placename" content="">
<!--
調べてもピンとこなかった子たち
わかる方がいたらコメントください…
-->
<!-- Web収益化 -->
<meta name="monetization" content="">
<!-- 特定のフレームに表示するドキュメントを設定 -->
<meta http-equiv="Window-Target" content="">
meta name="keywords"は必要？
keywordsはスパム的に様々なキーワードを指定される場合も多いため検索エンジンからは無視されるようなのであってもなくても良いと考えます。
スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。
name=theme-colorの補足
設定すると何が変わるのかはmdnのサイトに記載がありますので確認してください。
Googleがサポートしているmetaタグと属性
googlebotやgoogleなどいくつかgoogleの属性について紹介しました。
詳細はGoogleの公式に詳しくまとまっているのでそちらをご覧ください！
世界には様々な検索エンジンがありますが、GoogleとBingでほとんどの検索エンジンシェアを獲得しているため、登録するサーチエンジンはGoogleとBingで十分かもしれません。
下記のサイトにその他サーチエンジンについてまとめてあり、わかりやすかったのでシェアしておきます。
meta name="norton-safeweb-site-verification"について
ノートンセーフウェブでサイトを検証した際に発行されるメタタグです。
SEOに効果があるかは確認されてないようですが、安全なサイトであることの証明にはなるのでやっておいて損はない対策だと思います！
初めて知りました…。
meta name="summary or subject or abstract"
ページの概要・主題・ようやくを記述するためのメタタグです。
SEOにはあまり効果がないとされているので必ず設定する必要はないと考えます。
SNS関連
<!--
Facebook版のGoogleアナリティクスを利用するために必要
なくても問題なくシェアされる
-->
<meta property="fb:app_id" content="">
<meta property="og:url" content="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<meta property="og:description" content="">
<meta property="og:site_name" content="">
<meta property="og:locale" content="">
<meta property="article:author" content="">
<!-- 設定すると写真やビデオなどのメディアをツイートに添付できる -->
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="">
<!--
Webサイトに埋め込むと、Twitterがサイトの情報をもとにユーザーに合わせたコンテンツや提案します。
また、パーソナライゼーションの目的でサイトの情報を使用することを制限することもできます。
-->
<meta name="twitter:dnt" content="">
<!-- ビジターがあなたのWebサイトから何かを保存するのを防止します -->
<meta name="pinterest" content="" description="">
<!-- Webサイトでアプリの「Smart App Banner」を出すためのタグ -->
<meta name="apple-itunes-app" content="">
<!-- Webアプリの設定（アプリ的な見た目にする設定） -->
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="">
<meta name="apple-mobile-web-app-status-bar-style" content="">
<meta name="mobile-web-app-capable" content="">
<!-- Androidアプリのディープリンク -->
<meta name="google-play-app" content="">
<!-- AppLinks モバイルアプリ内のコンテンツにディープリンクする -->
<meta property="al:ios:url" content="">
<meta property="al:ios:app_store_id" content="">
<meta property="al:ios:app_name" content="">
<meta property="al:android:url" content="">
<meta property="al:android:app_name" content="">
<meta property="al:android:package" content="">
<meta property="al:web:url" content="">
「Smart App Banner」とは？
検索するとわかることですが、よくwebサイトで見る「アプリ版もありますよー」っていうページ上に出てくる広告のようなやつです！
Webアプリの設定
Safariでは、ホーム画面に追加しホーム画面に追加されたアイコンをタップするとフルスクリーンでサイトが表示されるようになります。
アプリっぽくて良いとされる一方で強制的に表示を制御することになるのでユーザービリティやUXの観点からはどちらがいいのかは検討が必要です。
AppLinksの補足
ディープリンクってなんだ？と思ったので調べてみました。
URLからアプリを起動したり、アプリ内の特定の画面に直接遷移したりするリンクのことを「ディープリンク」と呼ぶそうです！
全てリンクとまとめてしまっていたのでそのような呼び名があるのは知りませんでした…。
非推奨とされるタグ
用意されていても設定する必要がないとされるタグもありますので紹介します！
<!-- クロール再訪問日を指定する -- >
<meta name="revisit_after" content="">
<!-- 連絡先の指定 -->
<meta name="reply-to" content="連絡先">
meta name="geo.position"とmeta name="ICBM"の違い
同じ内容を記述するタグですが、記述方法に違いがあるだけのようです。
どちらがSEO的に有利などの情報は見つかりませんでした。
市区町村等の詳細な情報まで記載できるタグが用意されているgeo.positionを利用する方が汎用性は高いとは思います。
linkタグ
CSSやJavaScriptの外部ファイルを読み込む時に利用するタグですがそれ以外にもたくさんの設定できます！
<!-- 外部スタイルシートへのリンク -->
<link rel="stylesheet" href="">
<!--
URLは同一でもパラメーター等で複数のコンテンツを生成している場合
正規のページを指定することでページが正しいSEO評価を受けられるようにします
検索エンジンからの評価の分散を防ぎます
-->
<link rel="canonical" href="">
<!-- AMPページがある場合に指定する -->
<link rel="amphtml" href="">
<!-- ウェブアプリマニフェストを指定する -->
<link rel="manifest" href="">
<!-- 著者情報のリンクを記述 -->
<link rel="author" href="">
<!-- 著者権情報のリンクを記述 -->
<link rel="license" href="">
<!-- PCとSPでURLが異なる場合に同一コンテンツだと認識されないようにするための設定 -->
<link rel="alternate" href="" hreflang="">
<!-- 著者や関係者に関するwebサイトやSNSのURLやメールアドレス等 -->
<link rel="me" href="" type="">
<!-- 照された文書が歴史的な関心を持つ記録、文書、またはその他の資料を示す -->
<link rel="archives" href="">
<!-- 現在のページに対してリンクの階層を示す -->
<link rel="index" href="">
<link rel="up" type="" href="">
<!-- リンクが最初のページもしくは、最後ページであることを示す -->
<link rel="first" href="">
<link rel="last" href="">
<!-- 自身を参照 ドキュメントに複数の参照がある場合に利用 -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!--
同一コンテンツのページ前後関係を示します
同一のURLで2ページ、3ページ目があるようなページでは設定します
-->
<link rel="prev" href="">
<link rel="next" href="">
<!--
EditURIは外部の投稿ツールからWordPressに記事の投稿を行う時に必要な設定
通常は必要ないし、WordPressでも必要になることは少ないかも
-->
<link rel="EditURI" href="" type="" title="">
<!-- リンク先のウェブサイトにリンクを設置したことを通知する -->
<link rel="pingback" href="">
<!-- 自身のサイトで任意のURLについて言及する時に、そのことを通知する -->
<link rel="webmention" href="">
<!--
サードパーティーのクライアントを使用して、独自ドメインの投稿を作成するためのタグ
https://www.w3.org/wiki/Socialwg/Social_API/Micropub
-->
<link rel="micropub" href="">
<!-- サイト内検索の際に利用するキーワードとしたい場合に利用する -->
<link rel="search" href="" type="" title="">
<!-- ウェブサイトのアイコン（ファビコン）を定義するために使用 -->
<link rel="icon" sizes="" href="">
<!-- iOSデバイス（iPhoneやiPadなど）のホーム画面に追加されるブックマークやWebクリップのアイコンを定義する -->
<link rel="apple-touch-icon" href="">
<!-- Safariブラウザのタブバーとピン留めサイトアイコンに対してマスクアイコン -->
<link rel="mask-icon" href="" color="">
<!-- iOSデバイスでウェブアプリケーションが起動中に表示される画像を指定する -->
<link rel="apple-touch-startup-image" href="">
<!-- ウェブページ上でGoogle Chromeウェブストアの特定の拡張機能やアプリへのリンクを提供する -->
<link rel="chrome-webstore-item" href="">
link rel="manifest"の補足
“ウェブアプリマニフェスト(Web App Manifest)”はウェブアプリケーションをプログレッシブウェブアプリとして動作させるために必要な情報を記載したテキストファイルです。
“プログレッシブウェブアプリ(Progressive Web Apps、PWA)”はウェブアプリをスタンドアロンアプリのように見せかけるための仕組みでGoogleによって策定されています。ホーム画面へのアイコンを設置やオフラインでの表示、プッシュ通知などの機能を実装できます。
link rel="index or up"補足
link rel="index"は設置されたページが階層構造の一部であることに加えてリンク先が階層の最上位に当たる文書であることを伝えられます。
link rel="up"はリンク先が現在ページの祖先要素であることを伝えられます。
<a href="/hoge/" rel="up up">hoge</a> のように階層の距離を表すためにupを複数記述することもあるようです。
例外や重複のケースなど詳細はW3Cのサイトで明記されているので興味のある方はご覧ください！
link rel="self"の補足
該当ページを参照する場合になどにrel="self"を指定しておくとよい的な話なのか…。
いまいち理解ができませんでしたが、RSSの設定をする時には有効？ぐらいに覚えておこうと思います。
link rel="webmention"の補足
結論必要なタグかどうかで言うと必要ないとは思います。
いつ使うのか？がピンとこないタグですが下記のURL「1. はじめに」の箇所に具体的な事例が書いてありました。
気になる方はご覧ください！
link rel="search"はSEOに効果がある？
調べたところSEOに直接的な効果はもたらさないようです。
ただ、link rel="search"タグを利用することでクローラーがサイト内の検索エンジンを認識し、サイト内のコンテンツをより効果的に把握できるようになる可能性があります。
それによってユーザーエクスペリエンスが向上しSEO順位に好影響を与えることも考えられます。
サイトのパフォーマンスを高めるためのlinkタグ
<!-- リンク先のドメインのDNS解決に要する時間を短縮できます -->
<link rel="dns-prefetch" href="">
<!-- 特定のドメインとの接続を事前に確立するよう指示する -->
<link rel="preconnect" href="">
<!-- 指定されたリソースを事前にダウンロードしてキャッシュさせる -->
<link rel="prefetch" href="">
<!-- ページを事前にレンダリングさせる -->
<link rel="prerender" href="">
<!-- 指定されたリソース（画像、スクリプト、スタイルシートなど）を事前にダウンロードしてキャッシュさせる -->
<link rel="preload" href="" as="">
パフォーマンスを上げるためのrel属性はいくつかあります。
パフォーマンスが上がるなら全てにあった方がいいのでは？と考えてしまいますが、そうではありません…。
すでにドメインのDNSが高速である場合などは効果が少ない可能性があります。
また、無駄にサーバーへの負荷やリソースを消費してしまう恐れがあるため利用方法によっては逆にサイトパフォーマンスを落としてしまうことにもなります。
HTML側で対応するかサーバー側で対応するかはサーバーサイドのエンジニアと相談してから実施するのが望ましと考えています！
【まとめ】HTMLの<head>タグの中身
改めて学習してみて書いたことがないタグはもちろん、知識の深堀にもなり良かったと思います。
また、SNSを運用する上では設定しておいた方がいいと感じるものありました。
全てを覚えるのは難しい気もしています…。
もちろんすべてのタグを記述する必要はないと思うので関わっているサービスに必要になりそうなタグだけを重点的に覚えていくのが良いかと思います。
究極的なセマンティックなコーディングを意識するならスニペットにするなどして覚えてなくてもコーディングできる状態にしておくのが良いと思います！
セマンティックなコーディングをしているからSEOに良い影響を与えるとも限らないのでどこまでやるかはチームの状況や事業のフェーズによって取捨選択するのが望ましいのではないかと思います！