Семантическая структура сайта

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

Структура определяется семантическими тегами. Список актуальных:

• header;
• hgroup;
• article;
• aside;
• footer;
• details;
• figcaption;
• figure;
• main;
• mark;
• nav;
• section;
• progress;
• meter;
• summary;
• time.

Список составлен из наиболее важных тегов. Теги семантики используются аналогично блоку div.

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

Тег section. Секция используется для объединения однородного блока по смыслу. Например, записи блога или лента новостей.

Основной текст документа рекомендуется размещать в теге семантическом блоке article.

Дополнительный релевантный текст рекомендуется размещать в блоке aside.

В семантическом теге именуемым details указывается дополнительная информация.

Контейнер summary означает сайта видимую часть текста в теге details.

Тег figure используется для блока с изображениями. Тег figcaption означать подпись изображения.

Тег под названием main указывает на основной контент страницы.

Тег nav указывает на навигацию по сайту.

Блок section означает любой блок не подходящий под конкретное семантического описание, используется по аналогии с тегом div.

Предназначение тега header в содержании контента из верхней части сайта.

Предназначение тега footer в содержании контента из нижней части сайта.

Теги header и footer могут быть вложенными, например в тег article или section:

<section>

<header><h1></h2></header>

</section>

Тег address является семантическим контейнером для контактных данных и карты.

Тег mark означает подсвеченный или выделенный важный текст.

Значение progress в обозначении прогресса обработки любой из задач на сайте.

Использовать meter надо для определения заданной шкалы, диапазона цен например.

Тег семантики dialog является интерактивным элементом означающим диалоговый блок сайт.

Теги оптимизации сайта

Главные описательные мета теги сайта:

• h1;
• title;
• description.

Полный обзор, рекомендации по основным тегам поисковой оптимизации сайта в материал далее. Теги рассмотрены вдоль и поперек.

Приложение бесплатно позволяющее посмотреть в браузере Chrome от Google разметку — html outliner

Рекомендованное чтиво на сайте социальной сети интернет-специалистов MegaIndex.org по ссылкам далее:

• Структура сайта;
• Meta description в SEO;
• SEO description. Как заполнять meta description. Description влияет на CTR;
• SEO теги;
• SEO теги. Правильное использование тегов;
• Аудит сайта. Шаг 14 — Пример. Каким должен быть мета-тег description;
• SEO title;
• Вхождения в title по SEO;
• Как правильно заполнять заголовок h1 и название страниц title с точки зрения поисковой оптимизации SEO.