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

11 HTML-атрибутов для SEO