Найти тему
Alfa IT Studio

Верстаем страницу правильно или что такое семантическая верстка

Оглавление

В конце 2014 в качестве стандарта W3C (консилиум всемирной сети) был принят HTML 5, который привнес верстальщикам новые тэги. Они используются не только для чистоты кода, но и помогают роботам поисковых систем лучше ориентироваться на странице и следовательно быстрее ее индексировать.

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

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

-2

Семантические тэги в HTML 5:

Тэг - Header

Так называемая “шапка” сайта. В данном тэге располагается логотип, меню навигации. Может встречаться несколько раз на странице и использоваться как для меню, так и для заголовков в начале страницы.

-3

Тэг - Nav

Задает навигацию по сайту (меню, якорные ссылки).

-4

Тэг - Main

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

-5

Тэг - Section

Разбивает страницу на логические блоки со своими заголовками.

-6

Тэг - Article

Является самым приоритетным тэгом для поисковых систем. Им оборачивают посты, ролики, карточки товара интернет-магазина. То есть article представляет собой самостоятельную единицу.

-7

Тэг - Aside

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

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

Подведем итог:

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

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