ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
head 要素の役割
<head> は HTML 文書のメタ情報を記述する領域です。画面には表示されないが、ブラウザ・検索エンジン・SNS シェア・OS(PWA)などが読んで動作する重要な部分です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ★ 文字エンコーディング (最初に書く) -->
<meta charset="UTF-8">
<!-- ★ モバイル対応 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ★ ページタイトル -->
<title>サンプルページ | サイト名</title>
<!-- ★ ページ説明 (検索結果スニペット) -->
<meta name="description" content="このページの内容を簡潔に説明します。150 文字程度。">
<!-- 正規 URL -->
<link rel="canonical" href="https://example.com/page">
<!-- CSS 読み込み -->
<link rel="stylesheet" href="/css/main.css">
<!-- ファビコン -->
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- OGP (SNS シェア時のカード) -->
<meta property="og:title" content="サンプルページ">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<!-- JS 読み込み (defer 推奨) -->
<script defer src="/js/main.js"></script>
</head>
<body>
<!-- 表示内容 -->
</body>
</html>
主要な要素
| 要素 | 役割 | 必須/推奨 |
|---|---|---|
<title> | ブラウザタブ / 検索結果 / SNS シェアのタイトル | ★ 必須 |
<meta charset> | 文字エンコーディング (UTF-8 推奨) | ★ 必須 |
<meta name="viewport"> | モバイル表示倍率制御 | ★ ほぼ必須 |
<meta name="description"> | 検索結果スニペット | SEO 重要 |
<meta name="robots"> | クロール / index 制御 (noindex, nofollow 等) | 必要時 |
<link rel="canonical"> | 正規 URL 指定 (重複コンテンツ対策) | SEO 重要 |
<link rel="stylesheet"> | 外部 CSS | ★ |
<link rel="icon"> | ファビコン | 推奨 |
<script> | JavaScript | 必要時 |
<style> | インライン CSS | 必要時 |
<base> | 相対 URL のベース指定 | 稀 |
charset の指定
文字化けを防ぐため、必ず head の最初の方に書きます。仕様上は先頭 1024 バイト以内に置く必要があります:
<!-- ✅ HTML5 推奨 -->
<meta charset="UTF-8">
<!-- HTML4 / XHTML 形式(互換性のため残されているが古い) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- どちらも head の冒頭に置く -->
<head>
<meta charset="UTF-8"> <!-- ★ ここ -->
<title>...</title>
...
</head>
viewport: モバイル対応の要
これを書かないと、スマホで「PC 版が縮小表示される」状態になります:
<!-- ✅ 標準形 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 拡大を無効化したい場合(アクセシビリティ的に非推奨) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- iPhone のノッチ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
title と description (SEO)
<!-- title: 30〜35 文字程度(検索結果の表示限度) -->
<title>HTML head 要素の書き方 | webdev チュートリアル</title>
<!-- description: 120 文字程度 -->
<meta name="description"
content="HTML の head 要素に書く meta タグ・link タグ・script タグの基本を、SEO とパフォーマンスの観点から解説します。">
<!-- robots: 検索エンジン制御 -->
<meta name="robots" content="index, follow"> <!-- 既定 -->
<meta name="robots" content="noindex, follow"> <!-- インデックスさせない -->
<meta name="robots" content="noindex, nofollow"> <!-- 完全に無視 -->
<meta name="robots" content="max-image-preview:large"> <!-- 画像プレビュー許可 -->
<!-- canonical: 重複コンテンツの正規 URL を伝える -->
<link rel="canonical" href="https://example.com/article">
OGP (Open Graph Protocol)
Facebook / Twitter / Slack / Discord などで URL をシェアした際の「カード」表示を制御します:
<!-- 必須 4 つ -->
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article"> <!-- website / article / video など -->
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/ogp.png"> <!-- 1200x630 推奨 -->
<!-- 推奨 -->
<meta property="og:description" content="ページ説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページ説明">
<meta name="twitter:image" content="https://example.com/ogp.png">
ファビコン
<!-- 基本 (32x32 PNG) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- iOS ホーム画面 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA / Web Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- SVG ファビコン (近代ブラウザ) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- ダーク/ライトで切替 -->
<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
CSS と JS の読み込み戦略
<!-- CSS: head の中で同期読み込み(描画ブロッキング) -->
<link rel="stylesheet" href="/css/main.css">
<!-- CSS の遅延読み込み(重要じゃない CSS) -->
<link rel="preload" as="style" href="/css/extra.css"
onload="this.onload=null;this.rel='stylesheet'">
<!-- JS: 同期(推奨しない、描画ブロック) -->
<script src="/js/main.js"></script>
<!-- ✅ JS: defer(HTML パース後に実行、順序保証) -->
<script defer src="/js/main.js"></script>
<!-- JS: async(取得後すぐ実行、順序非保証) -->
<script async src="/js/analytics.js"></script>
<!-- module 形式(自動 defer) -->
<script type="module" src="/js/app.mjs"></script>
<!-- リソースヒント -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!-- 早期接続 -->
<link rel="dns-prefetch" href="https://cdn.example.com"> <!-- DNS だけ先解決 -->
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin> <!-- 早期取得 -->
<link rel="prefetch" href="/next-page.html"> <!-- 次ページ予測取得 -->
言語と方向
<!-- html 要素に言語指定 (★ 必須、アクセシビリティ・SEO 両面で) -->
<html lang="ja">
<html lang="en">
<html lang="zh-CN">
<!-- アラビア語 / ヘブライ語 (右→左) -->
<html lang="ar" dir="rtl">
<!-- 多言語ページの示し方 (hreflang) -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">
テーマカラー / PWA
<!-- ブラウザ UI の色 (モバイルのアドレスバー) -->
<meta name="theme-color" content="#0d6efd">
<meta name="theme-color" content="#0d6efd" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<!-- iOS ホームスクリーン -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MyApp">
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json">
head に書いてはいけないもの
<div>や<p>など「表示要素」 →<body>へ- 大量のインライン JS(描画ブロッキング) → 末尾 / defer / 外部化
- 大量のインライン CSS(Critical CSS 用途以外) → 外部 CSS へ
- ユーザー入力をそのまま埋めた
meta(XSS リスク) → 必ずエスケープ
FAQ
Q: http-equiv="Content-Type" と meta charset はどっちを使う?
A: HTML5 では <meta charset="UTF-8"> が標準。古い書式は不要です。
Q: meta keywords は今でも書くべき?
A: Google は 2009 年に「keywords は使わない」と明言。書かなくて OK。一部の社内検索エンジンが使うことはあります。
Q: title タグの最適な長さは?
A: 検索結果に表示される30〜35 文字を目安に。長すぎると後ろが「...」で省略される。サイト名は「| サイト名」「- サイト名」形式で末尾に付けるのが一般的。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Unreal Engine AI MoveTo 完全ガイド(NavMesh / AIController / Behavior Tree) 2026-06-11 07:07:02
- shutdown コマンド完全ガイド(Linux / Windows / systemd の使い分け) 2026-06-11 07:07:02
- DI(依存性注入)完全ガイド(Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入) 2026-06-11 07:07:02
- git 用語一覧完全リファレンス(Repository / HEAD / Branch / Rebase / Stash 他) 2026-06-11 07:07:02
- TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:07:02
- Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:07:02
- EJB完全ガイド(Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替) 2026-06-11 07:07:02
- git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:07:02
- Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:07:02
- CDI完全ガイド(Inject/Produces/Qualifier/Scope/Spring DIとの違い) 2026-06-11 07:07:02
- Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:07:02
- Apache .htaccess でベーシック認証を設定する手順(.htpasswd / htpasswd / AuthType Basic / トラブルシュート) 2026-06-11 07:07:02
- Python アプリのローカル独立配布完全ガイド(PyInstaller / wheel / Docker) 2026-06-11 07:07:02
- Laravel Eloquent モデルのデフォルト値設定 2026-06-11 07:07:02
- Unity Component 取得とキャッシュの完全ガイド(GetComponent/RequireComponent/TryGetComponent) 2026-06-11 07:07:02
コメントを削除してもよろしいでしょうか?