7 основных HTML-тегов, которые выделяют SEO-профи от новичков

ТОП поисковых систем по основным запросам — это вершина успеха онлайн-бизнеса.

Согласно исследованиям маркетинговых агентств, сайты из первой страницы поиска получают 95% трафика, последующие страницы получают всего 5% от общего объема.

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

Хотел бы я рассказать, что есть волшебная кнопка, которая обязательно переместит ваш сайт на первое место выдачи.

Но правда в том, что она требует изобретательности, настойчивости, упорства и творчества. Особенно при постоянно меняющемся характере алгоритмов Google и Яндекс.

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

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

1. Тег Title

Это, наверное, самый важный тег, когда дело доходит до базовой оптимизации сайта.

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

Вот как он выглядит в Google:

Title в поиске
Title в поиске

Я ввел в Google запрос SEO-оптимизация. Хорошо, если вы заметили, что это ключевое слово присутствует в точном соответствии в заголовке (title) и в описании (мета-описании). Это главная особенность тега title. Если вы хотите продвигать страницу по определенной ключевой фразе — напишите ее в заголовке. Но не нужно переусердствовать. Алгоритмы поисковых систем достаточно продвинутые — они хорошо понимают склонения, разбавление ключевой фразы и синонимы. Поэтому обязательно добавляйте ключевой запрос в тег title, но не жертвуйте читабельностью и смыслом предложения.

Как добавить тег title в HTML-код вашего сайта?

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

Вид html-тега title
Вид html-тега title в общей структуре страницы

Чтобы добавить тег title в HTML-код вашего сайта начните текст с <title> и закончите с </ title>. Так вы укажете поисковым машинам тему и ключевое слово, которое вы используете на этой веб-странице.

Если у вас сайт на платформе WordPress, то процесс добавления тега значительно упрощается.

Перейдите в панель инструментов WordPress.

Выберите вкладку «Записи» и пост, в который вы хотите добавить тег title.

Консоль WordPress
Консоль WordPress

И в поле «Введите заголовок» напишите то, что вы хотите показать в качестве тега title.

Заголовок страницы в WordPress
Заголовок страницы в WordPress

Примечание. WordPress автоматически дублирует название страницы в теги HTML. Поэтому просто введите желаемый заголовок, и он будет показан в результатах поиска.

2. Мета-тег description

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

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

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

Мета-описание в поисковой выдаче
Мета-описание в поисковой выдаче

Как вы видете, ключевые слова присутствуют не только в теге title, но и в мета-описании. Это важно.

Чтобы страница высоко ранжировалась в резкльтатах посика — вам нужно создать непрерывность между тегом заголовка и вашим мета-описанием. То есть делайте так, чтобы description был логическим продолжением title.

Например, вы используете фразу «интернет маркетинг» в теге title, но в мета-описании присутствует выраженное «email-маркетинг». Поисковые системы будут оценивать вашу страницу ниже, потому что они не могут определить, что вы конкретно обсуждаете — интернет-маркетинг или email-маркетинг.

Выбирайте одно ключевое слово и придерживайтесь его.

Вот как выглядит мета-тег описание в HTML-коде:

html-тег мета-описания в общей структуре страницы сайта
html-тег мета-описания в общей структуре страницы сайта

Важно! На каждой веб-странице должно быть одно ключевое слово. И это ключевое слово должно отображаться в теге title и мета-описании.

Если вы используете веб-сайт на WordPress, добавить мета-описание также очень легко с плагином «Yoast SEO».

Читайте наше руководство: Как правильно настроить Yoast SEO для WordPress — полное руководство.

Установите плагин, перейдите к странице, где вы хотите добавить мета-описание. Внизу, после записи вы увидите окно плагина Yoast SEO.

Нажмите на кнопку «Изменить сниппет».

Заполнение описания в популярном плагине
Заполнение описания в популярном плагине

И в выпадающем окне введите мета-описание до 160 символов.

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

