Метатеги страниц сайта: title, description, keywords, robots и другие

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

Что такое метатеги

Метатегами называется часть HTML-разметки сайта, которую считывают поисковые алгоритмы для определения релевантности страниц. Косвенно влияют на продвижение в поисковой выдаче.

Метатеги можно условно поделить на два типа:

• SEO мета-теги — отвечают за отображение сайта в выдаче и ранжирование, некоторые из них видимы для пользователей;

• Технические — отвечают за настройку визуального отображения страницы и подсказки для ботов.

Title

Title – это заголовок страницы и первое, что видят пользователи в результатах выдачи. Задача заголовка — показать, что находится по ссылке, и мотивировать перейти.

Поисковые системы придают особое значение Title. От качества заголовка зависит его CTR (Click-through rate) — соотношение между увидевшими ссылку и перешедшими по ней пользователями. Этот показатель относится к поведенческим факторам, а они влияют на позиции в выдаче. Для поисковых ботов хорошо оптимизированный заголовок будет сигналом о релевантности страницы.

Исследование факторов ранжирования Лаборатории поисковой аналитики компании «Ашманов и партнеры» показало, что в Google видна сильная корреляция с попаданием в топ-30 для запроса в точной форме в title — это единственный тег, где важны ключевые слова и их количество.

Как заполнить тег Title

• Для каждой страницы — уникальный заголовок;

• Длина — 60-70 символов;

• Можно использовать символы: запятая, тире, двоеточие, квадратные скобки. Допустимы эмоджи. Их можно найти в каталоге символов Unicode;

• Ключевой запрос располагается в начале — поисковые роботы оценивают значимость слов слева направо, а пользователи видят Title в закладках браузера;

• Минимум местоимений и предлогов – используйте только при стилистической необходимости, в остальном они только занимают место;

• Заголовок должен быть написан для пользователя, на языке пользователя, а не поисковых систем.

Для коммерческой страницы можно составить Title по формуле:

Основной ключ (+ бренд) + хвост (+ дополнительный ключ) + коммерческая фраза + гео-привязка

Из чего состоит такой заголовок:

• Основной ключ — что предлагаете купить или заказать, например, «болгарка»;

• Если в магазине есть товары разных производителей, можно указать бренд: «болгарка Makita»;

• Хвост — здесь можно прописать дополнительные характеристики товара: «аккумуляторная»;

• Коммерческая фраза: купить, заказать, недорого, и другие, побуждающие к действию;

• Гео-привязка — регион, город, станция метро.

Что получилось: «Болгарка Makita аккумуляторная: купить в Казани».

В Title главной страницы магазина нужно написать, чем он торгует:

«Товары для дома и сада — купить в Новосибирске»

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

Андрей Прудко, директор студии интернет-маркетинга и веб-брендинга «Большая Буква»:

«Для наилучшего эффекта рекомендуется уникализировать Title и дополнять нужными ключами в рамках 12 слов — до 70 символов, допускается и более, но рекомендуется уложиться в указанные параметры.

Считаю, что для коммерческого проекта одной из лучших схем являются варианты (абстрактный пример):

Title: Купить стиральную машинку Аристон (Ariston) в магазине БольшаяСтирка
H1: Стиральные машинки Аристон (Ariston)

Либо

Title: Стиральные машинки Аристон (Ariston): купить в Москве, магазин БольшаяСтирка
H1: Стиральные машинки Аристон (Ariston)»

Типичные ошибки при заполнении Title:

• Повторяющиеся Title для разных страниц

Поисковые роботы увидят дубли, а пользователи просто запутаются;

• Нерелевантный контент

Информация в заголовке должна описывать контент на странице;

• Неточное, пространное описание

Чем быстрее пользователь увидит нужную ему информацию, тем с большей вероятностью он перейдет по ссылке;

• Название малоизвестной компании на первом месте в заголовке

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

• Переспам ключами

Поисковые роботы могут принять такой заголовок за спам, а для пользователей она не будет информативной. Заголовок должен выглядеть так, как люди пишут запросы;

• Указание региона

Указывать в Title название города имеет смысл только если вы продвигаетесь в конкретной местности, но и в этом случае название нужно добавлять после ключевых слов;

• Капслок

Капс может затруднить распознавание ключевых слов. Исключение составляют аббревиатуры: ООО, ПАО, ДУК.

Хорошо:

«Помощь в быстром оформлении визы, VISAGLOBAL»

Плохо:

«Помощь с визой Екатеринбург, оформление визы недорого, страховка»

