Применение особенностей HTML5 в поисковой оптимизации
В HTML5 появилось множество новых тегов, которые в основном помогают воспроизводить анимацию и flash. В этой статье мы не будем рассматривать теги, касающиеся дизайна, а рассмотрим только те теги, которые помогут поисковым систем лучше ориентироваться на Вашем сайте (говоря проще: оптимизировать html-код под поисковые машины).
С введением HTML5 появились новые важные теги для поисковой оптимизации сайта. Это теги: <article></article>, <header></header>, <footer></footer> и <menu></menu>. В принципе можно ничего не менять у себя на сайтах, но при создании новых сайтов нужно сразу приспосабливать их к этим инновациям. Рассмотрим по отдельности особенности применения каждого из этих тегов.
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.
Атрибуты у ссылок в 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 уроков и советов
|
