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

Метатеги (от англ. meta tags) — элементы HTML-кода, которые сообщают поисковому роботу и браузеру дополнительные данные о документе: описание страницы, ключевые слова, команды для индексирования, авторство, прочую служебную информацию. Какой-либо внятной классификации метатегов не существует — любой web-мастер может придумать оригинальный элемент и прописать его в коде. Но язык HTML за 30 лет своего существования все же оброс устоявшимися метатегами, которые употребляются чаще других и одинаково понимаются всеми алгоритмами. Такие универсальные элементы кода могут влиять на продвижение сайта, поэтому представляют интерес для сеошников.

В этой статье мы расскажем, какие html-теги полезны при продвижении, как грамотно прописывать их в документе и как проверить метатеги на сайте.

Правильные метатеги для SEO

Метатеги напрямую не влияют на работу сайта. В принципе, их можно игнорировать — никакой катастрофы не случится кроме того, что ваш ресурс будет болтаться где-то на задворках мироздания. Если ваша цель — десятка топа Google или Яндекса, то правильное заполнение Title и Description становится обязательной частью работы над продвижением, особенно по низкочастотным запросам. Тем более, эти два тега, в отличие от других, видят не только поисковые роботы, но и пользователи на странице выдачи.

Как правильно писать мета теги для продвижения сайта? У каждого элемента кода, влияющего на SEO, есть свои особенности оформления, но, прежде чем их разбирать, выделим общие правила работы с семантикой:

  1. Вписываем ключи по правилам русского языка. И поисковики, и живые люди болезненно реагируют на конструкции типа «флаер печать офсет цена».
  2. Не спамим ключами.
  3. Главный ключ ставим в начало фразы, там он имеет наибольший вес.
  4. Не дублируем элементы: все метатеги на страницах сайта должны быть уникальными.

Title

В SEO тег <title> играет первостепенную роль. Title — это заголовок страницы, который пользователь видит:

  • на странице выдачи — как первую строку сниппета рядом с фавиконом (картинкой-символом сайта);
  • в названии вкладки в браузере.

Это крючок с приманкой, на которую должен клюнуть пользователь. Если тайтл зацепил, то человек гарантированно перейдет по ссылке на ваш сайт. Но при этом заголовок должен полностью соответствовать содержанию страницы и быть понятным для людей и робота, который по тайтлу определяет релевантность запросу.

Где смотреть title в сниппете на Yandex

Синтаксис

Строго говоря, Title не является метатегом, но прописывается в контейнере HEAD и не отображается в теле документа на ресурсе. В этом его главное отличие от тега H1, который, по сути, тоже является заголовком, но отображается непосредственно на странице сайта.

<html>
<head>
...
<title>Емкий и понятный заголовок</title>
...
</head>
</html>

Если тайтл не заполнить, в заголовок сниппета подтянется URL — адрес страницы, а это плохо повлияет на ранжирование и поведенческие факторы.

Принципы заполнения Title

  • Перед тем как заполнять метатеги, нужно собрать семантику и определить, по каким запросам будет продвигаться та или иная страница. В title обязательно вписываем основной ключ. Ставить его желательно в самое начало фразы и в прямом вхождении. Грамматически кривые запросы переводим на классический русский: из дикого «флаер печать офсет цена» делаем приличный «Цена на офсетную печать флаеров».
  • Если страница продвигается по региональному запросу, то регион нужно указывать в тайтле: «Офсетная печать флаеров в Караганде». Так и поисковый робот, и человек сразу увидят вашу геолокацию.
  • Длина заголовка должна быть такой, чтобы вся важная информация не скрывалась за многоточием. Универсальный размер для Яндекса и Google — не более 55 знаков без пробелов. Это не жесткое ограничение, робот прочитает хоть роман-эпопею, но пользователю покажет только самое начало. Бывает, что поисковик обрубает концы в самых неподходящих местах, получается забавно: «Офсетная печать листовок и флаеров, боль...»

    Впадать в другую крайность и делать тайтл слишком коротким — тоже плохая идея, так вы не используете заголовок на полную катушку.

    Некоторые сеошники в тайтле считают не знаки, а слова: Google учитывает первые 12, Яндекс - 15. Значимость всех последующих слов существенно ниже.
  • Тайтл не должен совпадать с H1. Если семантика в процессе сбора и обработки, проблема решается путем добавления в сниппет хвоста вроде: | Название организации.
  • Динамические элементы в заголовке сниппета нравятся поисковикам. Это уместно, когда указывается цена или дата, которая может меняться. «Офсетная печать флаеров: цена 2 копейки за штуку».
  • В Title каждое слово должно быть выверено и нести смысл. 55 символов без пробелов — это слишком мало, чтобы растекаться мыслью по древу и вставлять в заголовок слова-пустышки, типа разномастных союзов и предлогов, прилагательных «прекрасный», «лучший», которые не добавляют полезной информации и только засоряют эфир.
  • Осторожнее с пунктуационными знаками. Точка, восклицательный и вопросительный знаки разбивают смысловые пассажи (длинные ключевые фразы) на два предложения, а это влияет на оценку релевантности поисковиком. Лучше использовать запятые, двоеточие и тире.

