Обратная связь
Сделать заказ

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

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

Схема разметки для раздела «Контакты» (schema.org LocalBusiness)
Микроразметка для бизнеса или филиалов организации, которые имеют физический адрес. Примерами могут служить как отдельный ресторан, так и каждое заведение сети, филиал банка, стоматологическая клиника и т.д. Данная разметка позволяет поисковым системам получать больше информации о вашем бизнесе и выводить её в сниппетах. Рассмотрим пример микроразметки для организации типа «Веб-студия» (такого типа нет, поэтому будем использовать довольно общий тип «Бизнес» 2 уровня)

  1. <div itemscope itemtype=«http://schema.org/LocalBusiness»>
  2.  
  3. <p itemprop=«name»>Дизайн студия</p>
  4. <p itemprop=«description»>Веб студия занимается разработкой сайтов на 1С-Битрикс</p>
  5.  
  6. <div itemprop=«address» itemscope=«» itemtype=«http://schema.org/PostalAddress»>
  7. <p>Адрес:
  8. <span itemprop=«postalCode»>119019</span>,
  9. <span itemprop=«addressCountry»>Россия</span>,
  10. <span itemprop=«addressRegion»>Московская область</span>,
  11. <span itemprop=«addressLocality»>Москва</span>,
  12. <span itemprop=«streetAddress»>Красная площадь, д. 1</span>
  13. </p>
  14. </div>
  15.  
  16. <p>Телефоны:
  17. <span itemprop=«telephone»>8(495)123-45-67</span>,
  18. <span itemprop=«telephone»>8(499)123-45-67</span>
  19. </p>
  20.  
  21. <p>Факс:
  22. <span itemprop=«faxNumber»>8(495)123-45-67</span>
  23. </p>
  24.  
  25. <p>E-mail:
  26. <a itemprop=«email» href=«mailto:email@site.ru»>email@site.ru</a>
  27. </p>
  28.  
  29. <p>Адрес сайта:
  30. <a href=«http://site.ru» itemprop=«url»>site.ru</a>
  31. </p>
  32.  
  33. <img itemprop=«logo» src=«http://site.ru/Images/logo.png»>
  34.  
  35. <div>Время работы:
  36. <time itemprop=«openingHours» datetime=«Mo-Fr 9:00−20:00»>С Понедельника по Пятницу 9-20</time>,
  37. <time itemprop=«openingHours» datetime=«St,Sn»>Суббота, Воскресенье круглосуточно</time>
  38. </div>
  39.  
  40. <div itemprop=«geo» itemscope=«» itemtype=«http://schema.org/GeoCoordinates»>
  41. <meta itemprop=«latitude» content=«55.7537523»>
  42. <meta itemprop=«longitude» content=«37.6225168»>
  43. </div>
  44.  
  45. <p>ИНН:
  46. <span itemprop=«taxID»>1234567890</span>
  47. </p>
  48.  
  49. </div>

Схема для раздела «О компании» (schema.org Organization)
Эта схема универсальна, если вы не отнесли свою фирму ни к одному другому типу, смело пользуйтесь этой схемой. Тут приводится общая контактная информация, наименование, адреса, телефоны, электронная почта.

  1. <div itemscope=«» itemtype=«http://schema.org/Organization»>
  2. <p itemprop=«name»>Наименование организации</p>
  3.  
  4. Контактная информация:
  5. <div itemprop=«address» itemscope=«» itemtype=«http://schema.org/PostalAddress»>
  6. <p>Почтовый адрес:
  7. <span itemprop=«streetAddress»>номер дома, улица</span>
  8. <span itemprop=«postalCode»>почтовый индекс</span>
  9. <span itemprop=«addressLocality»>город, страна</span>
  10. </p>
  11. </div>
  12.  
  13. <p>Телефон:
  14. <span itemprop=«telephone»>контактный телефон</span>,
  15. Факс:<span itemprop=«faxNumber»>факс</span>,
  16. E-mail: <span itemprop=«email»>корпоративный e-mail</span>
  17. </p>
  18. </div>

