Тег <meta> прописывается внутри <head> и описывает саму страницу для браузера и поисковика - кодировку, масштаб на телефоне, описание для выдачи. В отличие от <title>, которого на странице должен быть ровно один, тегов <meta> обычно несколько - под каждый вид метаданных свой.
В этой статье
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Краткое описание страницы для поисковой выдачи.">Атрибуты: name, content, charset
У <meta> нет фиксированного набора атрибутов под каждый случай - вместо этого есть несколько общих форм записи, которые повторяются с разными значениями:
| Форма записи | Что делает |
|---|---|
charset="..." | Особая одноатрибутная форма только для кодировки страницы - без name и content |
name="..." content="..." | Основная пара: name задаёт тип метаданных (viewport, description, keywords, generator и другие), content - их значение |
http-equiv="..." content="..." | Более старая форма той же пары - когда-то имитировала HTTP-заголовки (например, редирект через refresh). Сегодня применяется редко |
meta charset - кодировка страницы
meta charset сообщает браузеру, в какой кодировке сохранён файл страницы - на практике почти всегда utf-8. Если этот тег отсутствует или браузер не успевает его найти вовремя, он вынужден угадывать кодировку сам - и на кириллице угадывает неправильно ощутимо часто.
Пример: что происходит с текстом без meta charset
Переключите чекбокс - ниже воспроизведён реальный эффект: те же самые UTF-8-байты текста браузер интерпретирует в чужой кодировке (windows-1251), если правильная кодировка не указана:
Это не стилизация под "кракозябры" - те же самые байты страницы здесь буквально прогнаны через другую кодировку, точно так же, как это делает браузер, когда угадывает неверно.
meta viewport - масштаб на телефоне
Без meta viewport мобильный браузер по умолчанию считает, что страница рассчитана на экран шириной около 980px - как десктоп - и просто вписывает её в экран телефона целиком, уменьшая всё сразу, включая текст. meta name="viewport" content="width=device-width, initial-scale=1" отменяет это допущение и показывает страницу в её настоящем масштабе, с шириной экрана устройства.
Пример: страница с viewport и без него
Нажмите на переключатель - серая рамка изображает экран телефона:
Рамка здесь всегда одного размера - меняется только то, как браузер интерпретирует ширину страницы внутри неё. Это тот же самый принцип, который работает на настоящем телефоне, только с фиксированными размерами вместо реального экрана.
meta description - описание для поиска
meta name="description" content="..." - текст, который Google обычно показывает под кликабельным заголовком в результатах поиска (тем самым, который задаёт <title>). На позиции в поиске description не влияет напрямую, но заметно влияет на то, кликнут по сниппету или нет - как и с title, слишком длинный текст поисковик обрежет, а слишком общий или пустой может заменить своим.
Частые ошибки при работе с тегом meta
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Нет meta charset вообще | Браузер сам угадывает кодировку - кириллица нередко превращается в нечитаемые символы | Добавить <meta charset="utf-8"> первой строкой внутри <head> |
meta charset указан не в самом начале <head> | Браузер должен успеть найти кодировку в первых ~1024 байтах документа - если перед ней уже есть другой текст, кодировка может быть определена неверно | meta charset - первая строка внутри <head>, до любых других тегов |
Нет meta viewport | На телефоне страница открывается уменьшенной копией десктопной версии, а не адаптируется под экран | Добавить <meta name="viewport" content="width=device-width, initial-scale=1"> |
Расчёт на meta keywords для SEO | Google официально игнорирует этот тег с 2009 года - на позиции в поиске он не влияет | Не тратить на него время - для поиска сейчас важны title и meta description |
Частые вопросы
Есть ли отдельный meta-тег для языка страницы?
Нет. Язык страницы задаётся не через <meta>, а через атрибут lang у самого тега <html> - например lang="ru". Отдельного meta-тега для этого в HTML не существует.