Description

Метатег <description> — это краткое описание содержимого страницы, которое отображается в сниппете и раскрывает суть тайтла. Важно, чтобы он не повторял заголовок.

Дескрипшн не обязательно шпиговать ключами — текст должен быть ориентирован на пользователя. Это своего рода замануха, прочитав которую, человек захочет продолжения уже на вашей территории. Удачное описание влияет на CTR — показатель кликабельности сайта. Чем больше кликов — тем выше ранжируется страница в выдаче, поэтому метатег description важен для продвижения сайта. Он улучшает поведенческие факторы.

Description в выдаче Яндекса

Синтаксис

Description помещается в контейнер HEAD, поэтому не отображается в теле страницы.

<html>
<head>
...
<meta name="description" content="Цепляющее описание страницы"/>
...
</head>
</html>

Если этот метатег не прописывать, никто не умрет — умные поисковые роботы выберут лучшие отрывки на вашей странице и явят их миру в сниппете. Скажем больше, далеко не всегда строптивые роботы послушно подтягивают прописанный дескрипшн в сниппет, часто они ставят абзац со страницы, потому что считают, что он более релевантен запросу.

Принципы заполнения Description

  • Чтобы угадать с длиной description, перед тем как писать метатеги для страниц своего сайта, хорошо бы выяснить норму знаков на текущее время, например, в 2019–2020 году средняя длина описания в сниппете:
    • для Google 135–170 знаков с пробелами на десктопах и 100–120 на смартфонах;
    • для Яндекса 170–200 знаков с пробелами на десктопе и 100–160 на смартфонах, но здесь есть чудная кнопка «Читать еще», где можно развернуться аж до 500 символов.
  • Ключи в дескрипшн нужно вписывать очень дозированно и незаметно, здесь не нужны прямые вхождения и перечисление запросов, по которым вы продвигаетесь. Текст должен быть органичным и максимально информативным. В сниппете поисковики сами выделяют ключи жирным шрифтом.
  • Все самое важное ставим в начало описания.
  • Больше конкретики и полезной информации, динамические данные о ценах, скидках, акциях.
  • Для коммерческих страниц в описании уместны призывы к действию: «Закажите печать листовок онлайн на нашем сайте!» и описание преимуществ: «Оставьте заявку на печать флаеров сегодня и получите готовый тираж завтра».
  • Используйте эмодзи — графические символы, привлекающие внимание к сниппету вашей страницы. Однозначного ответа, влияют ли веселые картинки на ранжирование, нет, но умеренное и уместное их употребление в description сделает его более привлекательным, структурированным и заметным. Эмодзи нельзя ставить в начале и в конце метатега.

Keywords

Метатег, который когда-то был залюблен сеошниками до смерти. Из-за адовых злоупотреблений поисковикам пришлось от него отказаться. По сути, это список ключей, по которым продвигается страница. Все просто и незамысловато: робот читал список ключевиков и понимал, для каких запросов страница будет релевантна. В итоге в этот метатег напихивали столько всякого добра, что поисковым системам стало проще прикрыть лавочку, чем вычищать эти авгиевы конюшни. На данный момент метатег Keywords не учитывается при индексации и не влияет на ранжирование. R.I.P.

