Itemprop headline – Разметка schema org — онлайн генератор микро-разметки видео, статей, изображений и организаций. | Дропшиппинг

Содержание

Микроразметка статьи, тег article, примеры

В этой статье рассмотрим микроразметку статей, что это такое, для чего нужна и как применять.

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

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

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

Популярные словари микроразметки:

schema.org – сделан по инициативе поисковых систем и рекомендуется ими к применению;
Open Graph – придуман Facebook для эффективного взаимодействия сайтов с этой соцсетью, и поддерживается прочими социальными сетями;
Микроформаты – основаны на использовании элементов языка HTML, что и позволило ему в свое время обрести большую популярность;

Data Vocabulary – разработан компанией Google, но прекративший свое развития из-за активной поддержки schema.org;
Dublin Core – специализированный словарь для библиотек;
Good Relations – специализированный словарь для интернет торговли;
FOAF – специальный социальный словарь для разных сообществ.

Наиболее распространенные синтаксисы:

микроданные – часто применяются со словарями schema.org и Data Vocabulary;
RDFa – применяется со словарями Open Graph и Data Vocabulary;
микроформаты – являются как синтаксисом, так одновременно и словарем.

Какой формат семантической разметки выбрать? Если нет уже наработанной базы и начинать разметку нужно с нуля, то лучше всего для статей использовать микроданные с schema.org и RDFa с Open Graph. Их мы и рассмотрим на конкретном примере.

Зачем нужна микроразметка?

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

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

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

Как сделать микроразметку статьи?

Рассмотрим примеры применения микроразметки schema.org и Open Graph. Тут есть некоторое различие. В первом случае вся разметка прописывается рядом с телом статьи. При передаче же информации в соцсети описывается как должна выглядеть ссылка на страницу статьи.

Разметка с schema.org

Рассмотрим, как с помощью schema.org можно сделать микроразметку статьи.

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

<section> <h2>Создание микроразметки статьи</h2> <time>22 января 2019</time> <img src=”imgrazmetka.jpg” alt=”Микроразметка статьи”> <article> <p>Начало статьи.</p> <p>Здесь середина текста.</p> <p>А вот уже и конец.</p> </article> <div>Автор: Михаил Степанов</div> </section>

<h2>Создание микроразметки статьи</h2>

<time>22 января 2019</time>

<p>Начало статьи.</p>

<p>Здесь середина текста.</p>

<p>А вот уже и конец.</p>

</article>

<div>Автор: Михаил Степанов</div>

</section>

А теперь этот пример с разметкой

<section itemscope itemtype=»http://schema.org/Article»> <h2 itemprop=»headline»> Создание микроразметки статьи</h2> <time itemprop=»datePublished» datetime=»2019-01-22T16:20:30+00:00″>22 января 2019</time> <div itemscope itemprop=»image» itemtype=»http://schema.org/ImageObject»> <img itemprop=»url contentUrl» src=”imgrazmetka.jpg” alt=” Микроразметка статьи”> <meta itemprop=»url» content=» imgrazmetka.jpg»> <meta itemprop=»width» content=»968″> <meta itemprop=»height» content=»504″> </div> <article itemprop=»articleBody»> <p>Начало статьи.</p> <p>Здесь середина текста.</p> <p>А вот уже и конец.</p> </article> <div>Автор: <span itemprop=»author»>Михаил Степанов</span></div> <div itemprop=»publisher» itemscope itemtype=»https://schema.org/Organization»> <div itemprop=»logo» itemscope itemtype=»https://schema.org/ImageObject»> <img itemprop=»url image» src=»logo.png» /> <meta itemprop=»width» content=»64″> <meta itemprop=»height» content=»64″> </div> <meta itemprop=»name» content=»Наш сайт»> <meta itemprop=»telephone» content=»+7 800 333 22 33″> <meta itemprop=»address» content=»г. Пенза, ул. Московская, д. 3″> </div> <meta itemprop=»dateModified» content=»2019-01-22T17:30:40+00:00″ /> <meta itemscope itemprop=»mainEntityOfPage» itemType=»https://schema.org/WebPage» itemid=»nashsite.com/microrazmetka» /> </section>

<h2 itemprop=»headline»> Создание микроразметки статьи</h2>

<time itemprop=»datePublished» datetime=»2019-01-22T16:20:30+00:00″>22 января 2019</time>

</div>

<p>Начало статьи.</p>

