Применение особенностей 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 уроков и советов