自分のメモ用

内に入れるべきタグと重要度一覧。

#文字のエンコード

<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

OGPの設定の仕方

#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ページをホーム画面に追加した時のアイコン画像として使用される。

2019年版ホームページのタブ画像作成と設定方法まとめ
 favicon作成

##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内に書くべきタグの総まとめ

以上です。
変更や追加があったら随時更新します。