<p>Здесь середина текста.</p>

<p>А вот уже и конец.</p>

</article>

<div>Автор: <span itemprop=»author»>Михаил Степанов</span></div>

</div>

</div>

</section>

Прежде всего, мы даем роботу знать, что используем в статье разметку schema.org. Это делается размещением в начале тега, включающего статью, следующей записи:

itemscope itemtype=”http://schema.org/Article” id=”main”.

В примере использованы следующие обязательные параметры:

headline – наименование статьи;
datePublished – дата публикации в формате ISO 8601;
image – картинка;
articleBody – тело статьи;
author – имя автора;
publisher – наименование сайта, публикующего статью.

Есть еще необязательные параметры, которые все же желательно указывать:

dateModified – дата изменения статьи;

mainEntityOfPage – ссылка на страницу со статьей.

В теге publisher использованы следующие параметры:

logo — логотип;
name — наименование организации;
telephone – телефон;
address — адрес.

Если статью публикует не организация, а частное лицо, то все равно publisher нужно заполнить, так как параметр обязателен. Иначе Гугл будет ругаться при проверке. Замена Organization на Person не поможет. Можно сознательно не заполнять этот блок и игнорировать предупреждение.

Разметка с Open Graph

Микроразметку Open Graph нужно разместить внутри тегов <html> и <head>.

В блоке <html> указываем роботу на использование разметки Open Graph.

Все остальное размещается внутри <head>

Выглядит здесь все проще, чем с schema.org. Вот что значат использованные теги:

og:title – название статьи и текст ссылки;
og:description – описание статьи, которое показывается под заголовком;
og:type – тип объекта, для статьи применяется article;
og:locale – локализация, указывать не обязательно, но желательно;
og:image – ссылка на картинку статьи;
og:url – ссылка на статью.

Тег article использовать несложно:

og:article:published_time – дата публикации статьи;
og:article:modified_time – дата последнего изменения;
og:article:author – автор статьи.

Особенности применения микроразметки

Разметки статей schema.org и Open Graph не только можно, но и нужно совмещать. Первая предназначена для поисковиков, вторая для социальных сетей. Никакого конфликта разметок не будет. Поисковые системы понимают оба типа разметки.

После разметки статей, нужно проверить корректность внесенных данных.

Проверка Google

https://search.google.com/structured-data/testing-tool

Валидатор Яндекс

https://webmaster.yandex.ru/tools/microtest/

Проверка Bing

https://www.bing.com/toolbox/markup-validator

Open Graph можно еще проверить отладчиком Facebook

https://developers.facebook.com/tools/debug/

Если на сайте используется CMS, то разметку можно прописывать как вручную, так и с помощью плагинов. Особенно много инструментов есть для WordPress: All in One SEO Pack, WP SEO by Yoast, WP Facebook Open Graph protocol.

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

Микроразметка для статьи с помощью Schema.org

Размечаем статьи с помощью Schema.org (Article) + HTML5:

<div itemscope itemtype="http://schema.org/Article">
<!-- Указываем основную старницу -->
<link itemprop="mainEntityOfPage" href="https://soltyk.ru/" />
<header>
<!-- передаем заголовок -->
<h2 itemprop="headline name">Пример микроразметки статьи</h2>
</header>
<!-- в link можно передавать ссылки на картинки и т.п., которые не увидит пользователь -->
<link itemprop="image" href="https://soltyk.ru/assets/images/soltykam.jpg">
<!-- указываем дату публикации -->
<span itemprop="datePublished" content="2018-06-18">Дата размещения</span> 
<!-- в meta можно передавать скрытое текстовое значение, которое не будет отображаться пользователю -->
<!-- указываем дату обновления материала -->
<meta itemprop="dateModified" content="2018-09-15">
<!-- Для разметки author необходимо использовать словарь Person -->
<div itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<link itemprop="sameAs" href="https://soltyk.ru/" />
<img itemprop="image" src="https://soltyk.ru/assets/images/soltykam.jpg" alt="Солтык Алексей"/>
<a href="https://soltyk.ru/ob-avtore"><span itemprop="name">Солтык Алексей</span></a>
</div>
<!-- Для разметки publisher необходимо использовать словарь Organization -->
<div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<link itemprop="sameAs" href="https://soltyk.ru/" />
<!-- размечаем логотип -->
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> 
<link itemprop="url image" href="https://soltyk.ru/assets/images/soltykam.jpg"/>
</div> 
<meta itemprop="telephone" content="+7(981)970-8045">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Северный проспект, 8к1">
<meta itemprop="postalCode" content="194354">
<meta itemprop="addressLocality" content="Санкт-Петербург">
</div>
<meta itemprop="name" content="Солтык Алексей">
</div>
<!-- размечаем краткое описание статьи -->
<div itemprop="description"> 
<p>Текст краткого описания</p> 
<p>...</p>
</div>
<!-- указываем подзаголовок статьи -->
<h3 itemprop="alternativeHeadline">Подзаголовок статьи</h3>
<!-- размечаем тело статьи -->
<div itemprop="articleBody">
<article> 
<img itemprop="image" src="https://soltyk.ru/assets/images/soltykam.jpg" title="Какое-то изображение в статье" alt="Альтернативное название"> 
<p>Размечаем содержимое статьи!</p> 
<p>...</p>
</article>
</div>
</div>

