Summary  
This chapter explains how to use HTML document head elements—such as the `<title>` tag and various `<meta>` tags—to define page metadata like the title, character encoding, description, author, language, and search engine directives.  

General domain of usage  
Search engine optimization (SEO) for web pages.

Головна частина документа містить метадані, інформацію для браузерів і пошукових систем.
Ці теги не відображаються безпосередньо на сторінці, тому наведені нижче приклади не матимуть видимого результату.

### Заголовок сторінки
Тег `<title>` визначає, що відображається на вкладці браузера. Має бути коротким, зрозумілим і бажано до 60 символів.


PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPCEtLSBNZXRhZGF0YSAtLT4KICAgIDx0aXRsZT5XZWIgRGV2ZWxvcG1lbnQ8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gUGFnZSBjb250ZW50IC0tPgogIDwvYm9keT4KPC9odG1sPg==

### Мета-дані
Тег `<meta>` зберігає важливу технічну інформацію про сторінку.
Найважливішою є кодування символів, що запобігає появі некоректних символів (модзібаке): 

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gTWV0YWRhdGEgLS0+CiAgICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCIgLz4KICAgIDx0aXRsZT5XZWIgRGV2ZWxvcG1lbnQ8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gUGFnZSBjb250ZW50IC0tPgogIDwvYm9keT4KPC9odG1sPg==

### Значення атрибутів тега meta
- `name`: описує тип метаданих;
- `content`: значення цих метаданих;
- `http-equiv`: імітує HTTP-заголовки.

### Основні meta-теги для покращення SEO

**SEO (Search Engine Optimization)** — процес оптимізації вебсайту для підвищення його видимості у результатах пошукових систем.

Дізнайтеся більше

- `<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 (HyperText Markup Language), фундаменту веб-розробки. Цей курс для початківців охоплює теги, атрибути, елементи та структурування веб-сторінок. Отримайте практичні навички створення заголовків, абзаців, списків, зображень, посилань, форм і таблиць. Ознайомтеся з найкращими практиками, оптимізацією та веб-доступністю. Почніть свій шлях у веб-розробці з HTML.

Дослідження принципів роботи вебу. Вивчення шляхів передачі даних через мережі, ознайомлення з роллю протоколів, розкриття суті IP-адрес і доменних імен. Отримання загального уявлення про взаємодію веб-браузерів і серверів для доставки веб-контенту.

Дізнайтеся про можливості тегів для структурування контенту: від заголовків і абзаців до списків і таблиць. Ознайомтеся зі способами розширення елементів за допомогою атрибутів.

Основи структури HTML-документа. Вивчення складових HTML-документа, зокрема декларації doctype, head та body. Розуміння призначення кожного елемента та їхнього внеску в загальну структуру вебсторінки.

Покращення привабливості вебсторінки за допомогою медіа, таких як зображення, аудіо та відео. Робота зі структурованими табличними даними у вигляді таблиць.

Дослідження багатофункціональності HTML-форм. Вивчення проєктування інтуїтивно зрозумілих і зручних для користувача форм із використанням основних концепцій і технік. Ознайомлення з тим, як форми забезпечують взаємодію користувача та надсилання даних на вебсайтах.

The Role of the Document Head

Заголовок сторінки

Мета-дані

Значення атрибутів тега meta

Основні meta-теги для покращення SEO

1. Де слід розміщувати тег `<meta>`?

2. Вміст якого тегу буде показано на вкладці користувача?

3. Що можна зробити, щоб допомогти браузеру індексувати сторінку?