0-800-759-750
Мы на связи с 7:00 до 24:00
info@elit-web.com

Что такое семантическая верстка и зачем она нужна для SEO

Поделитесь
Содержание

    Верстка сайта — это создание структуры гипертекстового документа с использованием HTML-разметки.

    И пока вы не успели закрыть эту страницу из-за совершенно непонятного термина, позвольте объяснить!

    Когда вы открываете любой сайт, то сразу видите, где здесь основной блок с информацией, где контакты, где панель навигации и тому подобное. Это и есть заслуга верстки — все структурировано, логически разделено на блоки, удобно размещено на странице и затем оформлено в CSS.

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

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

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

    Семантическая верстка — это подход к разметке страницы, при котором упор сделан не на содержание, а на смысловое предназначение каждого блока, а также на логическую структуру всего документа.

    Для лучшего понимания взгляните на два примера ниже:

    <p>Ваш креативный заголовок</p>

    <p>Отличный текст</p>

    <p>И еще немного отличного текста</p>

    <article>

        <h1>Ваш креативный заголовок</h1>

           <p>Отличный текст</p>

           <p>И еще немного отличного текста</p>

    </article>

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

    Почему? Об этом расскажем далее!

    Почему семантика сайта важна

    Продолжим рассматривать наш пример!

    Тег <p> обозначает «параграф/абзац». С его помощью удобно делать разбивку текста с переносом строки. Вот только с точки зрения поисковых алгоритмов он не несет особой информации. Вы можете обернуть заголовок тегом <p> и даже ярко его ВЫДЕЛИТЬ (никогда так не делайте). Пользователь поймет, что это заголовок, но вот для алгоритмов Google он все еще остается обычным блоком текста — не более важным, чем последующие. Без семантической верстки ваша страница для поисковика будет просто большим текстовым документом, где невозможно выделить основную информацию и эффективно использовать алгоритмы поиска.

    Семантическая структура сайта важна по двум ключевым причинам.

    1) Улучшение позиций веб-ресурса в поисковой выдаче

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

    Можем привести неплохой пример пользы семантической верстки. Введите в Google запрос «расписание поездов Киев», и одним из первых результатов будет следующий график:

    Улучшение позиций веб-ресурса в поисковой выдаче

    Используя правила семантической верстки, разработчики «показали» поисковику, что это за блок и что именно его стоит выводить в результатах поиска по релевантному запросу. Если бы расписание было заключено в обычные теги <p>, поисковые боты просто не поняли бы, что именно они отвечают на вопрос пользователя и что их стоит показать в выдаче.

    2) Повышение доступности сайта

    Слабовидящие или незрячие люди тоже пользуются интернетом, только не так, как мы с вами. Для них созданы специальные программы — скринридеры, которые зачитывают текст со страницы. Чтобы скринридер работал корректно, определял и указывал заголовки, основной текст, навигационные элементы и прочее, их обязательно нужно обрамлять соответствующими тегами.

    Повышение доступности сайта

    В противном случае программа просто монотонно считает вообще всю информацию со страницы, начиная с названия сайта, заканчивая списком контактов. Полноценно пользоваться веб-ресурсом без семантической верстки люди с ограниченными способностями попросту не смогут.

    Семантические теги в HTML

    С теорией немного разобрались, теперь давайте перейдем к более практическим вещам: рассмотрим основные семантические теги HTML, познакомимся со способами их использования в современной верстке.

    <header>

    Этим тегом обычно обозначают вводную часть раздела/страницы. Говоря более простым языком, <header> — это «шапка» сайта, которая зачастую одинаковая на всех страницах. Здесь в основном размещают ссылки на основные разделы сайта, контакты, кнопки обратной связи, выбор языка и тому подобное.

    Семантические теги в HTML

    <nav>

    Это тег для блока навигации на сайте. Он может быть вложенным в хедер или оставаться отдельным блоком. Иногда на одной странице встречается несколько навигационных блоков — это нормально.

    <nav>

    <main>

    В этот тег заключается основное содержимое страницы, которое НЕ ПОВТОРЯЕТСЯ на других. Кроме того, на ней этот тег разрешается использовать только один раз. Размещать два блока <main> не допускается. Внутри <main> могут находиться <article>, <section>, <aside> и другие.

    <main>

    <article>

    Тег обозначает крупную самостоятельную и завершенную по смыслу единицу на странице. Самый распространенный пример — статья в блоге. Но в <article> может оборачиваться небольшой виджет или встроенный в страницу твит.

    <article>

    <section>

    Тег, в который заключаются отдельные смысловые блоки, входящие в одну логическую область. Это могут быть, например, ссылки на товары, перечень услуг или просто самостоятельные текстовые модули.

    <section>

    <aside>

    Тегом <aside> зачастую обозначают область с дополнительной информацией, которая не всегда связана с текущей страницей. Когда вы видите на сайте любую боковую панель, это, вероятнее всего, <aside>. Например, блок навигации, баннеры, реклама и прочее.

    <aside>

    <footer>

    Завершающая часть страницы или отдельного смыслового раздела. На одной странице может быть несколько футеров, но обычно он один. Здесь часто размещают различную дополнительную информацию и ссылки: контакты, линки на другие страницы, логотипы и тому подобное. <footer> также принято называть «подвалом» сайта.

    <footer>

    Как разметить страницы сайта с точки зрения семантики

    Семантическая верстка сайта — это на самом деле не особенно сложный процесс. Главное — соблюдать логику и следовать элементарным правилам разметки.

    Тег

    Применение

    <header>, <main>, <footer>

    Большие смысловые блоки на странице

    <nav>, <section>, <article>, <aside>

    Отдельные разделы внутри блоков

    <h1> – <h6>

    Заголовки с первого по шестой уровень

    <p>, <ul>, <div>, <span> и другие

    Мелкие блоки и элементы внутри смысловых разделов

    <img>, <a>, <button> и прочие

    Картинки, кнопки, ссылки, небольшие текстовые блоки и прочее

    Хороший способ лучше разобраться в структуре сайта — визуально разделить страницу на блоки/прямоугольники, потому что каждая страница — это именно набор блоков и блоков внутри блоков:

    Как разметить страницы сайта с точки зрения семантики

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

    Выделить блоки сайта

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

    Примеры семантической верстки

    Мы приведем несколько простых примеров HTML-кода с корректной версткой. Обратите внимание на структуру и вложенность разных элементов.

    <header>

    Примеры семантической верстки <header>

    <nav>

    Примеры семантической верстки <nav>

    <main>

    Примеры семантической верстки <main>

    Хороший способ лучше разобраться в семантической верстке — изучать код различных сайтов. Для этого вам достаточно открыть интересующую страницу и нажать F12 (для браузера Safari алгоритм другой) — появится блок с HTML-кодом и стилями. Здесь же можно выбрать инструмент Inspector, который при клике на тот или иной элемент сразу покажет его в HTML-коде.

    HTML-код

    Основные ошибки

    Хотя HTML-верстка и считается довольно несложной задачей, но правильная семантическая разметка даже сейчас есть далеко не на всех сайтах, вплоть до весьма известных.

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

    • применение <section> как обертки для оформления;
    • переизбыток блоков <header>;
    • обрамление всех ссылок в тег <nav>;
    • путаница с тегами <main>, <article> и <section>.

    Еще одна довольно частая ошибка среди начинающих верстальщиков — использование семантических тегов HTML для разного рода «украшательств» (например, цветной шрифт, его начертание, размер и прочее). Так делать не нужно. Используйте HTML только для создания структуры документа. Весь визуал делайте в CSS — это правильно.

    Попробуем объяснить, почему нужно делать именно так.

    Представьте, что вы, размещая статью в блоге, решили, например, выделить первые слова в каждом абзаце красным цветом. Зачем? Захотелось, и все тут. Можно ли это сделать прямо в HTML? Да! Достаточно применить дополнительный тег <font> для изменения характеристик шрифта и задать ему цвет. Вот только придется потратить немало времени, потому как для каждого абзаца вы будете прописывать теги и оформление вручную.

    Основные ошибки

    Вот вы, наконец, все сделали, а через неделю поняли, что получилось как-то не очень. Соответственно, теперь вам придется каждый абзац «чистить» вручную.

    CSS же позволяет сделать все гораздо быстрее. Присваиваем нужным тегам <p> определенный класс (одинаковый для выбранных нами), а в CSS буквально одной строчкой прописываем оформление. Надоел красный цвет — меняем всего одно правило, и он изменяется на дефолтный черный ДЛЯ ВСЕХ <p> с тем же классом. Либо можно стереть правило для класса и тем самым убрать оформление.

    В общем, какое-либо оформление непосредственно в HTML — скорее исключение из правил, нежели стандартная практика. Поэтому применяйте HTML только для верстки. Не усложняйте себе и другим разработчикам жизнь.

    Вывод

    Семантическая верстка и умение правильно использовать семантические теги — это критически важно в первую очередь для SEO. Продвигать корректно структурированный и систематизированный сайт гораздо проще и эффективнее. А веб-ресурс, в котором допущено много ошибок либо не используется семантика верстки в принципе, никогда не будет в топе Google.

    Мы ведем к тому, что при разработке и продвижении сайтов очень важно не стараться бездумно экономить, обращаясь к начинающим верстальщикам или пытаясь верстать страницы самостоятельно, не имея должного опыта. Если хотите, чтобы все было сразу сделано правильно, а вам не пришлось платить дважды за одну работу, обращайтесь в Elit-Web. Мы к вашим услугам!

    У Вас остались вопросы?
    Наши эксперты готовы ответить на них.
    Оставьте ваши контактные данные.
    Будем рады обсудить ваш проект!
    Получить консультацию
    Наш менеджер свяжется с Вами в ближайшее время