Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Микро-разметка расширяющая сниппет — библиотека 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"

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

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

Переходим в валидатор Google, указываем ссылку на статью:

И если всё правильно сделано видим результат:

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

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-21

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Комментарии к статье

2 комментарияна “Микро-разметка расширяющая сниппет — библиотека NewsArticle”
  1. seoonly.ru:

    Спасибо за код, попробую применить

    Ответить
    • Administrator:

      Здравствуйте seoonly.ru, конечно стоит попробовать раз сам Google этого хочет!

      Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог