Основы работы с мета-тегами – какие виды мета-тегов существуют и зачем они нужны, как составлять метатеги для Яндекс и Google

27 апреля 2024 г.

Основы работы с мета-тегами

Мета-теги – важный элемент HTML-кода страницы (расположен в границах тега <head>...</head>), оказывающий прямое влияние на ранжирование сайта в поисковых системах. Прописываются для каждой страницы, игнорирование атрибутов влечет за собой неуспешную оптимизацию для последующего продвижения как в Яндекс, так и в Google. Рассказываем, как составить мета-теги для сайта и отдельных страниц, какие виды тегов существуют, как правильно их оформлять.

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

Мета-теги – служебные элементы кода, которые предоставляют поисковым роботам сведения о странице. При написании мета-тегов title, description и keywords пользователю не придется применять навыки кодинга: современные CMS и панели в конструкторах сайтов позволяют просто ввести текст, все необходимое для HTML-оформления выполняется автоматически без участия человека.

meta-tegiЧто такое title, description и keywords 

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

Например, мета-тег title – это поисковый заголовок, его не нужно путать с тегом Н1 (заголовок страницы, который пользователь видит после перехода на сайт из поиска Яндекс или Google). Именно title может отображаться в выдаче и входить в структуру сниппета, что косвенно влияет на кликабельность, общий уровень посещаемости и органический трафик. Мета-теги условно можно разделить на 2 группы:

  • технические, за которые отвечает программист: Content-language сообщает о языке контента (современные браузеры определяют язык автоматически), а Robots показывает ботам, какие страницы включать и не включать в индекс. Существует много технических вариаций, без должного опыта не стоит пытаться настроить их самостоятельно;
  • SEO-мета-теги, дающие представление о содержимом страницы – это вышеупомянутые title, description и keywords. Влияют на качество ранжирования сайта, а поисковик ориентируется на них, предлагая пользователям релевантный контент.

Виды мета-теговВиды мета-тегов, которые учитывает Яндекс + title (в этом разделе Справке не указан)

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

Зачем используются мета-теги

Создание мета-тегов необходимо преимущественно для поисковых систем, хотя пользователи видят некоторые атрибуты. Когда человек выполняет поиск – система осуществляет считывание тегов, проверяет соответствие контента, который размещен на странице, и подбирает наиболее релевантные ресурсы под запрос. При наличии мета-тегов поисковику легче понимать, какой тематике посвящена статья или что предлагает пользователям страница. Благодаря алгоритмам, человек получает те результаты, которые удовлетворяют его интерес. Мета-теги влияют на:

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

Правильные мета-теги – не гарантия быстрого и успешного продвижения в ТОП. Они эффективно работают в паре с другими СЕО-параметрами – это репутация домена, поведенческие факторы, скорость загрузки сайта и другие. Перечисленные факторы усиливают друг друга: качество каждого повышает общую оценку ресурса.

Какие виды мета-тегов существуют

Мета-тег title (поисковый заголовок)

Title – название (поисковый заголовок), которое указывается для каждой страницы. В выдаче отображается в виде анкорной синей ссылки, расположенной под URL-адресом. После открытия страницы title доступен в названии браузерной вкладки. В Яндекс.Справке указано, что элемент дает представление о релевантности страницы запросу пользователя и общем содержании. Дополнительно – использование в сниппете, в этом случае мета-тег выполняет функцию заголовка, который может создаваться на основе контекста страницы. В HTML-формате title выглядит так:

<head>
<meta name="example" content="..."/>
<title>Что такое разработка сайтов</title>
</head>

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

Как выглядит title в поисковой выдачеКак выглядит title в поисковой выдаче

Как заполнять title

