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

What is micromarking

1 January 19
  • Home
  • Courses
  • Что такое микроразметка
ЛЕКЦИЯ № 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.
СПАСИБО И УСПЕХОВ В УЧЕБЕ

We are ready to promptly provide advice on all issues

VDcom © 2022. Privacy Policy