Данный пример можете использовать в качестве шпаргалки.

Такую разметку поддерживают поисковые системы Яндекс и Google, а также была замечена поддержка у Mail-а и Bing-а.

Я рекомендую размечать любые информационные материалы с помощью данной микроразметки.

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

Валидатор от Google

Валидатор от Яндексе

Валидатор от Bing

Делайте разметку так, чтобы в ней не было ошибок — при проверке в валидаторах поисковых систем.

Обновлено: 22.12.2018 9598 (в день: 10.243)

Атрибут itemprop | HTML | WebReference

Атрибут itemprop используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента.

Синтаксис

itemprop="<свойство>"

Значения

Свойство определяется словарём данных. К примеру, на Schema.org, которую поддерживает Яндекс и Google, перечислены словари с их возможными свойствами.

Значение по умолчанию

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>itemprop</title>
 </head>
 <body>
  <div itemscope itemtype="http://schema.org/Movie">
   <div>
    <h2 itemprop="name">Облачный атлас </h2>
    <span itemprop="alternativeHeadline">Cloud Atlas</span>
    <img src="http://st.kinopoisk.ru/images/film/464484.jpg" alt="Облачный атлас (Cloud Atlas)" itemprop="image"/>
   </div>
   <span>
    <a itemprop="director" href="/name/23330/">Лана Вачовски</a>,
    <a itemprop="director" href="/name/26439/">Том Тыквер</a>,
    <a itemprop="director" href="/name/23329/">Энди Вачовски</a>
   </span>
   <span>
    <a itemprop="producer" href="/name/26437/">Штефан Арндт</a>,
    <a itemprop="producer" href="/name/31351/">Грант Хилл</a>,
    <a itemprop="producer" href="/name/26439/">Том Тыквер</a>,
    <a href="/film/464484/cast/#producer" >и другие</a>.
   </span>
   <span>
    <a itemprop="musicBy" href="/name/312865/">Райнхольд Хайль</a>,
    <a itemprop="musicBy" href="/name/608605/">Джонни Клаймек</a>,
    <a itemprop="musicBy" href="/name/26439/">Том Тыквер</a>.
   </span>
   <span>
    <a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/2/">фантастика</a>,
    <a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/8/">драма</a>,
    <a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/17/">детектив</a>,
   </span>  
   <span>В главных ролях:</span>
   <div> 
    <a itemprop="actor" href="/name/9144/">Том Хэнкс</a>
    <a itemprop="actor" href="/name/1179/">Холли Берри</a>
    <a itemprop="actor" href="/name/38704/">Джим Броудбент</a>
   </div>
   <span itemprop="description">Шесть историй — пять реинкарнаций, 
    происходящих в разное время,тесно переплетаются между собой…</span>
  </div>
 </body>
</html>

Спецификация ?

Спецификация	Статус
HTML Microdata	W3C Working Group Note

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.01.2017

Редакторы: Влад Мержевич

Микроразметка статьи, тег article, примеры

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

Зачем нужна микроразметка?

Как сделать микроразметку статьи?

Разметка с schema.org

Разметка с Open Graph

Особенности применения микроразметки

Микроразметка для статьи с помощью Schema.org

Размечаем статьи с помощью Schema.org (Article) + HTML5:

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

Атрибут itemprop | HTML | WebReference

Синтаксис

Значения

Значение по умолчанию

Пример

Спецификация ?

Спецификация

Автор и редакторы

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