目次
メタデータコンテンツ
<head>内に記述します。
タイトルやスタイルシートといったWebページに関する情報を示します。
ここに記述したものは、ユーザーに対して直接表示されることはありません。
ファビコンとSEO関連のメタデータの設定
ファビコンとは、ウェブサイトのアドレスバーやタブ、ブックマークなどに表示される小さなアイコンのことです。ウェブサイトの識別やブランディングに役立ちます。
SafariがSVG形式のファビコンに未対応なため、その他の形式で用意し<link>で示しています。
.ico形式のファビコンは「favicon.ico」というファイル名でサイトルート（/）に置くことで、<link>を参照しないツールにも対応できます。（最近知りました。）
SNSなどでページをシェアしたときに使用されるOpenGraphプロトコルやX/TwitterCardの情報は<meta>で示します。
<meta>の属性
| charset | 文字コーディング宣言 |
| name | ドキュメントレベルのメタデータ |
| http-equiv | HTTPヘッダーと同等の情報 |
| content | メタデータや情報の値 |
| media | メディアクエリ |
スタンダードなメタデータ名
| application-name | Webアプリとして構築した場合の名。 |
| author | ページの著者名 |
| color-sceme | 対応しているカラースキーム（配色）を示す。 |
| description | ページの概要。検索時タイトルの下に表示される。 |
| generator | ページを生成したソフトウェアなどを示す。 |
| keywords | ページのキーワードをカンマ区切りで示す。昔はWebページの情報がどのようなキーワードと関連したものなのかを検索エンジンに伝える役割をしていました。 |
| referrer | リファラポリシーを示す。（全てのリンクに影響あり） |
| theme-color | ダークモード時に使用するカラーの指定ができる。 |
拡張されたメタデータ
| viewport | ビューポートの設定。 |
| robots | 検索エンジンのロボット（クローラー）への指示。 |
| format-detection | iOSではページ内の電話番号やそれに類似した数字に対し、自動的に電話をかけるリングが設定されおり、その機能を無効化するときなどに使う。 |
| apple-mobile-web-app-title | Webアプリを構築した場合の名。 |
| twitter:~ | X/TwitterCardの情報を示す。 |
| og:~ | OpenGraphプロトコルの情報を示す。 |
HTTPヘッダーと同等の情報（http-equiv属性）
http-equiv属性を使用した場合、HTTPヘッダーと同等の情報を示します。
HTTPヘッダーを変更できないときに利用。
CSSやJavaScriptの読み込み
CSSやJavaScriptの読み込みも<head>内に記述することが多いのでここに捕捉的に書いておきます。
<link rel=”stylesheet” href=”css/style.css”>でCSSの読み込み。リセットCSSも同じ書き方でOKですが、リセットCSSより前にCSSを置くと打ち消されるので注意しましょう。
<script src=”js/script.js”></script>で、JavaScriptの読み込みができます。
<link rel=” ” href=” “>
各種リソースへのリンクです。
rel属性でリンクタイプ（種類）、href属性でURLを示します。
以下の属性と組み合わせ補足することも可能です。
| rel | リンクタイプ |
| href | リソースのURL |
| hreflang | 言語の種類 |
| media | メディアクエリ |
| sizes | アイコンサイズ |
| title | スタイルシートセット名 |
| type | MIMEタイプ |
| disabled | 外部スタイルシートの無効化 |
| crossorigin | クロスオリジン（異なるサイト間でのデータのやりとり）の設定。※外部サイト側で許可されている場合は指定することにより同一オリジンとして扱える。 |
| integrity | サブリソースの完全性の設定。読み込むリソースが意図せず改ざんされていないかをブラウザが検証できるようになる。 |
| referrerpolicy | リファラ（リンク元の情報）の設定 |
| as | 先読みするリソースの種類（設定できる値：script、style、font、image、audio、video、track、fetch） |
| imagesrcset | 先読みする画像のsrcset |
| imagesizes | 先読みする画像のsizes |
| fetchpriority | 先読みの優先順位 |
| blocking | ブロックする処理 |
| color | rel=”mask-icon”時に使用する色 |
主に使うリンクタイプ（rel属性）
| icon | ファビコン（アイコン）の画像を示す。 |
| stylesheet | 外部スタイルシート。 |
まとめ
検索エンジンやブラウザなどのシステムに対して情報（メタデータ）を伝えるためのHTMLタグです。
ですが、メタデータのSEOにおける重要度は、昔ほど高くないです。
特に、メタキーワードはほとんど効果がないとされています。
利点としては３つあって、
- 検索エンジンにページの内容を正しく伝えることできる点。
- 検索画面に表示されること。
- クローラーのインデックスを拒否できること。
気休め程度に設定してはいますが、ここにこだわるよりはコンテンツの精度を上げたほうが有意義化と思われます。
だけど、やっちゃうんですよね、何故か。