Быстрый предпросмотр результатов выдачи
Быстрый предпросмотр результатов выдачи

3. Теги заголовков разных уровней

Тэги заголовков обязательно нужно добавлять в контент на сайте.

В отличие от тегов title и description они не выводятся в результаты поисковой выдачи (точнее не обязательно выводятся — об этом далее), но делают информацию на странице читабельнее и понятнее. Причем не только для пользователей, но и поисковиков.

Собственно, посмотрите немного выше выделенный шрифтом текст рядом с номером три.

Это H2 заголовок
Это H2 заголовок

Вся эта строка является тегом заголовка h2.

В версте существует несколько разных уровней тегов заголовков. В зависимости от формата записи чаще всего используют — h1, h2, h3, реже — h4, h5, h6.

Вот как выглядит HTML-тег подзаголовков:

Теги заголовков
Теги заголовков

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

Именно так поисковые системы могут создавать фрагменты в поисковой выдаче:

Сниппет в поисковой выдаче
Сниппет в поисковой выдаче

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

Добавить эти теги заголовков в любой из ваших материалов очень просто.

Если вы используете визуальный редактор, вы можете просто выбрать нужный заголовок.

Выбор заголовков в WordPress
Выбор заголовков в WordPress

В HTML-редакторе просто начните с <h2> и закройте </ h2>. Аналогично из заголовками других уровней.

4. Alt-теги для изображений

Alt-теги — это еще одна возможность продвинуть сайт, которую многие упускают. Ведь люди выполняют поиск на вкладке «Все».

Поиск Google
Поиск Google

Иногда люди ищут информацию на вкладке «Картинки».

Поиск по картинкам
Поиск по картинкам

Если вы не заполняете alt-теги — вы теряете часть своего трафика.

Поисковые системы еще не понимают изображения (в ближайшем будущем это точно изменится) — они читают только слова.

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

Таким образом, когда кто-то ищет на вкладке «Картинки», они могут найти ваш контент.

Вот как выглядит Alt-тег для изображений:

тег для картинок
Тег для картинок

Чтобы добавить этот тег в изображения для постов на платформе WordPress, нажмите на картинку, и вы увидите пустое поле с надписью «Атрибут alt».

Заполнение тега alt для изображений в WordPress
Заполнение тега alt для изображений в WordPress


Опишите это изображение. В alt-тег не обязательно добавлять ключевое слово, предназначенное для страницы.

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

5. Тег «nofollow»

Есть несколько причин, по которым нужно знать тег «nofollow» для ссылок.

Во-первых, тег «nofollow» сообщает поисковым системам, что они не должны переходить по ссылке.

Другими словами, привязка к веб-сайту или фрагменту контента обычно увеличивает ссылочную массу домена веб-ресурса, на который ссылаются. Но с тегом nofollow это не происходит. Ссылочная масса не передается.

Но не беспокойтесь: ссылка все равно будет работать. Она перенаправит пользователя в нужное место, если он нажмет на нее.

Вот как выглядит атрибут «nofollow»:

Тег nofollow
Тег nofollow

Но почему нужно знать о ссылках «nofollow»?

Есть несколько причин.

Если вы работаете над SEO-стратегией с помощью обратных ссылок, вам нужно знать, будут ли эти ссылки передавать ссылочный вес. Атрибут «dofollow» передает вес и помогает при ранжировании сайта, ссылки «nofollow» — нет.

Важно! Есть мнение экспертов, что ссылки «nofollow» в небольшой степени помогают ранжировани. Поэтому они не совсем бесполезны. Но подтвердить это или опровергнуть никто не может.

Также вы можете использовать тег «nofollow» на своем собственном веб-сайте, когда будете добавлять ссылки на другой веб-сайт, особенно с плохой репутацией.

Это гарантирует, что ссылка не повредит вашему домену.

Вот как вы можете сделать это на своем сайте.