Длину заголовка определяет ширина экрана, слишком объемные формулировки в результатах выдачи поисковик обрезает. При составлении мета-тега нужно использовать ключевые запросы и преимущества, а также релевантную информацию – пользователь должен сразу понимать, на какой сайт его приглашают и почему он должен выбрать именно его. В Яндекс длина title составляет около 70 символов с пробелами, в Google – 60, в чем и заключается сложность: непросто вместить все важные параметры в строго лимитированный объем. При написании рекомендуется придерживаться следующие правил:

  • использование ключевых слов, определенных еще на этапе составления семантического ядра сайта. Однако спам недопустим – 1-2 запросов будет достаточно, не рекомендуется использовать повторы, расходуя ограниченное количество символов на текст без полезной информации;
  • удаление всего лишнего. В title не выносят номера телефонов и адреса электронной почты, аналогичные данные. Стоит стремиться к максимально емкому и SEO-оптимизированному поисковому заголовку;
  • отказ от шаблонности. Не стоит применять для всех страниц идентичные title с минимальными изменениями. Например, «Название товара – цена, отзывы, фото». Пользователю будет сложно понять, в чем заключается разница между страницами. Если все данные не удается разместить в заголовке – их лучше отправить в описание description. Если последнее будет релевантным, то сможет попасть в сниппет;
  • брендированные запросы. В заголовок стоит добавлять наименование компании, что позволит привлечь трафик по брендированным запросам. Яндекс рекомендуется указывать бред в начале или конце title, для разделения можно использовать дефис, двоеточие или вертикальную черту. Дополнительно оттенить фирменный стиль поможет загрузка фавикона.

Яндекс.Вебмастер на странице «Заголовки и описания»Проверить, все ли в порядке с поисковым заголовком и описанием, можно в Яндекс.Вебмастере на странице «Заголовки и описания»

Заголовки страниц должны быть уникальными, рекомендуется удалять предлоги, частицы, союзы, вводные слова – все то, что не имеет информационной нагрузки. Рассмотрим на примере, как написать мета-тег title по вводным «купить стол», «купить дешевый стол», «купить стол из дерева»:

  • неправильно: «Купить стол, купить дешевый стол, купить стол из дерева прямо сейчас»;
  • правильно: «Купить дешевый стол из дерева с бесплатной доставкой и скидкой 5%».

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

В title (это касается и других атрибутов) желательно использовать минимальное количество знаков препинания: дефисы и двоеточия, а также запятые (в description и keywords) допустимы, а от восклицательных и вопросительных знаков, специальных символов лучше отказаться. Точки применимы только в description, возможно внедрение эмодзи (нескольких будет достаточно), которые разбавляют контент и положительно влияют на кликабельность. Разрешено использование цифр (они улучшают восприятие), можно задавать динамические title, в которых элементы будут периодически изменяться (стоимость товара, количество в наличии, прочее).

Мета-тег description (поисковое описание)

Description – поисковое описание, отображающее содержание страницы. Является логичным продолжением заголовка, но часто игнорируется поисковыми системами. Может отображаться в сниппете, однако если поисковик сочтет нужным – произведет замену, выбрав рандомный фрагмент текста, определенный в качестве релевантного. Аналогично сниппет формируется в случае, если поле description не заполнено.

Каждый description должен быть уникальным внутри сайта по отношению к другим описаниям. Он содержит ключевые слова, все самое важное лучше вынести в начало. Рекомендованная длина – 160-200 символов с учетом пробелов. В HTML выглядит так:

<head>
<meta name="description" content="Ваш текст поискового описания"/>
</head>

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

Как заполнять description

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

  • мета-тег добавляется на все страницы сайта (такое требование есть у Яндекс);
  • все описания должны быть уникальными как по сравнению с внешними ресурсами, так и с внутренними страницами. Шаблонные или скопированные у конкурентов description не демонстрируются в результатах поиска, их исключают в качестве низкоинформативных;
  • описание должно четко раскрывать содержимое страницы, для которой оно предназначено. Следует убрать переспам, агрессивные рекламные призывы, обилие восклицательных знаков;
  • при наполнении больших многостраничных сайтов нужно сначала добавлять description на важные страницы, такие как каталог, главная и схожие;
  • description не должен копировать title, он пишется на том языке, который применялся для наполнения страницы.

Рекомендации по написанию description от ЯндексРекомендации по написанию description от Яндекс

