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

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

文書メタデータ(ヘッダー)要素
文書レベルメタデータ要素
Qiita:色々あるHTMLのmetaタグなど一覧

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

Document metadata – HTML 5.2
W3C Recommendation, 14 December 2017

headタグの短い例

headタグの長い例

文書レベルメタデータ要素

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

Document.title – タイトル

What’s in the head? Metadata in HTML

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

タイトル

<title>Page title</title>

Document’s character encoding

<meta charset="utf-8">

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

Adding an author and description

<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のホームスクリーン用の高解像度アイコンを定義するなど。

CSSやJavaScriptファイルを組み込む。

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

Primary Languageの設定

<html lang="ja">

The Open Graph protocol

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

Meta Tags in WordPress

https://codex.wordpress.org/Meta_Tags_in_WordPress

Markup Validation Service

https://validator.w3.org/