Микроразметка для раздела «Статьи» (schema.org/Article)
Микроразметка статьи позволяет сделать сниппет более структурированным и человекочитаемым. Следует найти файл, который отвечает за обзор статей. Например, это может быть: single.php. Для начала находим тег, отвечающий за вывод контента, и вставляем нужный атрибут.

  1. <div itemscope itemtype=«http://schema.org/BlogPosting»>
  2. <link itemprop=«mainEntityOfPage» itemscope href=«Ссылка» />
  3. <div itemprop=«publisher» itemscope itemtype=«https://schema.org/Organization»>
  4. <div itemprop=«logo» itemscope itemtype=«https://schema.org/ImageObject»>
  5. <img alt=«Логотип сайта» itemprop=«image url» src=«Ссылка на логотип сайта»/>
  6. <meta itemprop=«width» content=«размер в пикселях»>
  7. <meta itemprop=«height» content=«размер в пикселях»>
  8. </div>
  9. <meta itemprop=«telephone» content=«Телефон»>
  10. <meta itemprop=«address» content=«Адрес»>
  11. <meta itemprop=«name» content=«Название»>
  12. </div>
  13. <meta itemprop=«datePublished» content=«1111»>
  14. <meta itemprop=«dateModified» content=«Дата последнего редактирования статьи»>
  15. <span itemprop=«author» itemscope itemtype=«http://schema.org/Person»>
  16. <span itemprop=«name»>Автор статьи</span>
  17. </span>
  18. <div itemprop=«articleBody»>
  19. <h1 itemprop=«headline»>Заголовок Вашей статьи</h1>
  20. <span itemprop=«image» itemscope itemtype=«https://schema.org/ImageObject»>
  21. <img itemprop=«image url» alt=«Описание изображения» width=«размеры в пикселях» height=«размеры в пикселях» src=«Ссылка на изображение»/>
  22. <meta itemprop=«width» content=«размеры в пикселях»>
  23. <meta itemprop=«height» content=«размеры в пикселях»>
  24. </span>
  25. <p>Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.</p>
  26. </div>
  27. </div>

Микроразметка для «Картинок» (schema.org/ImageObject)
Существует отдельный поиск по изображениям, который дает дополнительную возможность увеличить трафик на сайт, если пользователь ищет товар по изображению. Атрибут itemprop=»image» позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения.

  1. <div itemscope itemtype=«http://schema.org/ImageObject»>
  2. <h2 itemprop=«name»>название картинки</h2>
  3. <img src=«https://www.seo.ru/images.jpg» itemprop=«contentUrl» />
  4. <p itemprop=«description»>описание картинки</p>
  5. </div>

Микроразметка для раздела «Товарные страницы» (shema.org Product)
Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса. Разметив эту разметку на странице сайта, можно привлечь больше потенциальных покупателей.

Вариант 1

  1. <div itemscope itemtype=«http://schema.org/Product»>
  2. <span itemprop=«name»>Кровать Мелисса с мягкой спинкой</span>
  3. <span itemprop=«brand»>Компания диваны</span>
  4. <img itemprop=«image» src=«https://www.iseo.ru/bitrix/templates/iseo/images/melissa.png» />
  5. <span itemprop=«description»>Кровать Мелисса с мягкой спинкой и гарантией производителя</span>
  6.  
  7. <div itemprop=«offers» itemscope itemtype=«http://schema.org/Offer»>
  8. <meta itemprop=«priceCurrency» content=«RUB» />
  9. <span itemprop=«price»>6793</span>
  10. </div>
  11. </div>

Вариант 2

  1. <div itemscope itemtype=«http://schema.org/Product»>
  2. <span itemprop=«name»>Плюшевый еж «Уф Уф»</span>
  3. <span itemprop=«brand»>Фабрика плюшевых ежей «С иголочки»</span>
  4. <span itemprop=«model»>Номер модели 964893NM</span>
  5. <img itemprop=«image» src=«Ссылка на изображение ежа» />
  6. <span itemprop=«description»>Текстовое описание товара.</span>
  7.  
  8. <div itemprop=«offers» itemscope itemtype=«http://schema.org/Offer»>
  9. <meta itemprop=«priceCurrency» content=«RUB» />
  10. <span itemprop=«price»>Стоимость товара</span>
  11. <span itemprop=«seller»>Продавец товара</span>
  12. </div>
  13.  
  14. </div>

