どうも7noteです。HTMLのheadタグ内に書く要素をコピペで使えるようにまとめました。
headタグ<head>の中には様々な要素を書きますが、予め書いておくと良い要素をまとめてみました。
googleアナリティクスを設定する位置なども含めてまるっとコピペで使えるようにしています。
最初はコピペや初期セットで対応できますが、少しずつ開発経験が増えてくれば独自で書き込む機会が増えると思います。
開発経験を積んで、サイトごとに合わせたオリジナルのheadタグを作れるように少しずつ覚えていけるといいですね。
headタグまわりは私自身もまだまだ勉強中です。
2021年headタグ完成例（コピペ可）
<!DOCTYPE html>
<html>
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/（ページの種類）#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="email=no,telephone=no,address=no">
<title>（サイトタイトル）</title>
<meta name="description" content="（ページの説明）">
<meta name="robots" content="index,follow">
<meta property="og:admins" content="（FBのID）">
<meta property="og:title" content="（サイトタイトル）">
<meta property="og:type" content="（ページの種類）">
<meta property="og:description" content="（ページの説明）">
<meta property="og:url" content="（ページのURL）">
<meta property="og:image" content="（ogp画像のURL）">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="（サイトタイトル）">
<meta name="twitter:card" content="（カード種類）">
<meta name="twitter:site" content="（@Twitterユーザー名）">
<link rel="canonical" href="（正しいページURL）">
<link rel="stylesheet" href="（cssのURL）" media="screen">
<script type="text/javascript" src="（jsのURL）"></script>
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="（アップルタッチアイコンの画像URL）">
<!-- （googleアナリティクスを入れる箇所①） -->
<!-- （他アナリティクス等を入れる箇所） -->
</head>
<body>
<!-- （googleアナリティクスを入れる箇所②） -->
<header>
</header>
<main>
</main>
<footer>
</footer>
<script type="text/javascript" src="（ここにjsのURL）"></script>
</body>
</html>
※HTML5で記述しています。
※IE10以前は考慮していません。
※head内にかけるものすべてを書いているわけではありません。
解説
▼ headタグ
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/（ページの種類）#">
〜〜〜
</head>
本日の主役。
prefix属性はogp設定の一種。設定は以下の通り。
■トップページの設定
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#">
■記事ページの設定
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
引用：Facebook for Developers
▼ 文字コードの指定
<meta charset="utf-8">
**必須です。**必ず書きましょう。**指定は「utf-8」**に設定しておきましょう。「utf-8」以外にすることはほぼないです。
▼ IE向け最適化
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IEでwebサイトを閲覧する場合、互換モードを適応させずに、最新のIEでの表示に切り替える設定です。
IEをEdgeにリダイレクトさせている場合は設定不要です。（IEをEdgeに強制リダイレクトする方法）
▼ ビューポート設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">
レスポンシブサイトを作る上では必須の設定です。必ず設定しましょう。
▼ 電話・メールアドレスの自動リンクを無効化
<meta name="format-detection" content="email=no,telephone=no,address=no">
ブラウザによって、リンクにしたくないのに勝手にリンクにする機能を搭載しているもの（iosのSafari等）があります。
リンクになると効くcssも変わってくるのでレイアウトが崩れないよう設定しておくことをオススメします。。
▼ サイトのタイトル
<title>（サイトタイトル）</title>
そのまんまです。googleの検索結果ページにも表示されるので、目安は32文字くらいまで。
▼ ページの概要
<meta name="description" content="（ページの説明）">
こちらも必須。タイトル同様googleの検索結果ページにも表示されるので、目安は50〜120文字くらいまで。
（PC：120文字 スマホ：50文字）
▼ 検索許可・拒否設定、クロール許可・拒否設定
<meta name="robots" content="index,follow">
以下の通り。公開してOKというページは上の通りindex,followの両方を指定しておく。もしくは指定なし。
誤ってindexとnoindexの両方を設定した場合は基本的にnoindexが優先される。
低品質なページ⇒noindex,nofollow
検索結果ページ⇒noindex,nofollow
タグ/日付別ページ⇒noindex,follow
トップページやカテゴリーページの2ページ目以降⇒noindex,follow
引用：サルワカ（https://saruwakakun.com/html-css/basic/meta-tag）
▼ OGP
<meta property="og:admins" content="（FBのID）">
<meta property="og:title" content="（サイトタイトル）">
<meta property="og:type" content="（ページの種類）"> <!-- TOPページ等は「website」 、それ以外は「article」でOK-->
<meta property="og:description" content="（ページの説明）">
<meta property="og:url" content="（ページのURL）">
<meta property="og:image" content="（ogp画像のURL）">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="（サイトタイトル）">
<meta name="twitter:card" content="（カード種類）">
<meta name="twitter:site" content="（@Twitterユーザー名）">
SNSなどでシェアされたときの表示を設定できる。
以下を参考に設定しましょう。
▼ カノニカル（正規URL）
<link rel="canonical" href="（正しいページURL）">
引数がついてるページや、URLが違うけど全く似たようなページがある場合、「このページと同じです」とgoogleのクローラーに知らせるためのもの。
設定しておくことで、**ページの評価が分散せず1つに集中するのでSEO効果が見込める。**あくまで見た目がほぼ全く同じページ同士で使うもの。
▼ cssやjsを読み込む
<link rel="stylesheet" href="（cssのURL）" media="screen">
<script type="text/javascript" src="（jsのURL）"></script>
必要なcssやjsを読み込みます。
ただし、大量に読み込むとページの読み込み速度が遅くなるので、すぐに必要でないjsなどはbodyタグの最後の方に書くことをオススメ。
▼ ファビコン・アップルタッチアイコン
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="（アップルタッチアイコンの画像URL）">
**ファビコンとアップルタッチアイコンを設定します。**少なくともファビコンは目に留まるので、指定しておきたいところ。
ひな形には入れなかったけど場合によって必要になるもの
▼ windowsのタイル用の設定
<meta name="msapplication-TileImage" content="（画像のURL）" />
<meta name="msapplication-TileColor" content="（カラーコード）"/>
個人的にはあまりこだわりのない箇所なのでなくてもいいかなと・・・
企業向けなどでなく、一般人の人が見るスマホサイトなら必須ないかなと判断しました。
▼ RSSフィード
<link rel="alternate" type="application/rss+xml" title="（フィード）" href="（フィードページのURL）" />
RSSリーダーがそのサイトのRSSフィードを見つけることができる指定。
個人的にはRSS配信しているものを拾って欲しい！ということはあまりないので外しました。
▼ PCスマホが別サイトの場合
<link rel="alternate" media="only screen and (max-width: 640px)" href="（モバイルページのURL）" />
レスポンシブサイトで作成することがほとんどですので、必要ないかなと思います。
PCとスマホが別URLになる場合は設定しておくことで、検索エンジンへスマホページの存在を知らせることができます。
▼ 別のURLの外国語サイト
<link rel="alternate" hreflang="（外国語ページのURL）" />
こちらも必要なときにあればいいかなと。
▼ プリフェッチ
<link rel="dns-prefetch" href="（プリフェッチさせたいドメイン名）" />
サイトから他サイトのドメインへ移行するときのウェブページ読み込み速度を早めることができる模様。
正直まだ使ったことがないので効果がわからないが、外部サイトへのリンクが多いページなどにも有効のようですね。
使われるサイトは限られているのかなと。情報求ム。
あまり意味のないmetaやlinkタグたち
<meta name="keywords" content="（（キーワード）を,で区切って指定）"> <!-- SEO的効果はないとされているので不要、むしろスパム扱いの危険性ありなので書かないほうがよい -->
<meta name="author" content="Chris Mills"> <!-- 著作者名を記載できるが、あまり意味はないので不要。 -->
<link rel="prev" href="（前のページのURL）"> <!-- 2019年くらいにgoogleが非対応を発表 -->
<link rel="next" href="（次のページのURL）"> <!-- 2019年くらいにgoogleが非対応を発表 -->
<link rel="author" href="（Google+のアカウントページのURL）"> <!-- google+ のサービス終了 -->
<link rel="publisher" href="Google+のアカウントページのURL）"> <!-- google+ のサービス終了 -->
<meta name="copyright" content="（©著作者）" /> <!-- コピーライトは見える箇所に<small>などを使って表記しましょう -->
<meta http-equiv="refresh" content="（秒数）;url=（リンク先のURL）"> <!-- ページリダイレクト。.htaccess等を使うのが一般的なので不要。 -->
<meta name="google" content="notranslate" /> <!-- 「翻訳しますか？」のアラートを消すことができる。無効化する必要性はないかと。 -->
<!-- 他にも不要なmetaタグたち -->
<meta name="topic" content="（概要・説明文）">
<meta name="summary" content="（ページ概要）">
<meta name="subject" content="（ページの主題）">
<meta name="abstract" content="（ページの要約）">
<meta name="page-topic" content="（要約,要約）">
<meta name="medium" content="（ページの種類）">
<meta name="classification" content="（ジャンル名,ジャンル名,ジャンル名）">
<meta name="pagename" content="（ページタイトル）">
<meta name="build" content="（サイトの構築日）" /> <!-- 例）2012-08-05T09:10:10+09:00-->
<meta name="creation_date" content="（サイトの作成日）">
<meta name="date" content="（サイトの更新日）">
<meta name="Expires" content="（サイトの削除日）"> <!-- December 31, 2021 -->
<meta name="revisit_after" content="（クロール再訪問日を指定）">
<meta name="reply-to" content="（連絡先）">
<meta name="language" content="（言語の指定）">
<meta name="content-language" content="ja">
<meta http-equiv="content-language" content="ja">
<meta name="Targeted Geographic Area" content="Japan">
<meta name="coverage" content="worldwide">
<meta name="rating" content="（対象年齢のカテゴリ）">
<meta name="distribution" content="（meta対象範囲）">
まとめ
headタグに書くことのできるmetaタグって正直大量にありすぎて全部を覚えるのは不可能。
だからこそコピペで使えるオリジナル初期セットを持つことが大事だなと思います。
予めいつも使うのを用意しておけば、なにか1行書き忘れることもなくなりますし、多めに書いておいて不要なものがあればそこから削除していくだけでいいのでメンテナンス性も良。
この記事としてはコピペで使えるようにまとめていますが、ぜひ自分がいつもよく使うhead初期セットを作ってみてください。
おまけですが、さらに詳しくmetaタグを知りたい方は以下のサイトがとても情報量が多かったのでオススメです。
ただ情報が2018年と少し古い可能性もあるので検索しながら最新情報と比べつつ利用ください。
〜参考〜
https://saruwakakun.com/html-css/basic/meta-tag
https://saruwakakun.com/html-css/basic/link-rel
https://saruwakakun.com/html-css/basic/head
https://www.itti.jp/web-design/header-meta/
https://www.bugbugnow.net/2020/02/X-UA-CompatibleIE-edge.html
https://tcd-theme.com/2016/07/facebook-3.html
https://doteki.jp/entries/blog/need-slash-end-of-meta-tag
https://itomakihitode.jp/term/?p=dns_prefetch
https://www.suzukikenichi.com/blog/google-no-longer-supports-rel-prev-or-rel-next/
https://www.suzukikenichi.com/blog/dns-prefetching/
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