Голова человека, обрамлённая открывающим и закрывающим тегами head. Внутри головы множество тегов meta.
Иллюстрация: Кира Кустова

<meta>

Кусочек метаданных страницы. Описывает содержание страницы для браузера, поисковиков и соцсетей.

Время чтения: меньше 5 мин

Кратко

Скопировано

В теге <meta> хранится краткое описание страницы, ключевые слова и другие данные, которые могут понадобиться браузерам и поисковым системам.

Таких метатегов может быть любое количество. Все они размещаются внутри тега <head>, желательно в самом начале.

Пример

Скопировано
        
          
          <head>  <meta name="description" content="Краткое описание страницы">  <meta    name="keywords"    content="ключевое слово 1, ключевое слово 2, ключевое слово 3"  >  <meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
          <head>
  <meta name="description" content="Краткое описание страницы">
  <meta
    name="keywords"
    content="ключевое слово 1, ключевое слово 2, ключевое слово 3"
  >
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

        
        
          
        
      

Как понять

Скопировано

Теги <meta> содержат полезную для поисковиков и браузеров информацию. Информация в метатегах называется метаданными. Пользователь не видит их содержимое на странице.

Метатеги различаются набором атрибутов и их значений. Один тег содержит одно сообщение: например, описание страницы <meta name="description">, ключевые слова <meta name="keywords" content="...">, кодировку страницы <meta charset="UTF-8"> или другие метаданные.

Мы рекомендуем вставить как минимум метатеги description, viewport, charset. Они помогут оптимизировать сайт для браузера пользователя и поисковых систем.

В <meta> прописывается информация, которую нельзя указать в <base>, <link>, <script>, <style> или <title>.

Как пишется

Скопировано

Метатег, который задаёт кодировку страницы, не отличается по структуре от обычных:

        
          
          <meta charset="...">
          <meta charset="...">

        
        
          
        
      

Остальные метатеги содержат атрибуты name или http-equiv, которые используются в паре с атрибутом content:

        
          
          <meta name="..." content="..."><meta http-equiv="..." content="...">
          <meta name="..." content="...">
<meta http-equiv="..." content="...">

        
        
          
        
      

Первый атрибут задаёт параметр, который мы меняем, а второй — значение. Вот как будет выглядеть метатег, в котором прописываются ключевые слова на странице:

        
          
          <meta  name="keywords"  content="ключевое слово 1, ключевое слово 2, ключевое слово 3">
          <meta
  name="keywords"
  content="ключевое слово 1, ключевое слово 2, ключевое слово 3"
>

        
        
          
        
      

Атрибуты

Скопировано

charset

Скопировано

Задаёт кодировку страницы. Мы рекомендуем писать здесь UTF-8 — это самый распространённый вариант.

        
          
          <meta charset="UTF-8">
          <meta charset="UTF-8">

        
        
          
        
      

content

Скопировано

Основное содержимое метатега, которое используется только с http-equiv и name.

http-equiv

Скопировано

Атрибут, который может изменять поведение страницы или серверов. Используется в паре с content. У него есть несколько значений:

  • "default-style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента <link>, который связан с таблицей CSS-стилей, или заголовок элемента <style>, который содержит таблицу CSS-стилей.

  • "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.

        
          
          <meta http-equiv="refresh" content="3">
          <meta http-equiv="refresh" content="3">

        
        
          
        
      

name

Скопировано

Имя мета-тега, которое также определяет его значение. Используется в паре с content. Можно задать следующие значения:

  • "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.
        
          
          <meta name="keywords" content="Рецепт, печенье, готовим дома">
          <meta name="keywords" content="Рецепт, печенье, готовим дома">

        
        
          
        
      
  • "viewport" — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial-scale — коэффициент масштабирования страницы при первом открытии:
        
          
          <meta  name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
          <meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"
>

        
        
          
        
      
  • "description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать "description".
        
          
          <meta  name="description"  content="Рассказываем, как нарезать картошку тонкими ломтиками">
          <meta
  name="description"
  content="Рассказываем, как нарезать картошку тонкими ломтиками"
>

        
        
          
        
      
  • "author" — имя автора страницы.
        
          
          <meta name="author" content="Иван Петров">
          <meta name="author" content="Иван Петров">

        
        
          
        
      

Подсказки

Скопировано

💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега <head>.

💡 Атрибуты http-equiv и name выполняют похожие функции, поэтому их нельзя использовать одновременно.

💡 С помощью атрибута http-equiv="refresh" можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд:

        
          
          <meta http-equiv="refresh" content="15;url=https://www.yandex.ru">
          <meta http-equiv="refresh" content="15;url=https://www.yandex.ru">

        
        
          
        
      

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 В <meta>, помимо стандартных метаданных, передаются всякие специальные. Например, есть такой браузер, как Safari: он очень любит подстраивать номера телефонов в какой-то удобный для себя вид. Чтобы отключить это своеволие, нужен отдельный метатег:

        
          
          <meta name="format-detection" content="telephone=no">
          <meta name="format-detection" content="telephone=no">

        
        
          
        
      

🛠 С помощью метатегов можно задавать поведение мобильной версии сайта. Например, можно прописать, на сколько на мобайле можно увеличить масштаб и насколько уменьшить относительно стандарта.

🛠 Через метатеги задаётся и Open Graph-разметка: заголовок, картинка и описание для репоста в соцсетях.

Алёна Батицкая советует

Скопировано

🛠 Если не задать описание для страницы при помощи <meta name="description" content="...">, то поисковые системы при добавлении сайта в свою базу возьмут первый попавшийся текст со страницы и составят из него так называемый сниппет — текст под заголовком сайта в поисковой выдаче.

Пример текста под заголовком сайта в поисковой выдаче (сниппет)

Если хочется контролировать, что именно увидит пользователь в поиске — всегда заполняйте description.

🛠 Есть отдельная категория метаразметки — OG-разметка. OG расшифровывается как open graph. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.

Пример open graph (OG) разметки

Стандартный набор метатегов для красивой карточки в Facebook:

        
          
          <meta property="og:title" content="Лучший сайт в интернете"><meta  property="og:description"  content="Посетите лучший сайт в интернете и познайте тщетность бытия"><meta property="og:image" content="http://best-site/thumbnail.jpg"><meta property="og:url" content="http://best-site/index.htm">
          <meta property="og:title" content="Лучший сайт в интернете">
<meta
  property="og:description"
  content="Посетите лучший сайт в интернете и познайте тщетность бытия"
>
<meta property="og:image" content="http://best-site/thumbnail.jpg">
<meta property="og:url" content="http://best-site/index.htm">

        
        
          
        
      

Большинство соцсетей используют информацию, указанную в тегах из примера выше, для генерации превью ссылок.