Studia R

разработка сайтов

100 60

Угодить в микроразметке Яндексу и Google одновременно очень сложно. Им, видите ли, мало тех данных, которые у вас есть. Они хотят видеть еще и данные, которые им нужны, даже если таковые отсутствуют.

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

Для разметки статей, я рекомендую использовать: Articles, для разметки новостей – NewsArticles

Обычный вид разметки, приблизительно такой:

<div itemscope itemtype="https://schema.org/NewsArticle">			
	<h2>
		<a href="ссылка_на_запись" itemprop="url" rel="bookmark" title="заголовок"><span itemprop="name">Заголовок статьи или новости</span></a>
	</h2>
				
	<div itemprop="datePublished" content="дата в формате(2019-12-01)">
		Тут любой формат даты
	</div>
			
	<div itemprop="articleBody">
		Текст статьи	
	</div>
	
	<span itemprop="articleSection">Категория статьи</span>	
</div>

И тут наши тестеры микраразметки, начинают ругаться, что им не хватает данных (заголовок, картинка, авторство и т.п.). Добавляем блок кода и вопросов уже становится меньше:

<div itemscope itemtype="https://schema.org/NewsArticle">
	<meta itemprop="author" content="Автор">
	<meta itemprop="headline" content="Заголовок">
	<meta itemprop="image" content="путь к картинке">
	<meta itemprop="dateModified" content="дата в формате(2019-12-01)">
			
	<h2>
		<a href="ссылка_на_запись" itemprop="url" rel="bookmark" title="заголовок"><span itemprop="name">Заголовок статьи или новости</span></a>
	</h2>
				
	<div itemprop="datePublished" content="дата в формате(2019-12-01)">
		Тут любой формат даты
	</div>
			
	<div itemprop="articleBody">
		Текст статьи	
	</div>
	
	<span itemprop="articleSection">Категория статьи</span>	
</div>

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

<div style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
		<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
			<meta itemprop="image" content="адрес_картинки">
			<a href="адрес_картинки" style="display: none;" itemprop="url"></a>
			<span itemprop="width">Ширина_картинки</span>
			<span itemprop="height">Высота картинки</span>
		</div>
		<meta itemprop="name" content="Название_организации">
		<meta itemprop="address" content="Адрес_организации">
		<meta itemprop="telephone" content="Телефон_организации">
	</div>

Все вместе, выглядит вот так:

<div itemscope itemtype="https://schema.org/NewsArticle">
	<meta itemprop="author" content="Автор">
	<meta itemprop="headline" content="Заголовок">
	<meta itemprop="image" content="путь к картинке">
	<meta itemprop="dateModified" content="дата в формате(2019-12-01)">
			
	<div style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
		<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
			<meta itemprop="image" content="адрес_картинки">
			<a href="адрес_картинки" style="display: none;" itemprop="url"></a>
			<span itemprop="width">Ширина_картинки</span>
			<span itemprop="height">Высота картинки</span>
		</div>
		<meta itemprop="name" content="Название_организации">
		<meta itemprop="address" content="Адрес_организации">
		<meta itemprop="telephone" content="Телефон_организации">
	</div>			
			
	<h2>
		<a href="ссылка_на_запись" itemprop="url" rel="bookmark" title="заголовок"><span itemprop="name">Заголовок статьи или новости</span></a>
	</h2>
				
	<div itemprop="datePublished" content="дата в формате(2019-12-01)">
		Тут любой формат даты
	</div>
			
	<div itemprop="articleBody">
		Текст статьи	
	</div>
	
	<span itemprop="articleSection">Категория статьи</span>	
</div>

Сложно, но структурировано и проходит валидацию тестами микроразметки и от Google и от Yandex.