meta теги

Meta-теги -- элементы <meta> в <head>, передающие метаданные о документе браузерам, поисковым системам и социальным сетям.

Зачем нужно

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

Где используется

  • <head> каждого HTML-документа
  • SEO-оптимизация
  • Социальные сети (Open Graph, Twitter Cards)
  • Контроль индексации поисковиками

Предпосылки

Основные meta-теги

charset -- кодировка

<!-- ВСЕГДА первой строкой в <head> -->
<meta charset="UTF-8">

UTF-8 -- единственная кодировка, которую стоит использовать. Поддерживает все языки и эмодзи. Должен быть в первых 1024 байтах документа.

viewport -- мобильная адаптация

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

Без этого тега мобильный браузер отобразит страницу как десктопную (шириной ~980px) и уменьшит. Подробнее -- в viewport.

description -- описание для поисковиков

<meta name="description" content="Руководство по HTML для начинающих. Теги, атрибуты, семантика, формы и доступность.">
  • Отображается в результатах поиска Google/Yandex под заголовком
  • Рекомендуемая длина: 120-160 символов
  • Каждая страница должна иметь уникальное описание
  • Не влияет на ранжирование напрямую, но влияет на CTR

keywords -- ключевые слова

<meta name="keywords" content="HTML, теги, атрибуты, веб-разработка">

Google игнорирует этот тег с 2009 года. Yandex учитывает незначительно. Можно не указывать.

author -- автор

<meta name="author" content="Иван Петров">

robots -- управление индексацией

<!-- Разрешить индексацию (по умолчанию) -->
<meta name="robots" content="index, follow">

<!-- Запретить индексацию -->
<meta name="robots" content="noindex, nofollow">

<!-- Не кешировать -->
<meta name="robots" content="noarchive">

<!-- Не показывать сниппет -->
<meta name="robots" content="nosnippet">

<!-- Для конкретного бота -->
<meta name="googlebot" content="noindex">
<meta name="yandex" content="none">
Директива Что делает
index Разрешить индексацию (default)
noindex Запретить индексацию
follow Переходить по ссылкам (default)
nofollow Не переходить по ссылкам
noarchive Не кешировать страницу
nosnippet Не показывать описание в поиске
noimageindex Не индексировать изображения

theme-color -- цвет интерфейса браузера

<!-- Цвет адресной строки в мобильных браузерах -->
<meta name="theme-color" content="#1a1a2e">

<!-- Разные цвета для тёмной и светлой темы -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">

color-scheme -- цветовая схема

<!-- Страница поддерживает и светлую, и тёмную тему -->
<meta name="color-scheme" content="light dark">

Open Graph теги

Управляют превью при шаринге в соцсетях и мессенджерах:

<meta property="og:type" content="website">
<meta property="og:title" content="Руководство по HTML">
<meta property="og:description" content="Полный гайд по HTML для начинающих">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:site_name" content="WebDev Blog">
<meta property="og:locale" content="ru_RU">

Подробнее -- в Open Graph и SEO.

Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Руководство по HTML">
<meta name="twitter:description" content="Полный гайд по HTML">
<meta name="twitter:image" content="https://example.com/twitter-card.jpg">
<meta name="twitter:site" content="@webdev_blog">

HTTP-equiv теги

Эмулируют HTTP-заголовки:

<!-- Редирект через 5 секунд -->
<meta http-equiv="refresh" content="5; url=https://example.com/new-page">

<!-- Content Security Policy -->
<meta http-equiv="content-security-policy" content="default-src 'self'">

<!-- X-UA-Compatible (для старого IE) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Кодировка (альтернативный синтаксис) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Полный набор meta-тегов для продакшна

<head>
  <!-- Обязательные -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название страницы | Сайт</title>

  <!-- SEO -->
  <meta name="description" content="Описание страницы до 160 символов">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/page">

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="Название">
  <meta property="og:description" content="Описание">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:locale" content="ru_RU">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Название">
  <meta name="twitter:description" content="Описание">
  <meta name="twitter:image" content="https://example.com/twitter.jpg">

  <!-- Визуальные -->
  <meta name="theme-color" content="#1a1a2e">
  <meta name="color-scheme" content="light dark">

  <!-- Favicons -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.webmanifest">
</head>

Частые ошибки

Ошибка Почему плохо Как правильно
charset не первая в head Браузер может неверно декодировать Charset первой строкой
Нет viewport Страница не адаптируется под мобильные Всегда добавляй viewport
Одинаковое description на всех страницах Плохо для SEO Уникальное описание для каждой страницы
description длиннее 160 символов Обрезается в поиске 120-160 символов
og:image с относительным URL Не отобразится в соцсетях Полный абсолютный URL с https
Полагаться на keywords Тратить время на мёртвый тег Сосредоточься на description и контенте

Практика

  1. Создай HTML-документ с полным набором meta-тегов
  2. Проверь превью через opengraph.xyz или metatags.io
  3. Проверь meta-теги любого крупного сайта через DevTools → Elements → <head>
  4. Добавь <meta name="robots" content="noindex"> на тестовую страницу и проверь, что Google Search Console предупреждает

Связанные темы

Ресурсы