9 HTML-тегов (и 11 атрибутов), которые необходимо знать для SEO
HTML - это основа веб-страницы. Откройте для себя ключевые теги и атрибуты HTML, которые имеют решающее значение для хорошего SEO продвижения. Узнайте, как их использовать и как их кодировать.
HTML - это язык разметки, который составляет основу большинства веб-страниц.
Возможно, это одна из самых фундаментальных частей технического SEO.
Используя элементы HTML, специалисты по SEO могут передавать информацию о странице пользователям и поисковым роботам.
Это может помочь прояснить важность, характер и порядок содержимого на странице, а также его связь с другими веб-страницами.
Разница между тегами и атрибутами
Чтобы понять разницу между тегами и атрибутами, нам нужно убедиться, что мы правильно поняли нашу терминологию.
Многие люди будут использовать фразу «тег» и «атрибут» как синонимы, но давайте будем точными.
Формат нижеследующего HTML-элемента состоит из трех частей:
- Открывающий тег.
- Контент, относящийся к этому тегу.
- Закрывающий тег.
Например:
<h1> Добро пожаловать на мою страницу о котятах </h1>
- «<h1>» открывает тег.
- «Добро пожаловать на мою страницу о котятах» - это содержание тега.
- «</h1>» закрывает тег.
Этот элемент является заголовком и будет использоваться в качестве видимого заголовка на веб-странице, чтобы представить информацию о котятах.
Теги
Теги должны иметь открывающий <X> и закрывающий </X> элементы, чтобы тег работал.
Есть также пустые элементы, такие как <br>, для которых нет содержимого или закрывающего тега.
Атрибуты
Атрибуты добавляются к элементам для их изменения. Они находятся внутри элемента, например:
<link rel = "canonical" href = "https://www.example.com" />
3 Основные HTML-тега
Чтобы сделать веб-страницу полезной, необходимо несколько ключевых тегов.
<! DOCTYPE html>
Тег <! DOCTYPE html> - это самый первый тег на веб-странице.
По сути, он представляет страницу как веб-страницу.
<head>
Тег <head> вводит первый раздел страницы.
Здесь содержится информация о странице, которая не будет отображаться на странице.
Важно знать о <head>, поскольку именно здесь должны быть размещены некоторые из важных тегов для SEO.
<body>
Тег body содержит информацию о странице, которую увидят ваши посетители.
Вот куда пойдут ваши тексты, изображения и видео.
В теле также будут находиться некоторые другие теги HTML, о которых мы поговорим позже.
Общие теги для SEO и используемые в них атрибуты
<meta>
Тег <meta> находится внутри <head> страницы.
Он может содержать атрибуты, описывающие информацию о веб-странице, которая на самом деле не будет отображаться в содержимом страницы.
Этот метатег часто называют «метаданными» из-за используемых с ним атрибутов, которые управляют такими вещами, как «мета-описание» и неиспользуемые «мета-ключевые слова».
Атрибут имени
Атрибут name используется с тегом <meta>.
По сути, это способ указать ботам, которые могут посещать страницу, относится ли к ним следующая информация или нет.
Например, включение <meta name = "robots" content = "noindex" /> означает, что все боты должны обратить внимание на директиву "noindex".
Вы часто слышите, что это называется «метатег роботов».
Если использовалось следующее <meta name = ”googlebot” content = ”noindex” />, только бот Google должен был бы принять во внимание директиву “noindex”.
Это хороший способ дать поисковым ботам команды, которые нужны не всем.
Атрибут Noindex
Атрибут «noindex» обычно используется в SEO.
Вы часто слышите, как его называют «тегом noindex», но точнее, это атрибут тега <meta>.
Он пишется так:
<meta name = "robots" content = "noindex" />
Этот фрагмент кода позволяет определять, какой контент может быть включен в индекс поисковой системы.
Добавляя атрибут «noindex», вы, по сути, сообщаете поисковой системе, что она не может использовать эту страницу в своем индексе.
Например, это полезно, если есть конфиденциальный контент, который вы не хотите видеть в обычном поиске.
Например, если на вашем сайте есть области, которые должны быть доступны только для платных участников, включение этого контента в поисковые индексы может сделать его доступным без входа в систему.
Директиву «noindex» необходимо прочитать, чтобы следовать ей. То есть поисковые роботы должны иметь доступ к странице для чтения HTML-кода, содержащего директиву.
Таким образом, будьте осторожны, чтобы не заблокировать доступ роботов к странице в robots.txt.
Атрибут Description
Атрибут описания, более известный как «мета-описание», используется с тегом <meta>.
Содержимое этого тега используется в результатах поиска под содержимым тега <title>.
Это позволяет обобщать контент на странице таким образом, чтобы помочь поисковикам определить, соответствует ли страница их потребностям.
Это не влияет на рейтинг страницы, но может стимулировать переходы на страницу из результатов поиска.
Важно понимать, что во многих случаях Поисковая система будет игнорировать содержание атрибута описания в пользу использования своего собственного описания в поисковой выдаче.
<Title>
Также известный в просторечии как «мета-заголовок», это тег, который вы используете для определения заголовка страницы. Он находится внутри <head> сайта.
Таким образом, он не виден пользователям на веб-странице. Тем не менее, он отображается в строке браузера, в результатах поиска и позволяет вам обозначать релевантность страницы поисковому запросу - как для поисковых роботов, так и для пользователей.
от <h1> до <h6>
Эти теги-заголовки используются для указания , какие части содержания HTML должны быть оформлены в виде заголовков.
Теги располагаются внутри <body> страницы, поэтому текст виден пользователям, просматривающим содержимое страницы.
Теги заголовков следует использовать для структурирования страницы.
При создании веб-сайта разработчики гарантируют, что стили будут связаны с каждым типом тега заголовка.
Это означает, что слова, заключенные в тег <h1>, должны отличаться от слов, заключенных в тег <h2>.
Это помогает пользователям определить, является ли раздел текста частью предыдущего раздела, например заголовки и подписи.
Теги заголовков также помогают поисковым роботам определять структуру контента на странице.
Теги ссылок и атрибут Href
Как специалисты по SEO, мы проводим много времени в поисках ссылок.
Но знаете ли вы, как структурирована ссылка и почему некоторые ссылки считаются более ценными, чем другие?
Стандартная гиперссылка - это, по сути, тег <a>. Его формат следующий:
<a href="/www.example.com"> здесь находится якорный текст ссылки </a>.
Тег <a> указывает, что это ссылка.
Атрибут href = определяет место назначения ссылки (то есть, на какую страницу она ведет).
Текст, который находится между открывающим тегом <a> и закрывающим тегом </a>, является текстом привязки.
Это текст, который пользователь увидит на странице, которая выглядит интерактивной.
Это используется для интерактивных ссылок, которые появятся в <body> страницы.
Тег <link> используется для связывания ресурса с другим и отображается в <head> страницы.
Эти ссылки не являются гиперссылками, на них нельзя нажимать. Они показывают взаимосвязь между веб-документами.
Rel = Атрибут "nofollow"
Атрибут rel = ”nofollow” сообщает ботам, что URL-адрес в атрибуте href не является тем, по которому они могут следовать.
Использование атрибута rel = "nofollow" не повлияет на способность пользователя щелкнуть ссылку и перейти на другую страницу. Это влияет только на ботов.
Это используется в SEO, чтобы остановить поисковые системы от посещения страницы или от приписывания каких-либо преимуществ ссылки на одну страницу на другую.
Это, возможно, делает ссылку бесполезной с традиционной точки зрения построения ссылок SEO, поскольку ссылочная стоимость не проходит через ссылку.
Есть аргументы в пользу того, что это по-прежнему полезная ссылка, если, конечно, она заставляет посетителей просматривать страницу, на которую указывает ссылка!
Атрибут «nofollow» может использоваться, чтобы помочь поисковым системам узнать, когда страница, на которую ведет ссылка, является результатом платежа, например, или рекламой.
Это может помочь решить проблемы со штрафами за ссылку, поскольку издатель признает, что ссылка является результатом законной сделки, а не попыткой манипулировать рейтингом.
Атрибут rel = ”nofollow” может использоваться для отдельной ссылки следующим образом:
<a href=www.example.com rel="nofollow"> здесь находится якорный текст ссылки </a>
Или его можно использовать для отображения всех ссылок на странице как «nofollow», используя его в <head>, как если бы использовался атрибут «noindex»:
<meta name = "robots" content = "nofollow" />
Как Google использует атрибут rel = "nofollow"
В 2019 году Google объявил о внесении некоторых изменений в способ использования атрибута nofollow.
Это включало информирование нас о некоторых дополнительных атрибутах, которые можно использовать вместо «nofollow», чтобы лучше выразить отношение ссылки к целевой странице.
Эти новые атрибуты - rel = "ugc" и rel = "sponsored".
Они должны использоваться, чтобы помочь Google понять, когда издатель желает, чтобы целевая страница была снижена для целей ранжирования.
Атрибут rel = "sponsored" указывает, когда ссылка является результатом платной сделки, такой как реклама или спонсорство. Атрибут rel = ”ugc” указывает, когда ссылка была добавлена через пользовательский контент, такой как форум.
Google также объявил, что они и атрибут «nofollow» будут рассматриваться только как подсказки.
Если раньше использование атрибута «nofollow» приводило к тому, что робот Googlebot игнорировал указанную ссылку, теперь он будет принимать во внимание эту подсказку, но по-прежнему может рассматривать ее, как если бы «nofollow» не присутствовал.
Атрибут Hreflang
Назначение атрибута hreflang - помочь издателям, чьи сайты показывают один и тот же контент на нескольких языках.
Он указывает поисковым системам, какую версию страницы следует показывать пользователям, чтобы они могли читать ее на предпочитаемом языке.
Атрибут hreflang используется с тегом <link>. Этот атрибут определяет язык содержимого URL-адреса, на который указывает ссылка.
Он используется внутри <head> страницы и имеет следующий формат:
<link rel = "alternate" href = "https://example.com" hreflang = "en-gb" />
Он разбит на несколько частей:
- Rel = "alternate", который указывает на то, что на странице есть соответствующая альтернативная страница.
- Атрибут href = указывает, на какой URL-адрес делается ссылка.
- Код языка - это двухбуквенное обозначение, которое сообщает поисковым роботам, на каком языке написана связанная страница. Две буквы взяты из стандартизированного списка, известного как коды ISO 639-1.
Атрибут hreflang также можно использовать в HTTP-заголовке для документов, не относящихся к HTML (например, PDF), или в XML-карте сайта веб-сайта.
Правильное использование атрибута hreflang может быть сложной задачей.
Атрибут canonical
Атрибут rel = ”canonical” тега ссылки позволяет специалистам по SEO указать, какая другая страница на веб-сайте или другом домене должна считаться канонической.
Каноническая страница означает, что это главная страница, копии которой могут быть другими.
Для поисковых систем это показатель страницы, которую издатель хочет считать главной для ранжирования, копии не должны ранжироваться.
Канонический атрибут выглядит так:
<link rel = "canonical" href = "https://www.example.com/" />
Код должен находиться в <head> страницы. Веб-страница, указанная после «href =», должна быть страницей, которую поисковые роботы должны рассматривать как каноническую.
Этот тег полезен в ситуациях, когда на двух или более страницах может быть идентичное или почти идентичное содержание.
Использование канонического атрибута
Веб-сайт может быть настроен таким образом, чтобы это было полезно для пользователей, например, страница со списком продуктов на сайте электронной торговли.
Например, страница основной категории для набора продуктов, такого как «обувь», может иметь копию, заголовки и заголовок страницы, в которых написано «обувь».
Если бы пользователь щелкнул фильтр, чтобы показать только коричневые туфли 8-го размера, URL-адрес мог бы измениться, но текст, заголовки и заголовок страницы могли бы остаться такими же, как на странице «туфли».
В результате получатся две страницы, которые идентичны, за исключением списка отображаемых продуктов.
В этом случае владелец веб-сайта может пожелать разместить канонический тег на странице «коричневые туфли 8 размера», указывающий на страницу «обувь».
Это поможет поисковым системам понять, что страницу «коричневые туфли 8-го размера» не нужно ранжировать, тогда как страница «туфли» является более важной из двух и должна оцениваться.
Проблемы с каноническим атрибутом
Важно понимать, что поисковые системы используют только канонический атрибут в качестве руководства, это не то, чему нужно следовать.
Есть много случаев, когда канонический атрибут игнорируется, а другая страница выбирается как каноническая из набора.
IMG
Тег <img> используется для вставки изображения на страницу HTML.
Тег изображения не вставляет изображение на страницу как таковое, а связывает его таким образом, чтобы изображение было видимым на странице.
По сути, он создает контейнер для изображения, размещенного в другом месте.
Формат тега <img> следующий:
<img src = "imagename.jpg" alt = "это описание изображения">
Этот тег содержит два атрибута, один из которых важен для работы тега, а другой можно оставить пустым.
Атрибут Src
Атрибут src = используется для ссылки на расположение изображения, которое отображается на странице.
Если изображение находится в том же домене, что и контейнер, в котором оно появится, можно использовать относительный URL-адрес (только конечную часть URL-адреса, а не домен).
Если изображение должно быть получено с другого веб-сайта, необходимо использовать абсолютный (полный) URL.
Хотя этот атрибут не служит какой-либо цели SEO как таковой, он необходим для работы тега изображения.
Атрибут Alt
В приведенном выше примере тега изображения также есть второй атрибут - атрибут alt =.
Этот атрибут используется для указания, какой альтернативный текст должен отображаться, если изображение не может быть отображено.
Атрибут alt = должен присутствовать в теге <img>, но его можно оставить пустым, если альтернативный текст не нужен.
Есть некоторые преимущества в использовании ключевых слов в атрибуте alt = изображения. Поисковые системы не могут точно определить, что это за изображение.
Были достигнуты большие успехи в способностях основных поисковых систем определять то, что изображено на картинке. Однако эта технология далека от совершенства.
Таким образом, поисковые системы будут использовать текст в атрибуте alt =, чтобы лучше понять, что это за изображение.
Используйте язык, который помогает подчеркнуть релевантность изображения теме страницы.
Это может помочь поисковым системам определить релевантность этой страницы для поисковых запросов.
Важно помнить, что это не основная причина использования атрибута alt =.
Этот текст используется программами чтения с экрана и вспомогательными технологиями, чтобы те, кто использует эту технологию, могли понять содержание изображения.
Атрибут alt = следует учитывать в первую очередь, чтобы сделать веб-сайты доступными для тех, кто использует эту технологию. Этим не следует жертвовать в целях SEO.
Вывод
Это руководство представляет собой введение в основные HTML-теги и атрибуты, о которых вы можете услышать в SEO.
Однако есть еще много всего, что нужно для создания функционирующей, доступной для сканирования и индексирования веб-страницы.
Пересечение навыков SEO и разработки огромно.
Как специалист по SEO, чем больше вы знаете о том, как устроены веб-страницы, тем лучше.
Об авторе
Читайте также:
By accepting you will be accessing a service provided by a third-party external to https://qdg.ru/