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

Привет, коллеги! Мы сегодня погрузимся в мир, где ваш код начинает говорить с поисковыми системами. Семантическая вёрстка — это не просто красивое оформление, это основа, которая влияет на то, как Google воспринимает ваш сайт и ранжирует его. Вы должны сделать так, чтобы ваш сайт понравился и людям, и поисковым системам.

🎯 Тема урока

Семантическая вёрстка и SEO: как говорить с поисковыми системами на одном языке

Если говорить максимально просто, семантическая вёрстка – это использование внутреннего HTML-кода сайта, который помогает поисковым системам лучше понять его содержимое.

Если обычная вёрстка — это про то, как сайт выглядит для человека (визуал, дизайн, расположение блоков), то семантическая вёрстка — это про то, как поисковые системы, считывая код, понимают смысл контента.

1. Почему семантическая вёрстка – это фундамент SEO

Семантическая вёрстка — это не просто модное слово. Она решает фундаментальную проблему: как поисковому роботу отделить действительно важный контент от служебных элементов.

• Понимание контента: Поисковые системы хотят понять суть вашего контента. Семантика позволяет алгоритмам определить, где находится основной контент, а где просто интерфейс (шапка, боковая колонка, подвал).
• Ранжирование и экспертность: Правильная семантика позволяет Гуглу чётко интерпретировать структуру вашей страницы и связи внутри документа. Это помогает понять, насколько контент соответствует запросу пользователя (релевантность).
• Индексация (особенно для самописных сайтов): Если у вас самописный движок и вёрстка сделана не по правилам, Google может её вообще не понять. Когда в коде страницы каждый перенос строки завёрнут в отдельный <div>, это может привести к тому, что сайт не будет ранжироваться.

2. База: Семантические теги HTML5

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

Пример использования <section> и <article>

Пример 1: <section> - зависимые части одной темы

Если вы описываете вишню и хотите рассказать, какой она может быть по размеру, то это один объект (вишня), но с разными характеристиками. В этом случае нужно использовать <section>:

<article>
  <h1>Вишня</h1>
  <section>
    <h2>Большая вишня</h2>
    <p>Крупные плоды вишни обычно слаще и содержат больше сока.</p>
  </section>
  <section>
    <h2>Маленькая вишня</h2>
    <p>Мелкие ягоды чаще используются для варенья и десертов.</p>
  </section>
</article>

Здесь <section> помогает структурировать одну тему (“вишня”) на подразделы, которые не имеют самостоятельного смысла вне этой статьи.

Пример 2: <article> - равнозначные сущности

Если вы хотите рассказать про разные сорта вишни, каждый из которых — отдельная самостоятельная единица контента, используйте <article>:

<section>
  <h1>Сорта вишни</h1>

  <article>
    <h2>Сорт "Шпанка"</h2>
    <p>Отличается сладко-кислым вкусом и высокой урожайностью.</p>
  </article>

  <article>
    <h2>Сорт "Владимирская"</h2>
    <p>Классическая кислая вишня с насыщенным ароматом.</p>
  </article>

  <article>
    <h2>Сорт "Тургеневка"</h2>
    <p>Среднеранний сорт, хорошо подходит для переработки и варенья.</p>
  </article>

</section>

Что нужно избегать:

1. DIV-супы: Избегайте “слоёного пирога” из <div>, когда каждый абзац обёрнут в отдельный блок.
2. <br>: Не используйте для создания отступов - для поисковика это просто перенос строки, не новый абзац.

3. Иерархия заголовков (H1–H6)

Заголовки формируют структуру документа и помогают поисковым системам понять, о чём идёт речь.

1. H1 должен быть один: На странице допускается только один <h1>.
2. Расположение и содержание: <h1> должен быть над контентом и содержать основной ключ или его синоним.
3. H2–H6: Используйте подзаголовки для уточняющих тем, особенно для ключей с вопросами.
4. Иерархия: Соблюдайте логику вложенности — не используйте заголовки для кнопок и форм.
5. Избегайте переспама: Не вставляйте основной ключ во все заголовки. Используйте синонимы.

4. Расширение семантики: Микроразметка (Schema.org)

Семантическая вёрстка выходит за рамки простого HTML.
Используйте структурированные данные, чтобы дать Google дополнительные подсказки о контексте информации.

О микроразметке мы говорили на прошлых уроках. Она важна для расширения сниппета выдачи в поиске.

🧭 Что дальше?

В следующем уроке мы рассмотрим практическую реализацию семантической структуры страницы — как соединить HTML5 и микроразметку для максимального SEO-эффекта.