Материал по теме: Кейс: добавили одно слово в заголовки — органический трафик вырос на 57%

Андрей Прудко:

«Если для вебмастера сложно создать уникальные Title для всех страниц сайта, то добавляйте брендовый запрос: название компании, сайта, магазина. Причем уникальные в рамках сайта: некоторые путают и стараются сделать уникальные по всей поисковой выдаче».

Description

Description — небольшой текст, размещенный под заголовком. Описывает суть контента на странице и более подробно раскрывает Title. На странице пользователи его не видят.

В коде размещается в теге < head >:

<head>
<meta name="description" content="Пример тега Description. До 150-170 символов, но для Яндекса можно больше.">
</head>

Как заполнить тег Description

• Description не нужно оставлять пустым, иначе поисковый робот подтянет какой-то фрагмент текста со страницы, и не всегда этот текст будет полезным и информативным;

• Description не должен дублировать Title;

• Ключевое слово нужно написать ближе к началу;

• Не импользуйте сразу много ключей;

• Длина 150-170 символов. Если написать больше, поисковые системы обрежут текст, и описание потеряет целостность. В Яндекс можно использовать около 300-350 символов за счет кнопки «Читать далее». При нажатии на нее появляется оставшийся фрагмент текста;

• Можно добавить текст, специальные символы и эмоджи.

В зависимости от типа ресурса меняются вопросы, на которые должен отвечать description:

• Информационные и новостные сайты — в Description можно описать ресурс в целом, вывести список разделов или последние новости;

• Корпоративные сайты. Цель Description для корпоративных сайтов — описать преимущества и деятельность компании.

• Для интернет-магазинов description описывается более детально. В описании должны присутствовать:

• Несколько ключевых слов. Это могут быть категории товаров, бренды, услуги;

• “Хвосты” – наиболее популярные слова используемые в связке с ключами;

• Коммерческие фразы «купить», «заказать», «цена», «доставка»;

• Географическая привязка — город, регион, если область работы компании ограничена. 

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

А здесь немного поменяли запрос:

В Яндекс и Google Description имеют два отличия — отображение и содержание.

В Яндексе сначала идет заголовок, потом ссылка и описание:

В Google сначала ссылка, а потом заголовок и списание:

В справке Google описано, как можно контролировать то, что отображается в сниппете с помощью тега robots:

• nosnippet — запрещает Google подтягивать в сниппет какой-то фрагмент страницы;

• max-snippet:[number] — задает максимальную длину описания в символах;

• data-nosnippet — запрещает показывать в выдаче содержимое тегов span, div и section.

Яндекс тоже позволяет убрать из сниппета контент страницы, для этого в том же теге robots нужно указать noindex для конкретного фрагмента. Еще можно отобразить дату публикации, в справке рекомендуют добавлять ее в URL — это особенно важно для новостных сайтов.

Заголовки H1-H6

H1-H6 – это части HTML кода, которые формируют иерархию в тексте.

Можно выделить три ступени:

• H1 – основной заголовок страницы. Он самый значимый в тексте, должен быть единственным и не повторяться;

• H2 – так обозначаются основные подзаголовки или разделы;

• H3-H6 – помогают структурировать контент из H2.

Они делают контент более удобным и понятным для пользователя. Для поисковых систем такая структура упрощает анализ информации.

Иногда H1или H2 роботы могут использовать вместо Title в выдаче, если они более релевантны запросу, чем сам Title, поэтому важно писать их человеческим языком.

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

Как оформить H1-H6

Главный заголовок для поисковых систем – Title, для пользователей – H1.

Его нужно гармонично выделить размером и стилем написания. Размер текста — 10-60 символов, включающих основной ключ страницы.

Проверить наличие и корректность тега можно в нашем сервисе проверки заголовков. Он покажет тег Н1, их количество на странице и другие теги, которые формируют структуру контента.

Для настройки внешнего вида и дизайна заголовков используют CSS — каскадные таблицы стилей. Вот некоторые из них:

• Font-size — размер;

• Font-weight — насыщенность шрифта;

• Font-family — семейство шрифтов;

• Color — цвет;

• Text-align — выравнивание текста;

• Margin — внешний отступ;

• Padding — внутренний отступ;

• Background-color — цвет фона.

Выглядит это так:

h1 {
font-size: 32px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #000000;
text-align: center;
margin: 10px;
padding: 10px;
background-color: #FFFFFF;
}

Ошибки в использовании H1-H6

