head内に入れるべきタグ一覧

自分のメモ用
<head>内に入れるべきタグと重要度一覧。

#文字のエンコード
```html
<meta charset="utf-8">
```
重要度：★★★
文字コードを指定するためのもの。
日本語サイトなら必須。

#Internet Explorer用の設定
```html
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```
重要度：★★★
IEには過去バージョンで表示させる「互換モード」があり、デザイン崩れが起きる場合がある。
これを指定すれば、常に「標準モード」で表示される。

#viewport設定
```html
<meta name="viewport" content="width=device-width,initial-scale=1" />
```
重要度：★★★
「レスポンシブデザイン」のサイトを作成するなら必須。

#タイトルタグ
```html
<title>ページタイトル</title>
```
重要度：★★★
`SEO対策`
指定したタイトルを検索結果やブラウザのタブに表示させる。

#メタディスクリプション
```html
<meta name="description" content="ページの説明文" />
```
重要度：★★
そのページがどんな内容なのか１００文字以下で記載。
検索結果の下の説明文に反映される。
（SEO対策には直接的な効果はない。）

#OGPタグ
```html
<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などのソーシャルメディアでシェアをされた時に、よくあるやつ。
<img width="300" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3235323636372f64383863326663352d323235372d666138622d623432312d3362613161306438303433352e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252667/d35f83ae-db4c-def2-4ea4-2beea89ea2f2.png">

**必須項目**
og:title　ページタイトル
og:type　　ページ種類（website、blog、video、article など）
og:image　サムネイル画像
og:url　webページのURL

> [OGPの設定の仕方](https://qiita.com/kana-t/items/f058f29ddd93e062761c)


#URLの正規化
```html
<link rel="canonical" href="正規化するURL">
```
重要度：★★
`SEO対策`
内容が全く同じページが複数ある場合、検索エンジンからの評価を統一するために使用する。
例：PCとスマホで同じ内容でもURLが違う場合


#サイトアイコン(favicon)
```html
<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年版ホームページのタブ画像作成と設定方法まとめ](https://homepagenopro.com/html/favicon.html)
> [favicon作成](https://ao-system.net/favicon/)

##windows用タイル設定
```html
<meta name="msapplication-TileImage" content="画像URL" />
<meta name="msapplication-TileColor" content="カラーコード" />
```
重要度：★
Windows8~できたピン留機能用のアイコン設定。
タイル画像と背景色を設定できる。

#metaタグコピペ用
```html
<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テンプレ
```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内に書くべきタグの総まとめ](https://saruwakakun.com/html-css/basic/head)

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