Тег <meta> — это невидимый, но невероятно важный «двигатель» вашего веб-сайта. Это пустой элемент, который размещается внутри тега <head>. Его главная задача — предоставлять метаданные: служебную информацию о документе, которая используется браузерами, поисковыми системами и другими сервисами. В отличие от видимого контента, то, что находится в meta, пользователь никогда не увидит на экране, но именно эти данные определяют, как страница будет воспринята внешним миром.

На одной странице обычно встречается несколько таких тегов. Они отвечают за разные задачи: от указания кодировки и описания сайта до настройки поведения мобильных браузеров и управления индексацией поисковиками.

charset:

Определяет кодировку символов документа. Это, пожалуй, самый критичный атрибут для корректного отображения текста (особенно с кириллицей). Стандартом де-факто стала кодировка UTF-8.

Совет: Тег с атрибутом charset должен быть первым дочерним элементом внутри <head>. Если указанная в теге кодировка не совпадает с реальной кодировкой файла, текст может превратиться в «кракозябры».

content:

Хранилище данных. Здесь находится то самое значение, которое ассоциируется с атрибутом name или http-equiv. Без него метаданные были бы бессмысленными.

http-equiv:

Этот атрибут позволяет имитировать HTTP-заголовки прямо в HTML. Браузер выполняет инструкции, заданные здесь, при загрузке страницы.

• default-style: указывает предпочтительный стиль оформления (ссылка на CSS).
• refresh: позволяет автоматически обновить страницу через заданное время или перенаправить пользователя на другой URL. Например:

  <!-- Перезагрузка страницы каждые 10 секунд -->
  
  
  
  

name:

Задает тип метаданных. Всегда работает в паре с атрибутом content. Внимание: нельзя использовать name, если уже заданы http-equiv или charset. Вот самые полезные значения:

• application-name: название приложения.
• author: имя автора страницы. Это приятно видеть в исходном коде, когда приходят посетители с других сайтов!
• description: краткое описание содержимого страницы.
  
  Очень важно: Именно этот текст чаще всего выводится поисковыми системами (Google, Яндекс) под заголовком в результатах поиска. Хорошее description — это ваш шанс привлечь клики!
• generator: программа, которой создавался документ.
• keywords: список ключевых слов через запятую. Раньше это было критично для SEO, сейчас поисковики относятся к этому атрибуту снисходительно, но он все еще используется некоторыми инструментами.
• robots: инструкции для поисковых роботов (индексировать или нет, разрешать ли кэширование). Например: content="noindex, nofollow" — скажет роботам не индексировать страницу и не следовать ссылкам с неё.
• viewport: «магия» для мобильных устройств. Определяет ширину и масштаб области просмотра. Без этого атрибута сайт на телефоне может выглядеть огромным и неудобным.

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

Кроме перечисленных выше, тег <meta> поддерживает и другие глобальные атрибуты HTML5.

<head>
<meta charset="UTF-8">
<meta name="description" content="Портал для Web разработчиков">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Автор Я">


Содержимое страницы