Содержание
- Семантическая разметка – что это?
- Примеры семантической разметки страниц
- Предназначение
- Связь разметки и ранжирования поисковыми системами
- Применение на практике
- Удобность и полезность сайта. Что на них влияет?
- Контент
- Правильное оформление изображений
- Язык
- Ссылки
- Заголовок
- Ридеры, или гаджеты без браузеров
- Что не влияет на повышение качества пользовательского опыта?
- Интерфейс
- Проверка ресурса
Все задачи, относящиеся к оптимизации сайта в поисковых системах, можно разделить на внешнюю и внутреннюю оптимизацию. Одним из пунктов внутренней оптимизации является «обрамление» контента сайта в разметку.
Сегодня мы расскажем, что такое семантическая разметка, как она работает и какую пользу можно получить, используя её.
___________
Семантическая разметка – что это?
Такой вид разметки представляет из себя дополнительные теги, в которые оформлен контент на странице ресурса. При помощи этих тегов можно разметить практически всё содержимое на странице.
Примеры семантической разметки страниц
Для обозначения какого-либо контента используются специальные конструкции. Так, к примеру, раньше блок меню навигации имел такой вид:
Предназначение
Помогает определить поисковику, какой смысл несет определённый элемент страницы. Так, для обозначения меню навигации по сайту, применяют такую конструкцию:
В качестве примера, рассмотрим конструкцию выпадающего меню на сайте indexoid.
Связь разметки и ранжирования поисковыми системами
Существует целое множество факторов, по которым данный вид разметки имеет прямое отношение к позиции в поисковике. Именно поэтому при проведении работ по внутренней оптимизации, не следует забывать про разметку.
Внедряя её в свой проект, вы сможете влиять на такие показатели:
- Качество содержания и, как следствие, самого оптимизируемого ресурса;
- Факторы поведения пользователей.
Сейчас появляется всё больше гаджетов, способных подключаться к Internet, с различными параметрами экранов. Для достижения оптимальных поведенческих факторов, необходимо оптимизировать сайт к таким устройствам. Добиться этого поможет семантическая разметка сайта.
В качестве примера приведем проект Webkit. Вне зависимости от диагонали дисплея устройства, с которого вы посещаете этот ресурс (будь то смартфон или умные часы), пользование сайтом одинаково комфортно.
Применение на практике
Элементы такой разметки можно разгруппировать на неважные и важные. Что же важно? При проведении аудита проекта, необходимо обращать внимание на параметры, влияющие на факторы поведения пользователей.
Так, на поведение посетителей большое влияние оказывает опыт использования ресурса. Для улучшения этого показателя и применяется семантическая разметка страниц.
Удобность и полезность сайта. Что на них влияет?
Весь чек-лист по проведения разметки с целью повышения опыта использования ресурса можно поделить на два направления:
- Интерфейс ресурса;
- Контентное наполнение.
Контент
Любой визит пользователя на площадку несет за собой цель потребления, находящейся на нём, информации. При грамотной разметке сайта оптимизатором, удобство пользованием ресурсом для пользователей значительно возрастёт.
В семантической разметке есть фундаментальные понятия. Например, при разметке списков используются теги <ol>, <ul>, <li>. Такие теги понятны и применять их при разметке очень легко.
Есть приёмы не такие распространённые. Например, блок article, в котором должен располагаться главный контент.
При разметке прочих блоков применяют контейнер под названием section.
Но есть приёмы, незаслуженно упускаемые из виду еще чаще. Так, очень часто забывают о корректности разметки визуального контента, о которой мы поговорим далее.
Правильное оформление изображений
Главной проблемой с семантической разметкой является отсутствие информационной составляющей. Корректным считается использование таких атрибутов, как <figure>, <figcaption>, <aria-label>, <alt>.
Рассмотрим пример семантической разметки для картинок, которая сделана неправильно.
Важность информационного наполнения недооценена. Ведь если её нет, при ранжировании фотогрфия может быть воспринята как реклама. Если же вы правильно заполнили все теги, поисковику будет легче определить назначение той или иной составляющей.
Если вы используете векторные изображения (в SVG формате), описание необходимо добавлять в предназначенный для этого блок.
Рассмотрим пример с сайта wixfy.
Для оформления подписи к изображению, следует применять теги <figure> и <figcaption>.
Для того, чтобы поисковик понял правильно к какой картинке относится указанное описание, необходимо показать ему связь посредством этих тегов. Если вы просто внесете описание в параграф, этого будет недостаточно.
Язык
Поисковик должен точно понять, на каком языке представлена страница. Вот примеры разметки, указывающей язык ресурса.
Ссылки
При указании пустых ссылок, у продвигаемой площадки статический вес будет отбираться.
К тому же, в таких ссылках нет описания, что, как и говорилось выше, очень вредно. Если в сложившейся ситуации все же необходимо вставить такую ссылку, следует добавить к ней описание посредством использования aria-label.
Вот пример пустого линка, дополненного описанием.
Заголовок
Для обозначения заголовков на сайтах применяется тег h с добавлением числовой характеристики уровня заголовка. Главной проблемой этой части контента является всё то же описание, а точнее – его отсутствие. Кроме того, так же отсутствует семантическая структура ресурса.
У вас возникнет такая ситуация, если в документе наблюдается абсолютное отсутствие заголовков. В таком случае необходимо внести хотя бы один заголовок первого уровня.
Требования к заголовку:
- Навигационность. Он должен давать понять, к каком конкретному блоку контента он относится.
- Полезность. Необходимо придавать заголовку смысловую нагрузку, непосредственно связанную с содержанием.
Тем не менее, избегайте сильной перегруженности текста заголовками.
Ридеры, или гаджеты без браузеров
Возможность пользования одним сайтом через любое устройство дает адаптивный дизайн.
Люди пользуются интернетом с абсолютно различных устройств. Среди них есть и те, на которых нет ни одного, привычного нам, браузера. Для интернет-серфинга на таких гаджетах предусмотрены ридеры.
Семантическая разметка сайта даёт возможность пользоваться им даже на устройствах этого типа. К примеру, таким гаджетом является Apple Watch.
Адаптация сайтов под такие устройства возможна только с применением специальной разметки.
Пример того, как разметка помогает справиться с вопросом прохождения процесса авторизации.
Так, разметка помогает гаджету распознать вводимые данные и, в итоге, ОС сама предоставляет выбор пользователю, с какими данными из облака ему работать.
Такие же действия необходимо произвести для разметки контактного телефона, даты. Тег <select> также нуждается в такой разметке.
Такая разметка напрямую влияет на улучшение опыта пользования сайтом.
Что не влияет на повышение качества пользовательского опыта?
После всего выше сказанного, возникает вопрос, неужели абсолютно каждый шаг необходимо рассматривать под микроскопом? Конечно, нет.
В разметке существует множество похожих инструментов. Например, теги <b> и <strong>. В настоящее время в их использовании нет никакой разницы, поэтому забивать этим голову не следует.
Стоит отметить, что на практике чаще всего используют тег strong для определения жирности текста, и тег em для обозначения курсива.
Schema
Поисковики и браузеры совместимы с Shema (микроформатный стандарт).
Далее – вы можете посмотреть, как визуально семантическая разметка schema org.
Какие форматы поддерживаются, можно узнать на сайте Schema.org.
Open Graph
Поисковики и браузеры совместимы Open Graph (протокол разметки).
Далее – вы можете посмотреть, как визуально семантическая разметка протокола Open Graph.
Какие форматы поддерживаются, можно узнать на сайте Open Graph.
Интерфейс
Специальная разметка также используется при оформлении блоков интерфейса. Интерфейс разделяют на основные части структуры, которые называют тегами-ориентирами. Главная их задача состоит в обозначении общих частей сайта.
Проверка ресурса
Для обнаружения проблем ресурса можно воспользоваться системами аудита.
Такие ресурсы анализируют полученную информацию о сайте, создают чек-лист для выполнения и расставляют приоритеты созданных задач по внесению правок относительно обнаруженных недочетов.
Одним из таких инструментов является бесплатный сервис MegaIndex Аудит.