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

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

Боты «понимают» разметку веб-страницы, получают данные, из которых и формируется сниппет сайта: пользователь видит нужную информацию (цену, адрес, телефон компании, видеозапись, изображение, искомый текст и прочее) на поисковой странице или странице социальной сети.

Поскольку существует разный контент веб-страниц, то и типов микроразметки несколько. Их можно использовать одновременно в зависимости от целей сайта.

Основные типы микроразметки:

OpenGraph - микроразметка для соцсетей
Микроразметка хлебных крошек
Отзывы о товаре
Контактная информация
Карточка товара
Микроразметка статьи
Микроразметка картинок
Микроразметка меню
Разметка данных об организации и ее адресе

Несмотря на то, что она разработана для Facebook, данная микроразметка актуальна для любых социальных сетей. OpenGraph-протокол необходим для интеграции сайта с соцстраницей. С помощью него можно управлять представлением веб-страницы в социальных медиа «вручную»: т.е при расшаривании страницы в соцсети, микроразметка OpenGraph сразу выводит картинку, заголовок и описание поста. Это заинтересовывает пользователей, и увеличивает количество переходов, так как изображение не является случайным, да и отрывок текста подобран с особой тщательностью и несет максимум информации, способной заинтересовать.

Пример:


<meta property="og:title" content="Выгрузка товаров в Яндекс.Маркет" /> 

 <meta property="og:url" content="vygruzka-tovarov-v-yandeks-market" /> 

 <meta property="og:image" content="https://www.sng-it.ru/upload/iblock/b1c/ya.png" /> 

 <meta property="og:description" content="Чтобы отправить данные на торговые площадки, нужен файл экспорта. Яндекс.Маркет принимает данные от магазинов в формате yml." /> 

 <meta property="og:type" content="website" /> 

 <meta property="og:site_name" content="Битрикс Мастер" > 

 <meta property="og:locale" content="ru" /> 

 <meta property="og:image:secure_url" content="https://www.sng-it.ru/upload/iblock/b1c/ya.png" /> 

 <meta property="twitter:image" content="https://www.sng-it.ru/upload/iblock/b1c/ya.png" /> 

 <meta property="twitter:card" content="summary_large_image" />

, где
og:title — заголовок поста;
og:url — ссылка на страницу;
og:image — картинка;
og:description — текст анонса;
og:type — тип страницы, в моем случае website;
og:site_name — название сайта;
og:locale — язык;
og:image:secure_url — дополнительный URL, если страница открывается по протоколу HTTPS
twitter:image — картинка для сниппета в twitter
twitter:card — широкоформатный размер картинки (работает для telegram)

Результат: при рассшаривании материалов в соцсетях, выбираются заданные значения заголовка, картинки, описания и других параметров.

Также Open Graph работает для мессенджеров. Если вы отправите ссылку в Telegram, Max, WhatsApp или другой messenger, то увидите, что ссылка без микроразметки выглядит в виде строки:
https://www.sng-it.ru/bitriks-24/

, а ссылка с размеченными данными принимает более интересный вид картинки с заголовком:
Результат микроразметки Open Graph для Skype

Результат микроразметки Open Graph для Skype

Проверить микроразметку Open Graph можно на странице https://developers.facebook.com/tools/debug/sharing/

Хлебные крошки отображают элементы навигации по веб-странице, и нужны, чтобы поисковый робот (особенно google) простроил путь от главной страницы к искомой теме.
Данная микроразметка повышает рейтинг в сниппете, а поисковики выводят ссылки цепочкой от более крупного раздела к искомой теме. Аккуратный вид ссылки привлекает внимание, повышает количество переходов на сайт в целом (у пользователя есть возможность выбора: перейти на необходимую страницу, ознакомиться со всем перечнем сайта на главной, или перейти в промежуточную рубрику).
Пример 1:


