HTMLのhead内まとめ

HTML

お久しぶりです。tabataです。
早いもので、入社して5ヶ月が経ちました??????
今回はHTMLのhead内に書いておきたいタグについて、
振り返りも兼ねてまとめていきます✏️

metaタグ

文字エンコード

文字コードを指定します。

<meta charset="utf-8">

viewport

レスポンシブデザインに対応させます。（スマホやタブレットでの表示を最適化します。）
参考：https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

<meta name="viewport" content="width=device-width,initial-scale=1">

IE用の設定

IEには過去のバージョンで表示させる「互換モード」という機能があり、それによってページのデザインが崩れてしまう可能性があります。このタグを使うことで、常に標準モードでの表示をさせることができます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

format-detection

スマートフォンは電話番号やメールアドレス、住所を自動的にリンクに変換してしまうため、これらを無効化させます。

<meta name="format-detection" content="telephone=no,address=no,email=no">

title

検索結果やブラウザのタブに表示させます。

<title>タイトル</title>

keywords

ページの内容を示すキーワードを半角カンマ（,）区切りで記載します。
※Googleではページの評価基準として keywords を使用していないため、書いてもSEO的な効果は期待できないようです。
参考：https://support.google.com/webmasters/answer/79812?hl=ja

<meta name="keywords" content="キーワード1,キーワード2,…">

description

こちらに書いた文章は検索結果の記事タイトル下に表示されます。
160字以下(※)にすると良いそうです。※諸説あります

<meta name="description" content="ページの説明文">

OGP・Twitterカード

facebook や twitter などでページがシェアされた時に表示させる文章や画像を指定します。

<meta property="og:title" content="タイトル" />
<meta property="og:url" content="ページのURL" />
<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:locale" content="ja_JP" />

<!-- Facebook -->
<meta property="fb:app_id" content="App-IDを記入">

<!-- Twitter -->
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterのユーザー名" />

Facebook OGP：https://developers.facebook.com/docs/sharing/webmasters
Twitter OGP：https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup

※Facebook App IDの取得方法はこちらのサイトを参考に

linkタグ

canonical

URLの正規化をします。正式なURLを検索エンジン側に伝えます。
参考：https://ferret-plus.com/1809

<link rel="canonical" href="URL">

ファビコン（サイトアイコン）

アドレスバーやブラウザのタブに表示される画像を指定します。

<link rel="apple-touch-icon" href=“">
<link rel="shortcut icon" type="image/png" href="">
<link rel="icon" type="image/png" href="" sizes="16x16">
<link rel="icon" type="image/png" href="" sizes="32x32">
<link rel="icon" type="image/png" href="" sizes="64x64">

参考：https://realfavicongenerator.net/faq#.W2FXA9j7Sup
参考：https://hail2u.net/documents/favicon-cheat-sheet-ja.html