Правильные главные мета теги для сайта и как их заполнять [10 примеров]
Некоторые мета-теги жизненно важны для SEO. Другие практически не влияют на ранжирование. Сегодня представляю вашему вниманию правильные главные метатеги для сайта, о которых вам нужно знать.
Порой, при оптимизации сайтов под поисковые системы, SEO-специалисты фокусируются на каком-то одном аспекте в ущерб для остальных. Обычно в качестве самого важного фактора ранжирования преподносится линкбилдинг.
Но на самом деле нет никакой «самой важной вещи». Вы не найдёте такого трюка, провернув который, моментально получите топ-1 в Google или Яндекс. Вместо этого лучше сосредоточиться на комплексной SEO-стратегии.
Часть этой стратегии включает в себя правильное использование HTML мета тегов – критического компонента успеха в поиске. Грамотное применение нужных тегов – это, своего рода, «общение» с поисковыми системами:
О чём ваша веб-страница.
Как её читать.
Кто должен её увидеть.
Имея это в виду, давайте рассмотрим, какие метатеги имеют решающее значение для SEO и как их правильно использовать.
1. Мета тег title
Тег заголовка (title tag) – это ваш основной и самый важный анкор. Элемент
обычно появляется в виде заголовка, по которому можно щёлкнуть, в поисковой выдаче, а также отображается в социальных сетях и в браузерах.</p>
<p>Например, если вы посмотрите HTML-код этой страницы, то увидите, что заголовок выглядит следующим образом:</p>
<blockquote class="wp-block-quote">
<p><title>Правильные главные мета теги для сайта и как их заполнять [10 примеров]
Теги заголовков помещаются в
вашей веб-страницы и предназначены для предоставления чёткого и исчерпывающего представления о том, о чём эта страница. Но имеют ли они такое же сильное влияние на позиции в выдаче, как это было много лет назад?
В последние несколько лет идёт активное обсуждение поведенческих факторов, как логического доказательства релевантности и, следовательно, сигнала ранжирования – даже представители поисковых систем периодически признают их влияние.
Заголовок страницы по-прежнему является первым, что пользователь видит в поисковой выдаче и решает, отвечает ли страница поисковому запросу. Правильно написанный title может значительно увеличить количество кликов по сниппету и трафик на сайт, что, безусловно, влияет на ранжирование.
Простой эксперимент показывает, что Гуглу больше не нужен ваш тайтл, включающий ключ с точным соответствием, чтобы понять тему страницы. Например, несколько лет назад выдача Гугла по запросу «как повысить узнаваемость бренда» очень сильно походила на то, что вы можете наблюдать сейчас в Яндексе:
Всего 1 заголовок из всего топа не включает точное соответствие. А теперь давайте взглянем на Google:
Всего 1 заголовок из всего топа включает точное соответствие. Но при этом в Гугле нет ни одного неуместного результата: каждая, из приведённых здесь страниц, объясняет, как повысить узнаваемость, и заголовки это отражают.
Поисковые системы смотрят на общую картину и обычно оценивают содержание страницы в целом, но «обложка книги» всё ещё имеет значение, особенно, когда речь идёт о взаимодействии с пользователями.
Как правильно заполнять title
Сделайте для каждой страницы уникальный заголовок, который кратко и точно описывает её контент.
Если хотите, чтобы заголовки не обрезались в поисковой выдаче, лучше ограничивать их 50-60 символами. В Google длинные заголовки сокращаются, примерно, до 600-700 пикселей, но эти цифры иногда меняются, так что не стоит их жёстко придерживаться.
Главные ключевые слова должны стоять как можно ближе к началу заголовка. Но вставляйте их максимально органично, как будто вы это делаете для посетителей сайта.
Используйте название вашего бренда в названии, даже если оно не отображается в поисковой выдаче, это всё равно будет иметь значение для поисковой системы.
Совет: используйте title для привлечения внимания
Тег заголовка ценен не только потому, что он является основным элементом поисковой выдачи, но и потому, что он действует, как заголовок вкладки в вашем веб-браузере. Это можно использовать для привлечения внимания пользователя. Например:
Такой подход используют социальные сети: ВКонтакте, Facebook, LinkedIn, чтобы показать вам, что имеются новые уведомления. Эта тактика может дать весьма неплохой результат!
2. Мета тег description
Мета-описание (meta description) – также находится в
веб-страницы и обычно (хотя далеко не всегда) отображается в сниппете поисковой выдачи вместе с заголовком и URL-адресом страницы.
Например, это мета-описание данной статьи:
И да, само по себе метаописание не является фактором ранжирования. Но для любого вебмастера, старающегося увеличить количество переходов из поиска и улучшить поисковую выдачу своего бренда, это уникальная возможность.
Description занимает большую часть сниппета поисковой выдачи и приглашает пользователей щёлкнуть именно по вашей ссылке, обещая чёткое и комплексное решение их запроса.
Описание влияет на количество получаемых вами кликов, а также может улучшить CTR и снизить показатель отказов, если содержание страницы действительно соответствует обещаниям. Вот почему описание должно быть в равной степени реалистичным, привлекательным и чётко отражать содержание.
Если ваше описание содержит ключевые слова, использованные человеком в своём поисковом запросе, они будут выделены в поисковой выдаче жирным шрифтом. Это помогает вам привлечь внимание и сообщить пользователю, что именно он найдёт на вашей странице.
Невозможно поместить каждое ключевое слово, по которому вы хотите ранжироваться, в мета-описание, и в этом нет реальной необходимости – вместо этого напишите пару связных предложений, описывающих суть вашей страницы, включая основные ключевые слова.
Лучший способ выяснить, что необходимо поместить в мета тег Description для эффективного ранжирования – провести анализ конкурентов. Вбейте главный поисковый запрос вашей будущей или текущей страницы в Яндекс и Google. Посмотрите, кто и как заполнил описание, и возьмите себе всё самое лучшее из топа.
Как правильно заполнить мета тег description
Сделайте для каждой страницы уникальное метаописание, которое чётко отражает ценность страницы.
Обычно сниппет содержит 150-160 символов, включая пробелы. Но эти цифры плавают, как и в случае с заголовками.
Включите в мета описание основные ключевые слова, чтобы они выделялись в поисковой выдаче, но старайтесь не перегружать тег, иначе он станет похожим на тупое перечисление ключей.
При желании можно использовать броский призыв к действию, уникальное предложение, или дополнительные подсказки о том, чего ожидать пользователю, после перехода по ссылке. Конструкции, вроде: «инструкция», «SEO-кейс», «купить» и так далее.
Мета совет
Мета-описание не обязательно должно состоять из одного-двух предложений. Вы можете добавить дополнительную информацию о странице, которая обрабатывается поисковиками и позволит выделиться в SERP.
Например:
Для авторской статьи вы можете добавить дату публикации, имя автора.
На странице продукта вы можете указать цену и дату изготовления товара.
3. Мета теги заголовков (H1-H6)
Теги подзаголовков – это HTML-теги, используемые для отграничения заголовков и подзаголовков в вашем контенте от других типов текста (например, текста абзаца). Использование heading tags в наши дни является темой многих споров.
Хотя теги H2-H6 считаются не столь важными для поисковых систем, правильное использование тега H1 подчёркивалось во многих отраслевых исследованиях. В то же время Джон Мюллер не устаёт повторять, что подзаголовки вообще не являются факторами ранжирования.
Однако стоит помнить, что заголовки имеют решающее значение для организации контента на страницах сайтов. Использование мета тегов заголовков, безусловно, улучшает архитектуру контента.
Поисковым системам намного легче читать и понимать хорошо организованный контент, чем продираться через простыни неструктурированного содержания.
Пользователям заголовки указывают на основные разделы в стене текста и облегчают навигацию по странице.
Оба эти фактора повышают важность тщательной оптимизации мета тегов, когда мелкие детали складываются в большую и удобную для пользователя картину, и могут привести к улучшению позиций в поисковой выдаче.
Оптимизация подзаголовков
Заголовки должны соответствовать тому фрагменту текста, который они описывают. То, что они не являются фактором ранжирования (по словам Мюллера), не означает, что поисковые системы не принимают их во внимание.
Заголовки всегда должны отражать тональность текста, над которым они расположены. Избегайте заголовков вроде «Глава 1… Глава 2… Глава 3…».
Не злоупотребляйте тегами и ключевыми словами в них. Подзаголовки должны быть понятны простым людям.
Должны ли совпадать мета-теги title и H1?
Согласно официальным рекомендациям Google по созданию статей, название страницы (в HTML-теге
), на которой размещён материал, должен совпадать с заголовком статьи (в теге </p>
<h1> или аналогичном). Так что здесь можно обойтись одним и тем же текстом для обоих элементов.</p>
<h2>4. Alt атрибуты изображения</h2>
</h1>
<p><strong>Атрибут alt изображения</strong> добавляется к тегу изображения img для описания его содержимого. Альтернативные атрибуты важны с точки зрения внутренней оптимизации сайта по двум причинам:</p>
<ul>
<li>Альтернативный текст показывается посетителям, если какое-либо конкретное изображение не может быть загружено (или если отображение картинок отключено).</li>
<li>Атрибуты Alt обеспечивают контекст для роботов, потому что поисковые системы не могут «видеть» изображения.</li>
</ul>
<p>На e-commerce сайтах изображения часто имеют решающее влияние на то, как посетитель взаимодействует со страницей. Поисковики так же прямо заявляют о важности этого тега.</p>
<p>Например, Google в своих гайдах для вебмастеров пишет, что помощь поисковым системам в понимании того, что находится на картинках, и как они сочетаются с остальным контентом, помогает соотносить страницу сайта с подходящими поисковыми запросами.</p>
<p>Даже Мюллер писал у себя в Твиттере, что продуманное альтернативное описание изображения необычайно важно, если вы хотите занять высокое место в Google Картинках.</p>
<p>Однако не забывайте о релевантности. Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте.</p>
<h3>Оптимизация alt тега img <strong>для изображений</strong></h3>
<ul>
<li>Сделайте всё возможное, чтобы оптимизировать свои самые важные изображения (картинки товаров, инфографику, инструкции), которые могут получить хорошие позиции в поиске Google Images.</li>
<li>Добавьте alt-текст на страницах, где не так много другого контента (кроме картинок).</li>
<li>Делайте тег alt для изображений понятным и достаточно информативным, разумно используйте ключевые слова и убедитесь, что они естественным образом вписываются в содержание страниц.</li>
</ul>
<h2>5. Мета тег nofollow</h2>
<p>Внешние, исходящие ссылки – это ссылки вашего сайта, указывающие на другие веб-проекты. Они используются для перенаправления пользователей на проверенные источники информации или по какой-либо другой причине.</p>
<p>Эти ссылки имеют большое значение для SEO. Они могут сделать ваш контент похожим на, бережно созданный вручную, исчерпывающий материал по теме, подкреплённый надёжными источниками, или на, сгенерированную роботом, свалку ссылок.</p>
<p>Поисковые системы уже давно научились распознавать сайты без дополнительной ценности для пользователей, основной целью которых является продажа ссылок в биржах. Пингвин, Минусинск и другие типы санкций активно применяются поисковиками к сайтам вебмастеров за манипуляцию ссылочной массой.</p>
<p>С другой стороны, в эпоху семантического поиска, Google и Яндекс могут рассматривать источники, на которые вы ссылаетесь, как контекст, чтобы лучше понимать контент на страницах сайта.</p>
<p>По обеим этим причинам определённо стоит обращать внимание на то, где и как вы ставите ссылки.</p>
<p>По умолчанию все ссылки являются открытыми для роботов поисковых систем. Их обычно называют dofollow-ссылками. Боты свободно переходят по таким ссылкам и сканируют всё, что находится «на том конце». То есть, ставя открытую ссылку на другой сайт, вы заочно выражаете ему доверие.</p>
<p>Когда вы добавляете к ссылке атрибут <strong>nofollow</strong>, он даёт указание ботам поисковых систем не переходить по ссылке (и не передавать какую-либо ссылочную ценность).</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="561" src="https://seo-aspirant.ru/wp-content/uploads/2020/08/sponsored-link-1024x561.jpg" class="wp-image-10186" srcset="https://seo-aspirant.ru/wp-content/uploads/2020/08/sponsored-link-1024x561.jpg 1024w, https://seo-aspirant.ru/wp-content/uploads/2020/08/sponsored-link-495x271.jpg 495w, https://seo-aspirant.ru/wp-content/uploads/2020/08/sponsored-link-768x420.jpg 768w, https://seo-aspirant.ru/wp-content/uploads/2020/08/sponsored-link.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>
<p>Каждый специалист самостоятельно поддерживает SEO-гигиену на своём проекте, сохраняя здоровый баланс между nofollow и dofollow ссылками. Обычно мета тег nofollow устанавливают на следующие типы ссылок:</p>
<ul>
<li>Ссылки на любые ресурсы, которые по каким-либо причинам могут рассматриваться, как «ненадёжный контент».</li>
<li>Любые платные или спонсорские ссылки (вы же не хотите, чтобы поисковые системы уличили вас в продаже ссылок).</li>
<li>Ссылки из комментариев или другой пользовательский контент, который может подвергаться спаму, помимо вашего желания.</li>
<li>Внутренние ссылки «Вход» или «Регистрация», так как это является пустой тратой краулингового бюджета.</li>
</ul>
<h2>6. Мета тег robots</h2>
<p><strong>Мета тег robots</strong> с атрибутом content=”noindex” на уровне страницы даёт указание поисковым системам не индексировать какую-либо страницу вашего сайта. Атрибут nofollow предписывает не переходить по ссылкам на этой странице.</p>
<p>Хотя эти теги не связаны напрямую с ранжированием, в некоторых случаях они могут оказывать определённое влияние на то, как ваш сайт выглядит в глазах поисковых систем в целом. Например, Google очень сильно не любит слабый контент.</p>
<p>Вы может целенаправленно его и не создавали, но так получилось, что на вашем сайте есть контент, который не представляет особой ценности для посетителей. И при этом существует необходимость его присутствия.</p>
<p>Также у вас могут иметься в арсенале черновики или страницы-заглушки, которые нужно опубликовать, и уже потом завершать их наполнение и оптимизацию. Скорее всего, вы не хотите, чтобы они учитывались при оценке общего качества вашего сайта.</p>
<p>В других случаях появляется необходимость не пускать определённые страницы в поисковую выдачу, поскольку на них есть какие-то специальные предложения, которые должны быть доступны только по прямой ссылке (например, из email-рассылки).</p>
<p>Наконец, если у вас есть возможность поиска по сайту, Google рекомендует закрывать страницы с получаемыми результатами, которые можно сканировать бесконечно и тратить ресурсы бота на неуникальный контент.</p>
<p>В приведённых выше случаях очень помогают теги noindex и nofollow, поскольку они дают вам определённый контроль над вашим сайтом в плане предоставления доступа поисковым системам.</p>
<h3>Использование noindex и nofollow в meta robots</h3>
<ul>
<li>Закройте ненужные и незавершённые страницы со слабым контентом, который не имеет особой ценности и не должен появляться в результатах поиска.</li>
<li>Закройте страницы, которые неоправданно расходуют краулинговый бюджет.</li>
<li>Убедитесь, что вы не ограничили по ошибке индексирование важных страниц.</li>
</ul>
<h2>7. Мета тег link rel canonical</h2>
<p><strong>Тег link rel=”canonical”</strong> – это способ сообщить поисковым системам, какую версию страницы вы считаете основной и хотели бы, чтобы её индексировали поисковые системы и находили люди.</p>
<p>Он обычно используется в тех случаях, когда одна и та же страница доступна по нескольким разным URL-адресам или несколько разных страниц имеют очень похожий контент, охватывающий одну и ту же тему.</p>
<p>Внутренний дублированный контент на сайте не рассматривается поисковиками так же строго, как скопированный у конкурентов, поскольку обычно за этим не скрывается никаких манипулятивных целей.</p>
<p>Тем не менее, это может ввести в заблуждение поисковые системы: если вы не укажете, какой URL-адрес является тем, по которому вы предпочитаете ранжироваться, Яндекс и Google могут выбрать его за вас самостоятельно.</p>
<p>Выбранный URL сканируется чаще остальных, и риск штрафа практически отсутствует, но такое положение дел далеко не оптимально.</p>
<p>Ещё одно преимущество заключается в том, что канонизация страницы упрощает отслеживание статистики, связанной с контентом.</p>
<p>Кроме всего прочего, Джон Мюллер также упоминает, что использование rel=canonical для дублированного контента помогает Google объединить все ваши линкбилдерские усилия и передать сигналы ссылок со всех версий страницы на предпочтительную.</p>
<h3>Использование тега canonical</h3>
<ul>
<li>Страницы со схожим контентом на одну и ту же тему.</li>
<li>Дублированный контент, доступный по разным URL-адресам.</li>
<li>Разные версии одной и той же страницы, различающиеся по ID или другим URL-параметрам, не влияющим на контент.</li>
<li>Осторожно используйте мета-тег canonical на схожих страницах. Если две страницы, объединённые им, достаточно сильно отличаются в плане контента, поисковая система может просто проигнорировать ваш тег.</li>
</ul>
<h2>8. Микроразметка Schema</h2>
<p><strong>Микроразметка Schema</strong> – это особый метод организации данных на каждой из ваших веб-страниц, который распознаётся поисковыми системами. Отличное решение, особенно учитывая, что от её внедрения выигрывают все.</p>
<p>Семантическая разметка schema:</p>
<ul>
<li>Это отличный буст для вашего UX.</li>
<li>Добавляет огромную ценность в разрезе SEO.</li>
</ul>
<p>«Семантическая сеть» – это сеть, в которой акцент смещается с отдельно взятых ключевых слов и обратных ссылок на стоящие за ними концепции и отношения между этими концепциями.</p>
<p>Разметка структурированных данных – это именно то, что помогает поисковым системам не только читать контент, но и понимать, к чему относятся определенные слова.</p>
<p>В наше время результаты поиска настолько сильно изменились, что вам, возможно, даже не придётся кликать по ссылкам, чтобы получить ответ на свой запрос.</p>
<p>Но всё же, если пользователь собрался кликнуть по ссылке, то вы должны максимально привлечь его внимание. В этом вам поможет расширенный сниппет – с красивым изображением, 5-звёздочной оценкой, указанным диапазоном цен, количеством товара, часами работы или ещё чем-то полезным. Такие сниппеты получают больше кликов, чем обычные ссылки.</p>
<p>Использование тегов schema для определённых элементов страницы делает сниппет в поиске обогащённым полезной информацией и привлекательным для пользователей. А возвращаясь к предыдущим пунктам этой статьи, напомню ещё раз, что поведенческие факторы, такие как CTR и показатель отказов, влияют на позиции вашего сайта.</p>
<h3>Как лучше всего использовать разметку schema org</h3>
<ul>
<li>Изучите доступные схемы на schema.org.</li>
<li>Создайте карту своих самых важных страниц и определитесь с концепциями, относящимися к каждой из них.</li>
<li>Реализуйте разметку аккуратно (при необходимости используйте Мастер разметки структурированных данных от Google).</li>
<li>Тщательно проверяйте микроразметку. Убедитесь, что она не вводит пользователей в заблуждение.</li>
</ul>
<h2>9. Мета теги для социальных сетей</h2>
<p><strong>Open Graph</strong> был первоначально представлен Facebook, чтобы вы могли контролировать, как страница будет выглядеть при публикации в социальной сети. Сегодня эта разметка поддерживается большинством популярных соцсетей и мессенджеров: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.</p>
<p>Вот основные теги Open Graph:</p>
<ul>
<li><strong>og:title</strong> – здесь вы помещаете заголовок, который будет отображаться при ссылке на вашу страницу.</li>
<li><strong>og:url</strong> – URL вашей страницы.</li>
<li><strong>og:description</strong> – описание вашей страницы. Помните, что, например, Facebook будет отображать всего около 300 символов описания.</li>
<li><strong>og:image</strong> – здесь вы можете поместить URL-адрес изображения, которое будет отображаться при ссылке на вашу страницу.</li>
</ul>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="544" src="https://seo-aspirant.ru/wp-content/uploads/2020/08/Open-Graph-1024x544.jpg" class="wp-image-10187" srcset="https://seo-aspirant.ru/wp-content/uploads/2020/08/Open-Graph-1024x544.jpg 1024w, https://seo-aspirant.ru/wp-content/uploads/2020/08/Open-Graph-495x263.jpg 495w, https://seo-aspirant.ru/wp-content/uploads/2020/08/Open-Graph-768x408.jpg 768w, https://seo-aspirant.ru/wp-content/uploads/2020/08/Open-Graph.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>
<p>Используйте специфические метатеги социальных сетей, чтобы улучшить внешний вид ваших ссылок для подписчиков. Это не особо сложная функция и она не влияет напрямую на ранжирование. Однако, настроив красивое отображение ссылок, вы улучшите CTR и UX.</p>
<h3>Как внедрить мета теги для социальных сетей</h3>
<ul>
<li>Добавьте базовые и дополнительные метаданные, используя протокол Open Graph, и проверьте URL-ы, чтобы увидеть, как они будут отображаться.</li>
<li>Настройте карточки для Твиттера и просмотрите результат.</li>
<li>Дополнительную справку по мета тегам семантической разметки страниц можно получить в Яндексе.</li>
<li>В Яндекс Вебмастере есть отдельный инструмент (валидатор) для проверки микроразметки, который подходит и под Open Graph.</li>
<li>Для WordPress существует множество готовых решений. Я, например, использую плагин Yoast SEO.</li>
</ul>
<h2>10. Viewport мета тег</h2>
<p><strong>Метатег Viewport</strong> позволяет вам настроить, как страница будет масштабироваться и отображаться на любом устройстве. Обычно этот тег и его значение выглядят следующим образом:</p>
<blockquote class="wp-block-quote">
<p><meta name="”viewport”" content="”width=device-width," initial-scale="1″/"></p>
</blockquote>
<p>Где «width=device-width» заставляет страницу соответствовать ширине экрана в пикселях, независимо от устройства, а «initial-scale=1» устанавливает соотношение 1:1 между пикселями CSS и пикселями устройства, с учётом ориентации экрана.</p>
<p>Этот тег легко добавить, и одного скриншота из Google достаточно, чтобы показать разницу:</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="624" height="545" src="https://seo-aspirant.ru/wp-content/uploads/2020/08/viewport-meta-tag.jpg" class="wp-image-10188" srcset="https://seo-aspirant.ru/wp-content/uploads/2020/08/viewport-meta-tag.jpg 624w, https://seo-aspirant.ru/wp-content/uploads/2020/08/viewport-meta-tag-343x300.jpg 343w" sizes="(max-width: 624px) 100vw, 624px"></figure>
<p>Мета тег Viewport не имеет ничего общего с ранжированием, но напрямую влияет на пользовательский опыт. Это особенно важно, учитывая разнообразие устройств, которыми люди пользуются в настоящее время, и знаменитый переход Google на индексирование с приоритетом мобильного контента.</p>
<p>Как и в случае со многими тегами и настройками, которые мы с вами обсуждали в этой статье, заботу о метатеге области просмотра ваши пользователи по достоинству оценят. В противном случае ждите ухудшения показателя отказов и негативных отзывов.</p>
<h2>Выводы</h2>
<p>Чтобы максимизировать отдачу от внутренней оптимизации сайта, не пренебрегайте небольшими изменениями, которые складываются в общую картину.</p>
<p>Некоторые мета теги, из описанных выше, являются обязательными, поскольку составляют таксономию ваших страниц. Другие, на первый взгляд, могут показаться второстепенными. Но зачем их игнорировать, когда можно быть на 1 расширенный сниппет впереди конкурента?</p>
<p>Небольшие изменения, которые улучшают взаимодействие с пользователем и помогают поисковым системам лучше понимать ваш сайт, будут оценены обеими сторонами и определённо окупятся в долгосрочной перспективе.</p>
<p>Так что внедряйте!</p>
<p>Сообщение Правильные главные мета теги для сайта и как их заполнять [10 примеров] появились сначала на Блог SEO-аспиранта.</p>
<p>
