自分のメモ用
内に入れるべきタグと重要度一覧。#文字のエンコード
<meta charset="utf-8">
重要度：★★★
文字コードを指定するためのもの。
日本語サイトなら必須。
#Internet Explorer用の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
重要度：★★★
IEには過去バージョンで表示させる「互換モード」があり、デザイン崩れが起きる場合がある。
これを指定すれば、常に「標準モード」で表示される。
#viewport設定
<meta name="viewport" content="width=device-width,initial-scale=1" />
重要度：★★★
「レスポンシブデザイン」のサイトを作成するなら必須。
#タイトルタグ
<title>ページタイトル</title>
重要度：★★★
SEO対策
指定したタイトルを検索結果やブラウザのタブに表示させる。
#メタディスクリプション
<meta name="description" content="ページの説明文" />
重要度：★★
そのページがどんな内容なのか１００文字以下で記載。
検索結果の下の説明文に反映される。
（SEO対策には直接的な効果はない。）
#OGPタグ
<meta property="og:url" content="ページURL" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="ページタイプ" />
<meta property="og:description" content="記事の抜粋文" />
<meta property="og:image" content="画像URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:local" content="ja_JP" />
<!-- twitter card -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザ名" />
<meta name="twitter:description" content="抜粋文" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:image" content="画像URL" />
重要度：★★★
facebookやTwitterなどのソーシャルメディアでシェアをされた時に、よくあるやつ。
必須項目
og:title ページタイトル
og:type ページ種類（website、blog、video、article など）
og:image サムネイル画像
og:url webページのURL
#URLの正規化
<link rel="canonical" href="正規化するURL">
重要度：★★
SEO対策
内容が全く同じページが複数ある場合、検索エンジンからの評価を統一するために使用する。
例：PCとスマホで同じ内容でもURLが違う場合
#サイトアイコン(favicon)
<link rel="icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180×180" href="./apple-touch-icon-180×180.png">
重要度：★★
ブラウザのタブに表示やブックマークした時のサイトアイコンとして使用される。
2行目はiPhoneで使用され、Webページをホーム画面に追加した時のアイコン画像として使用される。
##windows用タイル設定
<meta name="msapplication-TileImage" content="画像URL" />
<meta name="msapplication-TileColor" content="カラーコード" />
重要度：★
Windows8~できたピン留機能用のアイコン設定。
タイル画像と背景色を設定できる。
#metaタグコピペ用
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ページタイトル</title>
<meta name="description" content="ページの説明文" />
<link rel="icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180×180" href="./apple-touch-icon-180×180.png">
<!-- ogp -->
<meta property="og:url" content="ページURL" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="ページタイプ" />
<meta property="og:description" content="記事の抜粋文" />
<meta property="og:image" content="画像URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:local" content="ja_JP" />
<!-- twitter card -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザ名" />
任意で消したり、追加したりどうぞ。
#index.htmlテンプレ
<!DOCTYPE html>
<html>
<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>Site Title</title>
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
header
</header>
<main>
main
</main>
<footer>
footer
</footer>
</body>
</html>
毎回書くのめんどくさいので、、、
#参考記事
head内に書くべきタグの総まとめ
以上です。
変更や追加があったら随時更新します。