Itemprop url: Как сделать микроразметку Schema.org — настройка и проверка микроразметки сайта с помощью валидатора Google и Yandex

В свойстве content тега meta не может содержаться ссылка — Sajgak — заметки веб-программиста

У яндекса есть прекрасный инструмент: «Валидатор микроразметки». В нём можно проверить различные форматы микроразметки,  в том числе и schema.org

Если в результате проверки будет показана ошибка «В свойстве content тега meta не может содержаться ссылка» —  то нужно, как советует Яндекс, использовать тег link вместо meta

Подобная ошибка показывается, например, при проверке такого html-кода

<div itemscope itemtype=»http://schema.org/Person»> <h2 itemprop=»name»>Иванов Иван Иванович</h2> <p>День рождения: 9 декабря 1943 года</p> <meta itemprop=»birthDate» content=»1943-12-09 00:00″> <p><a href=»http://sajgak.ru»>Сайт</a></p> <meta itemprop=»url» content=»http://sajgak.ru/»> </div>

<div itemscope itemtype=»http://schema. org/Person»>    <h2 itemprop=»name»>Иванов Иван Иванович</h2>    <p>День рождения: 9 декабря 1943 года</p>    <meta itemprop=»birthDate» content=»1943-12-09 00:00″>    <p><a href=»http://sajgak.ru»>Сайт</a></p>    <meta itemprop=»url» content=»http://sajgak.ru/»> </div>

Ошибка исчезнет, если заменить последний тег meta на

<link itemprop=»url» href=»http://sajgak.ru/»>

<link itemprop=»url» href=»http://sajgak.ru/»>

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

Впрочем, мы могли здесь обойтись и без подобных тегов:

<div itemscope itemtype=»http://schema. org/Person»> <h2 itemprop=»name»>Иванов Иван Иванович</h2> <time itemprop=»birthDate» datetime=»1943-12-09 00:00″>9 декабря 1943 года</time> <p><a itemprop=»url» href=»http://sajgak.ru/»>sajgak.ru</a></p> </div>

<div itemscope itemtype=»http://schema.org/Person»>     <h2 itemprop=»name»>Иванов Иван Иванович</h2>     <time itemprop=»birthDate» datetime=»1943-12-09 00:00″>9 декабря 1943 года</time>     <p><a itemprop=»url» href=»http://sajgak.ru/»>sajgak.ru</a></p> </div>

 

---

Документацию на русском языке о семантической разметке schema.org можно найти на сайте ruschema.org

 

 

Микроразметка (семантическая разметка) Schema.org и её роль в продвижении сайта — Site on!

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

27.02.2014

Об этом все думают, но мало кто говорит, а ещё меньше делают…

Что такое микроразметка?

Это в буквальном смысле «выдуманный» синтаксис HTML атрибутов, созданный с целью чёткого обозначения роли конкретного участка сайта, а также передачи информации для парсеров (поисковых систем, социальных сетей, любых других ботов).

Существует несколько никак не связанных между собой видов микроразметки, привожу их в порядке убывания популярности:

• Open Graph;
• Schema.org;
• Микроформаты;
• FOAF;
• Data Vocabulary;
• Dublin Core;
• Good Relations.

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

Open Graph – микроразметка, созданная разработчиками FaceBook для красивого отображения других сайтов в этой социальной сети. Чаще всего она используется для расширенного описания ссылок. С помощью неё мы можем указать какое именно изображение считать «обложкой» страницы, какое название страницы выводить при её постинге в социальную сеть, какое описание и тд.

Микроразметку Open Graph понимают все популярные социальные сети (FaceBook, Google+, Pinterest, Вконтакте, Twitter, LinkedIn и другие), а также поисковые системы.

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

– это теряющая популярность микроразметка. Её распознают большинство поисковых систем. Наиболее популярным применением микроформатов является hCard (формат разметки контактной информации).

И наконец, пришло время представить моего любимчика — schema.org. Почему я отдаю свои симпатии именно этой микроразметке? Всё просто – она создана поисковыми системами для поисковых систем, и мы обязаны этим воспользоваться 😉

