Лого www.SiteHere.ru

Микроразметка сайта — как разобраться и как сделать правильно?

За окном 2016 год. Микроразметка сайта это давно уже не ноу-хау и в этом должен разобраться каждый владелец сайта, который хочет свой ресурс продвинуть в ТОП. Кроме этого, разобравшись в микроразметке сайта, Вы сможете управлять сниппетом на поисковой выдаче и тем самым увеличить кликабельность.

Кроме микроразметки, о которой Вы узнаете в данной статье, обязательно прочтите статью о том, как же улучшить поведенческие факторы, а также о том, что же измениться в области SEO в 2016 году:

Если Вы попали на данную статью, то, возможно, пришла пора раз и навсегда разобраться с микроразметкой сайта и понять что и как необходимо сделать. Из данной статьи Вы поймете что в этом нет ничего сложного и каждому по силам сделать это. Я в этом прекрасно убедился, когда наши ученики, зная лишь правильную инструкцию, делают действительно сложные вещи с технической стороны. Поэтому отговорка "Это тяжело сделать технически" здесь не работает 😉 !

Важна ли микроразметка сайта?

Важна ли микроразметка сайта

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

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

Видов микроразметки на самом деле несколько. Нет одной конкретной. У каждой микроразметки есть свой словарь. Это набор специальных слов, которые прописываются в структуру Вашего документа (в исходном коде страницы) и указывают поисковому работу на важные зоны документа.

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

Поэтому, для удобства пользователей, различные типы микроразметки на поиске могут выглядеть совершенно по-разному. Это дает возможность выделить свой сайт и получить больше посетителей соответственно.

А Вы видели вот такие звездочки на поисковой выдаче, как на изображении ниже?

Звездочки в сниппете на поиске

Так вот делаются они также с помощью микроразметки сайта. Но об этом читайте ниже.

Я думаю сейчас понятно, что микроразметка действительно может увеличить приток новых посетителей с поиска. Сейчас осталось узнать что это за микроразметка и куда все необходимо прописывать.

Поэтому переходим в следующей логической части: виды микроразметки сайта.

Виды микроразметки сайта

Виды микроразметки сайта

Всего видов микроразметки больше, но мы рассмотрим 3 самые распространенные:

  1. Open Graph — для социальных сетей
  2. Schema.org — для поисковых систем
  3. Микроформаты — для поисковых систем (устаревает)

Каждая из видов микроразметки предназначена для предоставления определенных данных. То есть у каждой из них есть свои цели, которые также необходимо знать и понимать.

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

Микроразметка сайта — Open Graph

Микроразметка сайта - Open Graph

Хочу начать с того, что сказать кто разработал данную микроразметку. А разработал ее Facebook. Сейчас многие, наверное, догадались для чего она предназначена. Догадались?

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

В нынешние дни аккаунты в социальных сетях есть практически у каждого пользователя. Мы постоянно общаемся с друзьями, смотрим видео, обмениваемся информацией внутри социальных сетей: Вконтакте, Facebook, Instagram и т.д. Они очень тесно вошли в нашу жизнь. Но как же это все связано с сайтом и статьями на сайте?

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

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

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

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

Микроразметка — Schema.org

Микроразметка - Schema.org

Данная семантическая разметка была создана поисковыми системами для поисковых систем. Объявили о ней в 2010 году. Если Вы поняли для чего необходима микроразметка Open Graph, тогда с легкостью поймете для чего же нужно и данная микроразметка.

В социальной сети Вы структурировали сниппет, который там всегда одинаков. Но на поисковой выдаче все более гибко. Здесь можно сниппет фильма и сниппет для книги вывести совершенно по-разному:

Сниппет для фильма и для книги

То есть благодаря микроразметке можно указать более подробные сведения в сниппете на поисковой выдаче. Тем самым увеличивается вероятность того, что данная информация заинтересует больше целевых посетителей. Это похоже на покупку автомобиля без фото. Вы не знаете в каком состоянии автомобиль (хотя по внешнему виду судить нельзя, но не об этом сейчас). Вы звоните хозяину автомобиля, приходите, за 2 минуты понимаете что это не то и уходите. Также и посетители, которые зашли по сниппету на сайте, увидели не то что искали и быстро ушли с сайта.

Почему это может нанести вред для SEO Вашему сайту? А потому что увеличивается показатель отказов, один из важнейших поведенческих факторов. Поэтому и необходимо сразу показать пользователю что его ждет на сайте.

Вот основной список форматов, который поддерживает данная микроразметка:

  • Адреса и организации
  • Видео
  • Вопросы и ответы
  • Другие творческие работы
  • Отзывы об автомобилях
  • Отзывы об организациях
  • Программы
  • Рефераты
  • Рецепты
  • Словарные статьи
  • Тест-драйвы
  • Товары и цены
  • Картинки
  • Фильмы

Если Вам мало данных форматов, то вот полный список с официального источника — Полный перечень форматов Schema.org.

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

Микроформаты

Микроформаты

Хотя я рекомендую Вам сосредоточиться лишь на первых двух типах микроразметки, все же данный вид микроразметки необходимо хотя бы "знать в лицо". Потому что его Вы могли встретить в шаблонах для CMS (WordPress, Joomla и т.д.), которыми Вы пользуетесь.