Микроразметка для раздела «Отзывы» (schema.org/Review)
Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства Review. В результате в выдаче Google в сниппете появится рейтинг и отзывы: В коде сайта необходимо указать следующие атрибуты.

  1. <div itemscope itemtype=«http://schema.org/Review»>
  2. <h2 itemprop=«name»><a href=«http://example.com/review?10231» itemprop=«url»>Русская кухня в изгнании</a></h2>
  3. <div>Отзыв написал <span itemprop=«author» itemscope itemtype=«http://schema.org/Person»>
  4. <span itemprop=«name»>
  5. <a itemprop=«url» href=«http://example.com/users/vasya»>Вася Пупкин</a>
  6. </span>
  7. </span>
  8. <meta itemprop=«datePublished» content=«2012-07-15» />
  9. 15 июля 2012.
  10. </div>
  11. <div itemprop=«reviewRating» itemscope itemtype=«http://schema.org/Rating»>
  12. <meta itemprop=«worstRating» content=«0»/>
  13. <p>Оценка: <span itemprop=«ratingValue»>9</span> из <span itemprop=«bestRating»>10</span>.</p>
  14. </div>
  15. <div itemprop=«pro»>Бесплатная стоянка, прекрасная детская комната и предупредительные официанты.</div>
  16. <div itemprop=«contra»>Большой и шумный некурящий зал.</div>
  17. <div itemprop=«reviewBody»>
  18. <p>Заказ был готов сравнительно быстро, а напитки приготовили практически сразу.
  19. Обслуживание на уровне, хотя грязная посуда иногда застаивалась.</p>
  20. <p>Рекомендую русскую кухню, особенно супы.</p>
  21. </div>
  22. <div>Автор посетил заведение <meta itemprop=«dateVisited» content=«2012-07-10»>10 июля 2012.</div>
  23. <div>Оценки характеристик ресторана:
  24. <ul>
  25. <li itemprop=«tag» itemscope itemtype=«http://schema.org/Rating»>
  26. <link itemprop=«ratingTarget» href=«https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Cuisine.xml»>
  27. Кухня: <span itemprop=«ratingValue»>5</span> из <span itemprop=«bestRating»>5</span>;
  28. </li>
  29. <li itemprop=«tag» itemscope itemtype=«http://schema.org/Rating»>
  30. <link itemprop=«ratingTarget» href=«https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Hall.xml»>
  31. Зал: <span itemprop=«ratingValue»>3</span> из <span itemprop=«bestRating»>5</span>;
  32. </li>
  33. </ul>
  34. </div>
  35. <div itemprop=«itemReviewed» itemscope itemtype=«http://schema.org/Hotel»>
  36. <h3>Информация о ресторане</h3>
  37. <p>Название: <span itemprop=«name»>Заграница</span></p>
  38. <p itemprop=«address» itemscope itemtype=«http://schema.org/PostalAddress»>Адрес:
  39. <span itemprop=«addressLocality»>Москва</span>, <span itemprop=«streetAddress»>Тверская, 7</span>.
  40. </p>
  41. <p>Телефон: <span itemprop=«telephone»>123-45-12</span>.</p>
  42. <p>Сайт ресторана: <a itemprop=«url» href=«http://zagranica.ru»>http://zagranica.ru</a></p>
  43. <p>Электронный адрес администрации:
  44. <a itemprop=«email» href=«mailto:hostess@zagranica.ru»>hostess@zagranica.ru</a>
  45. </p>
  46. </div>
  47. </div>

Микроразметка для раздела «О себе» (schema.org/Person)
Person — тип для описания человека — реально существующего, жившего давно или вообще вымышленного. С его помощью можно описать имя, фамилию, возраст, дату рождения и смерти, пол, контактные данные, информацию о работе и кучу другой информации, которую робот поймёт.

Вариант 1

  1. <div itemscope itemtype=«http://schema.org/Person»>
  2. <span itemprop=«name»>Jane Doe</span>
  3. <img src=«janedoe.jpg» itemprop=«image» />
  4. <span itemprop=«jobTitle»>Professor</span>
  5.  
  6. <div itemprop=«address» itemscope itemtype=«http://schema.org/PostalAddress»>
  7. <span itemprop=«streetAddress»>
  8. 20341 Whitworth Institute
  9. 405 N. Whitworth
  10. </span>
  11. <span itemprop=«addressLocality»>Seattle</span>,
  12. <span itemprop=«addressRegion»>WA</span>
  13. <span itemprop=«postalCode»>98052</span>
  14. </div>
  15.  
  16. <span itemprop=«telephone»>(425) 123-4567</span>
  17. <a href=«mailto:jane-doe@xyz.edu» itemprop=«email»>
  18. jane-doe@xyz.edu</a>
  19. Jane’s home page:
  20. <a href=«http://www.janedoe.com» itemprop=«url»>janedoe.com</a>
  21. Graduate students:
  22. <a href=«http://www.xyz.edu/students/alicejones.html» itemprop=«colleague»>
  23. Alice Jones</a>
  24. <a href=«http://www.xyz.edu/students/bobsmith.html» itemprop=«colleague»>
  25. Bob Smith</a>
  26. </div>

