Когда я начинал программировать, думал, что главное — чтобы сайт работал. А верстка? Ну, накидал div’ов, и ладно. Но потом понял: поисковики — как слепые котята. Они не видят красивый дизайн, они читают код. И если код — каша из div’ов, то и ранжирование будет плохим. В этой статье я расскажу, как семантическая верстка помогает SEO, и покажу примеры на PHP и HTML.

Что такое семантическая верстка и зачем она SEO?

Семантическая верстка — это когда каждый HTML-тег имеет смысл. Например, <header> — это шапка, <nav> — навигация, <article> — статья. Поисковики (Google, Яндекс) любят такую верстку, потому что они сразу понимают структуру страницы. Это как если бы вы пришли в библиотеку, а там книги разложены по полкам с табличками: "Фантастика", "Детективы". А не свалка.

Семантическая верстка улучшает:

  • Индексацию — робот быстрее находит важные блоки.
  • Читаемость кода — вам и коллегам проще править.
  • Доступность — скринридеры для слепых тоже понимают семантику.

В итоге — выше позиции в выдаче. Проверено на личном опыте: после перехода на семантику один мой сайт поднялся на 3-4 строчки по ключевым запросам.

Основные семантические теги и их роль

Вот таблица самых важных тегов. Запомните их как таблицу умножения.

Тег Назначение Влияние на SEO
<header> Шапка страницы или раздела Помогает выделить ключевую информацию
<nav> Навигационное меню Поисковик понимает структуру сайта
<main> Основной контент Указывает на уникальное содержимое
<article> Самостоятельная статья или пост Повышает релевантность для поиска
<section> Группа связанного контента Улучшает структурирование
<aside> Боковая панель или врезка Показывает дополнительный контент
<footer> Подвал страницы Содержит контакты и копирайт

Не используйте <div> для всего подряд. <div> — это как коробка без надписи. Поисковик не знает, что внутри.

Правило: Если можете заменить <div> на семантический тег — сделайте это. Это бесплатный плюс к SEO.

Как PHP помогает генерировать семантический HTML

PHP часто используется для генерации страниц. И тут легко ошибиться: вывести все в одном <div>. Но можно писать код, который сразу создает правильную структуру. Вот пример.

Допустим, у нас есть блог. Выводим статьи с семантикой.


<?php
$articles = [
    ['title' => 'Как учить PHP', 'body' => 'Начните с основ...'],
    ['title' => 'SEO для разработчиков', 'body' => 'Семантика важна...']
];
?>
<main>
    <h1>Блог о программировании</h1>
    <?php foreach ($articles as $article): ?>
        <article>
            <h2><?= htmlspecialchars($article['title']) ?></h2>
            <p><?= htmlspecialchars($article['body']) ?></p>
        </article>
    <?php endforeach; ?>
</main>

Видите? Каждая статья в <article>. Поисковик понимает: это отдельные записи. Если бы мы использовали <div class="post">, эффект был бы слабее.

Ошибки, которые убивают SEO (и как их избежать)

Даже опытные разработчики иногда косячат. Вот топ-3 ошибки.

  • Все в одном <div>. Страница — как мешок с кодом. Поисковик не видит структуры.
  • Пропуск <h1>. Без заголовка первого уровня робот не понимает тему страницы.
  • Использование <br> для отступов. Вместо этого используйте CSS. <br> — для переноса строк в тексте, не для верстки.

Пример неправильной верстки:


<div>
    <div>Мой сайт</div>
    <div>О нас</div>
    <div>Текст</div>
</div>

Правильный вариант:


<header>
    <h1>Мой сайт</h1>
    <nav>
        <ul>
            <li><a href="/about">О нас</a></li>
        </ul>
    </nav>
</header>
<main>
    <p>Текст</p>
</main>

Разница очевидна. Второй вариант — как книга с оглавлением, первый — как стопка бумаг.

Лайфхак: Используйте валидатор HTML от W3C. Он покажет, где вы забыли закрыть тег или используете неправильную семантику.

Как проверить семантику своего сайта

Не хотите гадать? Есть инструменты. Вот список.

  • Google Search Console — покажет ошибки в структуре.
  • Валидатор W3C — проверяет HTML на соответствие стандартам.
  • Скринридеры (например, NVDA) — эмулируют чтение для слепых.

Еще можно посмотреть код страницы в браузере. Если видите сплошные <div> — пора переписывать.

Пример проверки с помощью JavaScript:


// Вывести все семантические теги на странице
const semanticTags = ['header', 'nav', 'main', 'article', 'section', 'aside', 'footer'];
semanticTags.forEach(tag => {
    const elements = document.querySelectorAll(tag);
    console.log(tag + ': ' + elements.length);
});

Запустите в консоли браузера и увидите, сколько семантических тегов у вас на странице.

Что в итоге

Семантическая верстка — это не магия, а база. Она помогает поисковикам понять ваш сайт, а пользователям — быстрее находить информацию. Не ленитесь использовать <header>, <article>, <nav>. Это бесплатный бонус к SEO.

Мой совет: начните с малого. Возьмите одну страницу и переделайте ее на семантику. Посмотрите на результат через месяц. Уверен, увидите разницу.

Студия WNDER