Настройте

Заполните детали вашей страницы. Оставьте поля Open Graph и Twitter пустыми для наследования из базовых полей.

Базовое SEO

URL страницы

Заголовок страницы

0/60

Мета-описание

0/160

Язык (html lang)

Robots

Автор

Цвет темы

Open Graph

OG type

Название сайта

OG-заголовок

OG-описание

URL OG-изображения

Twitter Card

Тип карточки

Twitter/X хэндл

URL изображения Twitter

Сгенерированный HTML

Скопируйте эти теги в head-элемент вашей страницы.

head-meta.html

<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 строк

Ваш robots.txt готов — но это только один из 99+ SEO-сигналов.

Запустить бесплатный аудит →

Что такое мета-теги и почему они важны?

Мета-теги — это HTML-элементы внутри <head> страницы, которые описывают документ для машин: поисковых систем, социальных платформ, браузеров и операционных систем. Тело страницы видят люди; head читают боты, краулеры и платформенные интеграции. Мета-теги определяют, как страница индексируется, как она разворачивается в шаренных ссылках, какой цвет принимает интерфейс мобильного браузера и интерпретирует ли устройство телефонные номера и email-адреса как кликабельные ссылки.

Большинство мета-тегов выполняют одну из четырёх ролей. Технические теги — charset и viewport — сообщают браузеру, как парсить и отображать документ; без них рендеринг ломается предсказуемым образом. SEO-теги — title, description, canonical, robots и hreflang — сообщают поисковым системам, что это за страница и как с ней обращаться в индексе. Социальные теги — семейство og: из Open Graph и семейство twitter: из Twitter Card — контролируют отображение страницы при вставке URL в чат, пост или шаренную ссылку. Теги брендинга и UX — theme-color, apple-touch-icon и format-detection — управляют интеграцией страницы с операционной системой устройства.

История этих тегов многослойна. Исходная спецификация HTML 4 определила <meta> для произвольных пар имя-значение. Open Graph был опубликован Facebook в 2010 году, чтобы дать платформам шаринга стандартный способ извлечения чистого превью. Twitter Card появился в 2012 году с собственным пространством имён, поскольку одного Open Graph не хватало для охвата вариаций продукта Twitter. Apple, Microsoft и сообщество PWA добавили свои семейства тегов для иконок, мобильного интерфейса и прогрессивного улучшения. В итоге секция head на хорошо размеченной странице может занимать сорок строк — каждый тег обслуживает конкретного потребителя.

Реальный эффект накапливается. Отсутствие canonical делит ссылочный вес между дублирующимися URL. Отсутствующий или неверный og:image превращает шаренные ссылки в безликие блоки, которые пролистывают. Отсутствующий viewport заставляет страницу рендериться в десктопной ширине на телефоне, что запускает штраф Google за неудобство для мобильных пользователей и разрушает Core Web Vitals. Каждая из этих проблем по отдельности не катастрофична, но вместе они существенно снижают трафик и вовлечённость.

Как пользоваться этим генератором

Форма разбита по семействам тегов, поэтому вы можете заполнять только нужные разделы, не прокручивая ненужные поля.

Шаг 1 — Заполните SEO-ядро. Введите заголовок страницы, мета-описание, canonical URL и язык. Эти четыре поля охватывают теги, влияющие на позиции в поиске и CTR, поэтому даже минимальная настройка мета-тегов должна их включать.

Шаг 2 — Добавьте превью для социальных сетей. Задайте заголовок Open Graph, описание и URL изображения. По умолчанию генератор копирует их в теги og: и twitter: одновременно, поскольку 90% страниц используют одинаковый контент на обеих платформах. Поля Twitter следует переопределять только при наличии специфичных для Twitter вариантов.

Шаг 3 — Скопируйте результат и вставьте в <head>. Генератор создаёт валидный HTML5, упорядоченный следующим образом: сначала charset и viewport, затем SEO-теги, затем социальные теги, затем брендинг. Вставьте блок перед внешними стилями и скриптами, чтобы блокирующие рендеринг ресурсы не задерживали мета-информацию.

Полная таксономия мета-тегов

Современная страница выигрывает от гораздо большего числа тегов, чем title и description, которые показывают большинство руководств. Ниже приведён приоритетный порядок для чистого и полного head.

Технические (должны идти первыми)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset должен появляться в первых 1024 байтах документа. Если он находится позже, браузер может уже начать парсинг с кодировкой по умолчанию и вынужден будет перезапуститься, теряя время и рискуя ошибками отображения не-ASCII символов. viewport контролирует, как мобильные браузеры вычисляют начальную разметку. Без него мобильные устройства рендерят страницу в десктопной ширине и уменьшают её, ломая сенсорные мишени и запуская штраф Google за неудобство для мобильных пользователей, введённый в обновлении 2015 года.

SEO-ядро

<title>Основной ключевик — Бренд</title>
<meta name="description" content="Краткое описание 150–160 символов с ключевым словом и призывом к действию.">
<link rel="canonical" href="https://example.com/page-path">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">

Тег title — наиболее весомый on-page SEO-сигнал и заголовок сниппета в выдаче. Description не влияет на позиции напрямую, но повышает CTR. Canonical устраняет неоднозначность дублирующихся URL, создаваемых параметрами отслеживания, порядком сортировки или пагинацией. Мета-тег robots переопределяет robots.txt для конкретной страницы, когда нужно разрешить сканирование, но запретить индексирование. Hreflang сообщает Google, какую языковую и региональную версию показывать пользователям при разных поисковых запросах — без него международное SEO работает некорректно.

