Сайтов становится все больше, конкуренция за внимание пользователей растет, и владельцам веб-ресурсов приходится с утроенной силой бороться за трафик. Яндекс и Google тоже не стремятся облегчить жизнь тем, кто хочет оказаться в топе выдачи. SEO-специалисты используют все возможные инструменты, чтобы работы по продвижению сайта приводили к нужному результату. Особого внимания заслуживает оптимизация мета-тегов. О ней-то и пойдет речь в этой статье.
Мета-теги — что это вообще такое
Для начала разберемся, что означает этот термин. Мета-теги, которые также можно называть «метатегами», «метаданными» или metatags, — это HTML- или XTML-теги в коде веб-страницы. Для пользователей такие атрибуты остаются невидимыми, а вот поисковикам они сообщают важную информацию. Данные, которые мета-теги передают Яндексу и Google, играет далеко не последнюю роль в продвижении веб-ресурса.
Какие функции выполняют мета-теги
Скептики сейчас могут нахмуриться и сказать, что от мета-тегов в 2023 году уже практически ничего не зависит. Мы придерживаемся другого мнения. Поисковые системы по-прежнему предпочитают сайты с корректно заполненными мета-тегами.
Во-первых, метаданные способствуют продвижению веб-ресурса по ключевым словам и фразам, наиболее релевантным запросам целевой аудитории. Именно мета-теги повышают информативность описания страниц. Благодаря этому пользователи видят в выдаче то, что хотят найти.
Во-вторых, мета-теги систематизируют данные о странице. Это способствует корректной настройке индексации, что важно для СЕО.
Какими должны быть правильные мета-теги
Ответить на такой вопрос коротко не получится при всем желании. Чтобы правильно писать мета-теги, нужно учитывать:
- требования, которые поисковики предъявляют к тегам;
- правила написания мета-тегов в коде сайта;
- примеры корректного заполнения тегов.
Отметим, что в большинстве CMS и конструкторов сайтов типа Flexbe или Tilda предусмотрены поля для заполнения мета-тегов. Прописывать специальные элементы в самом HTML-коде не нужно — все уже есть в шаблоне. Важно указать содержание мета-тега или выбрать значение — index/noindex, follow/nofollow.
Теперь перейдем к тому, ради чего мы создали эту статью, т. е. к ответу на вопрос: «Как работать с мета-тегами в 2023 году?». Начнем с мета-тегов для текстового контента.
*Алло, Галочка, ты сейчас умрешь. Потрясающая новость! Рубиксы вещают гайд!
Title (Тайтл)
Это король мета-тегов. Он содержится в верхней части HTML, внутри контейнера <head>...</head>. Тайтл больше всего влияет на продвижение веб-ресурса по ключевым словам. Как правило, текст мета-тега Title попадает в заголовок сниппета, т. е. в «кусочек» страницы, который пользователи видят в результатах выдачи. Можно провести такую аналогию: Тайтл — это как название главы в книге. Мета-тег должен быть полезен и для поисковых роботов, и для людей.
Тайтл во многом определяет кликабельность сниппета, который позволяет пользователю понять, стоит ли переходить на конкретный сайт.
Каждый СЕО-специалист может по-своему ответить на вопрос о том, как заполнять Title. Мы придерживаемся мнения, что Тайтл не должен быть слишком длинным. Здесь нужно отметить, что сегодня Яндекс и Google уже не так тщательно анализируют метаданные. В 2023 году заголовки и описания в сниппетах генерируются динамически. Google вообще изменяет более 60% Тайтлов. Как правило, поисковик переписывает слишком длинные или слишком короткие мета-теги. Google также не любит Тайтлы с квадратными либо круглыми скобками, разделителями типа дефиса или вертикальной черты, повторяющимися ключевыми словами.
Хороший Тайтл должен:
- Быть уникальным. Это правило действует для всех страниц сайта. Кроме того, Тайтл не должен повторять мета-теги с других веб-ресурсов.
- Отражать содержание страницы. Задача Title — захватить внимание пользователя и показать ему, что здесь он найдет нужную информацию.
- Быть лаконичным. Оптимальная длина мета-тега — 50-70 символов с пробелами. Не стоит делать Тайтл слишком большим, иначе в сниппете появится многоточие и займет дополнительное место в заголовке.
- Содержать ключевые слова. Их не должно быть слишком много — достаточно одного-трех. Самые важные ключи лучше поместить в начало мета-тега.
- Отличаться от H1. У Тайтла и H1 разные задачи. С помощью Title можно оформить заголовок для сниппета, а H1 нужен для заголовка страницы.
- Быть грамотно написанным. Казалось бы, это очевидно, но Title необходимо составить в соответствии с правилами русского языка.
- Включать название города, в котором продвигается товар или услуга. Это небольшой бонус, который часто бывает полезным. Например, если у компании нет представительства в конкретном городе, а привлечь аудиторию нужно, такой прием может сработать.
Еще один важный момент — использование в Тайтле спецсимволов типа / или + или знаков препинания. Одни специалисты утверждают, что от них нужно отказаться. Дело в том, что спецсимволы и знаки препинания нарушают последовательность ключевых слов. Другие SEO-специалисты не так пессимистичны. По их мнению, в спецсимволах и знаках препинания нет ничего страшного, если не превышать рекомендуемый размер Тайтла. Мы же рекомендуем использовать основные ключи до слеша, запятой и т. д.
Примеры корректного заполнения Title:
- <title>Купить цветы в Челябинске, цветочный салон Лютики-ромашки</title>.
- <title>Новости о нас — Компания Строим Дом</title>.
Description (Дескрипшн)
Этот мета-тег используется для описания содержимого страниц. Дескрипшн позволяет поисковым роботам понять, какой перед ними контент. Мета-тег располагается внутри контейнера <head>...</head>. Description не влияет на ранжирование (по крайней мере, в этом уверяют сотрудники Google), но от него во многом зависит кликабельность сниппета. Здесь нужно сделать отступление. В идеале правильное оформление Дескрипшна помогает привлекать трафик. На практике же сниппет может создаваться как на базе Description, так и на основе любого текстового фрагмента на странице. Результат зависит от решения Яндекса и Google. Если алгоритмы поисковых систем решат, что описание страницы в мета-теге недостаточно информативно, текст для сниппета будет сгенерирован автоматически.
Корректный Description должен:
- Быть достаточно лаконичным. Оптимальная длина мета-тега составляет примерно 160 символов с пробелами для Яндекса и около 150 знаков для Google.
- Содержать ключевые слова. Это важный момент при написании мета-тега. Главное, чтобы использование ключей было максимально органичным. Рекомендуем поместить их в начало Дескрипшна. Кроме того, советуем избегать переспама. Если написать в мета-теге слишком много ключевых слов, он будет выглядеть нарочито «сеошным».
- Быть релевантным пользовательскому запросу. Нужно сделать так, чтобы Description соответствовал содержимому страницы. Если пользователь видит в сниппете одно, а на сайте другое, разочарования не избежать.
- Включать призыв к действию. Задача мета-тега — немного подтолкнуть читателя. Можно смело пользоваться такими формулировками, как «Узнать больше», «Открыть», «Увидеть» и т. д.
Кстати, в мета-тег Дескрипшн можно добавлять эмодзи, если есть такая необходимость. Длина Description в 150–160 символов легко это позволяет. Использование графических элементов помогает сделать сниппет более привлекательным и кликабельным. Здесь стоит помнить о чувстве меры: если эмодзи будут попадаться через каждое слово, это вряд ли кому-то понравится.
Приведем примеры корректного заполнения Description. Обратите внимание — мы выделили ключи жирным шрифтом:
- <meta name="description" content="Элитная косметика: широкий ассортимент уходовых средств по низким ценам. Заказать косметику с доставкой по РФ можно в интернет-магазине Pretty Girl" />.
- <meta name="description" content="Мета-тег Description используется для описания содержимого страниц в сниппетах поисковых систем. Рассказываем, как корректно заполнить Дескрипшн" />.
Robots (Роботс)
Еще один мета-тег из контейнера <head>...</head>. Robots указывает поисковым роботам, что им нужно делать со страницей. Во-первых, мета-тег запрещает либо разрешает индексацию. Во-вторых, от Robots зависит, можно ли переходить по ссылкам на странице или нет.
Примеры корректного заполнения мета-тега Роботс:
- <meta name="robots" content="index, follow" />. Такой мета-тег разрешает индексацию и переход по ссылкам на странице.
- <meta name="robots" content="noindex, nofollow" />. В таком случае Роботс запрещает индексировать страницу и переходить по размещенным на ней ссылкам. Иногда используется альтернативный вариант — <meta name="robots" content="none" />.
- <meta name="robots" content="noindex, follow" />. Здесь мета-тег запрещает индексировать страницу, но разрешает переходить по размещенным на ней ссылкам.
- <meta name="robots" content="noarchive" />. При использовании такого мета-тега в результатах поиска не отображается ссылка на сохраненную копию страницы.
- <meta name="robots" content="noyaca" />. Такой мета-тег запрещает использовать описание из Яндекс.Каталога для сниппета.
Иногда возникает необходимость открыть страницу для роботов Яндекса, а для краулеров Google — запретить, или наоборот. В таком случае нужно добавить в мета-тег название поисковой системы. Это можно сделать так:
- <meta name="yandex" content="noindex" /> для Яндекса.
- <meta name="google" content="noindex" /> для Google.
Keywords (Кейвордс)
Этот мета-тег также находится в контейнере <head>...</head>. В прошлом в Кейвордс нужно было добавлять ключи, которые соответствуют содержимому страницы. Многие SEO-специалисты считают, что Keywords давно потерял актуальность, и ссылаются на важных людей из Google и Яндекса. Разберемся, что происходит на самом деле. Сотрудники Google официально заявляют, что метатег Кейвордс никак не влияет на эффективность поисковой оптимизации. Специалисты из Яндекса не так категоричны. Они утверждают, что Keywords может влиять на продвижение. Сделаем вывод, что принципиального значения мета-тег не имеет, но заполнить его можно. Главное — стараться не использовать союзы, предлоги и междометия. Количество ключевых слов ограничено — их должно быть не более 5–6.
Если же желания тратить время на Кейвордс нет, можно просто удалить его из кода страницы, чтобы мета-тег вообще не выводился.
Пример корректного заполнения Keywords:
- <meta name="keywords" content="купить мебель, мебель челябинск, недорого" />.
*Где мои ключи?!
Мета-тег Canonical, атрибуты Next и Previous
Каноникал — еще один «обитатель» контейнера <head>...</head>. Мета-тег представляет собой канонический адрес веб-страницы. Он подсказывает Яндексу и Google, какую ссылку из нескольких дубликатов нужно индексировать в первую очередь. Обычно Canonical используется для страниц пагинации. Также он подходит для карточек товаров, которые дублируются по разным УРЛам.
Как прописать мета-тег:
- <link rel="canonical" href="http://sitename.ru/pagename" />.
Атрибут href указывает, какая страница должна быть канонической. Разберемся, как это работает. Например, в каталоге есть товар, который представлен сразу в двух категориях. Перед нами две ссылки:
- https://sitename.ru/category-5/tovar-777;
- https://sitename.ru/category-11/tovar-777/.
Яндекс и Google могут посчитать такие ссылки дублями. Чтобы этого не произошло, одну из страниц нужно признать канонической.
Атрибуты Next и Previous предназначены для страниц с пагинацией. Речь идет, например, о категории, где размещены ссылки на страницы с разными товарами.
Как прописать мета-теги с атрибутами Next и Previous:
- <link rel="prev" href="http://site.ru/page/7/" />.
- <link rel="next" href="http://site.ru/page/8/" />.
Отметим, что атрибуты Next и Previous скоро могут уйти в прошлое. По крайней мере, Google их уже не поддерживает.
Viewport (Вьюпорт)
Этот мета-тег также находится в контейнере <head>...</head>. Актуальность Viewport повысилась из-за увеличения доли мобильного трафика. При использовании адаптивной верстки мета-тег помогает «подстраивать» страницы под размеры разных устройств: компьютеров, планшетов и смартфонов.
Как выглядит мета-тег Viewport:
- <meta name="viewport" content="width=device-width, initial-scale=1" />.
Здесь значение width=device-width задает ширину окна просмотра к экрану конкретного девайса, а благодаря initial-scale=1 можно обеспечить соотношение 1 к 1 между пикселями CSS и пикселями самого устройства.
Если Viewport не прописан, страница на телефонах и планшетах будет отображаться в таком же виде, как на экране ПК. Если нужно оценить, насколько хорошо сайт адаптирован для просмотра на мобильных устройствах, важно убедиться, что мета-тег прописан как для Яндекса, так и для Google.
Generator (Генератор)
И снова перед нами мета-тег из контейнера <head">...</head>. Generator «вшивается» в CMS, чтобы IT-специалисты могли определять, на каком движке работает сайт.
Как прописать мета-тег Генератор:
- <meta name="generator" content="WordPress 4.6.6" />.
Author и Copyright
Эти мета-теги из контейнера <head>...</head>. Они позволяют получить информацию о владельце, или авторе, сайта.
Как прописать мета-теги Author и Copyright:
- <meta name="author" content="Василий Великолепный" />.
- <meta name="copyright" lang="ru" content="ЗАО Корпорация" />.
Refresh (Рефреш)
Такой мета-тег предназначен для автоматического обновления страницы либо переадресации пользователя на другой раздел/ресурс. Рефреш помогает сократить количество отказов и повысить лояльность посетителей. Использование мета-тега актуально при обновлении сайта. Например, если посетитель попадает на удаленную страницу, то он автоматически перенаправляется в другой раздел, а не ошибку 404. В мета-теге Рефреш можно указать время, когда происходит обновление или переадресация.
Как прописать Refresh:
- <meta refresh="5;https://url-to-redirect">.
Шаблоны для заполнения мета-тегов Title, Description и Keywords
Мета-теги должны быть у каждой веб-страницы. Если речь идет о совсем маленьком сайте, то можно потратить время и все заполнить вручную. Другое дело — многостраничный ресурс со сложной структурой, например, интернет-магазин или информационный портал. СЕО-специалисту понадобятся недели или даже месяцы, чтобы корректно заполнить мета-теги. Кроме того, тратить время придется и при появлении новых товаров или публикаций.
Оптимальным решением будет настройка шаблонов для автоматического заполнения мета-тегов.
Разберемся, как это работает, на примере интернет-магазина зоотоваров «Котейка & Собакен» (название придумали сами). Можно написать короткое ТЗ:
- Подставлять мета-теги, если они прописаны для товарных карточек.
- Если теги не прописаны, задать их автоматическую генерацию по шаблону.
Title для карточек:
- [Заголовок H1] — купить в Челябинске по цене [Цена] руб. — Котейка & Собакен.
Description для карточек:
- Вы можете купить [Заголовок H1] в интернет-магазине Котейка & Собакен в Челябинске по доступной цене. Бесплатная доставка по городу!
Если практика показывает, что определенные карточки плохо индексируются, для них можно написать отдельные мета-теги.
Настройка шаблонов позволяет оптимизировать работу SEO-специалистов, чтобы им не приходилось вручную заполнять метаданные. В большинстве CMS, на базе которых работают интернет-магазины и информационные порталы, есть раздел с настройками для продвижения. Остается только составить универсальный шаблон, чтобы экономить время на мета-тегах. При необходимости данные на отдельных страницах можно поправить вручную. Кстати, поговорим о том, как добавлять мета-теги в популярных движках.
Заполнение мета-тегов на различных CMS
Расскажем о движках, с которыми сами работаем.
Начнем с WordPress. Здесь достаточно воспользоваться плагином Yoast SEO. Мы уже рассказывали о том, какой это замечательный многофункциональный модуль.
Что касается нашей любимой CMS «1С-Битрикс», то здесь никакие дополнительные плагины не потребуются. Достаточно зайти в панель администратора, выбрать раздел SEO и заполнить поля в «Настройках SEO информации».
Мы разобрались, как заполнять мета-теги. Теперь поговорим о том, как работать с атрибутами для изображений. Да-да, картинки тоже влияют на продвижение сайта.
*Поисковые работы, когда все мета-теги заполнены корректно
Title для изображений
Начнем с главного: мета-тег Title и атрибут Title — это разные вещи. В случае с картинками Тайтл играет роль названия файлов. Отметим, что пользователь не видит Title, пока не наведет на изображение курсор.
Качественный Title для изображений должен:
- Быть информативным. Задача Тайтла — точно описать то, что изображено на картинке.
- Отличаться от Альта для изображений. Это позволит избежать дублирования. Об атрибуте Alt для картинок мы расскажем чуть позже.
- Быть лаконичным. Рекомендуем избегать переспама из-за дополнительных слов.
Небольшой секрет: при желании можно вообще не заполнять Тайтл, но если хочется, то это нужно сделать следующим образом:
<img src="/images/futbolka.jpg" alt="Футболка белая х/б размер L по цене 500 руб." title="Футболка белая х/б"/>.
Alt для изображений
Если Тайтл заполняется для людей, т. е. пользователей, то Альт «заточен» под требования поисковых систем. Атрибут Alt делает сайт более удобным и влияет на то, индексируются ли изображения Яндексом и Google.
С помощью Альта можно решить сразу несколько задач:
- Помочь слабовидящим посетителям сайта понять, что же изображено на картинке. Люди, которые не могут самостоятельно читать текст, используют скринридеры. Это специальные программы для преобразования материалов в звуковой формат. Если скринридер «натыкается» на графический файл с незаполненным атрибутом Alt, слабовидящий пользователь не сможет узнать, что изображено на картинке.
- «Объяснить» поисковым ботам содержание картинки. Краулеры Яндекса и Google постоянно улучшают свои способности, в том числе в чтении, обработке и анализе контента. Боты легко отличают заспамленные страницы от действительно полезных. Задача Альта — донести до краулеров, что конкретно изображено на картинке, почему файл размещен именно в этом блоке и т. д. Если содержание атрибута соотносится с текстовым контентом, поисковые роботы обязательно оценят Alt.
- Донести до пользователя суть изображения, если картинка не загружается. Из-за медленного интернет-соединения или сбоев на сервере фото могут не отображаться. В таких случаях грамотно заполненный атрибут Alt позволяет показать пользователю текст, а не просто пустое поле. Кроме того, Альт выводится, если в браузере в целях экономии трафика отключено отображение картинок.
Пример корректного заполнения атрибута Alt:
<img src="https://storage.nic.ru/ru/images/png/1.kotenok.png" alt="Белый котенок нежится на солнышке" />.
Итак, с мета-тегами и атрибутами мы разобрались, и пора заканчивать? Нет, ведь остаются еще HTML-заголовки. Важно знать, как правильно работать с этими элементами, чтобы эффективно оптимизировать страницы.
HTML-заголовки
Поговорим о том, для чего нужны заголовки и почему важно не путать их с мета-тегами.
Заголовок H1
Любой, даже начинающий SEO-специалист, знает, что путать мета-тег Title с заголовком H1 строго запрещено. Тайтл помогает сделать привлекательным сниппет и «увести» пользователя из результатов выдачи прямо на сайт. А на самой странице можно увидеть уже заголовок H1, который идет первым после мета-тега.
Вот основные правила работы с Title и H1:
- В мета-теге Тайтл рекомендуется использовать среднечастотные запросы, а в H1 — высокочастотные. Это помогает избежать переспама.
- Тайтл может содержать больше символов, чем H1. Это позволяет добавить в мета-тег важные запросы и улучшить результаты выдачи.
- На одной странице можно использовать только один Тайтл и один H1.
- Главное ключевое слово стоит добавить и в Title, и в H1, но только один раз.
Вот пример, как прописать заголовок H1 в HTML:
<h1>Главный заголовок</h1>.
Отметим, что в различных CMS заголовок H1 чаще всего уже встроен разработчиками.
Заголовки H2 и H3
H2 и H3 — часть иерархии HTML-заголовков. Они позволяют логически и структурно организовать содержимое страницы.
Заголовок H2 используется для оформления разделов или подразделов веб-страниц. Прописать его можно так:
<h2>2 Второй заголовок</h2>.
Заголовок H3 меньше, чем H2. Этот элемент помогает разделить контент на смысловые фрагменты и создать четкую структуру текста, которая так нравится поисковым системам. H3 помогает органично использовать вариации главного ключевого слова или фразы. Кстати, не стоит перебарщивать с этим заголовком — он нужен только для самых важных абзацев.
Как прописать H3:
<h3>3 Заголовок</h3>.
Такой же синтаксис используется и для заголовков H4, H5 и H6 — меняются только цифры. Коротко скажем и об этих элементах.
Заголовки H4, H5 и H6
«Младшие братья» H2 и H3 должны помнить об иерархии. При использовании заголовков важна последовательность. Если в тексте есть блок с H2 и пунктами под H3 и H4, то не стоит добавлять абзац, в котором есть H4, но нет H3.
При использовании заголовков ниже первого уровня нужно помнить об умеренности. Оптимальная частота — каждые 2–3 абзаца, или 9–12 предложений. Если текст буквально «нафарширован» заголовками, поисковые системы могут занизить позиции сайта в выдаче. Конечно, мы указали примерные интервалы. Отклонения допустимы, если получается соблюсти пропорции для текста в целом.
Правильное использование заголовков — это во многом проявление заботы о посетителях сайта. Например, на ресурсе появляется статья. В ее начале стоит разместить содержание, в котором заголовки оформлены в виде ссылок. Тогда пользователям будет намного удобнее знакомиться с материалом и переходить к интересующим блокам.
Как проверить мета-теги на любом сайте
Этот раздел будет полезен и владельцам собственных веб-ресурсов, и начинающим SEO-специалистам, и копирайтерам. Например, если у вас есть свой сайт, продвижением которого занимается сторонний подрядчик, вы сможете проверить качество услуги. Незаполненные мета-теги или их отсутствие — веская причина найти другое агентство или фрилансера. Что касается SEO-специалистов и копирайтеров, то умение работать с метаданными позволит оценивать решения конкурентов и забирать удачные примеры себе в копилку. Кроме того, можно собирать больше ключей с других сайтов и эффективнее продвигать собственные ресурсы.
Проверка мета-тегов на своем сайте через Яндекс.Вебмастер
Нужно зайти в Яндекс.Вебмастер, указать адрес ресурса и подтвердить свои права на владение им. Затем следует открыть раздел «Диагностика сайта» и выбрать вкладку «Возможные проблемы». Здесь можно посмотреть статистику по мета-тегам, в том числе увидеть страницы с незаполненными данными, дубликаты и т. д.
Узнать, что происходит у конкурентов, с помощью Яндекс.Вебмастера не получится. Однако есть другие способы. Например...
Изучение исходного кода страницы
Инструкция простая:
- Откройте нужную страницу.
- Кликните правой кнопкой мыши и выберите в появившемся окне «Просмотр кода страницы».
- Когда откроется новая вкладка, вызовите строку поиска — через Ctrl + F на Windows или Command + F на Mac.
- Забейте в поисковую строку интересующий мета-тег.
Просмотр сниппета страницы в выдаче
Здесь тоже нет ничего сложного:
- Зайдите на страницу и проанализируйте, по каким ключевым запросам она может продвигаться в поиске.
- Вбейте запрос в поисковую строку в Яндексе или Google.
- Среди результатов поиска найдите страницу и посмотрите на ее сниппет.
Использование расширений для браузера
Как правило, SEO-специалисты используют SEBear, Detailed SEO Extension и SEO PeekBar. Достаточно установить и закрепить на панели выбранное расширение. После этого его можно использовать на нужных страницах. Несколько кликов, и появляется информация о мета-тегах, структуре заголовков и т. д.
Использование сервисов для проверки мета-тегов, атрибутов и заголовков
Для проверки мета-тегов Title и Description можно использовать:
- involta.ru;
- page-speed.ru;
- web-tool.org;
- majento.ru.
Проверить мета-тег Alt можно с помощью инструмента sitechecker.pro.
Узнать, все ли в порядке с атрибутами для картинок, поможет сервис pr-cy.ru.
Проверить заголовки уровней H1–H6 можно с помощью SiteAnalyzer или Screaming Frog SEO Spider.
Перечисленные сервисы работают примерно по одному принципу: в одних программах нужно просто ввести домен сайта, а в других загрузить весь список страниц для анализа.
*Фотографируем человека, который теперь знает все о мета-тегах
Заключение
Грамотная работа с мета-тегами, атрибутами и заголовками — это не самая простая задача. Иногда даже веб-мастера нарушают рекомендации и совершают некорректные действия, из-за которых позиции сайта в выдаче могут пострадать. К счастью, всегда можно обратиться к тем, кто точно знает, что нужно делать.
![https://storage.nic.ru/ru/images/png/1.kotenok.png"](https://storage.nic.ru/ru/images/png/1.kotenok.png"){kind=link}