1. О HTML5
2. Новые структурные теги
3. <Заголовок>
4. <Нав>
5. <Статья>
6. <Раздел>
7. <В сторону>
8. <Колонтитул>
9. Должен ли я использовать HTML5 сейчас?

Эволюция HTML была долгим переходом от того, как все выглядит, и к тому, что это значит. Прошли те времена, когда веб-страницы объединялись в HTML-таблицы, чтобы компенсировать ограниченные элементы управления макетом. (Или, скорее, те дни должны уйти. Вы знаете, кто вы есть.) Улучшения в языке и рост CSS позволили веб-программистам создавать страницы, которые отлично выглядели для пользователей и имели больше смысла для поисковых систем.

Но даже с прогрессом в семантической разметке - кодировании для описания того, что передает контент, а не как он выглядит - все еще существовало необходимое зло тегов <div> и <span>. Эти семантически бессмысленные элементы продолжали использоваться как запасной вариант для структуры и дизайна, когда семантические теги терпели неудачу. Хотя он был ближе к идеалу, чем таблицы, он все еще был программирующим костылем, чтобы заполнить недостаток в языке HTML, и еще одним кусочком бессмысленного кода для поисковых систем, чтобы разобраться в этом с целью.

О HTML5

С появлением HTML5 многие из этих недостатков были устранены. Вездесущие обходные пути, такие как <div id = ”header”> и <div id = ”footer”> теперь получили свои собственные формальные теги, <header> и <footer>. Это позволяет организовать веб-контент разумным образом и может повлиять на то, как поисковые системы просматривают, понимают и оценивают контент.

Вот типичный пример того, как будет структурирована страница, использующая теги <div>:

Он выполняет свою работу, но такие идентификаторы, как «section» или «sidebar», ничего не значат для поисковых систем. А так как соглашения об именах варьируются от программиста к программисту, блок контента, служащий боковой панелью, может называться «боковой панелью», «боковой», «вторичной» или чем-то еще целиком. Но теперь давайте посмотрим на ту же структуру страницы, используя новые теги HTML5:

Содержание организовано одинаково, но каждый элемент теперь имеет явное значение. Больше не нужно угадывать между тегами <div> с различными именами, поисковая система может более легко и последовательно оценивать содержание на вашей странице на предмет важности и релевантности.

Новые структурные теги

Есть ряд новые и запрещенные теги HTML5 быть включенным в этот (все еще развивающийся) стандарт. Я ранее обсуждал, как микроданные HTML5 были приняты schema.org для локальной оптимизации и других богатых фрагментов , но вот некоторые из более важных структурных разработок, которые я использовал выше:

<Заголовок>

Почти на каждом сайте есть некоторый вариант <div id = ”header”>, который содержит логотип сайта, брендинг всего сайта и вводный контент. Новый тег <header> заменяет этот обходной путь. Что еще более важно, он также может использоваться дополнительное время на странице к серверу в качестве вводных областей для тегов <section>. Эти типы тегов <header> обычно содержат заголовки (<h1>, <h2> и т. Д.), И цель аналогична - кратко суммировать и представить последующее содержимое.

Однако теги <header> могут также содержать расширенное содержимое, например теги абзаца и оптимизированную ссылку; хотя они, скорее всего, не получат такой же вес SEO, как тег заголовка, они предоставляют больше возможностей, чем вы можете втиснуть в <h2>.

<Нав>

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

Другими областями для использования тега <nav> являются вторичные навигационные ссылки (например, связанные статьи), пагинационные ссылки и навигационные ссылки. Определив эти основные области навигации, боты, просматривающие ваш сайт, будут иметь более четкий путь к вашему контенту.

<Статья>

Тег <article> предназначен для инкапсуляции автономной части содержимого. Это может быть сообщение в блоге, информационная страница или запись на форуме. Идея состоит в том, что все, что находится в теге <article>, может быть само по себе частью содержимого (например, если вы видели это отдельно в RSS-ленте). Текст и изображения в <article> более четко идентифицируются как основное содержимое и, скорее всего, будут взвешены как более значимые для страницы, чем что-либо, скрытое в <aside> или <footer>.

<Раздел>

Тег <section> используется для определения связанных участков содержимого. Например, <article> может быть разбит на разные области <section>, каждая из которых обычно начинается с <header>, <h2> или аналогичного ввода. В отличие от <article>, <section> не является отдельной частью содержимого.

Одним из потенциальных преимуществ для этой организации является то, что она может позволить поисковым системам рассматривать каждый <раздел> более независимо, а не как один длинный фрагмент контента. Если один <section> упоминает данную фразу несколько раз, логично, что поисковая система может смотреть на этот контент более авторитетно, чем если бы фраза использовалась более спорадически в нескольких областях <section>.

<В сторону>

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

<Колонтитул>

Хотя он не так полезен, как <header>, тег нижнего колонтитула можно использовать для идентификации закрывающей или вторичной информации в конце <section> или страницы. Как и тег <header>, на странице может быть несколько тегов <footer>. В дополнение к обычным ссылкам в нижнем колонтитуле <footer> может содержать авторские материалы для публикации в блоге, информацию об авторских правах или связанные ссылки.

Должен ли я использовать HTML5 сейчас?

HTML5 укрепляется как стандарт и поддерживается всеми основными веб-браузерами с некоторыми вариациями. Только год назад Google поддерживал « это не поможет, но не повредит Отношение к HTML5. Но в этом году стремление к HTML5 не ослабевало. Как и в случае разработки стандарта schema.org, очевидно, что поисковым системам нравится иметь семантический стандарт, который помогает им улучшить понимание и доставку контента.

С учетом того, что этот стандарт уже существует, чем раньше сайты адаптируют свой контент к HTML5, тем больше у них шансов выделиться из моря нечетких тегов <div> - и быть впереди, так как алгоритмы поиска все больше весят чистый, семантический код.

Что вы думаете о переходе на стандарт HTML5 и потенциальные преимущества SEO? Дайте нам знать об этом в комментариях!