Перейдите на HTML-редактор в блоге.

Переключение режимов
Переключение режимов

Добавьте ссылку и атрибут nofollow.

Ссылка и тег nofollow
Ссылка и тег nofollow

Теперь ссылка не повлияет на SEO другого сайта и защитит ваш сайт от санкций.

6. Анкорные ссылки

Когда публикуете статьи на своем сайте, вы, вероятно, ссылаетесь на разные сайты с помощью ссылок.

Многие люди просто добавляют ссылку на ресурс. Например, вот так http://mediol.name/ 

Но это не совсем хорошо в плане SEO. Лучше добавлять ссылку с анкором.

Для понимания: вот как выглядит HTML-тег с анкором:

А вот так без анкора:

http://example-website.com

Но почему ссылка с анкором лучше?

Google постоянно ищет привязку ссылки и текста, чтобы понять, зачем вы ссылаетесь на другой ресурс. Почему вы связываете свой контент с другим сайтом и что является предметом этой связки?

Текст вашего анкора должен ответить на эти вопросы для поиска.

К примеру, если вы ссылаетесь на чужой сайт и ставите хороший тег анкора, это поможет ранжированию больше, чем ссылка.

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

Поисковые системы любят организованный контент.

7. Канонические теги

Канонический тег отлично подходит для организации вашего контента и выстраивания приоритетности одной страницы по отношению к дубликату.

«Но у меня нет дублированных страниц на сайте!» — скажете вы.

Смею вас огорчить, но, скорее всего, вы ошибаетесь. На каждом веб-сайте есть дубли страниц.

Поскольку мы люди, а не поисковые системы, это трудно заметить.

Позвольте мне объяснить. Поисковая система может сканировать одну и ту же страницу, используя все эти разные URL-адреса .

Для нас они все похожи на одну и ту же страницу. Но для поисковой системы каждая из них — дубль.

Пример возможных дублей сайта
Пример возможных дублей сайта

Это всего лишь небольшая выборка возможных дублей страниц. Если у вас большой веб-ресурс — на нем могут быть сотни или тысячи дубликатов.

Чтобы решить эту проблему, вы можете использовать канонический тег, который указывает на приоритетность URL-а.

Вот как выглядит этот тег.

html-код тега Canonical
html-код тега Canonical

Это поможет поисковым системам правильно считывать информацию с вашего сайта и ранжировать его лучше.

Последний совет

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

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

Мой самый любимый — Yoast.

Если у вас есть сайт на WordPress, установите плагин Yoast, который упростит добавление большинства этих тегов.

Yoast даже проведет общий диагноз SEO для вашего контента и сообщит вам, как сделать его лучше. Найти рекомендации от Yoast Seo можно в конце редактора статьи:

Плагин Yoast SEO
Плагин Yoast SEO

Вывод

Покорение ТОП 1 занимает много времени. Иногда нужны месяцы, чаще всего — годы тяжелой, рутинной и творческой работы над сайтом, улучшением его рейтинга. И если не сдаваться — вы обязательно поднимитесь на вершину.

А для достижения этой цели требуются правильные HTML-теги.

Зачем?

Потому что это основа html-верстки. Потому что этого требуют поисковые системы. И в конце концов, использование HTML-тегов показывает, кто новичок в SEO, а кто — профессионал.

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

А значит — теряет часть органического трафика.

Если статья была для вас полезная — напишите об этом в комментариях!

7 основных HTML-тегов, которые выделяют SEO-профи от новичков
Рейтинг: 5 Оценок: 1
comments powered by HyperComments
Дмитрий Фастивец

Автор: Дмитрий Фастивец

Копирайтер студии «MEDIOL». Пишу коммерческие статьи и рассылки, разрабатываю Landing Page. Выясняю задачу и предлагаю решение. Верю, что качественный контент-маркетинг приводит покупателей к продавцам, а не наоборот. Работаю на результат.