Вариант 2

  1. <div itemscope itemtype=«http://schema.org/Person»>
  2. <p itemprop=«name»>Алексей</p> <!— Имя —>
  3. <p itemprop=«additionalName»> Владимирович</p> <!— Отчество —>
  4. <p itemprop=«familyName»> Петров</p> <!— Фамилия —>
  5. <p itemprop=«jobTitle»>веб-мастер</p> <!— Должность —>
  6. <div>
  7. <a href=«http://site.ru/about/» itemprop=«sameAs»>site.ru/about/</a>, <!— Адрес оффициальной веб-страницы (вроде wikipedia), множественное —>
  8. <a href=«http://site2.ru/users/who/» itemprop=«sameAs»>site2.ru/users/who/</a> <!— Адрес оффициальной веб-страницы (вроде wikipedia), множественное —>
  9. </div>
  10. <div>
  11. <a href=«http://ok.ru/who» itemprop=«url»>ok.ru/who</a>, <!— Адрес веб-страницы, множественное —>
  12. <a href=«http://twitter.com/who» itemprop=«url»>twitter.com/who</a>, <!— Адрес веб-страницы, множественное —>
  13. <a href=«http://vk.ru/who» itemprop=«url»>vk.ru/who</a> <!— Адрес веб-страницы, множественное —>
  14. </div>
  15. <div>
  16. <span itemprop=«telephone»>8(495)123-45-67</span>, <!— телефон, множественное —>
  17. <span itemprop=«telephone»>+7(926)12-34-567</span> <!— телефон, множественное —>
  18. </div>
  19. <div>
  20. <span itemprop=«email»>email1@site.ru</span>, <!— e-mail, множественное —>
  21. <span itemprop=«email»>email2@site.ru</span> <!— e-mail, множественное —>
  22. </div>
  23. </div>

Микроразметка шапки сайта (schema.org/WPHeader)
Данная разметка описывает информацию о сайте.

  1. <header itemscope itemtype=«http://schema.org/WPHeader»>
  2. <meta itemprop=«headline» content=«Название сайта»>
  3. <meta itemprop=«description» content=«Описание сайта»>
  4. <meta itemprop=«keywords» content=«асфальт, москва, недорого, доставка»>
  5. </header>

Микроразметка для меню сайта (schema.org/SiteNavigationElement)
Меню сайта тоже требует микроразметки. Хотя бы для того, чтобы поисковый робот понимал, из каких разделов состоит сайт. Это действительно нужный элемент, которым пренебрегать не стоит.

  1. <nav itemscope itemtype=«http://schema.org/SiteNavigationElement»>
  2. <a itemprop=«url» href=«mysite.com/news/»>Новости</a>
  3. <a itemprop=«url» href=«mysite.com/articles/»>Статьи</a>
  4. <a itemprop=«url» href=«mysite.com/contact/»>Контакты</a>
  5. </nav>

Микроразметка боковой колонки сайта (schema.org/WPSideBar)
Что у нас обычно бывает в сайдбаре (боковой колонки сайта) ? Популярные статьи, последние комментарии, виджеты социальных сетей, реклама и какой-нибудь опрос — вот первое, что приходит в голову. Собственно, мы можем разметить все эти типы элементов, но проще всего — обозначить их в виде логических блоков.

  1. <aside itemscope itemtype=«http://schema.org/WPSideBar»>
  2. <section>
  3. <h3 itemprop=«name»>Группа ВКонтакте</h3>
  4. <!— код виджета —>
  5. </section>
  6. <section>
  7. <h3 itemprop=«name»>Страница Facebook</h3>
  8. <!— код виджета —>
  9. </section>
  10. <section>
  11. <h3 itemprop=«name»>Мой опрос</h3>
  12. <!— код опроса —>
  13. </section>
  14. </aside>

Микроразметка для подвала сайта (schema.org/WPFooter (подвал, footer)
Футер/footer — тот самый элемент внизу сайта, где обычно ещё раз пишут название сайта, копирайты, контакты и прочую информацию.
Если же у Вас колонтитул имеет множество элементов, характерных для организации — адреса, логотипы, контакты и т.п. — можно применить разметку с помощью типа Organization.

  1. <footer itemscope=«http://schema.org/WPFooter»>
  2. <div>MySite.com<span itemprop=«copyrightYear»>2017</span>. Все права защищены</div>
  3. </footer>