htmlのhead周りについて押さえておくこと

フロントエンド
この記事を読むのにかかる時間 1未満 分

■headとは何か

・htmlファイル内に…で囲まれた内容。
・ページのタイトルなどの情報などを含んでいます。
・ページが読み込まれてもブラウザには表示されない情報を記述しています。

以下のコードだと、緑色の箇所がheadにあたります。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

■headがなぜ必要か

・使用する言語の定義や他のファイルの読込等を担っており、見えていないけど重要な情報です。
・ページのタイトルや検索結果の表示など、ページの外でhead内の情報を使っています。

■どうやって調べる？

・ブラウザ上で右クリック→「ページのソースを表示」でhtmlファイルの中身を見ることができます。

■headで押さえておく項目

①メタデータ・・・文章に関する情報を載せる
　▼サイトによって内容が変わらない情報

　・<meta charset="utf-8" />・・・文字コードを指定。
  ・<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />　・・・スマホやタブレットで見たときの挙動を指定。

　▼サイトによって書き換える情報

・ <meta name="keywords" content="〇〇〇,〇〇〇" />→もうSEO的に効果がない
・ <meta name="description" content="〇〇〇" />→サイトの説明
・<meta property="og:image" content="〇〇〇" />→SNSで表示されたときのイメージ

②ページのタイトル

<title>〇〇〇</title>

③他の外部リソースと紐づけ

・ <link rel="canonical" href="〇〇" />→優先するURL
・<link rel="icon" href="〇〇" />→ファビコン
・<link rel="apple-touch-icon-precomposed" href="〇〇" / />→スマホのホーム画面で表示するときのアイコン


④cssやjsファイルの読込

・ <link rel="stylesheet" href="〇〇.css" type="text/css" />
・<script type="text/javascript" src="〇〇.js"></script>

■参考サイト

・ヘッド部には何が入る? HTML のメタデータ
　https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
・【HTML】head内のmeta『X-UA-Compatible:IE=edge』は不要です：https://125naroom.com/web/3507
・【HTML】headにブラウザのキャッシュ無効を記述する：https://raqoon.jp/column/no-cache/
・ブラウザのキャッシュを無効化する方法：https://zenn.dev/mindwood/articles/ba4594c53a93b0