HTMLのヘッダについて – 勉強会の下調べ
By 管理人
年明けの勉強会の予習というかメモ書き。
クロコラボ #20 headタグの中を考えてみよう
少しずつ書き足していきます。
文書メタデータ（ヘッダー）要素
文書レベルメタデータ要素
Qiita:色々あるHTMLのmetaタグなど一覧
JavaScriptはhead内で読み込みたい
結論としてはhead内で良さそう。
Document metadata – HTML 5.2
W3C Recommendation, 14 December 2017
headタグの短い例
headタグの長い例
エンコーディングを宣言する
要素は 要素の内部かつ
HTML の始めから 1024 バイト以内に配置しなければなりません。
これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。
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