Применение особенностей HTML5 в поисковой оптимизации

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

С введением HTML5 появились новые важные теги для поисковой оптимизации сайта. Это теги:

  • <article></article>
  • <header></header>
  • <footer></footer>
  • <menu></menu>

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

Обзор новых тегов в HTML5

1. Тег <article></article>

<article></article> помогает поисковой машине точно определить место расположения основной части контента на странице сайта. Необходимо лишь весь контент сайта заключить в этот тег. Например:

<article>
...
контент
...
</article>

Тегу <article> можно прописать стили, но, к сожалению, старые версии браузеров не поддерживают данный тег, поэтому я бы не рекомендовал делать это, дабы не испортить внешний вид контента. Также не рекомендуется применять к нему стили даже при создании новых сайтов в ближайшем будущем (ведь старые браузеры ещё долго будут существовать). Поэтому, мой совет: просто выделить тегами <article></article> свой контент на сайте, оставив всю структуру html-документа, как есть. В этом случае в дизайне ничего не поменяется.

2. Тег <header></header>

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

3. Тег <footer></footer>

Весь подвал сайта нужно заключить в тег <footer></footer>. Чаще всего в подвале указывается копирайты, счетчики и т.д.



4. Тег <aside></aside>

В тег <aside></aside> заключается сайдбар или другими словами – боковая колонка сайта.

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

Теперь пару слов о новых атрибутах, которые можно использовать в ссылках в HTML5.

Атрибуты ссылок <a> в HTML5

В уроке про тег <a> я уже писал о всех атрибутах, которые можно подставить в параметр target. Теперь расскажу о новых атрибутах, которые появились в HTML5:

  • alternate – показывает, что ссылка ведет на альтернативный адрес страницы;
  • author – показывает, что ссылка ведет на страницу автора;
  • help – показывает, что ссылка ведет на страницу помощи;
  • license – показывает, что ссылка ведет на страницу с правилами использование лицензии;
  • next, prev – когда контент разбит на множество страниц, то атрибут next показывает где искать продолжение контента, а prev – предыдущая страница;

Не могу не отметить и то, что в HTML5 появилась возможность асинхронной загрузки JavaScript. Для того, чтобы воспользоваться этим нужно прописать всего лишь один маленький атрибут к тегу <script>:

<script async type="text/javascript" language="JavaScript" src="javascr.js"></script>
или
<script defer type="text/javascript" language="JavaScript" src="javascr.js"></script>

Специальный параметр async означает, что скрипт начинает выполняться после полной загрузке окна, в свою очередь defer выполняется как только он загрузился полностью.

Примечание:

Асинхронность не будет работать, если явафайл содержит вывод контента через JavaScript:

document.write('text text text');

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




Читайте также:

• HTML тег <table> – подробное описание с примерами

• HTML тег <img> – подробное описание с примерами

• HTML тег <form> – подробное описание с примерами

• HTML тег <div> – подробное описание с примерами

• CSS border

• CSS background

• CSS transition

• Как сделать фон для сайта

• Как убрать подчеркивание ссылки


← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.