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

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

Пример:
<meta property="og:title" content="Выгрузка товаров в Яндекс.Маркет" />
<meta property="og:url" content="vygruzka-tovarov-v-yandeks-market" />
<meta property="og:image" content="/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" />
, где
og:title — заголовок поста;
og:url — ссылка на страницу;
og:image — картинка;
og:description — текст анонса;
og:type — тип страницы, в моем случае website;
og:site_name — название сайта;
og:locale — язык;


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

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

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

Хлебные крошки отображают элементы навигации по веб-странице, и нужны, чтобы поисковый робот (особенно 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>

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

Пример:
<div id="block_rating" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
        <meta itemprop="bestRating" content="10">
        <meta itemprop="ratingValue" content="8.8">
        <span class="rating_ball">8.789</span>
        <span class="ratingCount" itemprop="ratingCount">285 091</span>
</div>

Размеченные контактные данные повышают доверие поисковой системы к Вашей веб-странице.
Передача контактной информации системам поиска значительно улучшает отображения сниппетов сайта в результатах поиска: телефон, адрес, время работы, остановка общественного транспорта. При правильной разметке Яндекс даже показывает карту – схему проезда. Особенно выгодной такая разметка будет для магазинов, различных учреждений, сайтов любых организаций, чтобы данные отображались максимально корректно. Немаловажную роль здесь играет человеческий фактор: быстрый поиск контактной информации привлекает потенциальных клиентов фирмы и ведет к увеличению спроса на предоставляемые товары или услуги.

Пример:
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Битрикс Мастер</span>
Контакты:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Адрес:
         <span itemprop="streetAddress">пр. Мира 8б</span>
         <span itemprop="postalCode"> 644080</span>
         <span itemprop="addressLocality">Омск</span>,
</div>
Телефон:<span itemprop="telephone">+7 904 589–06–04</span>,
Электронная почта: <span itemprop="email">info@bitrix-master.ru</span>
</div>

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

Пример:
<div itemscope itemtype="http://schema.org/Product">
         <div itemprop="name"><h1>Лицензия на «1С-Битрикс: Управление сайтом - Первый сайт»</h1></div>
         <a itemprop="image" href="/litsenziy-1s-bitriks/upravlenie-saytom-pervyy-sayt/">
                 <img src="/upload/iblock/11b/box_bus_100x104.png" title="Лицензия на «1С-Битрикс: Управление сайтом - Первый сайт»">
         </a>
         <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                 <div>1 990 руб.</div>
                 <meta itemprop="price" content="1990.00">
                 <meta itemprop="priceCurrency" content="RUB">
                 <div>В наличии</div>
                 <link itemprop="availability" href="http://schema.org/InStock">
         </div>
         <div itemprop="description">Цена указана за лицензию 1С Битрикс, редакция Первый сайт.</div>
</div>

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

Пример:
<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/bitrix/templates/master/images/logo.png"/>
                         <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/resize_cache/iblock/ab6/300_350_1/images-_1_.jpg"/>
                         <meta itemprop="width" content="300">
                         <meta itemprop="height" content="157">
                 </span>

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