HTML5 SEO или миф?

  1. ! DOCTYPE
  2. Новые дружественные теги
  3. Нет JavaScript (в некоторых случаях)
  4. Новые типы ввода
  5. Локальное хранилище
  6. Нижняя линия

HTML5 уже давно стал модным словом, и мы только начинаем к нему привыкать

HTML5 уже давно стал модным словом, и мы только начинаем к нему привыкать. Но существует ли HTML5 SEO? Я имею в виду, является ли последняя версия HTML настолько продвинутой с точки зрения SEO, что мы можем рассматривать ее как отдельное поле в SEO? Этот пост более подробно рассматривает последнюю итерацию HTML и проливает свет на обратную сторону HTML5 в SEO. Я действительно потратил лишнюю милю и прошел курс основ HTML5 от Envato, чтобы по-настоящему понять преимущества, которые он приносит в таблицу SEO. Таким образом, вы сможете принять обоснованное решение, если вашему сайту нужен HTML5 прямо сейчас, или вы действительно можете спокойно и посмотреть, что будет дальше.

! DOCTYPE

Первая строка каждого документа HTMl5 фактически показывает, что это такое. HTML5 делает ваш файл более легким и более семантическим (понятным). Итак, если вы используете HTML5 на своем сайте, вы можете просто запустить файл со следующей строкой:

И это вместо:

Это огромное облегчение! Тебе так не кажется?


На самом деле прямого улучшения SEO нет, но, поскольку меньшее количество кода обычно означает более быструю скорость загрузки сайта, это оказывает некоторое влияние на SEO на вашей странице. Плюс скорость сайта становится более влиятельным фактором в алгоритме Google.

Плюс скорость сайта становится более влиятельным фактором в алгоритме Google

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

Такие теги также называют семантическими, потому что они как бы дают представление о том, что они собой представляют. Например, если вы используете теги <div> </ div>, вы не знаете, что в них будет заключено. Это может быть что угодно: верхний колонтитул, нижний колонтитул, боковая панель, вы называете это. Новые теги HTML5 дают больше структуры и понимания этой структуры как для людей, так и для поисковых систем. Итак, новые семантические теги HTML5:

  • <Заголовок>
  • <Навигации>
  • <в сторону> (вы можете использовать его для боковых панелей)
  • <Колонтитул>

Как видите, вы можете легко определить, какой тег использовать в верхнем колонтитуле, нижнем колонтитуле и т. Д. Единственная проблема - это тег <aside>, поскольку он не выглядит для меня слишком семантическим. Я предполагаю, что они могли бы просто назвать это <sidebar>. Как вы думаете?


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

Не то, чтобы они не понимали этого без HTML5, но структура сайта не представляет проблемы с новыми тегами

Нет JavaScript (в некоторых случаях)

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

  • <Счетчик> </ м>
  • <Прогресс> </ прогресс>

Возможно, вы захотите взглянуть на изображение, чтобы лучше понять, как работают эти теги и что они показывают в вашем браузере.


Я не вижу никакой выгоды, кроме того факта, что вы не должны использовать (или использовать меньше) JavaScript на своем сайте, что всегда является хорошей новостью.

Новые типы ввода

HTML5 также предоставляет несколько действительно полезных функций, которые позволяют вам добавить встроенную проверку в ваши контактные формы. Вы должны были использовать JavaScript раньше, но не сейчас, потому что вы можете просто применить на практике то, что может предложить HTML5. Вот список этих новых типов ввода:

  • Эл. адрес. Вы можете использовать его в формах HTML следующим образом: <input type = "email">
  • спектр. Вы можете использовать его в формах HTML следующим образом: <input type = "range">
  • цвет. Вы можете использовать его в формах HTML следующим образом: <input type = "color">. В основном, это просто показывает палитру цветов.
  • число. Вы можете использовать его в формах HTML следующим образом: <input type = "number">. Он показывает выпадающее меню для выбора номеров.
  • Дата. Вы можете использовать его в формах HTML следующим образом: <input type = "date">. Этот тип ввода позволяет отображать раскрывающийся календарь только с помощью HTML.
  • URL-адрес. Вы можете использовать его в формах HTML следующим образом: <input type = "url">.
  • телефон Вы можете использовать его в формах HTML следующим образом: <input type = "tel">.
  • поиск. Вы можете использовать его в HTML-формах следующим образом: <input type = "search">.
  • Дата и время. Позволяет отображать информацию о времени в следующем формате: гггг-мм-дд чч: мм. Смотрите скриншот ниже.

Смотрите скриншот ниже

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


Опять же, это никак не повлияет на SEO на вашей странице, но возможность использовать меньше JavaScript точно покажет его преимущества.

Локальное хранилище

Я считаю, что эта функция вступит в игру для SEO, когда вы оставите обширные комментарии в соответствующих блогах. Как правило, создание такого комментария занимает некоторое время. Мне может потребоваться до получаса, чтобы придумать действительно достойный комментарий. И когда вы нажимаете кнопку «Отправить», вы получаете следующее сообщение: «Ваша сессия истекла!». Это часто случается со мной. Функция локального хранилища позволяет локально хранить значительные объемы информации, чтобы срок действия вашего комментария (в данном конкретном случае) не истек.

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


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

Нижняя линия

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

Вы можете использовать Могу ли я использовать сайт, чтобы проверить, какие функции вы можете использовать в конкретных браузерах. Так что это своего рода ссылка на совместимость браузера.

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

Кредит фотографии: «Ковбой» Бен Алман с помощью photopin куб.см