Summary
This chapter explains how to structure the HTML document head using the `<title>` and `<meta>` tags to embed metadata—such as character encoding, page description, author details, and search engine instructions—without affecting the visible page content.

General domain of usage
Web development

ドキュメントヘッドにはメタデータ、ブラウザや検索エンジン向けの情報が含まれる。
これらのタグはページ自体には表示されないため、以下の例では目に見える出力はない。

### ページタイトル
`<title>`タグはブラウザのタブに表示される内容を制御する。短く明確にし、理想的には60文字以内に収める。

PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPCEtLSBNZXRhZGF0YSAtLT4KICAgIDx0aXRsZT5XZWIgRGV2ZWxvcG1lbnQ8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gUGFnZSBjb250ZW50IC0tPgogIDwvYm9keT4KPC9odG1sPg==

### メタデータ
`<meta>` タグは、ページに関する重要な技術情報を格納。
最も重要なのは文字エンコーディングであり、文字化けを防止。

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gTWV0YWRhdGEgLS0+CiAgICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCIgLz4KICAgIDx0aXRsZT5XZWIgRGV2ZWxvcG1lbnQ8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gUGFnZSBjb250ZW50IC0tPgogIDwvYm9keT4KPC9odG1sPg==

### metaタグ属性の意味
- `name`: メタデータの種類を記述
- `content`: そのメタデータの値
- `http-equiv`: HTTPヘッダーを模倣

### SEO向上のための基本的なmetaタグ

**SEO（検索エンジン最適化）**は、検索エンジンの結果でウェブサイトの可視性を高めるための最適化プロセス。

さらに学ぶ

- `<meta name="description"/>`: ウェブページの簡単な説明を指定;
- `<meta name="author" />`: ウェブページの作成者を指定;
- `<meta name="language"/>`: ウェブページの言語を指定;
- `<meta name="robots"/>`: 検索エンジンにウェブページのクロールやインデックス方法を指示;
- `<meta name="googlebot" content="notranslate"/>`: Googleに自動翻訳を提供しないよう通知;
- `<meta name="copyright" content="Copyright 2024"/>`: ウェブページの著作権を指定。


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gTWV0YWRhdGEgLS0+CiAgICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCIgLz4KICAgIDxtZXRhIG5hbWU9ImRlc2NyaXB0aW9uIiBjb250ZW50PSJFeHBsb3JlIHRoZSB3ZWIgZGV2ZWxvcG1lbnQgcHJvY2Vzcy4iIC8+CiAgICA8bWV0YSBuYW1lPSJhdXRob3IiIGNvbnRlbnQ9Ikplbm5pZmVyIFNoaWtpIiAvPgogICAgPG1ldGEgbmFtZT0ibGFuZ3VhZ2UiIGNvbnRlbnQ9IkVuZ2xpc2giIC8+CiAgICA8bWV0YSBuYW1lPSJyb2JvdHMiIGNvbnRlbnQ9ImluZGV4LCBmb2xsb3ciIC8+CiAgICA8bWV0YSBuYW1lPSJnb29nbGVib3QiIGNvbnRlbnQ9InRyYW5zbGF0ZSIgLz4KICAgIDxtZXRhIG5hbWU9ImNvcHlyaWdodCIgY29udGVudD0iQ29weXJpZ2h0IDIwMjQgSmVubmlmZXIgU2hpa2kiIC8+CiAgICA8dGl0bGU+V2ViIERldmVsb3BtZW50IEd1aWRlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8IS0tIFBhZ2UgY29udGVudCAtLT4KICA8L2JvZHk+CjwvaHRtbD4=

`<meta>`タグはどこに配置するべきですか？

どのタグの内容がユーザーのタブに表示されますか？

ブラウザがページをインデックスしやすくするためにできることは何ですか？

HTMLの基本を学びましょう。HTMLはすべてのウェブサイトの基盤です。タグや属性を使ってコンテンツを構造化し、明確なドキュメントレイアウトを構築し、画像、リンク、テーブルを追加します。入力やインタラクションを取得するためのアクセシブルでユーザーフレンドリーなフォームを作成します。ベストプラクティスに従いながら、構造化され機能的なウェブページの作成を実践します。HTMLを習得してウェブ開発の第一歩を踏み出しましょう。

HTMLフォームの多様性を探求します。主要な概念と技術を活用して、直感的でユーザーフレンドリーなフォームの設計方法を学びます。フォームがウェブサイト上でユーザーの操作やデータ送信を可能にする仕組みを理解します。

ドキュメントヘッドの役割

ページタイトル

メタデータ

metaタグ属性の意味

SEO向上のための基本的なmetaタグ

1. `<meta>`タグはどこに配置するべきですか？

2. どのタグの内容がユーザーのタブに表示されますか？

3. ブラウザがページをインデックスしやすくするためにできることは何ですか？