Гайд по SEO-текстам: как собрать ключи и создать контент, который привлечет посетителей
Полезные инструменты, анализ эффективности и советы по оптимизации контента
Разбираемся с метатегами и HTML тегами структуры, заголовков, форматирования, ссылок и изображений
HTML — это стандартизированный язык разметки документов в интернете. Браузеры интерпретируют язык HTML и отображают пользователю уже отформатированный текст. Для разметки документов и нужны HTML теги, которые задают тексту и изображениям определенные свойства.
Для раскрутки сайта необязательно досконально разбираться в HTML и быть гуру верстки. Но есть теги, работа с которыми неразрывно связана с SEO. И о них нужно знать.
«Теги», «метатеги», «атрибуты», «элементы» — в чем разница?
HTML тег и атрибуты изображений
Чек-лист самых важных тегов HTML для SEO
Читая статьи о SEO, вы наверняка встретите эти термины. Но их часто путают, называя теги элементами, элементы — атрибутами.
Начнем с тегов. Это базовые конструкции HTML. Все они заключены в скобки <…>. Теги могут быть одиночными и парными. Во втором случае есть открывающий и закрывающий тег, обозначающийся <…/>. Примеры тегов:
<p></p>
<br>
<body></body>
Внутри тега располагается текст. В совокупности с тегом этот текст является элементом HTML. Элемент — это основная структурная единица документа, написанного на HTML. Вот примеры элементов:
<p>Этот тег свидетельствует о начале и конце абзаца</p>
<body>Текст, заключенный в этом теге, виден пользователю в браузере</body>
Элементы могут обладать атрибутами (свойствами). Они имеют стандартные значения или те, которые задаются пользователем. Атрибут прописывается в открывающем теге после имени элемента и перед закрывающей скобкой (>). Вот пример атрибута:
<a href="https://www.site.ru">Данный элемент содержит атрибут href</a>
Разновидностью тегов являются метатеги. Это теги, предназначенные для представления структурированных метаданных о веб-странице. Они прописываются между тегами <head> и </head> — то есть пользователи не видят их содержимое.
Вот примеры метатегов:
<meta name="author" content="Павел Павлов" />
<meta name="description" content="Описание документа" />
<meta name="document-state" content="Dynamic" />
Итак, с понятиями разобрались. Перейдем к самым важным HTML тегам для SEO.
Каждый HTML документ имеет такую структуру:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Разберемся, что в нее входит:
Естественно, это не исчерпывающий список тегов структуры. Есть еще <header>, <article>, <footer>, <div> и другие. Но для понимания базовой SEO-оптимизации сайта рассмотренных тегов достаточно.
Не хотите тратить время на оптимизацию сайта? Автоматизируйте SEO в системе PromoPult. Подбор ключей, кластеризация, внутренняя оптимизация, линкбилдинг, наполнение сайта — все на полном автомате.
Заголовки важны для поисковой оптимизации сайта, ведь они помогают поисковикам определить релевантность документов запросам пользователей.
Первый тег — <title>. Он прописывается между тегами <head> и </head>. То есть информация в нем не отображается на странице, но поисковики ее учитывают и выводят как заголовок в результатах поиска.
Самая важная информация в <title> должна поместиться в 60 символов — примерно столько отражается в заголовках сниппетов поисковых систем. Общий же текст в <title> может быть длиннее.
Синтаксис такой:
<head>
<title>Заголовок страницы</title>
</head>
На одной странице допустим только один заголовок <title>.
А вот как текст из <title> отображается в заголовке сниппета на поиске Яндекса:
Тег <title> часто называют метатегом — по той причине, что он размещается в служебном разделе <head>. И действительно, по своей сути он напоминает метатег. И если вы будете называть его метатегом, страшного ничего не произойдет. Но формально это тег заголовка документа. Поэтому мы рассказали о нем именно в этом разделе.
Внутри тегов <body>…</body> идут заголовки, которые отражаются в браузере. Главный заголовок заключен в парный тег <h1> — он единственный на странице, идет в самом начале. Для SEO это самый значимый заголовок, он отражает суть документа, именно в него следует вписывать самые частотные ключевые фразы. Далее текст разбивается на разделы заголовками <h2>, а уже после них — дробится на смысловые единицы с помощью <h3> — <h6>.
Важно запомнить: заголовок нижнего уровня (например, <h3>) не должен располагаться выше заголовка верхнего уровня (например, <h2>).
Синтаксис:
<body>
<h1>Заголовок</h1>
<h2>Заголовок второго уровня</h2>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h3>Заголовок третьего уровня</h3>
<h2>Заголовок второго уровня</h2>
</body>
А вот как отформатированный при помощи заголовков текст отображается в браузере:
Теги — это только вершина SEO. Полный перечень работ вы найдете в чек-листе по оптимизации сайта.
Если их не использовать, то текст будет похож на «простыню», которую сложно читать. Благодаря форматированию в тексте можно расставить акценты, сделать его читабельным. Поисковики распознают теги форматирования и отдают предпочтение «удобным» текстам.
Для целей SEO достаточно использовать такие теги:
Конечно, это далеко не все теги, но чтобы самостоятельно отформатировать текст и не обращаться к верстальщику, SEO-специалисту будет достаточно этого набора.
Метатеги используются в HTML документе для следующих целей:
<meta name="author" content="Михаил Булгаков" />
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1">
Остановимся подробнее на важных метатегах для целей поисковой оптимизации.
Самый важный для SEO метатег — Robots. С его помощью можно запретить или разрешить индексацию страницы и ссылок на ней. Синтаксис такой:
<meta name="robots" content="index,follow" />
Значение index говорит о том, что роботам можно индексировать страницу (в противном случае меняем значение на noindex). Значение follow разрешает индексацию ссылок (в противном случае используем nofollow).
В каких случаях использовать noindex и nofollow, читайте в этой статье.
Для целей SEO также важен метатег Description. Информация из него используется Google для формирования описания в сниппете (но так происходит не всегда). А вот Яндекс формирует сниппет на свое усмотрение. Но все поисковики учитывают информацию из Description для определения релевантности контента страницы поисковому запросу. Поэтому сюда обязательно стоит вписать ключевые фразы.
Синтаксис выглядит так:
<meta name="description" content="Описание длиной около 170 символов" />
Для быстрой проверки заголовков title, h1-h6 и метатегов description и keywords на сайте используйте парсер PromoPult. Полезные лайфхаки по работе с ним — здесь.
Метатег Keywords при определении релевантности страницы поисковиками не учитывается. Но некоторые оптимизаторы до сих пор его прописывают. Выглядит он так:
<meta name="keywords" content="ключ 1, ключ 2, ключ 3 и т. д." />
О каких еще метатегах полезно знать:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
или в HTML5: <meta charset="UTF-8">
<meta http-equiv="content-language" content="ru" />
или в HTML5: <html lang="ru">
Для того чтобы страница корректно отображалась в соцсетях, тоже используются метатеги. Например, протокол Open Graph поддерживает метатеги Property. Эти метатеги понимает ВК, Pinterest, Twitter, Telegram, WhatsApp, Viber, Slack и другие соцсети и мессенджеры.
Метатеги для SEO — это обширная тема. В статье «Важные метатеги для SEO-оптимизации сайта» все подробно описано.
С помощью тегов создаются гиперссылки. Синтаксис такой:
<a href="site.ru">анкор ссылки</a>
Атрибут href указывает на адрес документа в интернете.
Тег ссылки имеет атрибуты. Например, атрибут target определяет, как будет открываться новый документ. Возможны такие значения этого атрибута:
Если атрибут target не задать, то по умолчанию будет использоваться значение _self.
При использовании атрибута target со значением _blank (открытие ссылки на новой вкладке) важно указать еще атрибут rel со значением noopener. Это закроет уязвимость, связанную с получением частичного контроля над страницей со стороны ресурса, на который был переход. Синтаксис такой:
<a href="site.ru" target="_blank" rel="noopener">анкор ссылки</a>
Для целей SEO часто требуется закрыть ссылку от индексации поисковыми роботами. Для этого используется атрибут rel со значением nofollow. Синтаксис такой:
<a href="site.ru" rel="nofollow">анкор ссылки</a>
Для вставки и описания изображений тоже используется специальный тег. Для целей SEO особенно важны атрибуты alt.
Синтаксис тега изображения:
<img src="url" alt="альтернативное имя" title="описание изображения" width="размер (в пикселях или %)" height="размер (в пикселях или %)">
Здесь используются атрибуты:
Подробный гайд по SEO изображений: «13 приемов оптимизации изображений: как выйти в топ поиска по картинкам»
Естественно, HTML-тегов намного больше — и если уметь ими пользоваться, это только плюс. Но для базового SEO вполне достаточно тех, что мы рассмотрели.
«Плаваете» в HTML и вам сложно оценить правильность кода? Закажите SEO-аудит в PromoPult. Кроме определения валидности кода, он содержит много полезной информации, от которой вы будете отталкиваться при продвижении сайта.
Полезные инструменты, анализ эффективности и советы по оптимизации контента
Краткий словарь для владельцев сайтов и начинающих вебмастеров
Полезные инструменты для вебмастеров, SEO-специалистов и владельцев сайтов.
— Мы только спросить: нужен трафик и лиды из поиска Яндекса и Google?
Подключите бесплатное продвижение на 2 недели и получите взрывной рост позиций в Яндексе и Google, целевой трафик и продажи.
Настоящим Я даю свое полное согласие на получение электронных уведомлений (на указанные мой абонентский номер и адрес электронной почты), а также выражаю явное и полное согласие на сбор, хранение, обработку и передачу персональных данных, согласно положениям, изложенным в Политике конфиденциальности, расположенных по адресу: promopult.ru/rules.html?op=private, с которыми я ознакомился и принял.