【HTML】head内に記述すると幸せになるタグまとめと豆知識

head

HTMLのヘッド内は通常は閲覧者に見えない部分になり、WEBページとして必要な情報を記載する部分です。いつも何を書くか忘れてしまうので以下にメモしておきます。

必須項目

<!--  文字エンコードです。日本語サイトの場合はutf-8で問題なし -->
<meta charset="utf-8" />

<!-- IE用の表示を崩さないようにするおまじない -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- レスポンシブデザインに必須、スマホの画面サイズに合わせて表示できます -->
<meta name="viewport" content="width=device-width,initial-scale=1" />

<!-- ページのタイトルを書いてブラウザのタブに表示させる -->
<title>niwacan</title>

必要に応じて

<!-- Google検索に載せたくない時に記述 -->
<meta name="robots" content="noindex,nofollow" />

<!-- ファビコン(サイトアイコン)設定 サイズはいい感じのサイズに指定してください -->
<link rel="icon" href="画像のURL" sizes="32x32" type="image/png" />  

<!-- スマホ用アイコン設定 スマホの待受画面にブックマークした時に表示されるアイコン -->
<link rel="apple-touch-icon-precomposed" href="画像へのURL" />

<!-- Windowsのタイル表示設定 指定の画像を表示させる事ができるてタイルの色も決めれる -->
<meta name="msapplication-TileImage" content="画像へのURL" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
タイトルとURLをコピーしました