На фото логотип веб студии VDcom. Он состоит из двух букв VD переплетеных между собой, и словом com. Буква o заменена на земной шар.

Что такое микроразметка

ЛЕКЦИЯ № 13

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

Какова цель микроразметки?

предоставить поисковым системам структурированную информацию.

Глазами поискового бота

Зачем нужна микроразметка?

Микроразметка делает сайт более понятным, структурированным и облегчает поисковым роботам и специальным программам чтение и обработку информации для удобного её представления в результатах поиска.

Разметка из словаря Schema.org добавляется непосредственно в HTML-код страницы с помощью специальных атрибутов и это не требует создания отдельных экспортных файлов.

Примеры микроразметки

Примерами микроразметки могут быть:

  • адреса
  • рейтинги
  • рецензии
  • события
  • контактные данные

Как использовать микроразметку

Для использования микроразметки необходимо:

  1. Выбрать нужный словарь микроразметки, например, Schema.org
  2. Добавить соответствующие метаданные на страницу
  3. Протестировать страницу с помощью специальных инструментов,
    например, Google Structured Data Testing Tool

Разметка словаря Schema.org — это код, который размещается непосредственно в теле страницы

Семантическая микроразметка

Микроразметка состоит из словаря и синтаксиса

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

  • Словарь

    • Это своеобразный «язык», набор атрибутов и их свойств, с помощью которых указывается суть содержимого на странице. Например, словарь определяет, с помощью какого термина указывать название — «name», «title» или «n».

Синтаксис

Синтаксис микроразметки — это способ использования словаря. Он определяет, как будут указаны элементы словаря на странице.

То-есть набор правил для полноценного использования словаря.

  • Синтаксис

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

Schema.org

Schema.org — это принятый стандарт микроразметки данных, поисковыми системами Яндекс, Google, Bing и Yahoo! летом 2011 года. Прописывается микроразметка непосредственно в HTML-коде с помощью специальных атрибутов и больше не требует никаких дополнительных действий. Ознакомится с библиотекой Schema.org и научиться с ней работать можно на официальном сайте.

Разметка производится в два шага

ПЕРВЫЙ ШАГ

Контейнеру добавляем атрибут itemscope через который мы сообщаем поисковому роботу (Googlebot), сканирующему наш сайт, что на этой странице есть микроразметка. Атрибут itemtype — всегда идет после itemscope и указывает адрес словаря, который будет применяться.


<div itemscope itemtype="http://schema.org/Organization" >
...
</div>

Добавление микроразметки

ВТОРОЙ ШАГ

Добавляем разметку отдельных свойств с указанием на конкретное свойство. Атрибут itemprop: это глобальный атрибут используется для добавления свойств к объекту. Itemprop состоит из пары имя-значение. Каждая пара имя-значение называется свойством, а группа из одного или нескольких свойств образует элемент. Cправка - Google Merchant Center 


<span itemprop="streetAddress">
Чорновола, 9/1
</span>

Пример документа без разметки


<div>
<span>VDcom</span>
Контакты:
<div>
Адрес: Черновола, 9/1,
119021,
Черкассы,
</div>
Телефон: +3 096 400–40–10,
Электронная почта: vdcom@gmail.com
</div>

Пример документа с разметкой


<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">VDcom</span>
Контакты:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Адрес:<span itemprop="streetAddress">
Чорновола, 9/1</span>
<span itemprop="postalCode"> 18000</span>
<span itemprop="addressLocality">Черкассы</span>,
</div>
Телефон:<span itemprop="telephone">+3 096 400–40–10</span>,
Электронная почта: <span itemprop="email">vdcom@gmail.com</span>
</div>

JSON-LD Schema Generator для SEO

Упрощеный способ добавить микроразметку на веб-страницу сайта это использовать генератор JSON-LD. С его помощью не сложно создать правильную микроразметку для любой страницы. С JSON-LD проще и удобнее работать чем Schema.org. Отличается и формат и метод внедрения кода в HTML. JSON код внедряется в тег <head> хотя можно и в тег <body>. Внедрить проще и гораздо легче потом найти ваш код и откорректировать его, заменить или удалить.

СОЗДАЕМ РАЗМЕТКУ С ПОМОЩЬЮ ГЕНЕРАТОРА JSON-LD

  • ПЕРВЫЙ ШАГ

    Выбираем тип микроразметки, которая нам необходимая, из раскрывающегося списка слева.

  • ВТОРОЙ ШАГ

    Заполняем форму как можно подробнее.

  • ТРЕТИЙ ШАГ

    Потом копируем сгенерированный код он будет справа.

  • ЧЕТВЕРТЫЙ ШАГ

    Готовый код нужно вставить в раздел <head> HTML-документа.

  • ПЯТЫЙ ШАГ

    Следующий шаг проверить готовый код проверить микроразметку

Валидатор микроразметки

Валидаторы, для проверки корректности микроразметки. Валидатор микроразметки от Google, и сервис разработаный поисковой системой Яндекс. Валидаторы дают рекомендации на русском языке. Но этого бывает мало, потому что у всех ошибки разные и зависят от HTML структуры.

На картинке сделаный скриншот валидатора микроразметки компании гугл.

ДОМАШНЕЕ ЗАДАНИЕ

Выбрать любой из сайтов на котором нет микроразметки.
Скопировать необходимый код для работы. Сохранить его в файл html и в нем прописать семантическую разметку.

  • Прописать микроразметку для title description.
  • Прописать микроразметку для контактов.
  • Проверить на валидаторе Google.
СПАСИБО И УСПЕХОВ В УЧЕБЕ

Мы готовы оперативно предоставить консультацию по всем вопросам

© 2013-2024. Веб-студия VDcom