静的サイトのhead要素を整える

タイトル、説明文、viewportなどを正しく設定する方法です。

titleとdescription

titleは検索結果やタブに表示される、ページの名前です。descriptionは検索結果の説明文に使われることがあります。ページごとに内容が違う文を書き、全ページで同じ文にしないことが大切です。

viewportとlang

<meta name="viewport" content="width=device-width,initial-scale=1">がないと、スマホで縮小表示になります。html要素のlang="ja"は、読み上げソフトや、フォントの選択に使われます。

theme-colorとfavicon

theme-colorはスマホのブラウザのバーの色に使われます。faviconにはdata URIのSVGを使えば、別ファイルを読み込まずに済みます。

この技術を使っているツール