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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

История появления HTML5

HTML5 (HyperText Markup Language, version 5) — это последняя версия языка разметки гипертекста, используемого для создания веб-страниц и приложений. Разработка началась еще в 2004 году и была завершена в 2014-м. Однако история появления HTML5 началась гораздо раньше.

Первые версии HTML были созданы в 1990 году Тимом Бернерсом-Ли, который в то время работал в ЦЕРНе — Европейской организации по ядерным исследованиям. Тим предложил создать систему гипертекста для своих коллег, чтобы облегчить им доступ к информации. Таким образом, HTML стал первым языком разметки гипертекста в мире.

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

В 1997 году был выпущен HTML 4.0, который стал значительным улучшением по сравнению с предыдущими версиями. Однако даже с его выходом было понятно, что язык нуждается в дальнейшей доработке. Так, в 2004 году началась работа над HTML5.

Основной целью было устранение недостатков предыдущих версий языка. HTML5 включает в себя множество новых функций и возможностей, таких как:

• поддержка мультимедиафайлов без использования плагинов;
• улучшенная работа с графикой;
• расширенные возможности работы с формами;
• улучшенная семантика и многое другое.

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

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

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

nav

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

main

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

article

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

section

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

aside

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

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

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

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

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

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

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

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

header

nav

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. Мы к вашим услугам!