Россия

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

Внедряем микроразметку на сайт Микроразметка помогает поисковым роботам создать информационные снипеты в поисковой выдаче, а также позволяет, при расшаривании страницы в соцсетях, передавать в пост нужную картинку, заголовок, описание.
Боты «понимают» разметку веб-страницы, получают данные, из которых и формируется сниппет сайта: пользователь видит нужную информацию (цену, адрес, телефон компании, видеозапись, изображение, искомый текст и прочее) на поисковой странице или странице социальной сети.
Поскольку существует разный контент веб-страниц, то и типов микроразметки несколько. Их можно использовать одновременно в зависимости от целей сайта.
    Основные типы микроразметки:
  • OpenGraph - микроразметка для соцсетей
  • Микроразметка хлебных крошек
  • Отзывы о товаре
  • Контактная информация
  • Карточка товара
  • Микроразметка статьи


    • OpenGraph - микроразметка для соцсетей

      Несмотря на то, что она разработана для 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
      Также Open Graph работает для мессенджеров. Если вы отправите ссылку в Skype, Viber, WhatsApp или другой messenger, то увидите, что ссылка без микроразметки выглядит в виде строки:
      https://www.bitrix-master.ru/bitriks-24/

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

      Микроразметка хлебных крошек

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

      Отзывы о товаре

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

      Пример:
      <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>


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

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