Метатеги (от англ. meta tags) — элементы HTML-кода, которые сообщают поисковому роботу и браузеру дополнительные данные о документе: описание страницы, ключевые слова, команды для индексирования, авторство, прочую служебную информацию. Какой-либо внятной классификации метатегов не существует — любой web-мастер может придумать оригинальный элемент и прописать его в коде. Но язык HTML за 30 лет своего существования все же оброс устоявшимися метатегами, которые употребляются чаще других и одинаково понимаются всеми алгоритмами. Такие универсальные элементы кода могут влиять на продвижение сайта, поэтому представляют интерес для сеошников.
В этой статье мы расскажем, какие html-теги полезны при продвижении, как грамотно прописывать их в документе и как проверить метатеги на сайте.
Правильные метатеги для SEO
Метатеги напрямую не влияют на работу сайта. В принципе, их можно игнорировать — никакой катастрофы не случится кроме того, что ваш ресурс будет болтаться где-то на задворках мироздания. Если ваша цель — десятка топа Google или Яндекса, то правильное заполнение Title и Description становится обязательной частью работы над продвижением, особенно по низкочастотным запросам. Тем более, эти два тега, в отличие от других, видят не только поисковые роботы, но и пользователи на странице выдачи.
Как правильно писать мета теги для продвижения сайта? У каждого элемента кода, влияющего на SEO, есть свои особенности оформления, но, прежде чем их разбирать, выделим общие правила работы с семантикой:
- Вписываем ключи по правилам русского языка. И поисковики, и живые люди болезненно реагируют на конструкции типа «флаер печать офсет цена».
- Не спамим ключами.
- Главный ключ ставим в начало фразы, там он имеет наибольший вес.
- Не дублируем элементы: все метатеги на страницах сайта должны быть уникальными.
Title
В SEO тег <title> играет первостепенную роль. Title — это заголовок страницы, который пользователь видит:
- на странице выдачи — как первую строку сниппета рядом с фавиконом (картинкой-символом сайта);
- в названии вкладки в браузере.
Это крючок с приманкой, на которую должен клюнуть пользователь. Если тайтл зацепил, то человек гарантированно перейдет по ссылке на ваш сайт. Но при этом заголовок должен полностью соответствовать содержанию страницы и быть понятным для людей и робота, который по тайтлу определяет релевантность запросу.
Синтаксис
Строго говоря, 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 помещается в контейнер 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.
Полезные технические метатеги
Технические метатеги влияют на продвижение сайта опосредованно. Они регулируют работу поисковых роботов и определяют отображение страницы на экране.
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 стал маст хевом у seo-специалистов. Если страница не адаптирована, не ищите ее в топе.
Charset и Content-type
Эти теги защищают страницу от траблов с кодировкой. Все, наверное, сталкивались с проблемой, когда на экране вместо текста появляются странные кракозябры. Чтобы не получилось, как в шпионском романе, и буквы родного алфавита корректно отображались на сайте, нужно сделать метатеги Charset или Content-type и указать в них тип кодировки. Обычно используют общепринятую кодировку UTF-8.
Метатеги, регулирующие кодировку документа, никак не учитываются при ранжировании поисковиками, но все же их отсутствие может сыграть злую шутку в продвижении. Пользователь, пришедший на страницу и обалдевший от невероятной красоты кракозябр, быстро унесет ноги с вашего сайта. Это отказ, а поисковики страсть как не любят отказы, поэтому не пустят ваш битый ресурс в топ.
Refresh
Суть метатега Refresh в переадресации пользователя на другую страницу через заданный промежуток времени. Это может быть нужно:
- при переезде сайта с домена на домен: посетитель заходит по ссылке на старый сайт, а его быстро перенаправляют на новый;
- для перекидывания пользователя на другую страницу внутри сайта после совершения им какого-то действия;
- при работах над обновлением ресурса для переадресации посетителя с 404 ошибки на готовый раздел.
Meta Refresh дискредитировал себя, т.к. с его помощью создавались черные дорвеи. Сейчас Google настоятельно не рекомендует использовать этот метатег для переадресации. Неповиновение грозит штрафными санкциями и потерей позиций в выдаче. Google советует использовать серверный 301-редирект. Яндекс не так категоричен и допускает корректное использование этого метатега в честных целях.
Author и Copyright
Идентифицируют автора текста или правообладателя. Их условно можно отнести к группе метатегов для верификации <google-site-verification> и <yandex-verification>, которые помогают подтвердить права собственности на сайт.
Все метатеги идентификации прописываются в контейнере HEAD и видны только роботам, которые на свое усмотрение могут подтянуть полезную информацию в сниппет:
<meta name="Author" content="Александр Сергеевич Пушкин"> — автор контента.
<meta name="Copyright" content="Пупкин Иван Иванович"> — правообладатель.
Поисковики любят авторские уникальные тексты, поэтому именные публикации и прописанный в метатеге автор добавляют странице позиции в выдаче. Чем известнее и авторитетнее имя, тем проще продвигается сайт.
Другие теги и атрибуты сайта
Теги иерархии 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. Например:
- https://site.ru/razdel-1/tovar-014
- 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. Главное, это качество сайта в целом. Код, юзабилити, контент, навигация — если человеку и поисковой системе понравится взаимодействие с вашим ресурсом, то он выйдет в топ, если нет, не помогут никакие метатеги.
Здравствуйте. Очень содержательная статья. Оказывается очень много тегов которые надо контролировать. К сожалению не нашел сервиса который бы проанализировал сайт и подсказал бы все нюансы этих тегов. А в плане сео продвижения важны ли все эти теги перечисленные в обзоре или достаточно ограничится базовыми? Поделюсь своим опытом. Беру 20-50 популярных страниц своего сайта. И на каждой странице проверяю теги. Возможные ошибки в главных тегах. Например, Title, H1, META (discription) должны быть разные. Смотрю что бы размер этих тегов был оптимальный. На картинках и внутренних ссылках были title. И еще разные проверки. Делаю все это через сервис spage.me.Точнее Spage подсказывает какие у меня ошибки в тегах (длина тега, его отсутствие и др.). Причем работаю прямо на странице своего сайта, что очень удобно. Плюс к этому смотрю статистику этой же страницы, поведенческие факторы, создаю тизеры для внутренней перелинковки и еще там много функций. Посоветуйте хорошую систему для проверки тегов.
Отличная статья! Благодарю!