Schema.org

Официальный сайт микроразметки: http://schema.org Появилась в 2011 году. Основная суть использования – расширенные сниппеты в результатах поиска, а также надежда на повышение релевантности.

Правильно составленная микроразметка страницы даёт некоторые гарантии о более полном и правильном описании этой страницы в поисковой выдаче. Чтобы лучше понять о чём речь, сравните, как выделяется в результатах поиска сайт с рейтингом (благодаря микроразметке) и без рейтинга:

А вот участок микроразметки этого рейтинга:

<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="10">
<meta itemprop="ratingValue" content="8.8">
<a href="/film/447301/votes/">
<span>8.789</span>
<span itemprop="ratingCount">285 091</span>
</div>

Принципы и синтаксис микроразметки schema.org достаточно хорошо описаны в разделе Яндекса «помощь»: читать.

Что можно размечать?

Практически всё (существует более 100 схем), но не вся разметка будет использована поисковыми системами. Что точно стоит размечать:

• Отзывы / рейтинги
• Люди (персоны)
• Товары
• Компании и организации
• Рецепты
• Мероприятия
• Видео

Однако это не значит, что всё остальное остаётся в тени.

Даже если что-то пока не учитывается в сниппетах, оно может начать учитываться в любой момент в будущем. Тем более поисковые системы заинтересованы использовать микроразметку schema.org в своих новых сервисах, не говоря уже о том, что это давно практикуется в старых (Яндекс.Словари и тд.).

Так что как ни крути, перспективы большие для любых тематик.

Посмотреть все возможные типы для разметки можно на официальном сайте: http://schema.org/docs/full.html

К примеру, на этом блоге я размечаю все статьи как http://schema.org/TechArticle (технические статьи). Также я мог их разметить как обычные статьи (Article), либо как статьи блога (посты — BlogPosting), либо как-нибудь ещё… Весь интерес в том, что нам приходится самим решать, к какой схеме отнести наши страницы.

Внутри одной схемы может быть сколько угодно других схем, но нужно следить за правильной иерархией. Например, внутри статьи (Article) может находиться отдельная схема про персону (Person), которая написала эту статью или является её частью.

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

Внедрение семантической разметки на Site on!

Для начала я решил, что вся страница – это «творческая работа» (CreativeWork), а именно «техническая статья»:

<html itemscope itemtype="http://schema.org/TechArticle">

Я пометил ключевые слова, описание:

<meta name="keywords" itemprop="keywords" content="ускорение virtuemart, jotcache, кеширование" />
<meta name="description" itemprop="description" content="Разгоняем VirtueMart 2 до экстремальной скорости!" />

название статьи, тело статьи, дату создания и изменения, количество комментариев, автора:

<h2 itemprop="name">Ускорение VirtueMart 2 благодаря гибкому кешированию с помощью плагина JotCache</h2>
<meta itemprop="dateModified" content="2014-02-27 10:43:15" />
<div>Автор статьи: <span itemprop="author">Сергей Рудь</span></div>
<div><meta itemprop="dateCreated" content="2014-02-25" />25. 02.2014</div>
<div itemprop="articleBody">Всем добрый день…</div>
<meta itemprop="interactionCount" content="UserComments:3"/>

Всё это вы можете проверить в живую с помощью инспектора, либо заглянув в исходный код (CTRL + U). В общем, советую взять этот блог за пример.

Но это ещё не всё – помимо общего числа комментариев, каждый комментарий я обозначил как отдельную схему (UserComments) внутри схемы статьи (TechArticle).

Семантическая разметка комментариев

