Сегодня мы поговорим о семантическом значении HTML-кода. Каждый SEO-оптимизатор должен иметь представление о том, что такое HTML, но далеко не каждый знает о семантическом значении отдельных HTML-тегов, а умеют применять эти знания и вовсе единицы — те, кто являются практиками не только в SEO, но и в веб разработке.
Что такое семантическая структура текста?
Семантическое значение (или назначение) HTML-тега — это его роль в разметке. Скорее всего, Вы знаете, что тегу <title> отводится роль названия веб-документа, мета-тег Description должен содержать краткое описание веб-страницы, а тег <h1> — это заголовок первого уровня, который должен быть на странице только один. Также есть тег <strong>, с помощью которого можно выделить жирными шрифтом слово или фразу, придав ему «значимость» в глазах поисковиков.
К сожалению, большинство SEO-специалистов ограничиваются этими знаниями. Почему к сожалению? Дело в том, что кроме <title>, <h1> и <strong> в HTML существует еще более сотни тегов, у каждого из которых есть своё семантическое значение. На него обращают внимание поисковые роботы, сканирующие контент веб-страницы.
Возможно, вы знаете про тег <p>, предназначенный для разметки абзацев, про теги <ul> и <ol> для разметки маркированных и нумерованных списков, про тег <table> для разметки таблиц. Это традиционные теги, помогающие форматировать контент правильно. Они выделяют на веб-странице отдельные элементы: заголовки, абзацы и прочее. Но если Вы владеете HTML-вёрсткой, то прекрасно знаете, что придать индивидуальный стиль можно абсолютно любому элементу веб-страницы, заключенному в универсальный тег <div> или <span>: в эти теги можно заключать заголовки, абзацы, списки и даже картинки, и в результате пользователи видят на веб-странице то, что хотят видеть, а именно правильно оформленный контент. Тогда зачем все эти заморочки с семантическими тегами?
Как правильно размечать текст?
Дело в том, что именно HTML-тег указывает поисковому роботу на семантическое значение элемента. Иначе говоря, текст в теге <p> робот расценивает как абзац, текст в тегах <h1>-<h6> - как заголовки и подзаголовки различного уровня вложенности, а текст в тегах <li> - как элементы списков. Это всё элементарно, но если копнуть глубже, то Вы узнаете, что существуют теги, позволяющие максимально точно определить семантическую структуру контента на сайте:
- <main> предназначен для основного (уникального в пределах сайта) контента веб-страницы;
- <section> нужен для выделения разделов и подразделов, желательно начинающихся с вложенного тега заголовка <h2>-<h6> определённого уровня вложенности в зависимости от уровня вложенности раздела;
- <figure> используется для автономных изображений, внутри может содержать тег <img> для вставки самой картинки и тег <figcaption> для видимой подписи к ней;
- <caption> применяется для разметки названий таблиц;
- <blockquote> - блочные цитаты.
Это лишь несколько примеров тегов, которые помогут поисковым роботам лучше понимать контент на страницах сайта. Также у многих тегов есть специальные атрибуты, которые придают дополнительное значение элементам контента в глазах роботов. Скорее всего, Вам известно про атрибут Alt тега <img>, по которому поисковые сканеры судят о том, что изображено на картинке. Но это далеко не единственный атрибут такого плана. Например, существует тег <abbr>, предназначенный для выделения аббревиатур, в атрибуте Title которого указывается расшифровка аббревиатуры, или тег <time>, в атрибуте Datetime которого указывается определённое время в формате ISO 8601.
А также существует целый формат микроданных Schema.org, которые обозначаются в качестве атрибутов тегов и нужны, чтобы придавать элементам контента сайта дополнительное, более точное, значение, например цену товара, название организации, логотипы, контактные данные и многое другое.
Напоследок отметим, что семантическая разметка — это не панацея для хороших позиций: не надейтесь, что только «переразметка» контента выведет ваши страницы в ТОП. Хотя, в зависимости от уровня конкуренции, Вы можете быть приятно удивлены результатом такой оптимизации, особенно в выдаче Google.
И помните, что поисковая оптимизация — это целый комплекс работ над факторами качества сайта в целом и каждой его отдельной страницы в частности.
Всем добра и отличных позиций в поиске!