1 подписчик

HTML для SEO

14 марта 202414 мар 2024

5 мин

Оглавление

Для начала разберемся что такое HTML и CSS
Основные теги в HTML
Тег <HEAD> в <HTML>

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

Для начала разберемся что такое HTML и CSS

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP / HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора. Элементы HTML являются строительными блоками HTML страниц.

CSS (Cascading Style Sheets) — это язык разметки, используемый для визуального оформления веб-сайтов.
CSS отвечает за то, как выглядят расположенные на странице объекты: их размер, цвет, фоновое изображение, степень прозрачности, расположение относительно других элементов, поведение при наведении курсора, визуальное изменение кнопок при нажатии и т.п.

Основные теги в HTML

Основные теги внутри <html> это – <head> и <body>.

Тег <HEAD> в <HTML>

В <head> может входить достаточно много других тегов. Вот основные из них, полезные для SEO:

<title>

1. <title> – это заголовок страницы, на который обращают внимание пользователи, когда на наводят курсор на вкладку браузера. Он также является главной частью сниппета – краткого описания страницы в результатах поиска. <title> – это важный HTML-тег, играющий ключевую роль в оптимизации сайта для поисковых систем. Пример тега <title> в коде:

Правильное использование тега <title> помогает посетителям быстрее понять, о чем страница, и решить, хотят ли они перейти на нее. В результатах поиска <title> определяет, насколько привлекательным и релевантным выглядит сайт для пользователей.

Поисковые системы также учитывают <title> при оценке качества и релевантности контента страницы. Поэтому оптимизация этого тега – важный этап в процессе SEO продвижения.

Рекомендуется использовать разные теги <title> для каждой страницы сайта, чтобы поисковые системы могли легко идентифицировать контент на каждой странице и ранжировать его соответственно. Это поможет улучшить видимость сайта в поисковой выдаче и привлечь больше трафика.

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

<meta> мета-тег

2. Тег <meta>. <meta name=”description” content=”> используется для описания страницы.

name=”description” – означает, что следующее свойство – content=”…”, является описанием. Тогда, когда content=”…” содержит текст самого описания.

Описания страниц, указанные с помощью этого тега, часто используются поисковыми системами при формировании сниппетов. Сниппет – это фрагмент текста или ссылка, которые отображаются в результатах поиска.

Иногда описанием сниппета становится не описание страницы, указанное в теге <meta>, а фрагменты текста на самой странице. Эти фрагменты должны более точно соответствовать запросу пользователя, чтобы быть выбранными для сниппета.

<link>

3. Теги <link> используются для связи с внешними файлами, которые могут включать шрифты или, чаще всего, стили. Они также обладают рядом атрибутов, как и другие теги. Можно подключить файл со стилями, используя определенную конструкцию:

Конструкция, где rel= атрибут и его свойство “stylesheets” (что в переводе – таблица стилей)

Дальше, href атрибут, который ссылается на документ, и свойство – адрес этого документа ”/адрес/документ.css”

Атрибут rel=canonical тега <link>

4. Атрибут rel=canonical тега <link> сообщает поисковой системе, что некоторые страницы сайта являются одинаковыми, несмотря на разные URL-адреса.

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

Правила указания канонических ссылок:

Каноническая страница должна существовать и иметь код ответа сервера 200.
Ссылка не должна указывать на страницу, расположенную на другом домене.
Допускается только одна каноническая ссылка на странице.
Недопустимы цепочки из канонических ссылок.

Тег <BODY>

В <body> находится видимая для посетителя информация. Тег может включать в себя:

Теги h1…h6. Это заголовки страницы, которые разбивают текст по смыслу. Поисковые роботы любят, когда страница структурирована и оформлена. Используйте на страницы только один заголовок <h1>…</h1> и он должен быть первым (выше всех) на странице. Последующие подзаголовки можно использовать несколько раз, но важно, чтобы они шли по очереди. От <h2> до <h6>. Чаще всего Используют всего три типа заголовка: <h1>, <h2> и <h3>.
Оформление текста. Для того, чтобы разбить текст на параграфы используется тег <p>…</p>.
Выделить жирный текст <strong>текст </strong>
Курсив: <em>текст</em>
<ul>…</ul> начало и конец маркированного списка.
<li>…</li> строка списка.
<ol>…</ol> нумерованная строка.
Картинки. Чтобы добавить изображение нужно воспользоваться тегом <img> и его атрибутами src и alt.
Ссылки добавляются при помощи данной конструкции – <a title="описание, при наведении курсора" href="адрес страницы">текст ссылки</a>
*Нежелательные ссылки можно закрывать атрибутом rel=”nofollow”, добавив его к другим атрибутам. В таком случае робот не будет переходить по этой ссылке. Добавив атрибут rel=”noindex”, вы скажите поисковику, что данная ссылка не должна индексироваться поисковым роботом.
Один из самых распространенных тегов <div>…</div>. Это слой, которому можно указать определенные параметры отображения на странице с помощью атрибута class=”значение”. А значит, все что расположено между <div> и </div> будет перенимать эти параметры.