HTML — это фундамент веб-страницы, который представляет собой язык разметки, лежащий в основе большинства сайтов. Он является важнейшим элементом технического SEO.
Именно благодаря HTML-элементам вебы и SEO-специалисты могут предоставлять полезную информацию как для пользователей, так и для поисковых систем.
Что такое HTML-атрибуты?
Атрибуты HTML — это данные, добавляемые к элементам для их настройки. Например:
- <link rel="canonical" href="https://www.rocketprofit.com" />
В данном случае атрибут `rel="canonical"` указывает поисковикам, что данный URL является каноническим.
Структура HTML-атрибутов
Атрибут состоит из имени и значения. К примеру, при вставке изображения атрибут `src` указывает путь к файлу, а `alt` — альтернативный текст, который будет показан, если изображение не загрузится.
- <img src="ginger-cat.jpg" alt="Рыжий кот на дереве">
Типы HTML-атрибутов
Атрибуты делятся на несколько типов:
- Обязательные - это атрибуты, необходимые для правильной работы тега
- Необязательные - предоставляют дополнительные данные, но не критичны для функционирования элемента
- Стандартные атрибуты - атрибуты, которые применяются к большинству HTML-тегов. Например, атрибут `style` используется для оформления элементов (цвет, размер шрифта и т.д.)
- Атрибуты событий - атрибуты, которые отвечают за поведение элемента при определенных действиях, таких как клик мыши или наведение курсора. Например, атрибут `onclick` указывает, какую функцию выполнить при нажатии на элемент
Важность HTML-атрибутов
HTML-атрибуты играют ключевую роль в веб-разработке, так как они позволяют добавлять дополнительный контекст и функциональность на страницы. Это особенно важно для SEO, ведь атрибуты предоставляют необходимую информацию для поиска, помогая системам лучше понимать содержимое сайта или его отдельных составляющих.
Они позволяют управлять тем, как поисковые роботы индексируют сайт, а также помогают указывать, какие страницы показывать пользователям в разных странах или на разных языках. Атрибуты также позволяют запретить индексацию. Многие аспекты технического SEO регулируются именно через HTML-атрибуты.
Общие атрибуты, используемые в SEO
Атрибут `name` используется в теге `<meta>`, чтобы передать информацию различным ботам. Например, добавление следующей строки указывает всем поисковым роботам не индексировать страницу. Этот тег часто называют «метатегом robots»:
- <meta name="robots" content="noindex" />
Если же используется другой атрибут, тогда указание будет предназначено только для Google. Это позволяет давать инструкции определенным ботам
- <meta name="googlebot" content="noindex" />
- Атрибут Noindex
Атрибут `noindex` активно используется в SEO для контроля видимости страниц в поисковой системе. Он добавляется с помощью метатега:
- <meta name="robots" content="noindex" />
Он сообщает поисковикам, что страница не должна быть включена в их индекс. Это полезно для скрытия конфиденциального контента, например, платных разделов сайта.
Но важно помнить, что боты должны иметь доступ к странице для выполнения этой директивы. Если она будет заблокирована через файл `robots.txt`, атрибут «noindex» не будет действовать.
Атрибут `description`, известный как мета-описание, используется в теге `<meta>`. Его содержимое отображается в результатах поиска под заголовком, определенным в теге `<title>`. Он позволяет кратко описать содержание страницы, помогая пользователям понять, подходит ли она для их запросов.
Хотя мета-описание не влияет напрямую на позицию в выдаче, оно может повысить кликабельность. Однако стоит учитывать, что Google часто игнорирует пользовательские мета-описания и генерирует их самостоятельно на основе содержимого страницы.
Одной из ключевых задач SEO является работа со ссылками. Гиперссылка представлена тегом `<a>` с атрибутом `href`:
- <a href="www.example.com">текст ссылки</a>
Здесь тег `<a>` обозначает, что это ссылка, а атрибут `href` указывает, куда она ведет. Текст между тегами `<a>` и `</a>` называется якорным текстом. Это то, что видит пользователь и на что он может кликнуть.
Такие ссылки размещаются в основном содержимом страницы, в то время как тег `<link>`, используемый в разделе `<head>`, служит для связывания ресурсов (например, стилей или скриптов). Он не является кликабельным.
- Атрибуты Rel="nofollow", Rel="ugc" и Rel="sponsored"
Атрибут `rel="nofollow"` сообщает поисковым ботам, что они не должны переходить по ссылке, указанной в `href`. Это не мешает пользователям кликнуть по ней, но такой атрибут предотвращает передачу «ссылочного веса» между страницами.
`rel="nofollow"` часто используется для предотвращения индексации ссылок, особенно если они ведут к платному контенту или рекламе. Также его можно применить ко всем ссылкам на странице с помощью метатега:
- <meta name="robots" content="nofollow" />
Кроме того, атрибуты `rel="ugc"` (пользовательский контент) и `rel="sponsored"` помогают указывать на ссылки, созданные пользователями или размещенные в рамках рекламы. Это помогает поисковым системам лучше понимать, какие из ссылок являются органическими.
Как Google использует атрибут Rel="nofollow"
В 2019 году Google внес изменения в работу с атрибутом `rel="nofollow"`, а также добавил новые атрибуты для более точного обозначения связи между страницами. Вместо одного `nofollow` теперь можно использовать `rel="ugc"` и `rel="sponsored`, чтобы лучше информировать поисковую систему о характере ссылок.
- Rel="sponsored" указывает, что ссылка создана в результате коммерческой сделки, такой как реклама или спонсорство
- Rel="ugc" используется для ссылок, добавленных пользователями, например, в комментариях или на форумах
Google теперь рассматривает все эти атрибуты не как строгие указания, а как «подсказки». Если раньше ссылки с атрибутом `nofollow` полностью игнорировались Googlebot, то теперь поисковик может обрабатывать их по собственному усмотрению.
Атрибут `hreflang` помогает сайтам, которые предлагают один и тот же контент на разных языках, показывать пользователям версию страницы на их родном языке. Этот атрибут указывает поисковым системам, какой вариант страницы следует отображать в зависимости от языка или региона посетителя.
Атрибут используется вместе с тегом `<link>` и выглядит следующим образом:
<link rel="alternate" href="https://example.com" hreflang="en-gb" />
- `rel="alternate"` указывает на наличие альтернативной версии страницы
- `href` указывает URL страницы
- Код языка `hreflang="en-gb"` идентифицирует язык и регион с использованием стандарта ISO 639-1
- Канонический атрибут
Атрибут `rel="canonical"` позволяет вебам и SEO-специалистам обозначить, какой раздел на сайте (или в другом домене) является основным или «каноническим». Это помогает поисковым системам понять, какую страницу считать приоритетной для ранжирования.
Пример канонического тега:
- <link rel="canonical" href="https://www.rocketprofit.com/" />
Как Google использует канонический атрибут
Этот код размещается в разделе `<head>`. Страница, указанная в атрибуте `href`, будет считаться главной версией, а другие дубликаты не будут участвовать в ранжировании. Это особенно полезно, если на нескольких разделах сайта опубликован схожий или идентичный контент.
Но важно понимать, что поисковые системы используют атрибут canonical только в качестве ориентира, которому не обязательно следовать. Существует множество случаев, когда этот атрибут игнорируется и в качестве канонической выбирается другая страница.
Атрибут `src=` используется для указания пути к изображению, которое должно отображаться на странице. Если фото находится на том же домене, можно использовать относительный URL (без указания домена). Если картинка загружается с другого ресурса, требуется полный URL. Хотя атрибут `src=` напрямую не влияет на SEO, он является необходимым для корректного отображения изображений на сайте.
Атрибут `alt=` — это альтернативный текст для изображения, отображаемый в случае, если оно не может быть загружено. Он обязателен для тега `<img>` и может быть пустым, если альтернативный текст не требуется.
Использование ключевых слов в атрибуте `alt=` может оказать небольшое влияние на SEO, поскольку поисковые системы используют его для понимания содержания изображения.
Основной задачей атрибута `alt=` является обеспечение доступности контента для пользователей с ограниченными возможностями, которые используют программы чтения с экрана. Поэтому при написании `alt=` стоит думать в первую очередь о доступности, а не об улучшении SEO.
В этом руководстве мы рассмотрели основные HTML-атрибуты, которые часто используются в SEO. Но для создания полностью оптимизированной, сканируемой и индексируемой страницы советуем изучить больше полезных статей на нашем сайте для того, чтобы повысить эффективность продвижения.
👍🏻 Инфа была полезной? Ставь лайк!
Всем конверта и ROI высоченного
Официальный сайт 👉🏻 rocketprofit.com
Наш Telegram-чат 👉🏻 t.me/rocketprofitchat
