Микроразметка необходима сайту, чтобы упростить поисковикам распознавание информации, размещенной на нем. Shema.org помогает роботам наиболее точно обработать, распределить и понять информацию на интернет-ресурсах, чтобы потом выдать эти данные пользователям в поисковой выдаче. Кроме того, поисковые роботы относятся более лояльно к сайтам с микроразметкой, что позволяет быстрее индексировать новые посты.
Схема разметки для раздела «Контакты» (schema.org LocalBusiness)
Микроразметка для бизнеса или филиалов организации, которые имеют физический адрес. Примерами могут служить как отдельный ресторан, так и каждое заведение сети, филиал банка, стоматологическая клиника и т.д. Данная разметка позволяет поисковым системам получать больше информации о вашем бизнесе и выводить её в сниппетах. Рассмотрим пример микроразметки для организации типа «Веб-студия» (такого типа нет, поэтому будем использовать довольно общий тип «Бизнес» 2 уровня)
- <div itemscope itemtype=«http://schema.org/LocalBusiness»>
- <p itemprop=«name»>Дизайн студия</p>
- <p itemprop=«description»>Веб студия занимается разработкой сайтов на 1С-Битрикс</p>
- <div itemprop=«address» itemscope=«» itemtype=«http://schema.org/PostalAddress»>
- <p>Адрес:
- <span itemprop=«postalCode»>119019</span>,
- <span itemprop=«addressCountry»>Россия</span>,
- <span itemprop=«addressRegion»>Московская область</span>,
- <span itemprop=«addressLocality»>Москва</span>,
- <span itemprop=«streetAddress»>Красная площадь, д. 1</span>
- </p>
- </div>
- <p>Телефоны:
- <span itemprop=«telephone»>8(495)123-45-67</span>,
- <span itemprop=«telephone»>8(499)123-45-67</span>
- </p>
- <p>Факс:
- <span itemprop=«faxNumber»>8(495)123-45-67</span>
- </p>
- <p>E-mail:
- <a itemprop=«email» href=«mailto:email@site.ru»>email@site.ru</a>
- </p>
- <p>Адрес сайта:
- <a href=«http://site.ru» itemprop=«url»>site.ru</a>
- </p>
- <img itemprop=«logo» src=«http://site.ru/Images/logo.png»>
- <div>Время работы:
- <time itemprop=«openingHours» datetime=«Mo-Fr 9:00−20:00»>С Понедельника по Пятницу 9-20</time>,
- <time itemprop=«openingHours» datetime=«St,Sn»>Суббота, Воскресенье круглосуточно</time>
- </div>
- <div itemprop=«geo» itemscope=«» itemtype=«http://schema.org/GeoCoordinates»>
- <meta itemprop=«latitude» content=«55.7537523»>
- <meta itemprop=«longitude» content=«37.6225168»>
- </div>
- <p>ИНН:
- <span itemprop=«taxID»>1234567890</span>
- </p>
- </div>
Схема для раздела «О компании» (schema.org Organization)
Эта схема универсальна, если вы не отнесли свою фирму ни к одному другому типу, смело пользуйтесь этой схемой. Тут приводится общая контактная информация, наименование, адреса, телефоны, электронная почта.
- <div itemscope=«» itemtype=«http://schema.org/Organization»>
- <p itemprop=«name»>Наименование организации</p>
- Контактная информация:
- <div itemprop=«address» itemscope=«» itemtype=«http://schema.org/PostalAddress»>
- <p>Почтовый адрес:
- <span itemprop=«streetAddress»>номер дома, улица</span>
- <span itemprop=«postalCode»>почтовый индекс</span>
- <span itemprop=«addressLocality»>город, страна</span>
- </p>
- </div>
- <p>Телефон:
- <span itemprop=«telephone»>контактный телефон</span>,
- Факс:<span itemprop=«faxNumber»>факс</span>,
- E-mail: <span itemprop=«email»>корпоративный e-mail</span>
- </p>
- </div>
Микроразметка для раздела «Статьи» (schema.org/Article)
Микроразметка статьи позволяет сделать сниппет более структурированным и человекочитаемым. Следует найти файл, который отвечает за обзор статей. Например, это может быть: single.php. Для начала находим тег, отвечающий за вывод контента, и вставляем нужный атрибут.
- <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=«Логотип сайта» itemprop=«image url» src=«Ссылка на логотип сайта»/>
- <meta itemprop=«width» content=«размер в пикселях»>
- <meta itemprop=«height» content=«размер в пикселях»>
- </div>
- <meta itemprop=«telephone» content=«Телефон»>
- <meta itemprop=«address» content=«Адрес»>
- <meta itemprop=«name» content=«Название»>
- </div>
- <meta itemprop=«datePublished» content=«1111»>
- <meta itemprop=«dateModified» content=«Дата последнего редактирования статьи»>
- <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=«размеры в пикселях» height=«размеры в пикселях» src=«Ссылка на изображение»/>
- <meta itemprop=«width» content=«размеры в пикселях»>
- <meta itemprop=«height» content=«размеры в пикселях»>
- </span>
- <p>Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.</p>
- </div>
- </div>
Микроразметка для «Картинок» (schema.org/ImageObject)
Существует отдельный поиск по изображениям, который дает дополнительную возможность увеличить трафик на сайт, если пользователь ищет товар по изображению. Атрибут itemprop=»image» позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения.
- <div itemscope itemtype=«http://schema.org/ImageObject»>
- <h2 itemprop=«name»>название картинки</h2>
- <img src=«https://www.seo.ru/images.jpg» itemprop=«contentUrl» />
- <p itemprop=«description»>описание картинки</p>
- </div>
Микроразметка для раздела «Товарные страницы» (shema.org Product)
Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса. Разметив эту разметку на странице сайта, можно привлечь больше потенциальных покупателей.
Вариант 1
- <div itemscope itemtype=«http://schema.org/Product»>
- <span itemprop=«name»>Кровать Мелисса с мягкой спинкой</span>
- <span itemprop=«brand»>Компания диваны</span>
- <img itemprop=«image» src=«https://www.iseo.ru/bitrix/templates/iseo/images/melissa.png» />
- <span itemprop=«description»>Кровать Мелисса с мягкой спинкой и гарантией производителя</span>
- <div itemprop=«offers» itemscope itemtype=«http://schema.org/Offer»>
- <meta itemprop=«priceCurrency» content=«RUB» />
- <span itemprop=«price»>6793</span>
- </div>
- </div>
Вариант 2
- <div itemscope itemtype=«http://schema.org/Product»>
- <span itemprop=«name»>Плюшевый еж «Уф Уф»</span>
- <span itemprop=«brand»>Фабрика плюшевых ежей «С иголочки»</span>
- <span itemprop=«model»>Номер модели 964893NM</span>
- <img itemprop=«image» src=«Ссылка на изображение ежа» />
- <span itemprop=«description»>Текстовое описание товара.</span>
- <div itemprop=«offers» itemscope itemtype=«http://schema.org/Offer»>
- <meta itemprop=«priceCurrency» content=«RUB» />
- <span itemprop=«price»>Стоимость товара</span>
- <span itemprop=«seller»>Продавец товара</span>
- </div>
- </div>
Микроразметка для раздела «Отзывы» (schema.org/Review)
Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства Review. В результате в выдаче Google в сниппете появится рейтинг и отзывы: В коде сайта необходимо указать следующие атрибуты.
- <div itemscope itemtype=«http://schema.org/Review»>
- <h2 itemprop=«name»><a href=«http://example.com/review?10231» itemprop=«url»>Русская кухня в изгнании</a></h2>
- <div>Отзыв написал <span itemprop=«author» itemscope itemtype=«http://schema.org/Person»>
- <span itemprop=«name»>
- <a itemprop=«url» href=«http://example.com/users/vasya»>Вася Пупкин</a>
- </span>
- </span>
- <meta itemprop=«datePublished» content=«2012-07-15» />
- 15 июля 2012.
- </div>
- <div itemprop=«reviewRating» itemscope itemtype=«http://schema.org/Rating»>
- <meta itemprop=«worstRating» content=«0»/>
- <p>Оценка: <span itemprop=«ratingValue»>9</span> из <span itemprop=«bestRating»>10</span>.</p>
- </div>
- <div itemprop=«pro»>Бесплатная стоянка, прекрасная детская комната и предупредительные официанты.</div>
- <div itemprop=«contra»>Большой и шумный некурящий зал.</div>
- <div itemprop=«reviewBody»>
- <p>Заказ был готов сравнительно быстро, а напитки приготовили практически сразу.
- Обслуживание на уровне, хотя грязная посуда иногда застаивалась.</p>
- <p>Рекомендую русскую кухню, особенно супы.</p>
- </div>
- <div>Автор посетил заведение <meta itemprop=«dateVisited» content=«2012-07-10»>10 июля 2012.</div>
- <div>Оценки характеристик ресторана:
- <ul>
- <li itemprop=«tag» itemscope itemtype=«http://schema.org/Rating»>
- <link itemprop=«ratingTarget» href=«https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Cuisine.xml»>
- Кухня: <span itemprop=«ratingValue»>5</span> из <span itemprop=«bestRating»>5</span>;
- </li>
- <li itemprop=«tag» itemscope itemtype=«http://schema.org/Rating»>
- <link itemprop=«ratingTarget» href=«https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Hall.xml»>
- Зал: <span itemprop=«ratingValue»>3</span> из <span itemprop=«bestRating»>5</span>;
- </li>
- </ul>
- </div>
- <div itemprop=«itemReviewed» itemscope itemtype=«http://schema.org/Hotel»>
- <h3>Информация о ресторане</h3>
- <p>Название: <span itemprop=«name»>Заграница</span></p>
- <p itemprop=«address» itemscope itemtype=«http://schema.org/PostalAddress»>Адрес:
- <span itemprop=«addressLocality»>Москва</span>, <span itemprop=«streetAddress»>Тверская, 7</span>.
- </p>
- <p>Телефон: <span itemprop=«telephone»>123-45-12</span>.</p>
- <p>Сайт ресторана: <a itemprop=«url» href=«http://zagranica.ru»>http://zagranica.ru</a></p>
- <p>Электронный адрес администрации:
- <a itemprop=«email» href=«mailto:hostess@zagranica.ru»>hostess@zagranica.ru</a>
- </p>
- </div>
- </div>
Микроразметка для раздела «О себе» (schema.org/Person)
Person — тип для описания человека — реально существующего, жившего давно или вообще вымышленного. С его помощью можно описать имя, фамилию, возраст, дату рождения и смерти, пол, контактные данные, информацию о работе и кучу другой информации, которую робот поймёт.
Вариант 1
- <div itemscope itemtype=«http://schema.org/Person»>
- <span itemprop=«name»>Jane Doe</span>
- <img src=«janedoe.jpg» itemprop=«image» />
- <span itemprop=«jobTitle»>Professor</span>
- <div itemprop=«address» itemscope itemtype=«http://schema.org/PostalAddress»>
- <span itemprop=«streetAddress»>
- 20341 Whitworth Institute
- 405 N. Whitworth
- </span>
- <span itemprop=«addressLocality»>Seattle</span>,
- <span itemprop=«addressRegion»>WA</span>
- <span itemprop=«postalCode»>98052</span>
- </div>
- <span itemprop=«telephone»>(425) 123-4567</span>
- <a href=«mailto:jane-doe@xyz.edu» itemprop=«email»>
- jane-doe@xyz.edu</a>
- Jane’s home page:
- <a href=«http://www.janedoe.com» itemprop=«url»>janedoe.com</a>
- Graduate students:
- <a href=«http://www.xyz.edu/students/alicejones.html» itemprop=«colleague»>
- Alice Jones</a>
- <a href=«http://www.xyz.edu/students/bobsmith.html» itemprop=«colleague»>
- Bob Smith</a>
- </div>
Вариант 2
- <div itemscope itemtype=«http://schema.org/Person»>
- <p itemprop=«name»>Алексей</p> <!— Имя —>
- <p itemprop=«additionalName»> Владимирович</p> <!— Отчество —>
- <p itemprop=«familyName»> Петров</p> <!— Фамилия —>
- <p itemprop=«jobTitle»>веб-мастер</p> <!— Должность —>
- <div>
- <a href=«http://site.ru/about/» itemprop=«sameAs»>site.ru/about/</a>, <!— Адрес оффициальной веб-страницы (вроде wikipedia), множественное —>
- <a href=«http://site2.ru/users/who/» itemprop=«sameAs»>site2.ru/users/who/</a> <!— Адрес оффициальной веб-страницы (вроде wikipedia), множественное —>
- </div>
- <div>
- <a href=«http://ok.ru/who» itemprop=«url»>ok.ru/who</a>, <!— Адрес веб-страницы, множественное —>
- <a href=«http://twitter.com/who» itemprop=«url»>twitter.com/who</a>, <!— Адрес веб-страницы, множественное —>
- <a href=«http://vk.ru/who» itemprop=«url»>vk.ru/who</a> <!— Адрес веб-страницы, множественное —>
- </div>
- <div>
- <span itemprop=«telephone»>8(495)123-45-67</span>, <!— телефон, множественное —>
- <span itemprop=«telephone»>+7(926)12-34-567</span> <!— телефон, множественное —>
- </div>
- <div>
- <span itemprop=«email»>email1@site.ru</span>, <!— e-mail, множественное —>
- <span itemprop=«email»>email2@site.ru</span> <!— e-mail, множественное —>
- </div>
- </div>
Микроразметка шапки сайта (schema.org/WPHeader)
Данная разметка описывает информацию о сайте.
- <header itemscope itemtype=«http://schema.org/WPHeader»>
- <meta itemprop=«headline» content=«Название сайта»>
- <meta itemprop=«description» content=«Описание сайта»>
- <meta itemprop=«keywords» content=«асфальт, москва, недорого, доставка»>
- </header>
Микроразметка для меню сайта (schema.org/SiteNavigationElement)
Меню сайта тоже требует микроразметки. Хотя бы для того, чтобы поисковый робот понимал, из каких разделов состоит сайт. Это действительно нужный элемент, которым пренебрегать не стоит.
- <nav itemscope itemtype=«http://schema.org/SiteNavigationElement»>
- <a itemprop=«url» href=«mysite.com/news/»>Новости</a>
- <a itemprop=«url» href=«mysite.com/articles/»>Статьи</a>
- <a itemprop=«url» href=«mysite.com/contact/»>Контакты</a>
- </nav>
Микроразметка боковой колонки сайта (schema.org/WPSideBar)
Что у нас обычно бывает в сайдбаре (боковой колонки сайта) ? Популярные статьи, последние комментарии, виджеты социальных сетей, реклама и какой-нибудь опрос — вот первое, что приходит в голову. Собственно, мы можем разметить все эти типы элементов, но проще всего — обозначить их в виде логических блоков.
- <aside itemscope itemtype=«http://schema.org/WPSideBar»>
- <section>
- <h3 itemprop=«name»>Группа ВКонтакте</h3>
- <!— код виджета —>
- </section>
- <section>
- <h3 itemprop=«name»>Страница Facebook</h3>
- <!— код виджета —>
- </section>
- <section>
- <h3 itemprop=«name»>Мой опрос</h3>
- <!— код опроса —>
- </section>
- </aside>
Микроразметка для подвала сайта (schema.org/WPFooter (подвал, footer)
Футер/footer — тот самый элемент внизу сайта, где обычно ещё раз пишут название сайта, копирайты, контакты и прочую информацию.
Если же у Вас колонтитул имеет множество элементов, характерных для организации — адреса, логотипы, контакты и т.п. — можно применить разметку с помощью типа Organization.
- <footer itemscope=«http://schema.org/WPFooter»>
- <div>MySite.com<span itemprop=«copyrightYear»>2017</span>. Все права защищены</div>
- </footer>