• Ссылки в Н1 — поисковые боты сочтут это за манипуляцию ссылками;

• Отсутствие H1 — это основной заголовок, который отражает суть всей странице;

• Несколько H1 на странице, если это не лонгрид на 20-30 тысяч символов, состоящий из нескольких равноценных частей;

• Несоответствие иерархии — важно соблюдать логику и порядок иерархии заголовков, например, под H2 не должно быть сразу H4;

• Избыточное форматирование — заголовки должны соответствовать общему стилю страницы и дополнять ее дизайн;

• Использование крупного жирного шрифта вместо тегов заголовков;

• Неинформативность – заголовки должны быть емкими и передавать содержание последующего текста;

• Избыточное количество ключевых слов – вставляйте их естественно;

• Слишком длинный или слишком короткий заголовок;

• Слишком большое количество заголовков — избыток H2-H6 поисковый робот может посчитать спамом.

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

Заголовки для разных типов сайтов

Главная задача заголовков — упрощение коммуникации пользователя и поисковых систем с ресурсом. В структуре блогов, интернет-магазинов и новостных порталов работа H1-H6 отличается:

• Блоги

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

• Интернет-магазины

На страницах каталога обычно используют H1-H3. В первом пишут название товара, остальные выделяют блоки вроде «Доставка» или «Описание»;

• Новостные порталы

Заголовки нужны для того же, что и в блогах, но в коротких новостных заметках часто хватает Н1.

Часто можно встретить советы по использованию LSI ключей в заголовках H2-H6.

В 2019 году MOZ выпустили статью, в которой рассказали о пользе LSI-ключей.

В том же году Джон Мюллер написал в своем Twitter, что этих ключей как отдельного явления для Google не существует. В 2023 году он говорил то же самое:

Среди SEO-специалистов остались те, кто игнорирует теорию о пользе LSI-ключей и те, кто уверен, что их нужно использовать. От себя добавим, что при написании большой информативной статьи в любом случае вы используете «хвосты» запросов, потому что они и есть естественный текст. Намеренно подбирать их, возможно, нет смысла, но избегать тоже не стоит.

Как использовать Title, Description и H1 для SEO

Обобщим рекомендации по основным тегам:

1. Description, Title и H1 для главной страницы должны описывать суть всего сайта;
2. Для внутренней страницы нужно описывать контент, находящийся именно на этой странице;

3. Все страницы должны иметь уникальные метатеги;

4. Title, Description и H1 не должны быть одинаковыми;

5. Метатеги должны быть релевантны контенту. Это влияет на позиции и переходы из выдачи. Заголовки H1-H2 могут заменять Title, поэтому им тоже нужно уделять внимание в контексте ранжирования;

6. По мере изменений в контенте страницы метатеги нужно обновлять.

Keywords

Метатег keywords — тег для ключевых запросов, по которым поисковые боты понимают, о чем идет речь на странице.

Как это выглядит в коде:

Keywords вписывают через запятую в единственном числе и обязательно следят, чтобы они были релевантны информации на странице

В 2009 году Google объявил, что будет игнорировать этот тег из-за того, что разработчики стали вписывать в него нерелевантные запросы и спамить.

Яндекс может учитывать Keywords при определении соответствия страницы поисковыми запросам.

Технические метатеги

Технические метатеги нужны, чтобы страница корректно отображалась на экране пользователя и правильно индексировалась. Их видят поисковые роботы, но не пользователи.

Robots

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

Google воспринимает содержание robots как рекомендации, а не правила, поэтому может не следовать указаниям и посещать даже закрытые страницы.

Сам тег работает в связке с файлом robots.txt. Тег помогает управлять индексацией каждой отдельной страницы, а файл robots.txt задает общие инструкции для всего сайта — можно заблокировать второстепенные страницы ресурса и направить робота сканировать более важные.

В теге robots с помощью директив можно дать рекомендации для конкретной страницы:

• all — директива по умолчанию, нет ограничений на индексирование и показ контента;

• index или noindex — можно или нельзя показывать страницу в индексе;

• nofollow — можно или нельзя переходить по ссылкам на странице;

• none — эквивалент сочетания noindex и nofollow, нельзя показывать страницу и переходить по ссылкам;

• noarchive — в результатах нельзя показывать ссылку на сохраненную в кэше копию;

• nosnippet — нельзя выводить в сниппет часть текста или видео, не распространяется на статистически уменьшенные изображения;

• notranslate — в результатах поиска нельзя предлагать перевод страницы;

• noimageindex — нельзя индексировать изображения на странице.

