Как добавить мета теги на сайт: пошаговая инструкция

Что такое мета-теги и почему они влияют на заявки

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

Для бизнеса это вопрос клика. Два магазина могут стоять рядом в выдаче, но человек выберет тот, чей заголовок понятен, а описание отвечает на вопрос. Если в Telegram-чате вместо аккуратной карточки с картинкой появляется голая ссылка, доверия тоже меньше, а в Узбекистане именно Telegram часто главный канал пересылки ссылок.

Какие теги нужны на каждой странице

Не нужно заполнять всё подряд. Для большинства сайтов хватает короткого набора, а остальное зависит от задачи.

• title — заголовок страницы; формально это отдельный тег, но его всегда настраивают вместе с мета-тегами
• meta description — описание, которое поисковик часто берёт в сниппет
• robots — разрешает или запрещает индексацию (нужен для корзины, личного кабинета, тестовых страниц)
• viewport — без него страница на телефоне выглядит как уменьшенная копия десктопа
• canonical — указывает основной адрес, если одна страница доступна по нескольким ссылкам
• Open Graph (og:title, og:description, og:image) — карточка ссылки в Telegram и соцсетях
• charset — кодировка, чтобы кириллица и узбекские символы не превращались в «кракозябры»

Шаг 1. Выясните, на чём сделан сайт

Прежде чем что-то добавлять, определите платформу. Спросите у того, кто делал сайт, или посмотрите админку: вход через /wp-admin означает WordPress, раздел /bitrix/ — 1С-Битрикс, редактор с блоками — скорее всего Tilda или другой конструктор. Если сайт написан под заказ, теги задаются в коде.

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

Шаг 2. Добавьте теги на вашей платформе

Статический HTML. Откройте файл страницы и внутри head впишите теги. Минимальный набор выглядит так: <title>Название страницы</title>, <meta name="description" content="Описание">, <meta name="viewport" content="width=device-width, initial-scale=1">, <meta charset="utf-8">. На каждой странице title и description свои, копировать их между файлами нельзя.

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

1С-Битрикс. Для обычных страниц данные задаются в свойствах страницы. Для разделов и элементов каталога есть вкладка SEO с шаблонами: они подставляют название, раздел и свойства товара. Важные страницы можно переопределить вручную. Open Graph чаще всего программист добавляет в шаблон сайта один раз.

Tilda и другие конструкторы. В настройках каждой страницы открываем раздел SEO, вписываем заголовок и описание, затем настраиваем картинку для соцсетей. Нестандартные теги вставляют через код в head в настройках сайта. Частая картина: владелец собрал сайт и не открыл этот раздел ни разу.

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

Как написать title и description, которые кликают

Возьмём пример: интернет-магазин детской одежды в Ташкенте с доставкой по регионам. Слабый вариант для страницы категории — «Главная» или «Каталог». Лучше: «Детские куртки в Ташкенте — купить с доставкой по Узбекистану». В начале стоит то, что ищет человек, дальше уточнение и география.

С description так же: одна-две фразы о том, что получит посетитель. Например: условия доставки в регионы, варианты оплаты через Click и Payme, возможность примерки. Описание не обязано повторять заголовок. Честно пишите только то, что есть на странице, иначе люди будут уходить сразу.

Длина имеет значение: слишком длинные заголовки обрезаются в выдаче, поэтому самое важное ставьте в начало. Не набивайте title ключевыми словами через запятую, а meta keywords заполнять не нужно: Google его не учитывает. Помните, что поисковик вправе подставить в сниппет другой фрагмент текста — это нормально.

Как проверить, что всё сработало

Проверка занимает немного времени, но именно она отсекает большинство проблем.

• Откройте страницу и посмотрите исходный код: теги должны быть в разделе head, а не подгружаться скриптом
• Сравните несколько разных страниц: title и description у них должны отличаться
• Отправьте ссылку себе в Telegram и посмотрите карточку: заголовок, описание, картинка
• Просканируйте весь сайт краулером и найдите пустые, повторяющиеся и слишком длинные теги
• Через Search Console следите, как страницы выглядят в выдаче и нет ли случайно закрытых от индексации

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

Самая частая — один и тот же title на всех страницах: поисковик не понимает, чем они различаются. Вторая — пустой description, из-за чего в сниппете оказывается случайный кусок текста.

Опаснее всего забытый robots с noindex: его ставят на время разработки и не снимают после запуска, а сайт месяцами не появляется в поиске. Ещё одна ошибка — отсутствие viewport, из-за чего страница плохо открывается на смартфоне, а большая часть аудитории в Узбекистане заходит именно с телефона.

Наконец, картинка для Open Graph: если файл недоступен, слишком мал или лежит за закрытой ссылкой, Telegram покажет пустую карточку. Загрузите отдельное изображение для превью и проверьте его адрес в браузере.

Чек-лист перед запуском

Прогоните сайт по этому списку после каждой крупной правки или переезда на новую платформу.

• У каждой страницы свой title и description
• Нет случайного noindex на страницах, которые должны быть в поиске
• Viewport и charset добавлены в общий шаблон
• Для каталога настроены шаблоны, а не заполнение вручную
• Open Graph-картинка открывается по прямой ссылке
• Карточка ссылки проверена в Telegram
• Теги видны в исходном коде страницы

Когда стоит подключить специалиста

Если у вас небольшой сайт, справитесь сами по шагам выше. Когда страниц много, сайт на Битрикс или фреймворке, а позиции не растут, проблема обычно глубже: шаблоны, дубли, индексация. В таких случаях команда markdev проводит SEO-оптимизацию сайта в Узбекистане: проверяет теги, собирает шаблоны под ваш каталог и помогает внедрить их вместе с разработчиком. Если сомневаетесь, что мета-теги на вашем сайте настроены правильно, напишите нам, и мы обсудим задачу.