Понимание как это сделать правильно — не далось мне легко, даже пришлось посидеть на stackoverflow.com (там, кстати, тоже не все с умом), но теперь я представляю вам гарантированно правильный вариант семантической разметки комментариев (в данном примере на странице три комментария):

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:11:51">27.02.2014 10:11:51</span>
<span itemprop="creator">Борис</span>:
<div itemprop="commentText">Здравствуйте, Сергей! Я использую модуль поиска по товарам от Virtuemart.  Как его исключить из кэширования(шаг 5 вашей инструкции)?</div>
</div>

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:18:47">27.02.2014 10:18:47</span>
<span itemprop="creator">Борис</span> отвечает:
<div itemprop="commentText">кажется понял - опять через <jot> теги?</div>
</div>

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:43:15">27.02.2014 10:43:15</span>
<span itemprop="creator">Сергей</span> отвечает:
<div itemprop="commentText">Здравствйте, Борис. Да, через теги. Только не уверен, что есть смысл запрещать модуль поиска к кешированию, там и так кешировать нечего. А вот com_search из шага 5 лучше исключить из кеша.</div>
</div>

Теперь все популярные поисковые системы (Яндекс, Google, Bing и Yahoo!) смогут с предельной точностью понять где статья и её характеристики, где комментарии (авторы комментариев, количество комментариев, текст и тд. ), а где второстепенная, менее значимая информация. Наличие большого числа комментариев и других interactionCount (лайков, твитов…) косвенно показывают поисковикам о значимости страницы и о том, что ваш сайт действительно живой и интересный.

Хочу себе! С чего начать?

Итак, все схемы и их иерархия находятся здесь: изучать. Выбираем наиболее подходящую для ваших страниц схему, сравниваем с конкурентами и начинаем внедрять.

От теории к практике. Для проверки правильности внедрения разметки используйте 2 отличных сервиса: Валидатор микроразметки от Яндекса и Инструмент проверки структурированных данных от Google. Используйте оба! Так как они заточены выявлять разные ошибки. Например, Гуглу не принципиален формат даты, в Яндксе же неправильный формат даты будет считаться ошибкой.

Кстати, проверьте в этих сервисах любую статью данного блога и вам сразу станет понятней. Особенно хорошо видно в Гугле на статьях с комментариями.

Заключение

Микроразметку на этот сайт я добавил недавно, никаких изменений в сниппетах пока нет. Думаю, для моих схем в ближайшее время не предвидится каких-либо особенных сниппетов. Однако стоит отметить, что если у вас интернет-магазин или портал музыки (фильмов) да ещё с рейтингами и отзывами – вы просто обязаны внедрить микроразметку, так как это ваш козырь в привлечении посетителей на сайт через поисковые системы.

Спасибо за ваше внимание. Возможно, напишу плагин для автоматической микроразметки магазинов на VirtueMart 2. Если где-то уже есть готовые решения, жду ссылки в комментариях, спасибо!

P.S. Стоит заметить, что дату создания статьи Гугл и Яндекс могут найти и добавить в свои сниппеты и без микроразметки, однако это не значит, что не стоит её размечать.

Пожалуйста, оцените эту статью

Средняя оценка: 4.16 из 5 (проголосовало: 395)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

Семантика HTML для веб контента

Представляю вам вольный перевод статьи «Semantic HTML for Web Content», автором которой является Jacob Gube.

Приложив немного усилий мы можем сделать нашу разметку более выразительной.

Но зачем тратить дополнительное время и ресурсы на обеспечение семантики HTML? Большинство пользователей не читают ваш HTML. И их заботит лишь то, что происходит на экране.

Семантический HTML предназначен только для машин. Они не так умны как вы и я, поэтому мы должны помочь им.

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

Вот что говорит Google об использовании семантического HTML (курсивом выделены мои записи):

Google (и другие поисковые системы) могут использовать эти данные для лучшей индексации контента, представления его более заметными в результатах поиска и использовать её в новом ключе, например, при голосовых ответах, картах и Google Now.

Из Продвижение контента с помощью структурной разметки данных

Социальные веб-сервисы такие как Facebook, Pinterest и Twitter любят семантическую разметку. Особенно тогда, когда их пользователи хотят поделиться контентом на них. Эти веб-сервисы берут части наших статей и отображают их на своей платформе. Если мы будем использовать семантический HTML, то они будут в состоянии сделать эту работу лучше.

Языковые инструменты (переводчики) исследуют нашу разметку для того, чтобы они могли перевести наши статьи на другой язык. Хорошая HTML разметка может привести к более точному переводу. Для примера, существуют различия между американским и британским английским. Люди могут с легкостью понять диалектические и идиоматические различия, но машины этого не могут.

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

Это только верхушка айсберга. Есть неисчислимое количество других машин, которые смотрят на наш HTML и пытаются его понять. Черт возьми, да интернет состоит из кучи машин. Они составляют большую часть веба. Мы должны приложить все возможности, чтобы кормить их более значимыми данными.

Окей, теперь, я надеюсь, вы на борту и хотите использовать семантический HTML. Может быть на своём блоге или при разработке CMS.

Посмотрите на шаблон ниже.

HTML шаблон

Вот семантический HTML шаблон для веб-контента. Это хорошая отправная точка/шаблон. Просто заполните пробелы. Это общий шаблон, который может работать со многими типами текстового содержимого: записи в блоге, новостные статьи, очерки и так далее.

Обновление: 8 апреля 2015 Этот шаблон был изменен из-за неправильного использования HTML элементов main и summary. Смотрите ниже этот комментарий.

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article" lang="" dir="">
  <head>
    <title itemprop="name"></title>
    <meta itemprop="description" name="description" content="">
    <meta itemprop="author" name="author" content="">
  </head>
  <body>
    <article>
      <header>
        <h2 itemprop="headline"></h2>
        <time itemprop="datePublished" datetime=""></time>
        <p><a itemprop="author" href=""></a></p>
      </header>
      <div itemprop="about"></div>
      <div itemprop="articleBody">
        <!-- Основной текст статьи должен быть здесь -->
      </div>
      <footer>
        <time itemprop="dateModified" datetime=""></time>
        <section itemscope itemtype="http://schema. org/WebPage">
          <!-- Секция заголовка-->
          <h3></h3>
          <p><a itemprop="relatedLink" href=""></a></p>
        </section>
      </footer>
    </article>
  </body>
</html>

HTML-разметка шаблона использует семантические элементы (т.е. article, header и footer).

Также здесь используется структурированная разметка данных Schema.org. В частности, схемы Статья и Веб-страница. Schema.org — это совместный проект компаний Google, Bing и Yahoo!. Целью проекта является предоставление способа для поисковых систем, лучше понимать содержимое страниц.

Пример

Вот заполненный пример:

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article" lang="ru" dir="ltr">
  <head>
    <title itemprop="name">Название страницы статьи</title>
    <meta itemprop="description" name="description" content="Краткое описание статьи. ">
    <meta itemprop="author" name="author" content="Имя автора">
  </head>
  <body>
    <article>
      <header>
        <h2 itemprop="headline">Заголовок статьи</h2>
        <time itemprop="datePublished" datetime="1990-11-12">12 ноября 1990 года</time>
        <p>Написано <a itemprop="author" href="#author-profile.html">Имя автора</a></p>
      </header>
      <div itemprop="about">Резюме статьи. Это может быть руководство, выдержка, абстрактный или вводный абзац.</div>
      <div itemprop="articleBody">
        <p>Основная часть статьи идет здесь.</p>
      </div>
      <footer>
        <p>Эта статья была обновлена
          <time itemprop="dateModified" datetime="2015-03-01">30 марта 2015</time></p>
        <section itemscope itemtype="http://schema.org/WebPage">
          <h3>Похожие статьи</h3>
          <p><a itemprop="relatedLink" href="#related-article. html">Связанные статьи</a></p>
          <p><a itemprop="relatedLink" href="#related-article-02.html">Другие статьи по теме</a></p>
        </section>
      </footer>
    </article>
  </body>
</html>

Смотреть пример

Детали

Давайте поговорим о различных частях HTML-шаблона.

Уточнение типа контента, языка и направления текста

HTML элемент имеет четыре атрибута:

• itemscope указывает, что схема Статья используется на протяжении всего документа.
• itemtype содержит адрес используемой схемы.
• lang даёт информацию о том, на каком языке написано содержимое страницы. W3C говорит, что мы должны пользоваться языковыми тегами, перечисленными в IANA Language Subtag Registry. Например, если страница написана на немецком языке, мы должны присвоить атрибуту land значение de.
• dir содержит информацию о направлении текста статьи. У вас есть два варианта. Либо «слева направо» (ltr), либо «справа налево» (rtl). Если вы хотите, чтобы браузер решил это за вас, то не используйте его.

Семантическая HTML структура

Для осмысленного структурирования, мы используем следующие HTML элементы согласно спецификациям W3C.

Элемент	Описание
article	Элемент article представляет собой обособленный фрагмент контента, который может существовать сам по себе.
header	Вводный контент лучше структурировать как дочерний элемент элемента header. В рамках статьи, вводный контент может быть заголовком, датой публикации и именем автора.
footer	«Подвал, обычно содержит сведения о разделе, ссылки на различные документы, авторские данные и прочее.» — 4.3.8 The footer element

BBC использует сопровождающее предложение ко всем своим статьям.

Структурированные данные

Шаблон использует микроданные, чтобы усилить семантическую HTML структуру.

Если вы обеспокоены использованием новых HTML5 элементов, то вы можете заменить их полностью поддерживаемыми элементами, такими как div или span. при этом вы можете обеспечить их семантическую значимость с помощью микроданных.

Ниже приводится краткое описание микроданных, используемых в HTML-шаблоне.

Микроданные	Описание
name	Это свойство указывает на имя пункта. В нашем случае, пункт — это статья. Свойство name нашей статьи — это заголовок веб-страницы, который представлен в элементе title. Обычно, названия веб-страниц уникальны (из-за SEO), поэтому такое название хорошо подходит, в большинстве случаев, и для статей.
headline	Человекочитаемое название статьи. Некоторые сайты используют короткие, богатые на ключевые слова значения для title из-за SEO, а затем идёт полный заголовок, описывающий тему статьи.
description	Краткое объяснение содержания статьи. В большинстве случаев, присвоенное значение мета-тегу description хорошо работает.
author	Имя создателя контента. В HTML-шаблоне за это отвечает мета-тег author и видимая часть статьи.
datePublished	Это свойство позволяет нам четко указать дату размещения статьи в элементе time.
about	Это свойство применимо к тексту, описывающему тему статьи. Хорошо подходит для сопровождающего предложения или параграфа.
articleBody	Это свойство представляет собой основную часть статьи.
dateModified	Возможно, вы хотите дать людям знать, когда статья была последний раз пересмотрена и обновлена. Если вы хотите дать эту информацию и машинам, то следует использовать свойство dateModified. Это также даёт веб-сервисам намек на то, что они должны обновить свой индекс, потому что содержимое изменилось.
relatedLink	Это свойство используется для ссылок, имеющих отношение к статье. Свойство relatedLink является частью веб-страницы, поэтому мы вынуждены указать тип пункта в родительском элементе.

Использование более значимой разметки

Как я сказал ранее, HTML-шаблон — это всего лишь отправная точка. Рассмотрите возможность использования дополнительных микроданных (и других семантических HTML элементов), которые могут сделать ваш контент более значимым.

Schema.org имеет массу схем для различного типа контента. Вот некоторые примеры:

Полный лист доступных схем находится здесь.

Подсказки

После того, как вы осчастливите вашу семантическую HTML структуру, испытайте и проверьте её с помощью Google’s Stuctured Data Testing Tool.

Также, HTML-шаблон использует HTML5-элементы. Если вы поддерживаете устаревшие браузеры, то вам необходимо использовать шимы, такие как Modernizr или HTML5 Shiv. Или, вы можете заменить HTML5-элементы в шаблоне на общие элементы, такие как элемент div, сохраняя микроданные.

Связанный контент

Дополнительные ссылки от переводчика

itemprop — Веб-технологии для разработчиков

Глобальный атрибут itemprop используется для добавления свойств к элементу. Каждый элемент HTML может иметь атрибут itemprop , а itemprop состоит из пары имя-значение. Каждая пара «имя-значение» называется свойством , а группа из одного или нескольких свойств образует элемент . Значения свойств представляют собой строку или URL-адрес и могут быть связаны с очень широким диапазоном элементов, включая , ,