Несколько слов о том, где же применяется данная микроразметка. А применяется она все там же где и Schema.org: разметка данных для поисковых систем.

Словарь данной микроразметки хоть и есть, но много незаконченной информации в черновиках.

Но где Вы могли видеть данную микроразметку? А хотя бы в исходном коде комментариев в шаблоне WordPress. Там могло Вам встретиться вот такое слово "hCard". Оно отвечает за формат данных с контактной информацией.

Если говорить о форматах, которые там присутствуют и поддерживаются поисковыми системами, то их довольно немного:

  • hCard — контактная информация
  • hRecipe — кулинарные рецепты
  • hReview — отзывы
  • hProduct — товары

Пока что Вам нет необходимости знать что внутри данных форматов до мелочей. Все это Вы узнаете из последующих статей. Но данную микроразметку мы не будем смотреть, так как она устаревает и все внимание сместилось на Schema.org.

Я понял что и где применяется — что дальше делать?

Поняли для чего нужна микроразметка? Замечательно! Но это еще не все, ведь ее необходимо еще внедрить и проверить на валидность ("правильность"). Об этом Вы узнаете из следующих статей, потому что данная статья была бы очень длинной и ее чтение с маленьким скроллом стало бы не очень удобным.

Содержание

Вывод

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

Успехов!

С Уважением, Юрий Немец

Микроразметка сайта — как разобраться и как сделать правильно? 4.42/5 (88.44%) 45 голос(ов)

Понравилась статья - расскажи друзьям! :)

