Мизерная конверсия, отсутствие органического трафика, потери позиций в Google. Что если это всё из-за неправильных мета-тегов? Они скрыты от глаз обывателей, но при этом играют колоссальную роль в битве за органический трафик. В этой статье вы узнаете: почему вы делали всё неправильно; как за вечер поднять конверсию в 2 и больше раза; как стать любимчиком гугла и надолго остаться в ТОПе выдачи. Вы не поверите, но всё это связано с мета тегами. Расскажем важнейшие аспекты в мета тегах и также укажем на какие теги не стоит тратить времени. Читайте дальше и с каждой прочитанной строчкой повышайте свой CTR в SERP ?
Что такое мета теги html?
Мета теги — это часть HTML разметки, которая указывает поисковикам и посетителям о содержании сайта. Проверить мета теги сайта можно нажав Ctrl+U, так любой желающий может узнать, какие теги прописаны на сайте. Одни из главных мета-тегов вы видите каждый день в поисковиках:
Сверху указан мета-тег Title, а под ним Description. Google автоматически подтягивает их в поисковую выдачу, то есть именно эти два тега знакомят пользователя с вашим сайтом. Плохой тайтл и дескрипшн не оставят ни единого шанса вашему новаторскому дизайну, отзывчивой тех. поддержке и познавательному контенту. Как бы вы не старались над сайтом, такая, казалось бы, мелочь может полностью изменить планы. Как хорошо, что вы вовремя решили открыть эту подробную статью и не допустить потери трафика.
Как познакомится лично с главными тегами? Мета расположена в разделе <head> страницы, а если сложно разобрать нужную строчку среди массивов кода, можно воспользоваться Screaming Frog. Программа “must have” для каждого SEO-специалиста. Просканировав сайт, вы сможете увидеть все важнейшие технические факторы. Вернемся к мета-тегам — прописать их можно самостоятельно, но зачем, когда есть куча крутых дополнений по типу: All in One SEO Pack и Yoast SEO для WordPress (личная рекомендация?).
Как влияют мета-теги на SEO?
Мета теги играют одну из важнейших ролей в поисковой оптимизации. Это, можно сказать, неотъемлемая часть SEO. Хоть гугл стал всё чаще и чаще стал экспериментировать с тайтлом и дескрипшном, оптимизация этих мета всё ещё остается приоритетной задачей. Но не стоит забывать, что помимо этих двух есть ещё пару десятков других важных, менее востребованных и совсем мертвых мета-тегов. Для этого и была написана статья, чтобы разобраться со всеми сразу и понять, что важно для вашего сайта, а на что не стоит тратить драгоценное время.
Самые важные мета-теги для SEO
Со временем некоторые теги теряют свою актуальность из-за постоянно меняющихся алгоритмов гугла и этого никак не избежать. Но есть и те, которые имеют слишком важную роль, чтобы пропасть в одночасье. Для себя я выделил 8 основных мета-тегов, с которыми должен уметь работать каждый вебмастер, хотя бы ради того, что это напрямую влияет на количество продаж и % конверсии соответственно. На сегодняшний момент это важнейшие мета-теги для SEO (пользуйтесь списком, как оглавлением):
- Title
- Description
- Canonical
- Альтернативный текст (Alt)
- Мета Robots
- Open Graph и Twitter Cards
- Мета-тег адаптивной вёрстки
Мета тег Title — что это?
Тайтл — это заглавный текст, который встречает пользователя на странице поисковой выдачи. Его функция — описать в несколько слов содержимое страницы. От того как вы пропишете тайтл будет зависеть отношение пользователей и поисковиков к странице. Поисковые системы еще могут проигнорировать содержимое title и перейти к сканированию контента, а вот пользователь попросту не зайдёт на сайт, если посчитает, что описание тайтла не соответствует его поисковому запросу.
Как легко узнать title страницы? При наведении курсора на вкладку страницы появится текст с полным содержимым тега:
В коде страницы его можно найти в блоке <head>.
«Title является вторым по важности фактором
на странице для SEO после контента«
MOZ.
Как правильно заполнять мета тег Title
- Придерживайтесь оптимальной длины в 50 — 60 символов.
- Четко определите к какому типу запросов относится содержимое вашей страницы. Исходя из этого, добавляйте коммерческие, геозависимые или информационные ключи. Не забывайте о добавлении “модификаторов” — Лучшие, Обзор, Найти, Легко и пр.
- Начните заглавие с главного ключа или самого частотного (зачастую это один и тот же).
- Если целевая страница содержит список, рейтинг или любое перечисление, которое является ядром всего контента упомяните это в тайтле. К примеру, “10 самых экзотических животных”, “7 шагов к успеху в карьере”.
- Title для каждой страницы должен быть уникальным.
- Упомяните название своего бренда.
- Старайтесь в 55 символов понятно донести содержание страницы.
- Не ставьте точки в заглавие — это визуально отталкивает. Заменяйте их разделителями.
Мета тег description
Тег Description встречается в поисковой выдаче, сразу под Title. Выполняет функцию описания содержимого страницы. В запасе тега есть несколько небольших предложений, с помощью которых он должен убедить пользователя перейти на страницу.
Мета тег description пример:
<head>
<meta name = ”description” content = ”Дизайн сайта имеет колоссальное влияние на продажи и мы разобрались, как нужно оформлять свой сайт, чтобы увеличить процент конверсий”>
</head>
Мета-тегу, наверное, чаще всего приходится от гугла. Каждый год изменяются алгоритмы и практически каждый раз “корпорация добра” затрагивает description. В 2021 поисковик и вовсе в некоторых случаях исключил тег из поисковой выдачи и теперь частенько подбирает описание не из прописанного в HTML тега, а по своему желанию из содержимого страницы.
Не спешите сбрасывать дескрипшн со счетов! Хоть Google и не использует его как сигнал ранжирования, тем не менее, он оказывает огромное влияние на CTR вашей страницы, потому что отображается в результатах поиска. Хорошо оптимизированное описание гуглом пока не убираются, так что пытайтесь максимально точно охарактеризовать содержимое страницы. А о том, как это сделать читайте дальше ⇓
Как правильно писать мета тег description
Начнем с оптимальной длины описания. И сразу же давайте уясним, что единой оптимальной длины не существует. Опять же, Google так часто менял ограничения в количестве символов, что и вовсе отказался устанавливать какие-либо нормы.
«У фрагментов нет фиксированной длины. Длина варьируется в зависимости от того, что наши системы считают наиболее полезным. Google не будет указывать новую максимальную длину фрагментов, потому что они создаются динамически»
Danny Sullivan
Поделюсь с вами надежным методом определения длины вашего описания, которым сам постоянно пользуюсь. Скорее всего, когда контент для блога уже написан или товар подготовлен к продаже, вебмастер понимает кто его конкуренты в поисковой выдаче. Здесь и скрыта “секретная” методика. Отмерьте длину description конкурента и старайтесь прописать своё описание в заданных рамках. Скорее всего, ваш дескрипшн будет того же размера, что и у конкурента по выдаче.
Ключевые моменты для написания хорошего мета-тега описания:
- Сконцентрируйтесь на написании информативного и привлекательного мета-описания, т.к. гугл может извлечь текст из содержания страницы, чтобы угодить запросу пользователя. Другой вопрос в том, как сделать информативный и привлекательный description?
- Если целевая страница это товар/услуга, то укажите цену, характеристики и пр. Если есть бонусы, обязательно упомяните их! В некоторых случаях хорошо прописанный CTA в description увеличивал конверсию в несколько раз.
- Сделайте текст визуально привлекательным. Разделительные знаки по типу тире и вопросительного сильно выделяются среди монотонного текста и глаз автоматически цепляется за них, особенно, когда в описании задан нужный пользователю вопрос и, там же, кратко дан на него ответ.
- Каждый description должен быть уникальным.
- Стоит еще раз упомянуть о CTA. Добавьте четкий призыв к действию — подай заявку, оформи заказ, свяжись с нами и прочее.
- Добавьте целевые ключи в текст.
- Опираясь на ожидаемые поисковые запросы, предложите решение проблемы.
- Старайтесь угодить своей аудитории. Пишите то, что они ожидают увидеть.
Мета тег canonical
Вот мы и подошли к тегам, которые скрыты от глаз обычных посетителей, но от этого они не становятся менее важными. Тег canonical — указывает поисковику на основную страницу, при этом делая невозможным индексацию всех страниц-копий. Каждый сеошник понимает как сильно повторяющийся контент может повлиять на сайт и, к сожалению, таких моментов не избежать. Canonical как раз предназначен для таких ситуаций и если у вас есть сайт, но вы ещё не знаете об этом теге, то, скорее всего, вам еще есть куда оптимизировать свой веб-сайт.
Как выглядит синтаксис канонической страницы:
Как и когда использовать канонический URL?
- Наличие множественных URL-адресов:
http: //weratel.com.ua
https: //www.weratel.com.ua
https: //weratel.com.ua/index
https: //weratel.com.ua
Google рассматривает все указанные выше URL-адреса как повторяющиеся версии главной страницы. Canonical решает эту проблему.
- ID сессии URL-адреса:
Это автоматически сгенерированные системой URL-адреса, которые обычно генерируются из-за GET-запросов, ссылок на хлебные крошки и постоянных ссылок в CMS.
- Мобильный URL:
Когда используете специальный URL-адрес (m.weratel.com) для мобильной версии вашего сайта. К примеру, SEMrush имеет 2 версии: мобильная и для ПК. Для мобильной и настольной версии SEMrush использует следующий канонический тег
<link rel = ”canonical” href = ”https://www.semrush.com/”>Скрин с исходным HTML-кодом страницы, на котором показан тег:
Мета-тег Alt (Альтернативный текст)
Тег Alt предназначен для текстового описания картинок. Таким образом, поисковые роботы понимают, что изображено на картинке. Вы могли встречать этот тег в моменты плохого интернет соединения. Когда на сайте не подгружается картинка, вместо неё появляется альтернативный текст
На первый взгляд может показаться, что наличие такого тега совсем не даёт преимуществ и не стоит тратить лишнее время на его заполнение. А на самом деле вы даже и представить не можете какое количество трафика генерирует альтернативный текст в умелых руках! Если вы часто пользуетесь поиском по картинках в Google, то уже могли бы догадаться о чем идет речь. Понимаете? Именно с помощью хорошо подобранного альтернативного текста можно продвинуть свою картинку в поисковике и заиметь дополнительный источник трафик. С картинками и тегом Alt есть ещё несколько интересных способов получить трафик, но это уже для другой статьи.
Как выглядит синтаксис мета-тега Alt:
<img src=”https://weratel.com.ua/wp-content/uploads/2021/09/pay-per-click-1024x576.jpg” alt=”Реклама с оплатой за клик”>Как правильно прописывать мета-тег Alt (Альтернативный текст)
- Текст должен быть информативным. Хорошим показателем будет, если посетитель после прочтения тега сможет прекрасно понять, что на нём изображено.
- Описание должно быть коротким и понятным. В некоторых источниках допускают размер текста до 16 слов — как по мне — это слишком. Старайтесь объясниться в максимум в 5-6 слов.
- Так как тег имеет прямое отношение к картинке, стоит упомянуть о том, что изображение должно быть оригинальным. Гугл умеет выявлять плагиат не только в тексте, но и в изображениях, поэтому альт и изображение должны быть оригинальными.
- Прозвучит банально, но на это нужно указать — не забывайте прописывать альтернативный текст! Наличие тега считается за фактор в ранжировании поисковиками. На больших сайтах легко упустить пару изображений из виду, поэтому пользуйтесь Screaming Frog для их поиска.
Мета тег Robots
Роботс — очень удобный и гибкий инструмент, который используют для предоставления инструкций поисковым роботам по отношению к конкретной странице. Если у вас есть представление о том, как работает файл robots.txt, то мета-robots можно назвать его младшим братом. Если в файле роботс можно настроить доступ поисковиков к всему сайту или отдельным директориям, то мета тег позволяет проделывать более ювелирную работу с веб-страницами и контентом, что на них размещен.
Тег имеет 4 основных значения для поисковых краулеров:
- follow / nofollow — разрешает или запрещает поисковикам переходить по ссылкам указанным на веб-странице.
- index / noindex — разрешает или запрещает индексировать страницу.
Как выглядит синтаксис мета тега robots:
Следующие директивы указывают поисковику, максимальную длину сниппета для текста и продолжительности видео. Просит проиндексировать страницу, но при этом не индексировать изображения на этой странице.
Как вы могли понять — это очень изящный инструмент с тонкими настройками, поэтому без должных знаний не рекомендуется браться за его настройку. Но, если же, вы со всеми директивами мета-роботс на “ТЫ” — ваши возможности и гибкость в SEO увеличивается в разы. Определенно рекомендую ознакомится более подробно с этим тегом!
Мета-теги социальных сетей (Open Graph и Twitter Cards)
- Теги Open Graph:
Мета теги open graph предназначены для содействия интеграции между Facebook, LinkedIn, Google и URL-адресами веб-сайтов, которыми вы поделились на этих платформах.
<meta property = ”og: type” content = ”article”>
<meta property = ”og: title” content = ”название почты или страницы”>
<meta property = ”og: description” content = ”описание содержимого страницы”>
<meta property = ”og: image” content = ”ссылка на изображение”>
<meta property = ”og: url” content = ”permalink”>
<meta property = ”og: site_name” content = ”site name”>
- Карты Twitter:
Карточки Twitter работают аналогично Open Graph, за исключением того, что вы добавляете эти специальные метатеги только для Twitter. Twitter будет использовать эти теги для улучшения отображения вашей страницы при публикации на своей платформе.
Вот пример того, как карточка Twitter выглядит в стандартном HTML:
<meta name = ”twitter: title” content = ”Title of post or page”>
<meta name = ”twitter: description” content = ”описание содержимого страницы”>
<meta name = ”twitter: image” content = ”ссылка на изображение”>
<meta name = ”twitter: site” content = ”@username”>
<meta name = ”twitter: creator” content = ”@username”>
Мета тег H1-заголовок
Мета тег H1-6 предназначены для обозначения заголовков в тексте. Цифра после “Н” обозначает глубину заголовка, если это H1 — то это название статьи/ товара. Такой заголовок в на странице должен быть только один. Многие приравнивают этот мета тег к Title, и не безосновательно, так как гугл время от времени в поисковой выдаче может заменять тайтл страницы на h1 заголовок, если считает это целесообразным.
Если просканировать эту статью сеошными инструментами или просто посмотреть в код, то можно заметить четкую иерархию заголовков, есть только один h1-заголовок, и большинство h2. Всё потому, что каждая часть текста имеет равную значимость и любой H2-заголовок можно расширить до полноценной статьи. Гугл слишком серьезно относится к H-заголовкам, поэтому внимательно отнеситесь к их использованию и строго соблюдайте вложенность заголовков.
Давайте разберем вложенность на самом очевидном примере — книга. Если h1 — это название книги, то h2 — это ее глава, а h3 — подзаголовок и так далее. Понимаете? Теперь представьте как поисковики недоумевают, когда видят в тексте 4 или 5 названий, или когда в одном из подзаголовков помещают несколько названий глав.
Обратите внимание на еще одну частую ошибку, вполне возможно, она есть у вас на сайте. Многие разработчики, в особенности молодые, не придают особого значения заголовкам и используют их вместо CSS-стилей, чтобы упростить себе жизнь или из-за обычного незнания. Не будем их винить, о таких нюансах, бывало, что не знают и опытные программисты. Так вот. С помощью заголовков легко указать размер текста и всё вроде хорошо и смотрится красиво, но это только до тех пор пока на содержимое страницы не взглянет поисковый бот. Он в лучшем случае проигнорирует бессмысленные заголовки,а в худшем — выдаст их в индекс, после чего накачивает нерелевантным трафиком, у которого будет огромный процент отказов, что послужит сигналом для поисковика больше никогда не ставить ваш сайт в ТОП выдачи. Казалось бы, небольшая лень разработчика приведёт к месяцам, а то и годам стагнации, пока не обратитесь к профессионалам.
Как правильно писать H1-заголовок
- Вставьте ВЧ ключ в начало заголовка. Можно добавить и два ключа, главное чтобы H1 читался органично и заголовок был достаточно длинным для двух ключей.
- Не больше одного H1 заголовка на страницу.
- H1 должен быть уникальным. Старайтесь, чтобы он сильно не отличался по смыслу от Title.
- Так как гугл может вместо тайтла выставить заголовок страницы, старайтесь делать заголовок не больше 65 символов.
Мета тег для адаптивной верстки
Последний важный метатег — это метатег адаптивного дизайна, который ещё можно назвать как «мета тег для адаптивности». Используя метатег viewport, мы можем управлять макетом веб-страниц в мобильных браузерах. Этот элемент области просмотра включен в раздел заголовка вашей веб-страницы.
Синтаксис:
<meta name = ”viewport” content = ”width = device-width, initial-scale = 1 ″>
Мета-теги, которые следует игнорировать
Не все мета-теги могут быть полезными. Нужно разобраться с списком, который лучше проигнорировать и не тратить на них сил.
- Мета тег keywords — рекомендую избегать и не тратить силы. Так много разговоров о том, как заполнять мета тег keywords водится в интернете, но мало кто задумывается о том, нужен ли он вообще? Сам Google заявил, что больше не учитывает этот тег как фактор ранжирования. Многие сеошники даже стали удалять на старых страницах keywords. Появились мысли о том, что гугл понимает, что вебмастер намерено оптимизирует ресурс под поисковики и понижает в выдаче. Но правда ли это? Кто знает…
- Revisit after — этот HTML-тег представляет собой команду для роботов вернуться на страницу через определенный период. Этот тег не используется ни в одной крупной поисковой системе и не имеет значения для SEO. Лучше избегать использования этого тега и предоставить поисковым системам решать, как сканировать ваш сайт. Синтаксис: <meta name = ”revisit-after” content = ”7 days” />
- Срок действия / дата — этот тег определяет дату истечения срока действия вашей страницы. Лично я бы не рекомендовал это, просто удалите, если вы его используете. Синтаксис: <meta http-Equiv = «Expires» content = «Пт, 28 января 2021 г., 23:59:59 GMT»>
- Site verification — просто проигнорируйте это. Вы можете подтвердить свой сайт с помощью Google Search Console.
- Generator — Бесполезный тег.
- Контроль кеширования — этот тег позволяет веб-издателями для того чтобы определять, как часто страница кэшируется. Обычно это не требуется; мы можем просто использовать заголовок HTTP вместо этого тега HTML.
- Мета-тег ODP Robots — Google больше не следует этому мета тегу.
- Geo мета-тег — Google не использует геометатеги для ранжирования страниц.
Заключение
Мета теги это потрясающий инструмент для каждого seo-специалиста. Наша статья — это руководство по первому применению. Некоторые теги стоит раскрыть более подробно, но и этого описания вполне достаточно для быстрых изменений в росте трафика и продаж. Мета теги в 2021 до сих пор важнейший фактор в ранжировании сайтов. Примените все новые знания к проекту и получайте новые лиды с органики. Нужна помощь в составлением мета тегов? Обращайся за бесплатной консультацией!
Ещё больше интересных статей и мнений в авторском блоге
