Микро-разметка расширяющая сниппет — библиотека NewsArticle

Микроразметка расширяющая сниппет — библиотека NewsArticle

Добрый день уважаемые веб-мастера, сегодня на «Прогресс-проект» мы с вами снова будим говорить о микро-разметки сайта или блога а вернее о расширении сниппета или предоставлении поисковым системам более развёрнутой информации о компании в данном случае сайте или блоге с помощью библиотеки: NewsArticle.

В прошлых статьях мы с вами уже разобрали основу семантической разметки для блога а так же разметили все имеющиеся на нём видео ролики и вот сегодня я решил поговорить с вами ещё о библиотеки NewsArticle, так как именно она более всего и подходит для информационных ресурсов какими в основном и являются наши с вами блоги.

Сегодня мы к уже прописанной в прошлый раз микро разметке, как и в варианте с разметкой видео внедрим на сайт отдельный блок указывающей на библиотеку: NewsArticle. В котором будет размещена такая дополнительная информация о нашем ресурсе, как; ссылка на статью, её автор, логотип блога и его реальные размеры, адрес и название ресурса, город и телефон организации.

Как видите с помощью библиотеки: NewsArticle мы с вами можем максимально расширить информацию о блоге которая по словам Google в дальнейшем может попасть в сниппет.

Расширяем сниппет с помощью библиотеки NewsArticle

Итак, для начала открываем какой либо текстовый редактор типа: Notepad++ где и будим далее создавать наш блок микро-разметки: NewsArticle.

И здесь прежде всего первым делом открываем блок с помощью div с указанием на библиотеку schema.org/NewsArticle:

<div itemscope itemtype="https://schema.org/NewsArticle">

Далее прописываем строчку с функцией на библиотеку schema.org/WebPage:

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>

Далее у нас будит идти информация о логотипе компании или блога, schema.org/Person, вставляем:

<span itemprop="author" itemscope itemtype="https://schema.org/Person">
 <meta itemprop="name" content="Название компании или блога">
</span>

Вписываем название организации или сайта и идём дальше, schema.org/ImageObject:

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
 <img style="display:none;" src="<https://ссылка на логотип>" alt="альтернативное название">

Здесь открываем новый div далее в котором нам нужно будет указать логотип блога или вашей фирмы, так же, чтобы данная картинка не отображалась на ресурсе мы скроем её с помощью: display:none; и зададим альтернативное название в alt.

Данными действиями мы с вами указали в нашей новой расширенной микро-разметке поисковым системам на наличие логотипа, далее нужно ещё предоставить им и полный url данного изображения, в принципе та же самая ссылка, но уже в мета-теге вот такого вида:

<meta itemprop="url" content="<https://ссылка на логотип>">

Дальше указываем его ширину и высоту:

<meta itemprop="width" content="111">
 <meta itemprop="height" content="111">

Закрываем div:

</div>

Теперь давайте расскажем о самом сайте, сразу после только что закрывшегося div ниже вставляем новый открывающийся div с указанием на новую библиотеку:

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">

Теперь прописываем мета-тег с url главной страницы:

<meta itemprop="url" content="<https://адрес сайта/>">

Снова открываем div на объект изображения:

<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">

Как и в прошлый раз указываем логотип и полный его url, вписываем в alt альтернативное название, ширину и высоту и закрываем блок:

<img itemprop="image" src="<https://ссылка на логотип>" alt="альтернативное название" style="display:none;"/>
 <meta itemprop="url" content="<https://ссылка на логотип>">
<meta itemprop="width" content="111">
<meta itemprop="height" content="111">
</div>

Теперь укажем; название организации или ресурса, номер телефона и город и закроем блок schema.org/Organization очередным div:

<meta itemprop="name" content="название фирмы или сайта">
<meta itemprop="telephone" content="+0 012 345–67–89">
<meta itemprop="address" content="город">
</div>

Вот собственно наш новый блок расширенной микро-разметки NewsArticle и готов, вот готовый его вариант:

<div itemscope itemtype="https://schema.org/NewsArticle">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>
 <span itemprop="author" itemscope itemtype="https://schema.org/Person">
 <meta itemprop="name" content="Название компании или блога">
 </span>
 <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
 <img style="display:none;" src="<https://ссылка на логотип>" alt="альтернативное название">
 <meta itemprop="url" content="<https://ссылка на логотип>">
 <meta itemprop="width" content="111">
 <meta itemprop="height" content="111">
 </div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="url" content="<https://адрес сайта/>">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image" src="<https://ссылка на логотип>" alt="альтернативное название" style="display:none;"/>
 <meta itemprop="url" content="<https://ссылка на логотип>">
<meta itemprop="width" content="111">
<meta itemprop="height" content="111">
</div>
<meta itemprop="name" content="название фирмы или сайта">
<meta itemprop="telephone" content="+0 012 345–67–89">
<meta itemprop="address" content="город">
</div>

Единственное после его вставки не забудьте закрыть его распространения непосредственно после функций выводящих контент той или иной страницы закрывающимся тегом </div>.

Вставляем блок микро-разметки NewsArticle на странницы сайта

Внедрить наш новый блок думаю не составит труда не у кого, открываем для редактирования файлы темы: index.php и single.php, ищем прописанную в прошлый раз строку:

itemscope itemtype="https://schema.org/Article"

Вырезаем её и ниже вставляем наш блок, далее, как я уже говорил после функций выводящих контент вставляем закрывающийся.

На сегодня у меня всё, подробней о NewsArticle, можно найти по ссылкеподписывайтесь на обновления впереди ещё очень много интересного, желаю всего доброго и до новых встреч!

Вам также может понравиться

Микроразметка видео на блоге

Микроразметка видео на блоге

Мета-тег robots. Более точная настройка индексации WordPress

Мета-тег robots. Более точная настройка индексации WordPress

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

Микро-разметка для Google и Яндекс с учётом всех нововведений Schema.org

Как удалить ссылки в комментариях

Как удалить ссылки в комментариях