<div class="bx-breadcrumb">

      <div class="bx-breadcrumb-item" id="bx_breadcrumb_0" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" itemref="bx_breadcrumb_1"> 

            <a href="/" title="Главная" itemprop="url">

                       <span itemprop="title">Главная</span>

            </a>

      </div>

      <div class="bx-breadcrumb-item" id="bx_breadcrumb_1" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child" itemref="bx_breadcrumb_2"> 

            <a href="/" title="Услуги" itemprop="url">

                       <span itemprop="title">Услуги</span>

            </a>

      </div>

      <div class="bx-breadcrumb-item" id="bx_breadcrumb_2" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child">

            <a href="/vnutrennyaya-optimizatsiya-sayta/" title="Внутренняя оптимизация сайта" itemprop="url">

                       <span itemprop="title">Внутренняя оптимизация сайта</span>

            </a>

      </div>

            <div class="bx-breadcrumb-item">

                      <span>Внедряем микроразметку на сайт</span>

            </div>

 </div>

Пример 2:


<div class="bx-breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

      <div class="bx-breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 

            <a href="/" title="Главная" itemprop="item">

                       <span itemprop="name">Главная</span>

            </a>

      </div>

      <div class="bx-breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 

            <a href="/" title="Услуги" itemprop="item">

                       <span itemprop="name">Услуги</span>

            </a>

      </div>

      <div class="bx-breadcrumb-item"itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

            <a href="/vnutrennyaya-optimizatsiya-sayta/" title="Внутренняя оптимизация сайта" itemprop="item">

                       <span itemprop="name">Внутренняя оптимизация сайта</span>

            </a>

      </div>

            <div class="bx-breadcrumb-item">

                      <span>Внедряем микроразметку на сайт</span>

            </div>

 </div>

Результат: благодаря микроразметке BreadcrumbList сниппеты поисковиков содержат цепочку навигации, для пользователя более понятную чем символьный код ссылок.

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

Пример:


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


          <!-- Ссылка на статью -->

          <link itemprop="mainEntityOfPage" itemscope href="Ссылка на статью" />


          <!-- Данные о сайте: лого, телефон, адрес, название -->

          <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">

                  <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">

                          <img alt="Лого www.bitrix-master.ru" itemprop="image url" src="http://www.bitrix-master.ru/upload/sng_speedpage/webp//bitrix/templates/master/images/logo.webp"/>

                          <meta itemprop="width" content="160">

                          <meta itemprop="height" content="160">

                  </div>

                  <meta itemprop="telephone" content="+7 904 589-06-04">

                  <meta itemprop="address" content="Омск">

                  <meta itemprop="name" content="www.bitrix-master.ru">

          </div>

          

          <!-- Дата публикации статьи -->

          <meta itemprop="datePublished" content="2016-10-07">

          

          <!-- Дата последнего изменения статьи -->

          <meta itemprop="dateModified" content="2016-10-07">


          <!-- Автор статьи -->

          <span itemprop="author" itemscope itemtype="http://schema.org/Person">

          <span itemprop="name">Семен Голиков</span>

          </span>


          <!-- Тело статьи -->

          <div itemprop="articleBody">


                  <!-- Заголовок статьи -->

                  <h1 itemprop="headline">Заголовок</h1>


                  <!-- Главное изображение статьи -->

                  <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">

                          <img itemprop="image url" alt="Описание картинки" width="500" height="280" src="http://www.bitrix-master.ru/upload/iblock/ab6/images-_1_.jpg"/>

                          <meta itemprop="width" content="300">

                          <meta itemprop="height" content="157">

                  </span>


                  <p>Микроразметка помогает поисковым роботам создать информационные снипеты в поисковой выдаче, а также позволяет, при расшаривании страницы в соцсетях, передавать в пост нужную картинку, заголовок, описание.</p>

                  <p>Боты «понимают» разметку веб-страницы, получают данные, из которых и формируется сниппет сайта: пользователь видит нужную информацию.</p>

          </div>

 </div>

Таким образом, качественно выполненная микроразметка помогает роботам наиболее эффективно обрабатывать информацию на разнообразных интернет-ресурсах, чтобы потом показывать эти данные пользователям в поисковой выдаче.
Проверить правильность разметки можно с помощью валидатора.

Семен Голиков.

Получите консультацию специалиста

Семен Голиков

@sng24

Cертифицированный программист 1С Битрикс

У меня Вы можете заказать программные работы или проконсультироваться по сайту.

C 2010 года разрабатываю и поддерживаю сайты на 1С Битрикс. Являюсь Золотым партнером компании 1С Битрикс и имею компетенции: Интеграция с 1С, Композитный сайт, Битрикс24, а также все сертификаты специалиста.