Summary
This chapter covers how to structure an HTML document head by adding a `<title>` tag and various `<meta>` tags to specify metadata such as character encoding, page description, author, language, and crawling instructions.

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を習得してウェブ開発の第一歩を踏み出しましょう。

ウェブの仕組みを探求します。データがネットワークを通じてどのように移動するかを学び、プロトコルの役割を発見し、IPアドレスやドメイン名の謎を解き明かします。ウェブブラウザとサーバーがどのように通信してウェブコンテンツを配信するかについて、高度な理解を得ることができます。

見出しや段落からリストやテーブルまで、タグを使ってコンテンツを構造化する方法を学びます。属性を用いて要素を強化する方法についても理解します。

HTMLドキュメント構造の核心部分。DOCTYPE宣言、head、bodyを含むHTMLドキュメントの構成要素について学びます。各要素の目的と、それらがウェブページ全体の構造にどのように寄与するかを理解します。

画像、音声、動画などのメディアを活用してウェブページをより魅力的にします。表形式の構造化データをテーブルとして扱います。

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

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

ページタイトル

メタデータ

metaタグ属性の意味

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

1. `<meta>` タグはどこに配置する必要があるか？

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

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