Преимущества и преимущества семантической разметки HTML5 для SEO

1. Так каков ответ?
2. Как я могу сказать, какие браузеры используют мои сайты?
3. Так как мне начать работать с HTML5?
4. Почему разработчики должны быть восхищены семантической разметкой?
5. Элемент <header>
6. Элемент <footer>
7. Элемент <nav>
8. Элемент <menu>
9. Элемент <article>
10. Элемент <section>
11. Элемент <aside>
12. Так что же такое большое дело для SEO?
13. И конечно ... Недостатки
14. Резюме

Если вы не заметили, Интернет - это постоянно меняющаяся и изменчивая среда.

Новые идеи меняют способ просмотра веб-сайтов. Но как эти события влияют на то, как Google и другие популярные поисковые системы смотрят ваш сайт?

Много было написано о том, должны ли большинство разработчиков начать использовать HTML5 на сайтах своих клиентов. Некоторые, как и я, отвечают громким «да», в то время как другие, похоже, хотят подождать, пока W3C (Консорциум World Wide Web) объявит HTML5 официальным поддерживаемым веб-стандартом.

Так каков ответ?

К сожалению, нет ответа, и преимущества HTML5 варьируются от проекта к проекту. Например, если большая часть веб-трафика сайтов поступает из браузеров, таких как старые браузеры, такие как Internet Explorer 7/8, то это может быть не лучшим подходом. Однако, если большая часть трафика сайта - это технически подкованная аудитория, использующая современные браузеры, такие как Chrome, Safari и Firefox, вы должны использовать эти новые технологии, чтобы не только улучшить свои возможности просмотра, но и задать темп для других последователей.

Как я могу сказать, какие браузеры используют мои сайты?

Google Analytics на помощь! К счастью, вы можете получить все необходимые данные из набора данных Аудитория> Технологии> Браузер и ОС в Analytics. Смотрите ниже скриншот области, на которую я ссылаюсь ниже:

Так как мне начать работать с HTML5?

Начать довольно просто.

Если вы уже знакомы с использованием HTML, то пришло время понять, почему семантическая разметка, предлагаемая HTML5, настолько привлекательна с точки зрения SEO.

Почему разработчики должны быть восхищены семантической разметкой?

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

Чтобы проиллюстрировать преимущества, которые предлагает HTML5, рассмотрим, как элементы <h1> и <p> используются для различения отдельных видов текста на странице. Эти теги <h1> & <h2> имеют решающее значение для SEO на странице. Они находятся на вершине пищевой цепочки HTML-разметки и теоретически должны описывать текущую тему страниц.

HTML5 продвигает семантику на шаг вперед с новыми HTML-тегами для больших частей веб-сайтов. Посмотрите на некоторые из них ниже:

<header> </ header> <nav> </ nav> <menu> </ menu> <article> </ article> <section> </ section> <aside> </ aside> <footer> </ footer>

Скорее всего, вы можете догадаться, для чего некоторые из приведенных выше тегов следует использовать на веб-странице.

Если нет, вот очень краткая разбивка:

Элемент <header>

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

Элемент <footer>

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

Элемент <nav>

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

Элемент <menu>

Этот элемент похож на элемент <nav>, но более расслаблен. Этот элемент может использоваться для группировки ссылок, которые действуют как суб-навигация. Другим пользователем будут иконки социальных сетей, которые ссылаются на страницы социальных сетей сайта.

Элемент <article>

Этот элемент используется для автономных композиций веб-страницы. Например, список сообщений блога вашего сайта, каждый из которых будет содержать тег <article> . Это также может быть использовано для других типов контента. Просто имейте в виду его автономное использование.

Элемент <section>

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

Истинный способ использования элемента section - думать об этом с точки зрения группировки определенных частей контента. Внутри раздела у вас может быть несколько заголовков, чтобы еще больше сузить фокус раздела, и внутри определенного фрагмента содержимого может быть несколько разделов. Уф! Если вы смущены этим (я знаю, что изначально), то не волнуйтесь. Вы можете проверить эту статью Брюса Лоусона для более глубокого обзора элемента section: Прогноз элемента раздела HTML5 ,

Элемент <aside>

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

Так что же такое большое дело для SEO?

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

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

<div id = ”header”> <ul id = ”nav”> </ ul> <! - End #nav -> </ div> <! - End #header -> <div id = »content ”> <Div id =" blogpost "> <h1> Это мой блог </ h1> <p> Это мой первый абзац. </ P> </ div> <! - End #blogpost -> </ div> <! - End #content -> <div id = ”sidebar”> <div id = "blogroll"> <p> Мой контент в блогролле. </ p> </ div> <! - End #blogroll -> </ div> <! - End #sidebar -> <div id = ”footer”> <p> Содержимое моего нижнего колонтитула. </ p> </ div> <! - End #footer ->

И ниже тот же макет с использованием разметки HTML5:

<header> <nav> </ nav> </ header> <div id = ”content”> <article id = "blogpost"> <section> <h1> Это мой блог </ h1> <p> Это мой первый абзац. </ p> </ section> </ article> <! - End #blogpost -> </ div> <! - End #content -> <div id = »sidebar»> <боковой идентификатор = "blogroll"> <p> Содержимое моего блогролла. </ p> </ aside> <! - End #blogroll -> </ div> <! - End #sidebar -> <footer> <p> Содержимое моего нижнего колонтитула. </ P> </ footer>

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

И конечно ... Недостатки

К сожалению, из-за отсутствия стандартизации между браузерами в настоящее время эти теги можно интерпретировать по-разному или полностью игнорировать все вместе. Это чаще всего происходит в старых версиях Internet Explorer. К счастью, есть методы, чтобы «обучить» браузер тому, что представляют собой эти новые теги, чтобы соответствующим образом оформить их с помощью CSS. Просто вставьте этот скрипт в раздел <head> вашей разметки, чтобы разрешить использование новых тегов для старых браузеров:

<! - [if IE]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [endif] ->

** Код предоставлен Реми Шарпом HTML5 Shiv Project

Не вдаваясь в технические подробности, при запуске вышеупомянутого скрипта jQuery создаются новые элементы внутри объектной модели документов (DOM) Internet Explorer, чтобы он понимал новую разметку. Суть в том, что это работает, и это все, что имеет значение для большинства людей. Единственное недовольство, которое некоторые люди испытывают в отношении вышеуказанного патча, это то, что он зависит от JavaScript. Тем не менее, процент пользователей, которые просматривают с отключенным JavaScript, снижается в течение нескольких лет и составляет очень небольшую часть от общего числа пользователей в Интернете.

Короче говоря, невозможно удовлетворить любую среду в Интернете. Поэтому, в зависимости от вашей аудитории, может быть, пора прекратить обслуживать людей, которые продолжают использовать устаревшие технологии, такие как IE6, и начать вознаграждать пользователей, которые идут в ногу со временем: D.

Резюме

Будучи сторонниками оптимизации, чистого кода и передовых веб-сайтов, мы предлагаем по возможности использовать разметку HTML5.

Зачем? Чтобы не отставать от кривой и начать внедрять рано, чтобы в полной мере воспользоваться новой горячей технологией, которую мы можем усовершенствовать задолго до того, как она станет стандартом.

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

Похожие

Комментарии