Тег Keywords

Полезные технические метатеги

Технические метатеги влияют на продвижение сайта опосредованно. Они регулируют работу поисковых роботов и определяют отображение страницы на экране.

Robots

Метатег robots указывает поисковым алгоритмам, как индексировать страницу. Индексирование — это добавление документа в базу поисковой системы, откуда впоследствии страница будет попадать в поиск по релевантным запросам. По умолчанию робот заносит в индекс все тексты и линки на странице, но на этот процесс можно влиять, прописывая в метатеге директивы. Если вы по какой-то причине не хотите, чтобы текст или ссылки попали в индекс (например, в случае, когда это дубли страниц или «плохие» ссылки, из-за которых вам светит фильтр), то нужно прописать метатег robots.

Синтаксис

Robots помещается в контейнер HEAD:

<html>
<head>
...
<meta name="robots" content="noindex"/>
...
</head>
</html>

Здесь команда noindex запрещает индексацию страницы. Как прописать другие директивы в метатеге robots для индексации сайта? Вместо noindex подставляйте нужное значение:

  • all (none)— разрешено (запрещено) индексировать все и ходить по всем ссылкам;
  • index (noindex)— разрешена (запрещена) индексация страницы;
  • follow (nofollow)— разрешен (запрещен) переход по ссылкам на странице;
  • noarchive — в выдаче запрещено показывать ссылку на копию из кэша;
  • nosnippet— запрещено показывать в сниппете часть текста или видео;
  • notranslate— запрещено предлагать перевод страницы в выдаче;
  • noimageindex— запрещено индексировать картинки.

Можно давать команды конкретным поисковым алгоритмам, вписывая вместо "robots" "googlebot" или "yandex". Правда есть одно НО. Google считает содержание метатега robots просто добрыми советами и может их проигнорировать, Яндекс в этом плане более послушный и предсказуемый.

Тег viewport

Viewport

Если вы не знаете, как настроить корректное отображение сайта для мобильных устройств, метатег viewport может в этом помочь. Он задает видимую область страницы, ориентируясь на ширину экрана. С тегом viewport пользователю не нужно совершать лишних телодвижений, масштабировать изображение, пользоваться неудобной горизонтальной прокруткой.

Мобилопригодность сайта официально признана поисковиками важным фактором ранжирования, и метатег viewport стал маст хевом у seo-специалистов. Если страница не адаптирована, не ищите ее в топе.

Charset и Content-type

Эти теги защищают страницу от траблов с кодировкой. Все, наверное, сталкивались с проблемой, когда на экране вместо текста появляются странные кракозябры. Чтобы не получилось, как в шпионском романе, и буквы родного алфавита корректно отображались на сайте, нужно сделать метатеги Charset или Content-type и указать в них тип кодировки. Обычно используют общепринятую кодировку UTF-8.

Метатеги, регулирующие кодировку документа, никак не учитываются при ранжировании поисковиками, но все же их отсутствие может сыграть злую шутку в продвижении. Пользователь, пришедший на страницу и обалдевший от невероятной красоты кракозябр, быстро унесет ноги с вашего сайта. Это отказ, а поисковики страсть как не любят отказы, поэтому не пустят ваш битый ресурс в топ.

Refresh

Суть метатега Refresh в переадресации пользователя на другую страницу через заданный промежуток времени. Это может быть нужно:

  • при переезде сайта с домена на домен: посетитель заходит по ссылке на старый сайт, а его быстро перенаправляют на новый;
  • для перекидывания пользователя на другую страницу внутри сайта после совершения им какого-то действия;
  • при работах над обновлением ресурса для переадресации посетителя с 404 ошибки на готовый раздел.

Meta Refresh дискредитировал себя, т.к. с его помощью создавались черные дорвеи. Сейчас Google настоятельно не рекомендует использовать этот метатег для переадресации. Неповиновение грозит штрафными санкциями и потерей позиций в выдаче. Google советует использовать серверный 301-редирект. Яндекс не так категоричен и допускает корректное использование этого метатега в честных целях.

