автор: Chuck Price
Схема разметки, размещенная на Schema.org, является формой микроданных. После добавления в веб-страницу схема разметки создает расширенное описание (известное как расширенный фрагмент), которое появляется в результатах поиска.
Крупнейшие поисковые системы, включая Google, Yahoo, Bing и Yandex, впервые начали сотрудничать для создания Schema.org в 2011 году.
Схема разметки особенно важна в эпоху Hummingbird и RankBrain. Способ интерпретации поисковой системой контекста запроса определяет качество поискового результата.
Схема может предоставить контекст веб-странице, которая в противном случае была бы неоднозначной. Через Schema.org:
"Большинство веб-мастеров знакомы с тегами HTML на своих страницах. Как правило, HTML-теги сообщают браузеру, как отображать информацию, включенную в тег. Например, <h1>Аватар</h1> сообщает браузеру отображать строку текста "Аватар" в формате заголовка 1. Однако HTML-тег не дает никакой информации о том, что означает эта строка текста – "Аватар" может относиться к очень успешному 3D-фильму или к типу изображения профиля – и это может затруднить для поисковых систем интеллектуально отображать релевантный контент пользователю. "
Улучшает ли схема ваши поисковые рейтинги?
Нет никаких доказательств того, что микроданные оказывают прямое влияние на органические поисковые рейтинги.
Тем не менее, расширенные фрагменты действительно позволяют вашим веб-страницам появляться более заметно в результатах поиска. Улучшенная видимость, как было показано, улучшает показатели кликов.
Согласно исследованиям менее одной трети результатов поиска Google включают расширенный фрагмент с разметкой Schema.org. Это открывает огромную возможность для остальных.
Очень мало вещей в SEO, сегодня, могут быстро сдвинуть стрелку. Схема может.
Для чего используется схема?
Бизнес и организации
- Мероприятия
- Люди
- Продукты
- Рецепты
- Отзывы
- Видео
Выше приведены некоторые из наиболее популярных применений схемы. Однако существует большая вероятность того, что если у вас есть какой-либо тип данных на вашем веб-сайте, он будет иметь связанный itemscope, itemtype и itemprop.
Добавление схемы на ваши веб-страницы
Использование микроданных
Микроданные — это набор тегов, которые упрощают аннотирование элементов HTML машиночитаемыми тегами. Микроданные — отличное место для начала для новичков, потому что они очень просты в использовании.
Однако один недостаток использования микроданных заключается в том, что вам нужно пометить каждый отдельный элемент в теле вашей веб-страницы. Как вы можете себе представить, это быстро становится беспорядочным.
Прежде чем приступить к добавлению схемы на свои веб-страницы, вам необходимо определить «тип элемента» содержимого вашей веб-страницы. Например, фокусируется ли ваш контент на еде, музыке, технологиях? Как только вы определились с типом элемента, вы можете определить, как его можно пометить.
Давайте рассмотрим пример. Допустим, вы владеете магазином, который продает высококачественные маршрутизаторы. Если вы посмотрите на исходный код своей домашней страницы, вы, вероятно, увидите что-то похожее на это:
<div><h1>TechHaven</h1><h2>The best routers you’ll find online!</h2><p>Address:</p><p>459 Humpback Road</p><p>Rialto, Ca</p><p>Tel: 909 574 3903</p><p><a href=”http://www.techhaven.com/menu”>Click here to view our best routers!</a></p><p>We’re open: </p><p>Mon-Sat 8am – 10:30pm</p><p>Sun: 2pm – 8pm</p></div>
Попав в код, вы захотите найти ту часть вашей веб-страницы, которая говорит о том, что может предложить ваш бизнес. В этом примере эта информация находится между двумя тегами <div>.
Теперь, вверху вы можете добавить:
<div itemscope>
Добавив этот тег, мы заявляем, что HTML-код, содержащийся между блоками <div>, идентифицирует конкретный элемент.
Далее нам нужно идентифицировать, что это за элемент, используя атрибут «itemtype» для идентификации типа элемента, о котором наша веб-страница (техника).
<div itemscope itemtype=”http://schema.org/tech”>
Тип элемента приходит в виде URL-адреса (например, http://schema.org/tech). Допустим, например, что ваш сайт посвящен продуктам для красоты, а не технологиям. URL-адрес типа элемента может выглядеть так:
Чтобы упростить задачу, вы можете просмотреть список типов элементов здесь, а также просмотреть расширения, чтобы идентифицировать конкретную сущность, которую вы ищете.
Имейте в виду, что этот список не является исчерпывающим, поэтому существует вероятность того, что вы не найдете тип элемента для вашей конкретной ниши.
Возвращаясь к странице технологий, вы хотите пометить часть веб-страницы, которая содержит название бизнеса. Вы можете сделать это между тегами <h1>.
Теперь мы будем использовать тег «itemprop», который обозначает свойства элемента:
<h1 itemprop=”name”>Tech Haven</h1>
Вы можете применить эти теги к остальной части страницы. При использовании тегов для идентификации свойств элемента не обязательно помечать всю строку, только ту ее часть, на которую ссылается свойство.
Например, если у вас есть строка Address: 1234 w sunshine blvd, то вам нужно применить теги только вокруг самого адреса и ничего больше.
<h2 itemprop=”description”>The best routers you’ll find online!</h2><p>Address:</p><span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”><p itemprop=”streetAddress”>459 Humpback Road </p><p itemprop=”addressLocality”>Rialto, Ca</p></span><p>Tel: <span itemprop=”telephone”>909 574 3903</span></p><p><a itemprop=”menu” href=”http:// http://www.techhaven.com/menu “>Click here to view our tasty range of dishes!</a></p><p>We’re open:</p><p itemprop=”openingHours”>Mon-Sat 8am – 10:30pm</p><p itemprop=”openingHours”>Sun: 2pm – 8pm</p></div>
Этот код может показаться сложным, но schema.org предоставляет примеры использования различных типов элементов, так что вы можете увидеть, что должен делать код. Не волнуйтесь, вам не придется ломать голову, пытаясь понять это самостоятельно!
Если вы все еще немного нервничаете из-за кода, Google's Structured Data Markup Helper сделает его очень простым для маркировки ваших веб-страниц.
Чтобы использовать этот замечательный инструмент, просто выберите тип элемента, вставьте URL-адрес целевой страницы или контент, который вы хотите пометить, а затем выделите различные элементы, чтобы их можно было пометить.
Использование RDFa
RDFa — это аббревиатура для Resource Description Framework in Attributes. По сути, RDFa является расширением HTML5 и был разработан для облегчения разметки структурированных данных пользователями.
RDFa считается рекомендацией W3C, что означает, что это веб-стандарт, и его можно использовать для связывания словарей структурированных данных друг с другом. Это особенно полезно, если вы хотите добавить структурированные данные, которые выходят за рамки возможностей Schema.org.
Вы можете вздохнуть с облегчением. RDFa не сильно отличается от Microdata.
Подобно микроданным, теги RDFa интегрируются с существующим HTML-кодом в теле вашей веб-страницы. Для удобства знакомства мы снова рассмотрим веб-сайт технологий в качестве примера.
HTML для вашего технологического сайта, вероятно, выглядел бы так до его модификации:**
<div><h1>Tech Haven</h1><h2>The best routers online!</h2><p>Address:</p><p>459 Humpback Road </p><p>Rialto, Ca</p><p>Tel: 909 574 3903</p><p><a href=”http://www.techhaven.com/menu”>Click here to view our best routers!</a></p><p>We’re open:</p><p>Mon-Sat 8:00am – 10:30pm</p><p>Sun: 2pm – 8pm</p></div>
Для начала убедитесь, что используемый вами словарь — Schema.org, а веб-страница, о которой идет речь, ссылается на страницу технологий.
Для этого примера вы можете найти на Schema.org информацию о том, как пометить разные элементы, выполнив поиск по запросу «technology». Обычно примеры можно найти внизу страницы, они помогут вам использовать эти теги на практике.
Просто нажмите на вкладку RDFa, чтобы увидеть конкретные примеры RDFa.
Далее вам нужно использовать тег vocab, вместе с URL-адресом http://schema.org, чтобы определить словарь для разметки. Чтобы определить тип страницы, используйте тег typeof. В отличие от микроданных, в которых используется URL-адрес для идентификации типов, RDFa использует одно или несколько слов для классификации типов.
<div vocab=”http://schema.org/” typeof=”technology”>
Если вы хотите уточнить свойства, используйте атрибут typeof. Например, если вы хотите расширить свойство адреса, вы можете использовать «PostalAddress» следующим образом:
<div property="address" typeof="PostalAddress">
Сравнивая микроданные и RDFa бок о бок, атрибут typeof эквивалентен атрибуту itemtype в Microdata. Кроме того, атрибут property эквивалентен атрибуту itemprop.
Для получения дополнительной информации вы можете посетить Schema.org, чтобы проверить списки и просмотреть примеры. Вы можете найти, какие элементы определяются как свойства, а какие как типы.
Возвращаясь к нашему предыдущему примеру, страница технологий после соответствующей разметки будет выглядеть так:
<h2 property=”description”>The best routers on the internet!</h2><p>Address:</p><div property=”address” typeof=”PostalAddress”><p property=”streetAddress”>459 Humpback Road</p><p property=”addressLocality”>Rialto, Ca</p></div><p>Tel: <span property=”telephone”>909 574 3903</span></p><p><a property=”menu” href=”http://www.techhaven/menu”>Click here to view our best routers!</a></p><p>We’re open:</p><p property=”openingHours”>Mon-Sat 8am – 10:30pm</p><p property=”openingHours”>Sun: 2pm – 8pm</p></div>
Чтобы помочь вам, каждая страница на Schema.org предоставляет примеры правильного применения тегов. Конечно, вы также можете использовать инструмент тестирования структурированных данных Google.
Заключение
Надеемся, любые страхи, которые у вас могли возникнуть, когда вы услышали слово «Схема» или «Структурированные данные», были развеяны. Схема намного проще применить, чем кажется, и это лучшая практика, которую вы должны внедрить в свои веб-страницы. Работа может показаться утомительной. Но при наличии времени и усилий вы обязательно извлечете пользу из своего труда.