skip to main content

<meta>

html

Кратко 🔗

В теге <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>

Как это понять 🔗

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

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

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

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

Как пишется 🔗

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

<meta charset="..." />

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

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

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

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

Атрибуты 🔗

  • charset — задаёт кодировку страницы. Мы рекомендуем писать здесь UTF-8 — это самый распространённый вариант. Всегда указывай этот атрибут, чтобы избежать ошибок кодировки.
<meta charset="UTF-8" />
  • http-equiv — атрибут, который может изменять поведение страницы или серверов. Используется в паре с content.
  • "default-style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента <link>, который связан с таблицей CSS-стилей, или заголовок элемента <style>, который содержит таблицу CSS-стилей.
  • "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.
  • name — имя мета-тега, которое также определяет его значение. Используется в паре с content. Можно задать следующие значения:
  • "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.
<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"
/>
  • "description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например, «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывай указывать "description".
<meta
name="description"
content="Рассказываем, как нарезать картошку тонкими ломтиками"
/>
  • "author" — имя автора страницы.
<meta name="author" content="Иван Петров" />
  • content — основное содержимое мета-тега, которое используется только с http-equiv и name.

Подсказки 🔗

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

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

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

В работе 🔗

Алёна,

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

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

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

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

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

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

HTML

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

HTML

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

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

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


Автор: Макс 👨‍🔧