Рассмотрим пример удачного и неудачного описания по вводным «купить игрушку», «развивающая игрушка для самых маленьких»:

  • неудачно: «Игрушка – один из самых важных факторов для детского развития. Игрушка помогает занять ребенка, улучшить мелкую моторику и концентрацию внимания. Почему стоит купить игрушку у нас? В магазине есть большой ассортимент развивающих игрушек для самых маленьких»;
  • удачно: «Развивающие игрушки для самых маленьких – купить с доставкой в срок 1-3 дня в любой регион РФ. Большой ассортимент: от деревянных моделей до бизибордов, для новых покупателей скидка 15%».

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

Мета-тег keywords (ключевые слова)

Keywords – это ключевые запросы, их указывают через запятую для того, чтобы сообщить поисковым роботам, под какие слова оптимизирован контент на странице. Еще несколько лет назад мета-тег серьезно влиял на SEO-продвижение сайтов, сегодня он утратил свою значимость и во многих CMS уже нет даже поля для его заполнения. 

Как заполнять Keywords

Особых инструкций по этому атрибуту нет: добавляйте от 3 до 10 ключевых слов (можно разделять запятыми), которые полностью релевантны продвигаемой странице.

Общие правила создания мета-тегов

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

  • мета-теги не должны быть ни слишком длинными, ни короткими. Развернутые формулировки поисковики обрезают, а title, например, «Купить диван с доставкой» – не информативный, поэтому ожидать высокой кликабельности не стоит;
  • нельзя использовать одинаковые title и description для всех или нескольких страниц сайта. Они являются уникальным отображением содержимого, поэтому не могут быть идентичными;
  • разрешено комбинирование латиницы и кириллицы, а также применение англоязычных слов в русскоязычных описаниях и заголовках – это может быть название бренда или модель смартфона. Однако если страница наполнена текстом на русском языке, а title, description и keywords написаны н английском или китайском – они являются нерелевантными и будут негативно восприняты поисковиками.

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

Где просматривать мета-теги

Мета-теги находятся в открытом доступе, если необходимо посмотреть варианты конкурентов, достаточно следовать инструкции:

  • откройте нужный сайт в браузере;
  • кликните правой кнопкой мыши на свободную область;
  • нажмите «Просмотр кода страницы».

Как посмотреть мета-теги из браузераКак посмотреть мета-теги из браузера

В открывшемся окне будет доступна вся информация по поисковому заголовку и описанию, а также ключевым словам. В CMS и конструкторах сайтов указывать, просматривать, изменять мета-теги можно из панели управления/личного кабинета. Рассмотрим, как это работает в конструкторе сайтов Craftum:

  • управление SEO-параметрами возможно из двух разделов – это «Настройки страницы» (на этапе создания в графическом редакторе) и «Настройка сайта» (легко открыть из личного кабинета);
  • выбираем сайт, для которого будем задавать параметры, кликаем на колесико-шестеренку и переключаемся на SEO;
  • здесь можно прописать атрибуты title, description и keywords, после этого доступен как просмотр, так и редактирование. Дополнительно – установка запрета или разрешения на индексацию страницы поисковыми роботами.

Настройка, редактирование мета-теговНастройка, редактирование мета-тегов в конструкторе Крафтум

По аналогичному принципу работают все современные CMS и конструкторы: добавление мета-тегов со стороны пользователя занимает не более нескольких минут, что существенно упрощает процесс оптимизации. Многие сервисы дополнены AI инструментами, например, в Craftum есть ИИ-помощник, способный моментально перефразировать любой текст (поддерживается графическим редактором), но без потери смысла.

AI-помощник для перефразирования в один кликAI-помощник для перефразирования в один клик

В заключение

Мета-теги – важный элемент SEO-продвижения, который дает дополнительные подсказки поисковым роботам и позволяет продемонстрировать релевантность страниц запросам. Поисковые системы могут учитывать и не учитывать атрибуты, изменять их автоматически. Исключительно мета-теги не являются залогом успеха, но они эффективно работают вместе с комплексом мер – от правильно оптимизированного текстового наполнения до скорости загрузки и поведенческих факторов. Корректное оформление title, description и keywords обеспечивает быстрое распознавание подходящих сайтов для пользователей, укрепляет позиции в выдаче, позволяет повысить кликабельность и объем органического трафика.