Идентифицируют автора текста или правообладателя. Их условно можно отнести к группе метатегов для верификации <google-site-verification> и <yandex-verification>, которые помогают подтвердить права собственности на сайт.

Все метатеги идентификации прописываются в контейнере HEAD и видны только роботам, которые на свое усмотрение могут подтянуть полезную информацию в сниппет:

<meta name="Author" content="Александр Сергеевич Пушкин"> — автор контента.

<meta name="Copyright" content="Пупкин Иван Иванович"> — правообладатель.

Поисковики любят авторские уникальные тексты, поэтому именные публикации и прописанный в метатеге автор добавляют странице позиции в выдаче. Чем известнее и авторитетнее имя, тем проще продвигается сайт.

Другие теги и атрибуты сайта

Теги H2

Теги иерархии H1 и H2–H6

Теги H1–H6 не относятся к meta, располагаются в разделе HTML-кода BODY и отображаются на странице в виде заголовков и подзаголовков текста. Они задают иерархию и логическую структуру документа, поэтому их применение крайне желательно, а наличие заголовка H1 обязательно. Теги иерархии делают чтение удобным для людей, улучшают поведенческие факторы. Поисковый бот тоже любит понятную логику и выше оценивает хорошо структурированные страницы.

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

Размечая структуру текста тегами, нужно не запутаться в иерархии. H1 в документе должен быть только один. Это главный заголовок, отличающийся от Title формулировкой, но сохраняющий самую суть содержания страницы.

Подзаголовки нижних уровней H2–H6 располагаются в строгой последовательности. Если вы прописываете один H2, то дальше должен быть хотя бы еще один заголовок второго уровня. Это же правило работает для всех остальных уровней.

<h1>Самый главный заголовок</h1>

<h2>Важный заголовок №1</h2>

<h3>Подзаголовок №1</h3>

<h3>Подзаголовок №2</h3>

<h2>Важный заголовок №2</h2>

Подзаголовки ниже третьего уровня встречаются очень редко, разве что в лонгридах со сложной структурой.

Canonical

Этот тег прописывается в разделе HEAD и показывает роботу, какую страницу считать канонической. Тег canonical полезен, когда один и тот же товар попадает в разные разделы магазина, и страница с ним дублируется на сайте с разными URL. Например:

  1. https://site.ru/razdel-1/tovar-014
  2. https://site.ru/razdel-2/tovar-014

Чтобы поисковик не влепил санкции за дубли, в коде обеих страниц прописывается URL того документа, который нужно считать каноном, например:

<link rel="canonical" href="https://site.ru/razdel-1/tovar-014" />

Next и Previous

Атрибуты rel="prev/next" в теге <link> — один из способов реализовать пагинацию (постраничную навигацию), когда из огромного количества данных нужно собрать несколько страниц, соответствующих запросу. Например, нормальная работа интернет-магазинов невозможна без пагинации: мы выбираем категорию товаров и видим на экране многостраничный каталог. Такие сборники пронумерованных тематических страниц удобно пролистывать. Атрибуты next и prev сообщают поисковому боту, какая страница для текущей будет предыдущей, а какая пойдет за ней:

<link rel="prev" href="https://site.ru/page/1/" />

<link rel="next" href="https://site.ru/page/3/" />

По последним данным ни Яндекс, ни Google уже не поддерживают такую разметку пагинации, но поисковики помельче все еще учитывают атрибуты next и prev при индексации.

Как и куда добавить метатеги на сайте

В HTML-коде все метатеги размещаются в начальном контейнере <head> вместе со стилями, ссылками, скриптами документа. Очередность, определяющая, как писать метатеги для сайта в коде, не имеет значения. Количество тегов группы meta тоже не регламентируется. Единственное, что важно помнить, для каждой страницы они прописываются отдельно.

Куда поместить метатеги

