Head Документа

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

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

Текст всередині тегу <title> відображається у вкладці браузера. Заголовок має бути стислим описом сторінки і містити не більше 60 символів.

index

За допомогою цього коду ми можемо досягти такого вигляду сайту. У вкладці браузера ми побачимо точний текст, укладений в тег <title> (синя рамка на зображенні).

Мета-дані

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

index

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

name - назва властивості може бути будь-яким словом або словосполученням, веб-браузери зазвичай очікують значення, яке вони можуть розпізнати і використати для виконання дії. Прикладом може бути <meta name="author" content="name">, щоб вказати автора сторінки;
content - вказує значення властивості. Прикладом може бути <meta name="language" content="english"> для вказівки мови тексту сторінки;
http-equiv - означає HTTP-еквівалент і використовується для імітації заголовків HTTP-відповіді. Зустрічається рідко. Прикладом може бути <meta http-equiv="refresh" content="30">, щоб сказати браузеру оновлювати сторінку кожні 30 хвилин.

Основні мета-теги для покращення 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="rating" content="safe for kids"/> - вказує на аудиторію сторінки;
<meta name="copyright" content="Copyright 2023"/> - вказує на авторські права сторінки.

index

1. Де повинен бути розміщений тег `<meta>`?

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

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

Все було зрозуміло?

Секція 3. Розділ 3