Каскад заголовков

Три разных поля заголовка управляют тремя разными поверхностями. Тег <title> заполняет сниппет в выдаче и вкладку браузера. <meta property="og:title"> заполняет карточки превью в Facebook, LinkedIn и Slack. <meta name="twitter:title"> заполняет Twitter Card. По умолчанию задайте для всех трёх одну строку. Переопределяйте og:title, когда нужна более длинная версия, оптимизированная для шаринга (Facebook допускает около 88 символов до усечения — значительно больше, чем 60 у Google). Переопределяйте twitter:title, когда нужен специфичный для Twitter текст.

Open Graph (шаринг)

<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок страницы для соцсетей">
<meta property="og:description" content="Описание для соцсетей.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="ru_RU">

Размеры изображения важны. Facebook, LinkedIn и большинство других потребителей Open Graph ожидают изображение 1200 на 630 пикселей с соотношением сторон 1.91:1. Изображение меньшего размера заставляет платформу переключиться на макет с миниатюрой вместо крупной карточки. Неверное соотношение сторон вызывает обрезку, часто затрагивающую текст или лица. Подсказки о ширине и высоте позволяют краулерам зарезервировать место и загружать изображение асинхронно, избегая сдвига макета в превью.

Twitter Card (шаринг)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок страницы для Twitter">
<meta name="twitter:description" content="Описание для Twitter.">
<meta name="twitter:image" content="https://example.com/twitter.png">
<meta name="twitter:site" content="@yourhandle">

Выбирайте summary_large_image для макета с крупным изображением (большинство маркетинговых страниц и статей) и summary для компактной карточки (лёгкий контент). Twitter предпочитает изображение 1200 на 675 — немного шире, чем 1200 на 630 у Open Graph. Если использовать то же изображение, что и для Open Graph, результат всё равно будет работать, но изображение под Twitter полностью заполняет карточку без чёрных полос.

Брендинг и UX (часто забывают)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color окрашивает хром браузера на Android и строку состояния в PWA. color-scheme сообщает браузеру, что нужно рендерить полосы прокрутки и элементы управления формами в соответствующей тёмной или светлой теме. format-detection со значением telephone=no запрещает iOS Safari автоматически превращать последовательности цифр, похожие на телефонные номера, в ссылки tel: — это критично для номеров счетов, ID заказов и любых семи-одиннадцатизначных чисел, которые не являются номерами телефонов. Ссылки на иконки охватывают фавиконки для десктопных вкладок, иконки экрана «Домой» в iOS и адаптивные иконки Android.

Распространённые ошибки, вредящие SEO и шарингу

Неверный canonical, ведущий на другую страницу. Canonical, указывающий на другой URL, сообщает Google, что текущий URL является дублем, и консолидирует сигналы на целевую страницу. Страницы, которые должны ранжироваться, исчезают из поиска, потому что их canonical ошибочно указывает в другое место. Всегда используйте самореференсный canonical, если страница действительно не является дублем.

Отсутствующий или слишком маленький og:image. Отсутствие og:image позволяет платформе выбрать произвольное изображение из тела страницы — нередко логотип или иконку. Слишком маленькое изображение (менее 600 пикселей в ширину) снижает превью до макета с миниатюрой. Оба варианта снижают вовлечённость в шаренных ссылках, хотя исправить это легко.

Одинаковые описания на всех страницах. Шаблонные описания, отличающиеся только заголовком страницы, сигнализируют о низком усилии. Google регулярно заменяет их текстом из тела страницы — а значит, написанное вами описание никогда не отображается. Каждая страница нуждается в уникальном описании, отражающем её конкретный интент.

Charset объявлен поздно. Тег charset, расположенный после первых 1024 байтов, запускает перезапуск кодировки в некоторых браузерах. Результат — кратковременная вспышка неверно закодированных символов до перерисовки страницы. Всегда ставьте <meta charset="utf-8"> первым дочерним элементом head.

Рассинхронизация мета-тега robots и заголовка X-Robots-Tag. Когда HTTP-заголовок устанавливает noindex, а мета-тег устанавливает index, побеждает более ограничительная директива — и страница не индексируется. Проверяйте оба уровня за один проход, если страница загадочно не появляется в поиске.

Theme-color белого цвета на тёмном сайте. По умолчанию браузер красит адресную строку в белый цвет на большинстве Android-устройств. Сайт с тёмно-синей шапкой и белой адресной строкой выглядит сломанным на мобильном. Установка theme-color в цвет бренда — одна строка кода, которая ощутимо улучшает воспринимаемое качество.

Twitter Card без site или creator. Отсутствие twitter:site и twitter:creator убирает строку атрибуции из карточки и не позволяет Twitter связывать шаринг с вашим аккаунтом. Оба поля принимают Twitter-хендл с @ и должны быть заданы на каждой странице.

Крайние случаи, о которых никто не говорит

Мета-теги взаимодействуют с заголовками HTTP-ответа, и заголовки, как правило, побеждают. X-Robots-Tag: noindex в ответе переопределяет любой <meta name="robots" content="index"> в странице. Заголовки Content-Security-Policy могут заблокировать загрузку og:image в краулере превью — особенно если изображение находится на другом домене. Referrer-Policy со значением no-referrer убирает реферер, который краулеры Open Graph иногда используют для проверки запроса, из-за чего некоторые платформы отказываются отрисовывать превью. Если мета-теги выглядят корректно в исходном коде, но страница ведёт себя не так, как ожидается, следующим делом проверьте заголовки ответа.

Бесплатный генератор meta-тегов