HTMLのヘッダについて – 勉強会の下調べ

年明けの勉強会の予習というかメモ書き。
クロコラボ #20 headタグの中を考えてみよう
少しずつ書き足していきます。

JavaScriptはhead内で読み込みたい
結論としてはhead内で良さそう。

headタグの短い例

headタグの長い例

エンコーディングを宣言する要素は要素の内部かつ
HTML の始めから 1024 バイト以内に配置しなければなりません。
これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。

<title>Page title</title>

<meta charset="utf-8">

charsetをISO-8859-1に変えて文字化けを確認してみる。

<meta name="author" content="name here...">
<meta name="description" content="description here...">

Googleで MDN Web Docs を検索してみる。
descriptionの内容やtitleが検索結果に利用されていることを確認。

Open Graph Data: Facebookが作ったプロトコル。ウェブサイトの提供をリッチに。

<meta property="og:image" content="ロゴデータのパス..."
<meta property="og:description" content="サイトの説明..."
<meta property="og:title" content="サイトのタイトル..."

<meta name="twitter:title" content="サイトのタイトル..."

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

他に、iPadのホームスクリーン用の高解像度アイコンを定義するなど。

<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js"></script>

<html lang="ja">

http://ogp.me/
Basic Metadata
– og:title
– og:type
– og:image
– og:url
Object Types
– music
– video
– No Vertical(article, book, profile, website)