#4. Основные метатэги: charset, title, viewport, description

В уроке #3 мы видели, что внутри <head> находится служебная информация о странице. Задают её главным образом метатэги — теги, которые не отображаются на странице, но сообщают браузеру и поисковым системам важные сведения о ней.

Метатэг <meta> — одиночный тег, без закрывающего (как <br> из урока #2). Ниже — минимальный набор, который стоит включать в каждую страницу:

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Учебный сайт о HTML для начинающих">
</head>
<body>
    <h1>Привет, мир!</h1>
</body>
</html>

charset — кодировка

<meta charset="utf-8"> сообщает браузеру, в какой кодировке записан текст страницы. Всегда используйте utf-8 — универсальную кодировку, в которой есть и русские буквы, и любые другие языки. Без этой строки вместо русского текста могут появиться «кракозябры». Ставьте её первой в <head>.

Важно: сам файл тоже должен быть сохранён в utf-8 — это настройка кодировки в вашем редакторе.

title — заголовок страницы

Строго говоря, <title> — не метатэг, а отдельный парный тег, но относится к той же служебной информации. Он задаёт заголовок страницы — тот, что виден на вкладке браузера, в закладках и в результатах поиска (синяя кликабельная строка). На странице должен быть ровно один <title>.

viewport — для мобильных устройств

Строка:

<meta name="viewport" content="width=device-width, initial-scale=1">

говорит мобильному браузеру: ширина страницы равна ширине экрана, масштаб — 100%. Без неё смартфон показывает сайт как уменьшенную копию десктопной страницы, и текст становится слишком мелким.

description — описание страницы

<meta name="description" content="..."> — краткое описание страницы (1–2 предложения). Поисковые системы часто показывают его под заголовком в выдаче. На вид страницы оно не влияет, но помогает человеку понять, о чём она, ещё до перехода.

Практика

Откройте свою страницу из урока #3 и дополните её <head> всеми строками из примера выше. Проверьте себя: title должен появиться на вкладке браузера, а метатэги — только в исходном коде (Ctrl+U).