Как добавить мета-теги на сайт: в коде, CMS и конструкторе

Мета-теги — служебная информация в коде страницы, которую не видно на самой странице, но которую используют поисковики, браузеры и мессенджеры. Они определяют, как страница выглядит в результатах поиска и в превью ссылки в Telegram. Способ добавления зависит от того, на чём сделан сайт.

Какие мета-теги нужны

Title

Технически это не мета-тег, а отдельный тег в разделе head, но его всегда рассматривают вместе. Заголовок страницы в выдаче и на вкладке браузера.

Description

Описание страницы, которое поисковики часто используют в сниппете.

Robots

Указания для поисковых роботов: индексировать ли страницу и следовать ли по ссылкам. Нужен, когда страницу нужно закрыть от индексации.

Viewport

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

Canonical

Ссылка, указывающая основной адрес страницы. Это тег link, но он размещается рядом с мета-тегами.

Open Graph

Набор тегов для превью ссылки в мессенджерах и соцсетях: заголовок, описание, изображение. Особенно важно для Telegram, где ссылками делятся постоянно.

Charset

Указание кодировки, чтобы текст отображался корректно.

Способ 1. Статический HTML

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

Способ 2. WordPress

WordPress сам формирует title, но для description, Open Graph и robots обычно ставят отдельный SEO-плагин — из популярных это Yoast и Rank Math. Под текстом записи или страницы плагин выводит панель, в которой можно задать title и description. В настройках плагина задаются шаблоны для типов страниц.

Способ 3. 1С-Битрикс

Для статических страниц — свойства страницы. Для разделов и элементов инфоблоков — вкладка SEO с шаблонами и ручными значениями. Open Graph часто добавляется в шаблон сайта программистом.

Способ 4. Tilda

В настройках каждой страницы есть раздел SEO, где задаются заголовок и описание, а также раздел для настройки превью в соцсетях. Для отдельных задач можно добавить код в head через настройки сайта.

Способ 5. Конструкторы и платформы магазинов

Большинство конструкторов имеют поля для title и description в настройках страниц и товаров. Проверьте, есть ли возможность задать шаблоны для массовых страниц.

Способ 6. Фреймворки

В Next.js, Nuxt и подобных фреймворках мета-теги задаются в коде через встроенные механизмы метаданных. Для динамических страниц — функции, которые формируют теги из данных. Важно, чтобы теги отдавались в HTML при серверном рендеринге, а не только после выполнения JavaScript.

Проверка

1. Откройте страницу и посмотрите исходный код — теги должны быть в разделе head
2. Проверьте, что у разных страниц разные title и description
3. Проверьте превью ссылки, отправив её в Telegram себе
4. Просканируйте сайт краулером и найдите пустые и повторяющиеся теги

Типичные ошибки

• одинаковый title на всех страницах
• description не заполнен, и поисковик берёт случайный текст
• тег robots с noindex остался после разработки
• нет viewport, и сайт не адаптируется на телефонах
• теги добавляются только через JavaScript и не видны в исходном коде
• в Open Graph изображение недоступно или слишком маленькое

Итог

Мета-теги добавляются в зависимости от платформы: вручную в HTML, через плагины WordPress, вкладку SEO в Битрикс, настройки страниц Tilda или код фреймворка. Главное — уникальные title и description для каждой страницы и правильный robots. Если не уверены, что теги на вашем сайте настроены правильно, проверим.