25 комментариев к записи
  • Людмила Санжаровская

    Статья полезная, особенно не очень продвинутым вебмастерам.Но слишком много воды.Уложиться можно было в 2 фразы:Микроразметка полезна.Как ее установить- смотреть там-то.

     
    • Юрий Немец

      Статья для начинающих. Кто не сталкивался с микроразметкой, в двух словах вряд ли поймет о чем речь.

       
  • Антон

    Хорошая статья и правильно, что подробно всё описано и озвучено. Я раньше как то не задумывался насчёт использования микроразметки, но вижу, тема актуальная (буду пробовать), да и у вас на сайте поковырявшись в коде, вижу, что сами используете.

     
    • Юрий Немец

      Спасибо, Антон! Скоро выйдет статья, как сделать микроразметку Schema.org на практике 🙂 .

       
  • Александр

    Здравствуйте! А можете мне дать ссылку на статью как сделать микроразметку?

     
    • Юрий Немец

      Здравствуйте, Александр!

      Ссылка на статью по микроразметке Schema.org: Перейти.

      Ссылка на статью по микроразметке Open Graph: Перейти.

       
  • Андрей

    Подскажите, вследствие чего ссылки в выдаче изменяются с транслитерации на русский язык (часто можно встретить у википедии)? Это результат микроразметки или ПС определяют по своим личным алгоритмам?

     
  • Radu

     

    Dobrii vecer, skajite pojalusta, mogu li ea dobaviti na sait ( esli konkretno — post[statia]) 2 vidov mikrorazmetki. Naprimer oformiti statiyu v Json-ld (schema.org/Article) i postaviti isheo razmetku html ( schema.org/ImageObject) .  V statie budut 24 izobrajeniea. Spasibo

     
    • Юрий Немец

      Добрый вечер!

      Сущность "Article" более общая и охватывает всю статью. Внутри статьи может быть 10-20 изображений. Эти изображения желательно размечать с помощью сущности "ImageObject". Никакого конфликта здесь нет, а только дополнение!

      Это будет полезно для SEO продвижения.

       
  • Radu

    kak dobaviti v Json-LD bolishe izobrajenii, nikak ne pouceaetsa… ?

     
  • Radu

    Vot primer koda, kak dobaviti isheo 2 izobrajenie naprimer. ? 

    <script type="application/ld+json">
    {
      "@context": "http://schema.org/",
      "@type": "Article",
      "headline": "titlul",
      "mainEntityOfPage": "http://scrollex.ru",
      "datePublished": "2017-12-10",
      "dateModified": "2017-12-10",
      "description": "fgfyyjy",
      "image": {
        "@type": "ImageObject",
        "height": "500",
        "width": "40",
        "url": "http://scrollex.ru/wp-content/uploads/2017/03/derevyannaya-lampa-ot-Ambient-2.jpg"
      },
      "author": "scrollex",
      "publisher": {
        "@type": "Organization",
        "logo": {
          "@type": "ImageObject",
          "url": "http://scrollex.ru/wp-content/uploads/2016/01/scr_flash__red-1.png"
        },
        "name": "СКРОЛЛЕКС"
      },
      "articleBody": "body descriere"
    }
    </script>

     

     
    • Юрий Немец

      А почему вы используете способ вставки JSON-LD?

      Проще всего внедрить в структуру шаблона пример, который находится на вкладке "Microdata":

      <div itemscope itemtype="http://schema.org/ImageObject">
          <h2 itemprop="name">Заголовок</h2>
          <img src="mexico-beach.jpg"
              alt="Описание изображения."
              itemprop="contentUrl" />
          By <span itemprop="author">Имя автора</span>
          Фото сделано в
          <span itemprop="contentLocation">Puerto Vallarta, Mexico</span>
          Дата загрузки фото:
              <meta itemprop="datePublished" content="2008-01-25">Январь 25, 2008
          <span itemprop="description">Описание изображения.</span>
      </div>

      После добавления микроразметки Schema.org обязательно проверьте страницу на валидаторе микроразметки. Более подробное описание внедрения микроразметки на сайт и проверке на валидаторы находится в данной статье: микроразметка Schema.org.

       
      • Radu

        Spasibo, a kak ukazati kogda avtor sdelal foto ? Naprimer on sdelal foto v 2016, a ea publicuyu foto seichas , v 2017.

         
        • Юрий Немец

          Внимательно изучите данную страницу на сайте Schema.org о сущности ImageObject. У данной сущности можно задать атрибут dateCreated (дата создания), а также есть возможность указать атрибут datePublished (дата публикации).

           
          • Radu

            Spasibo, mne toliko dateCrated nujno. tak kak v texte, ne mogu u kajdoi fotografii napisati chto opublikoval sevodnea(datePublished). Horosho chto dlea dateCreated, ne nujno postaviti datu po formatu yyyy-mm-dd, ea postavil toliko " noyabri 2016" i viju cho oshibok netu, znacit vseo ok. Spasibo vam za pomoshi 😉

             

             
          • Radu

            Vot, mojete posmotreti na statiyu kotoruyu dobavil, i esli chtoto sdelal ne tak, skajite pojalusta. Zaranee blagodaren. Esli ssilka vdrug ne otkrivaetsa, pomostrite na saite scrollex.ru na glavnoi stranitze, post s nazvaniem nije:

            Победители Премии 2017 Sony World Photography Awards

             
  • Radu

    Posmotreli posledneyu zapisi na scrollex.ru ? Tam gde fotografii ot Sony world Photography.

     
  • Михаил

    Юрий добрый день. Буду Вам признателен как эксперту за консультацию по микроразметке. На сайт была добавлена микроразметка schema.org, сущности product и offer. Валидатор яндекс не обнаружил ошибок:

    resource = http://breloknomerok.ru/
    
    product
    
    itemType = http://schema.org/Product
    
    description = Сделайте заказ брелока с номером машины на нашем сайте. Выбирайте готовое изображение или заказывайте свой индивидуальный дизайн.
    
    offers
    
    offer
    
    itemType = http://schema.org/Offer
    
    price = от 350.00
    
    pricecurrency = RUB
    
    name = Брелок с номером машины на заказ:
    

    Но в панели веб мастер появилось сообщение:

    "На многих страницах сайта breloknomerok.ru отсутствуют или некорректно заполнены мета-теги <description>. Это может негативно повлиять на представление сайта в результатах поиска. "

    И действительно, в выдаче, в снипете не содержится информации из поля description.

    В чем ошибка ?

     
    • Юрий Немец

      Добрый день, Михаил!

      Сейчас у вас на сайте в область <head> </head> вставлен часть кода HTML, который должен находится после открывающего тега <body>.

      Мета-тег description, о котором идет речь в Яндекс Вебмастере, это не микроразметка. Он пишется следующим образом:

      <meta name="description" content="Здесь необходимо написать описание страницы">

      Более подробно о данном мета-теге можно почитать здесь — изучаем мета-теги.

      Если вы используете CMS WordPress, то здесь вам на выбор есть 2 хороших плагина: Yoast SEO и All in One SEO Pack.

      Про настройку Yoast SEO можно почитать здесь:

      Часть 1. Настройка плагина Yoast SEO

      Часть 2. Настройка плагина Yoast SEO

      Про настройку плагина All in One SEO Pack вы можете почитать в следующих статьях:

      Первая часть статьи по настройке плагина All in One SEO Pack

      Вторая часть статьи по настройке плагина All in One SEO Pack

      Если у вас простой лендинг, то вам необходимо вручную вставить данный тег в область <head> </head>. И сделать это нужно на всех страницах сайта, которые вы планируете продвигать в поиске.

       
      • Михаил

        Юрий, спасибо за доступный ответ. Тогда чтобы еще больше разобраться. Правильно ли я понимаю, что микроразметкой размечают ТОЛЬКО видимые области сайта? 

        А поскольку Мета-тег description на самом сайте не показывается, то и микроразметка к нему не "приделывается"?

        Поэтому в моем случае (одностраничник) можно использовать или description, или в качестве описания продукта — часть какого нибудь видимого текста?

         

         
        • Юрий Немец

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

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

          В вашем случае обязательно использовать мета-тег description, потому что есть вероятность попадания в ТОП Яндекса по низкочастотному запросу, так как Яндекс "любит" одностраничники. Но это возможно при наличии достаточного (1000 — 1500 символов) количества символов на вашем одностраничнике.

           
  • аааа

    Размещать микроразметку Open Graph нужно только для одного конкретного товара или можно для нескольких?

     
    • Юрий Немец

      Добрый день!

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

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *