Мета-теги в head

Завершаем курс настройкой невидимой, но очень важной части страницы — мета-тегов.

Мета-теги — служебные теги в <head>, которые описывают страницу для браузера и поисковиков, но не отображаются в теле.

Что такое мета-теги

Мета-теги — это одиночные теги <meta> в <head>. Они несут информацию о странице: на каком языке, как её показывать на телефоне, что писать в результатах поиска. Пользователь их не видит, но они сильно влияют на работу сайта.

charset — кодировка

Самый важный мета-тег. Он сообщает браузеру, как декодировать символы. Стандарт — UTF-8, который поддерживает все языки, включая русский и эмодзи:

<meta charset="UTF-8">

Без него или с неверной кодировкой кириллица превратится в «кракозябры» вроде «РџСЂРёРІРµС‚». Этот тег ставят самым первым в <head>.

viewport — для мобильных

Без этого тега телефон покажет страницу как уменьшенную копию десктопной — мелкой и нечитаемой. viewport говорит: «подстраивай ширину под экран устройства»:

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

Разберём значение: width=device-width — ширина страницы равна ширине экрана; initial-scale=1.0 — начальный масштаб 100%. С этим тегом сайт корректно отображается на телефонах.

description — для поиска

description — краткое описание страницы. Именно этот текст поисковик часто показывает под заголовком в результатах выдачи. Хорошее описание повышает кликабельность:

<meta name="description" content="Учим HTML с нуля: теги, формы, таблицы и семантика на живых примерах.">

Держите описание в пределах примерно 150–160 символов — длиннее поисковик обрежет.

Полный head в сборе

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Описание страницы для поиска.">
  <title>Заголовок вкладки</title>
  <link rel="icon" href="favicon.ico">
</head>

Это почти полный «джентльменский набор» head современной страницы — то, что стоит писать на каждом сайте.

Мета-теги, которыми делятся в соцсетях

Есть ещё одна группа мета-тегов, с которой вы наверняка сталкивались как пользователь, даже не зная об этом. Когда вы вставляете ссылку на статью в мессенджер или соцсеть, там автоматически появляется красивая карточка: заголовок, описание и картинка. Это не магия — за неё отвечают специальные мета-теги (стандарт называется Open Graph), которые сайт прописывает в <head>.

Подробно разбирать их в базовом курсе мы не будем — это уже тонкая настройка. Но полезно знать, что они существуют и живут там же, среди прочих <meta>. Когда вы будете делать собственный сайт и захотите, чтобы ссылки на него красиво выглядели при репосте, вы вспомните про этот раздел и добавите нужные теги.

Мета-тег	Зачем
`charset`	кодировка (UTF-8) — корректные буквы
`viewport`	правильный показ на телефонах
`description`	описание для поисковой выдачи

Поздравляем!

Вы прошли весь курс HTML: от первого файла до семантической структуры и мета-тегов. Теперь вы умеете строить полноценную, доступную и аккуратную веб-страницу. Следующий шаг — CSS, чтобы превратить эту структуру в красивый дизайн.

Итог

charset="UTF-8" обеспечивает правильное отображение символов и ставится первым.
viewport делает страницу удобной на мобильных устройствах.
description задаёт текст под заголовком в результатах поиска.