Как правильно писать метатеги для сайта? Лучше, когда в код их добавляет web-мастер, а содержимое продумывает seo-специалист. Существует два способа прописать нужные теги: ручной и автоматический.

Когда сайт только создается, или это небольшой ресурс с обозримым количеством страниц, добавить вручную несколько строчек кода несложно. Но как добавить сотни метатегов на страницы большого интернет-магазина или огромного информационного ресурса? Разработчики CMS (систем управления сайтом) предлагают свои инструменты автоматизации разной степени понятности и удобства.

Для автоматического прописывания метатегов на WordPress нужно установить плагин Yoast SEO или All in One SEO Pack. У 1С-Битрикс и Joomla есть собственные SEO-модули с доступом к управлению метатегами.

Как проверить метатеги на странице

Чтобы посмотреть, как прописаны метатеги на сайте и проверить их корректность, нужно или нажать правой кнопкой мыши на любую область страницы и перейти по вкладке «Исходный код страницы» или нажать Ctrl+U. В открывшемся окне с кодом нужно найти контейнер <head> и в его границах искать знакомые названия метатегов.

Видео про метатеги

Специально для новичков в SEO мы подготовили видео-инструкцию по проверке метатегов сайта. В ней подробно рассказываем:

  • Что такое дубли title, как их найти и исправить. Каков принцип грамотного написания этого метатега.
  • Что такое метатег description, как проверить наличие на сайте дублей, какое описание в него добавлять.
  • Есть ли в разделах метатеги Keywords, и почему они не нужны.
  • Проверяем наличие на сайте заголовков H1, сколько их должно быть на одной странице, как уникализировать.
  • Как с помощью краулинговых программ Screaming FROG и Site Analyzer собрать параметры страниц.

Выводы

Мы разобрались, какие метатеги нужно прописывать на сайт для его грамотного продвижения. Часть из них непосредственно влияет на оптимизацию и позиции в выдаче, часть — косвенно, улучшая поведенческие факторы и привлекательность страницы для пользователей. Но это только одна из многочисленных граней SEO. Главное, это качество сайта в целом. Код, юзабилити, контент, навигация — если человеку и поисковой системе понравится взаимодействие с вашим ресурсом, то он выйдет в топ, если нет, не помогут никакие метатеги.

Обсудим сотрудничество?

Какие задачи нужно решить:
Разработка сайта / интернет-магазина
Продвижение (SEO, Директ и т.п.)
Контент-маркетинг
Поддержка сайта (информационная, техническая)
Аудит сайта / интернет-магазина
Консультация
Задать вопрос специалисту
Заполните форму и мы вам быстро ответим

Комментарии

15.02.2021 в 21:16 | Alex

Здравствуйте. Очень содержательная статья. Оказывается очень много тегов которые надо контролировать. К сожалению не нашел сервиса который бы проанализировал сайт и подсказал бы все нюансы этих тегов. А в плане сео продвижения важны ли все эти теги перечисленные в обзоре или достаточно ограничится базовыми? Поделюсь своим опытом. Беру 20-50 популярных страниц своего сайта. И на каждой странице проверяю теги. Возможные ошибки в главных тегах. Например, Title, H1, META (discription) должны быть разные. Смотрю что бы размер этих тегов был оптимальный. На картинках и внутренних ссылках были title. И еще разные проверки. Делаю все это через сервис spage.me.Точнее Spage подсказывает какие у меня ошибки в тегах (длина тега, его отсутствие и др.). Причем работаю прямо на странице своего сайта, что очень удобно. Плюс к этому смотрю статистику этой же страницы, поведенческие факторы, создаю тизеры для внутренней перелинковки и еще там много функций. Посоветуйте хорошую систему для проверки тегов.

Комментировать
09.02.2022 в 15:17 | Гость

Отличная статья! Благодарю!

Комментировать

Добавить комментарий

* Поля, обязательные для заполнения
Добавляйся в наши социальны сети:
Каждый день интересные материалы про маркетинг и не только.

Провести бесплатный SEO-аудит вашего сайта?

Провести бесплатный SEO-аудит вашего сайта?

Хочу бесплатный аудит
Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
Form
X
Хочу быть автором