【覚書】最新のhtmlのhead【2024】
2024年版、と言ったらいいのだろうか。
今年はこれで。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ページタイトル</title>
<meta name="description" content="ページの説明">
<meta name="format-detection" content="telephone=no">
<!-- favicon/webclipicon -->
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- ogp -->
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="URL">
<meta property="og:type" content="website or article">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="URL">
<meta property="og:locale" content="ja_JP">
<!-- 必要なら -->
<!-- <meta property="fb:app_id" content="AppID"> -->
<meta name="twitter:card" content="summary_large_image or summary">
<!-- 必要なら -->
<!-- <meta name="twitter:site" content="@your_account"> -->
<meta name="twitter:description" content="ページの説明">
<meta name="twitter:image:src" content="URL">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- js -->
<script src="js/main.js" defer></script>
<!-- 場合によって必要 -->
<!-- <meta name="robots" content="noindex,nofollow"> -->
</head>
<body>
...
<!-- js -->
<script src="js/original.js"></script>
</body>
</html>
jsファイルの読み込みは、基本的にはbody終了タグの直前。
理由は、表示速度の向上とエラー防止のため。
headに書く場合はdeferまたはasync（実行タイミングや順序・依存関係による）を適切に入れておく。