Нужно обращать внимание на семантическую вёрстку сайта или...

❓Вопрос 2840

Нужно обращать внимание на семантическую вёрстку сайта или вариант "всё поправить через css" работает? Какие теги обязательно использовать и как это повлияет на ранжирование?

❗️Ответ

💡Семантическая верстка не имеет прямого влияния на позиции сайта, так как не является фактором ранжирования поисковых систем.

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

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

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

⚠️ Поэтому с точки зрения семантики, не совсем верно верстать весь сайт сугубо на div. Все же стоит использоваться теги по назначению.

Есть большая часть редко используемых (например: b, і, strong и т.д.) семантических тегов и они вполне могут быть заменены правилами css.

👉 Пройдемся по основные элементам разметки, которые необходимо использовать:

▫️header - размечается шапка сайта или статьи (article).

▫️nav - размечается навигационные блоки сайта, чаще всего меню в header.

▫️main - в него заключается весь основной контент страницы.

▫️article - тегом размечается важная часть документа (статья), для поисковиков является приоритетным при индексировании.

▫️section - универсальный тег (похож на article), ним можно делить контент на смысловые блоки, со своими заголовками и текстовой информацией. Но все же в него не рекомендуется оборачивать контент под которые существуют отдельные теги, например как статьи.

▫️h1-h6 - используем заголовки, для выделения структуры контента, вес ключевых слов оценивается выше для ПС.

▫️ul, ol, и li - способ разметки списков в документе. Хорошо считывают роботы при сканировании, например пошаговые инструкции из списков могут появляться в нулевой выдаче.

▫️p (параграфы) - оборачивают текстовые блоки.

▫️aside - размечаются второстепенные элементы страницы, такие как фильтры, сайдбары, реклама.

▫️разметка мультимедиа:

– audio, video.

– img, обязательно заполняем атрибут alt.

– picture - позволяет в себе хранить несколько элементов img и менять их в зависимости от размера экрана.

– figcaption - для добавления подписей к изображениям.

– canvas (для отрисовки графики).

▫️footer - позволяет ПС определить где заканчивается сайт с контактными данными организации.

‼️Прокомментировать ответ или задать уточняющий вопрос можно у нас в блоге. Делитесь мнением и опытом в комментариях!

🚨 via @siteclinic_doctor 🚨

Источник новости https://t.me/siteclinic_doctor...