Генератор мета-тегов
Заполните данные страницы и скопируйте готовый HTML для head: теги title, description, canonical, robots, Open Graph и Twitter card.
Работает полностью в браузере
Пустые поля в результат не попадают. Предпросмотры — это макеты, построенные из вашего текста; они никогда не загружают адрес вашего изображения, а реальные поисковые системы и соцсети оформляют всё по-своему.
Как создать мета-теги
- Введите заголовок и описание страницы. Счётчики дают примерное представление о том, сколько обычно показывается.
- Добавьте канонический адрес, параметры robots и нужные поля Open Graph и Twitter. Предупреждения отмечают адреса, которые не являются полными URL с
https://. - Проверьте макеты поиска и соцсетей, затем нажмите Копировать HTML и вставьте теги внутрь
<head>вашей страницы.
Для чего нужен каждый тег
Результат поиска обычно строится из <title> и мета-описания. Канонический тег сообщает поисковым системам, какой адрес основной, если на одну и ту же страницу можно попасть несколькими путями, например с параметрами отслеживания. Тег robots нужен, только когда вы хотите изменить поведение по умолчанию: индексировать страницу и переходить по её ссылкам.
Теги Open Graph появились для превью ссылок, и теперь их читают большинство мессенджеров и соцсетей. Важнее всего четыре: заголовок, описание, изображение и URL; og:image:alt даёт картинке текстовое описание, а og:type обычно равен website или article. Тег карточки X выбирает между маленькой квадратной миниатюрой (summary) и широким изображением (summary_large_image).
Текст экранируется при записи: амперсанд становится &, а двойная кавычка — ". Благодаря этому страница остаётся валидной, а случайные кавычки не обрывают атрибут раньше времени. Проверьте готовую страницу в настоящем предпросмотре публикации, прежде чем полагаться на результат, потому что каждая соцсеть кэширует превью, которое загрузила первым.
Советы
- Точнее посчитать символы можно в инструменте «Подсчёт символов».
- Получить чистый адрес для канонического URL поможет «Генератор slug».
- Привести в порядок head, в который вы вставляете теги, можно в инструменте «Форматирование HTML».
Вопросы и ответы
Какой длины должны быть заголовок и описание?
Строгого предела нет. Поисковые системы обрезают текст по ширине в пикселях, а не по числу символов, и могут переписать его. Примерно можно ориентироваться так: заголовки около 50–60 символов и описания около 150–160 символов обычно показываются полностью. Счётчики здесь — подсказки, а не правила.
Нужны ли и Open Graph, и теги Twitter?
Часто достаточно одного Open Graph. X (Twitter) берёт заголовок, описание и изображение из Open Graph, если собственных тегов нет, но ему всё равно нужен twitter:card, чтобы выбрать вид карточки. Добавьте twitter:site, если хотите указать аккаунт.
Почему og:image должен быть полным адресом?
Соцсети загружают изображение со своих серверов, поэтому относительному пути вроде /img/card.png не от чего отсчитываться. Используйте абсолютный URL с https://. Типичный размер карточки — 1200 на 630 пикселей.
Что делает выбор robots?
noindex просит поисковые системы не включать страницу в выдачу, а nofollow — не переходить по её ссылкам. По умолчанию для страницы без тега robots действуют index и follow, поэтому выбор обоих этих значений не создаёт никакого тега.
Экранируются ли специальные символы?
Да. Амперсанды, угловые скобки и двойные кавычки в вашем тексте преобразуются в HTML-сущности, поэтому заголовок вроде Q&A "live" не может выйти за пределы своего атрибута или добавить на страницу разметку.
Что-нибудь отправляется на сервер и загружается ли моё изображение?
Нет. Теги создаются в вашем браузере, а адрес изображения лишь выводится текстом в макете соцсети и никогда не запрашивается. Соцсети загрузят его позже, когда кто-нибудь поделится страницей.