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

1 January 19
ЛЕКЦИЯ № 13

Это теги и атрибуты, которые прописываются в структуру сайта и указывают поисковой машине на важную информацию. Видов микроразметки существует несколько мы расмотрим schema.org для поисковых систем и Open Graph для социальных сетей.

курсы сео специалиста

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

На картинке движущиеся буквы которые сменяются на JS мультипликацию.

Цель микроразметки: предоставить поисковым системам структурированную информацию, которая находится на странице.

курсы сео специалиста

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

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

На картинке Javascript анимация шарик движется и пишет слова ANIME.

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

курсы сео специалиста

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

курсы сео специалиста

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

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

  • Словарь

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

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

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

ПЕРВЫЙ ШАГ

Оборачивание описания определенного типа в контейнер с указанием схемы разметки:

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

ВТОРОЙ ШАГ

Разметка отдельных свойств с указанием на конкретное свойство схемы:

                
                    <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

Упрощеный способ добавить микроразметку Schema на веб-страницу сайта это использовать генератор JSON-LD. С его помощью не сложно создать правильную микроразметку для любой страницы.

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

  • ПЕРВЫЙ ШАГ

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

  • ВТОРОЙ ШАГ

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

  • ТРЕТИЙ ШАГ

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

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

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

  • ПЯТЫЙ ШАГ

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

курсы сео специалиста

Schema.org

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

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

курсы сео специалиста

Open Graph

Это — словарь, целью которого является коректное отображение данных сайта в социальных сетях. Open Graph дает возможность интегрировать веб-сайты с социальной сетью то есть обьеденить их.

С помощью словаря Open Graph мы сможем управлять представлением контента в социальных сетях, тем самым улучшая его взаимодействие с пользователями.

курсы сео специалиста

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

Валидаторы, для проверки корректности микроразметки. Валидатор микроразметки от Google, и сервис разработаный поисковой системой Яндекс.

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

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

курсы сео специалиста

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

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

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

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

VDcom © 2020. Privacy Policy