К примеру, этот мета тег запрещает поисковикам показывать страницу в выдаче:

<meta name="robots" content="noindex">

Для разных ботов можно указывать несколько мета тегов:

<meta name="googlebot" content="noindex">
<meta name="googlebot-news" content="nosnippet">

Указания в robots.txt и теге robots не должны конфликтовать, иначе бот может не проиндексировать нужную страницу.

Viewport

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

Есть три варианта отображения сайта на смартфонах, разработчик выбирает подходящее решение под потребности бизнеса:

• Мобильная версия с отдельным адресом m.site.ru — но так сейчас делают редко;

• Адаптивная верстка под мобильные устройства;

• Динамическая верстка RESS — Responsive Design + Server Side.

Отображение на смартфоне: слева полная версия сайта, справа мобильная

Мета тег viewport располагается под тегом title и выглядит так:

<meta name="viewport" content="width=device-width, initial-scale=1">

Атрибут "width" отвечает за ширину сайта на экране. Можно указать конкретное число от 200 px до 10 000 px либо "device-width", тогда система масштабирует страницу под экран.

Если viewport не прописан, браузер будет масштабировать окно как для экрана монитора.

Если ресурс не адаптирован под смартфоны, поисковые системы отдадут лучшие позиции другим сайтам.

Сервис для анализа сайта поможет сделать сайт мобилопригодным: он показывает превью сайта на смартфоне, ищет тег viewport и анализирует, насколько удобно пользоваться сайтом с мобильных устройств. Проверка адаптивности находится в разделе Юзабилити.

Charset и Content-type

Кодировка (от англ. Charset) — отвечает за интерпретацию кода страницы в символы. Это позволяет пользователю видеть сайт таким, каким мы привыкли его видеть. Сайт, в кодировке которого допущена ошибка, выглядит так:

Это происходит из-за несовпадения кодировок сервера и страницы.

Тип кодировки показывает строка Content-Type и сервер в header запросе.

Подробнее можно прочитать об этом в статье Как настроить кодировку сайта самостоятельно

Чтобы проверить страницы с ошибками в charset есть ресурс Анализа сайта: запустите сканер, в результатах поставьте фильтр «Ошибочные charset» и сервис покажет список ссылок на нужные страницы.

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

Refresh

Мета тег refresh задает время автоматического обновления страницы и дает возможность по прошествию этого времени автоматически открыть другую страницу – перенаправить на другой сайт или показать пользователю новую информацию.

Страница перезагрузится через 5 секунд:

<meta http-equiv="refresh" content="5">

Страница перезагрузится через 4 секунды и перенаправит пользователя на сайт site2.ru:

<meta http-equiv="refresh" content="4;url=site2.ru">

Google не советует использовать meta-refresh, потому что он может повлиять на индексацию страницы – об этом говорил представитель Google Джон Мюллер. Бот воспринимает этот мета-тег как редирект, поэтому проиндексирует страницу после перенаправления — то есть, исходную, скорее всего, пропустит. Для переадресации лучше настроить 301 редирект.

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

Author и Copyright

Метатеги Author и Copyright используют, чтобы указать автора контента и владельца авторских прав. Технически в них большого смысла нет, но на контентных сайтах все еще используют.

<meta name="Author" content="Аделаида Ивановна Вяземская">

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

Alt изображения

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

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

Подробнее про загрузку изображений и правильный alt можно прочитать вот здесь большое руководство по SEO для картинок

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

Канонический адрес страницы 

• Дубликаты страницы бывают двух типов: Созданные самостоятельно — обычно это страницы, которые подходят под разные категории запросов. Например, карточки товаров в интернет-магазине: товар может быть в основном каталоге и в сезонном. В таком случае на одну и ту же страницу ведут несколько URL. 
• Созданные в результате сбоев CMS или настройки переадресации через файл robots.txt и редирект 301, о котором рассказано в Яндекс справке.

При любом варианте поисковые системы могут негативно отнестись к дублированию информации на страницах сайта и применить санкции.

Чтобы избежать этого, есть тег canonical (или тег rel="canonical"). Его используют для сообщения поисковым системам о «родительском» или «оригинальном» URL-адресе, который следует индексировать и ранжировать. Полную информацию вы можете прочитать в статье Все о rel canonical: как указывать атрибут правильно и зачем он нужен

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

Проверьте оптимизацию страниц в нашем сервисе для анализа. Он покажет метатеги и структуру главной:

И найдет ошибки в тегах на внутренних страницах: