A bit about SEO or why we need tags like: heder, main, footer, nav ul, ol, li, etc.

Не давно начала стажировку в одной местной IT компании, там я сверстал свой коммерческий проект, на что челик, который меня обучает сказал, что все тип-топ, кроме тегов! Мол нельзя верстать тегом div места в которых нужно использовать такие теги как: heder, main, footer, nav ul, ol, li и т.д. На что я возразил, типа зачем мне эти теги, если и без этого все хорошо работает ? На что он ответил мне что подобный код не оптимизирован по SEO и что подобным образом сайт будет находите на дне поискового запроса. Вопросов стало только больше, на что он ответил, что объяснять тему SEO очень долго и тяжело. Вот поэтому он скинул мне вот эту статью, ссылка на подробную верисию, которую будет прикреплен внизу темы

SEO-friendly HTML для верстальщика​

Вы познакомитесь с несколькими важными областями валидной SEO-верстки и найдете примеры работы с validators.w3.org. Дополнительные материалы, указанные ниже, будут весьма полезны в повседневной работе верстальщика.
Семантические теги

Семантическая верстка - это html элементы со смыслом понятные разработчику, браузеру и поисковым роботам. К таким относят: header, footer, main, article, section, nav, aside и тд. Использование перечисленных тегов описывается по спецификациям W3C или WHATWG.

Section - определяет раздел в документе. В соответствии со спецификацией W3C по HTML5: "Раздел — это тематически сгруппированный контент, как правило с заголовком."
Article - определяет независимый, самодостаточный контент. Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
Header - предназначен для определения заголовочного блока или "шапки" документа или раздела.
Footer - предназначен для определения "подвала" документа или раздела.
Nav - Предназначен только для основного блока навигационных ссылок.
Aside - определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, "сайдбар").



Микроразметка Schema.org


Чаще всего инструкции по включению микроразметки в HTML-код вы будете получать от SEO-специалистов. Но для понимания немного осветим эту тему.

Schema.org - стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.

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


Как проверить свой HTML

Так как один из критериев к SEO - это валидная верстка, необходимо прогонять написанный код через ранее упомянутый валидатор. К слову, помимо него есть валидатор от Google - в нем необходимо следить за выбранным роботом (Компьютер/Смартфон) и инструмент от Яндекса. Эти инструменты помогут Вам в задачах связанных с микроразметкой. Следует сравнивать новый и старый код, удостовериться, что ошибок нет и все существующие ранее сущности правильно считываются.

В целом, работа с ними сводится к тому, чтобы скопировать HTML код из браузера и вставить его в соответствующее текстовое поле валидатора. Можно копировать куски кода сразу из вашего IDE, но это должен быть чистый HTML с готовыми данными. После прохождения проверки вы будете получать уведомления о различных ошибках в коде. Warning можно опустить. Но от всех Error необходимо избавиться, чтобы верстка удовлетворяла принципам валидной HTML-страницы. В процессе работы могут возникнуть нерешаемые проблемы. Такое стоит гуглить и принимать во внимание, что валидаторы могут не поспевать за всеми нововведениями.

Перейдем к нескольким конкретным примерам (не)валидной верстки и их проверке с validator.w3.org.


Списки


К спискам относятся теги ul и ol (маркированные и нумерованные соответственно).
Выглядит это так:

<ul>
<li>item 1</li>
</ul>

<!-- или -->

<ol>
<li>item 1</li>
</ol>
Внутри открывающего и закрывающего тегов ul могут стоять только элементы li, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки). То есть, <ul><div></div></ul> является не валидной версией, и https://validator.w3.org/nu/ явно об этом напишет в выводе ошибок
В использовании тега < a> тоже есть нюанс, в href недопустимы пробелы. То есть, <a href="tel:+7 (967) 321-22-33">phone</a> не является валидным вариантом, однако <a href="tel:+7(967)321-22-33">phone</a> соответствует всем критериям.


Атрибут id


Этот атрибут является неотъемлемой частью HTML. На нем часто завязаны стили и клиентский JavaScript. Данный подход уже давно не используется ввиду усложнения поддержки написанного кода. Используя id в браузере, часто можно наткнуться на проблему отсутствия уникальности значений этого свойства. Поэтому чаще всего чистый id заменяют на data-id или более специфичные названия. У нас часто используются data-атрибуты – data-behavior и data-selector. Первый подходит для взаимодействия с пользователем, второй чаще используется для манипуляций с DOM. Однако, насколько я знаю, это необязательное правило. Помимо этого, в css можно писать код с обращением в любые из свойств элементов, будь то data-* или любой другой атрибут.
Итог

Хотелось бы, чтобы этот материал был вам полезен. Я старался предоставить информацию для работы с SEO-версткой максимально сжато. Надеюсь, я смог достичь этой цели. Данной информации не хватит для формирования по-настоящему SEO-friendly сайта, поэтому я рекомендую использовать дополнительные материалы при разработке своих страниц. Эта тема сложна и обширна. Для плодотворного продвижения и удержания позиций сайта в поисковой выдаче необходимо работать в паре с SEO-специалистом и постоянно вести работы над улучшениями своих продуктов. Спасибо за уделенное время!
Вот как-то так. Буду рад вашим комментарием. Ах да! Чуть про ссылку не забыл. https://habr.com/ru/post/538892/