💭 #Ответы на вопросы! ❓Вопрос 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 🚨