Микроразметка статей, новостей, постов по schema.org

Пример и описание микроразметки статей, новостей, постов по schema.org.

Article используют для разметки основного содержимого — например статьи или новости, а так же для вывода списка статей или новостей.

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

Разметка статьи по schema.org

Для начала давайте посмотрим в какой объект нам оборачивать наш материал:

• https://schema.org/Article — Общая схема, подходящая всем текстовым материалам.
• https://schema.org/NewsArticle — Схема для разметки новостных статей.
• https://schema.org/BlogPosting — Схема для разметки статей в блоге.

Не будем привязываться к статьями или новостям. Наши данные это — некий материал, который может быть и статьей и новостью.

В разметке ниже, замените общий объект Article на NewsArticle или на BlogPosting, валидность сохранится. Это универсальная разметка.

Для начала разметка полной версии материала:

<div itemscope itemtype="https://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://example.ru/" />
    <link itemprop="image" href="image">
    <meta itemprop="headline name" content="Название Статьи">
    <meta itemprop="description"
          content="Обязательное краткое описание статьи для Яндекса длиной от 50 до 150 символов.">
    <meta itemprop="author" content="автор статьи">
    <meta itemprop="datePublished" datetime="2010-07-03" content="2010-07-03">
    <meta itemprop="dateModified" datetime="2018-09-15" content="2018-09-15">
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url image" src="images/logo.png" alt="Описание картинки" title="Описание картинки"/>
        </div>
        <meta itemprop="name" content="название сайта">
        <meta itemprop="telephone" content="">
        <meta itemprop="address" content="Россия">
    </div>
    <p>Интро</p>
    <span itemprop="articleBody">Контент</span>
</div>

Давайте разберем её:

• itemprop="mainEntityOfPage" — Основная страница объекта, можно указать каноническую ссылку. Данное свойство является необязательным, но Google рекомендует его заполнять.
• itemprop="image" — Ссылка на картинку материала, передаем её через атрибут link, так что пользователи её не увидят в контенте, а вот поисковые роботы схавают.
• itemprop="headline name" — Заголовок материала.
• itemprop="description" — Короткое описание материала, желательно не более 150 символов.
• itemprop="author" — Автор материала.
• itemprop="datePublished" — Дата публикации материала, указывайте в формате ГГГГ-ММ-ДД.
• itemprop="dateModified" — Дата обновления материала, указывайте в формате ГГГГ-ММ-ДД.
• itemprop="publisher" — Для этого свойства необходимо использовать объект schema.org/Organization.
  • itemprop="logo" — URL картинки, например, логотип сайта. Для этого свойства используем объект schema.org/ImageObject.
    • itemprop="url image" — URL логотипа.
    • itemprop="name" — Название сайта / организации.
    • itemprop="telephone" — Телефон можно оставить пустым, ну или если он у вас есть, заполнить.
    • itemprop="address" — Тут я указываю просто страну.
• itemprop="articleBody" — Тело материала.

Можете сами проверить данную микроразметку, она валидная и в Google и в Яндекс валидаторах.

Благодарность автору

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

• ЮMoney (Яндекс.Деньги)

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1184 s
Время запросов: 0,1184 s
Количество запросов: 28
Источник: cache

Авторская документация по web-разработке Web in Mind | © 2019 – 2023

Настройка микроразметки статей и новостей Schema.

org Article сайта

Article используется для разметки содержимого статьи или новости на сайте, реже — для вывода списка новостей. Это полезно с точки зрения SEO продвижения сайта.

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

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

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

Привязываться я буду к переменным 1С-Битрикс, так что если что-то будет непонятно, то милости прошу в комментарии.

<div itemscope itemtype="http://schema.org/Article">
    <h2 itemprop="headline name">
        <?=$arResult["DISPLAY_PROPERTIES"]["ATT_h2"]["VALUE"] !== "" ? $arResult["DISPLAY_PROPERTIES"]["ATT_h2"]["VALUE"] : $arResult["NAME"];?>
    </h2>
    <div itemprop="articleBody">
        <?=$arResult["DETAIL_TEXT"]?>
    </div>

    <link itemprop="mainEntityOfPage" href="<?='https://САЙТ/'.$_SERVER['REQUEST_URI']?>" />
    <link itemprop="image" href="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>">
    <meta itemprop="author" content="АВТОР_СТАТЬИ">
    <meta itemprop="datePublished" content="<?=$arResult["DISPLAY_ACTIVE_FROM"]?>">
    <meta itemprop="articleSection" content="НАЗВАНИЕ_РАЗДЕЛА">
    <meta itemprop="description" content="<?=$arResult["DISPLAY_PROPERTIES"]["ATT_SEO_DESCRIPTION"]["VALUE"]?>">
    <!-- Информация о сайте -->
    <div itemprop="publisher" itemscope itemtype="https://schema.
  org/Organization">
        <link itemprop="url" href="https://САЙТ">
        <meta itemprop="name" content="НАЗВАНИЕ_САЙТА">
        <meta itemprop="description" content="ОПИСАНИЕ_САЙТА">
        <meta itemprop="address" content="АДРЕС">
        <meta itemprop="telephone" content="ТЕЛЕФОН">
        <div itemprop="logo" itemscope itemtype="https://www.schema.org/ImageObject">
            <img itemprop="url image" src="https://САЙТ/ССЫЛКА НА ЛОГОТИП" alt="НАЗВАНИЕ_САЙТА" title="НАЗВАНИЕ_САЙТА"/>
        </div>
    </div>
</div>

Давайте разберем микроразметку статьи:

• itemprop="headline name" — заголовок статьи. В нем я беру основной заголовок из отдельного свойства Битрикса ATT_h2, а переменную TITLE беру только если h2 пустой. Связано эт с тем, что в списке статей заголовок должен быть короче, чем в детальной карточке статьи (чтобы уместился в блок. Связан это SEO больше.
• itemprop="articleBody" — тело статьи (да теги там можно применять, ошибок не будет).
• itemprop="mainEntityOfPage" — Указывается канонический URL сайта (или основной URL страницы). Статья про канонические страницы на битрикс и их настройку.
• itemprop="image" — Картинка статьи, делаем в link, чтобы не отображалась в самой статье, но поисковики проглотили (я брала из картинку превью новости).
• itemprop="author" — автор новости, я указываю название сайта.
• itemprop="datePublished" — дата публикации в формате ГГГГ-MM-ДД.
• itemprop="dateModified" — дата обновления новости в формате ГГГГ-MM-ДД.
• itemprop="articleSection" — указывается родительский раздел статьи.
• itemprop="description" — краткое описание статьи, я беру из SEO описания страницы, в данном случае description находится в свойстве ATT_SEO_DESCRIPTION Битрикса.
• itemprop="publisher" — информация о организации, опубликовавшей пост, для него мы используем объект «schema.org/Organization».
• itemprop="url" — полный адрес вашего сайта.
• itemprop="name" — Название вашей организации или сайта.
• itemprop="description" — Это описание САЙТА, не путать с описанием статьи, мы его уже описали выше.
• itemprop="address" — адрес организации (можно просто страну указать).
• itemprop="telephone" — телефон в формате +7, либо оставить пустым.
• itemprop="logo" — это уже к объекту «schema.org/ImageObject».
• itemprop="url image" — ссылка на ваш логотип.

После того, как вы все заполнили топаем на валидатор семантической разметки Яндекса, вбиваем в строку адрес нашей страницы и смотрим на ошибки.

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

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

Чем больше информации пользователи могут увидеть на страницах результатов поисковой системы (SERP), которая имеет отношение к их запросу или отвечает на их вопрос, тем больше вероятность того, что они нажмут на этот результат, перейдут на ваш веб-сайт и изучат ваш контент.
Существует множество различных типов расширенных результатов, по которым вы можете ранжироваться, включая рецепты, списки компаний, рейтинги продуктов, часто задаваемые вопросы и графики знаний — все они имеют свой собственный уникальный формат и способы использования.

Как поисковые системы собирают и отображают эту информацию?

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

Что такое схема статьи?

По данным Ahrefs, каждый месяц публикуется около 70 миллионов новых сообщений в блогах, а 77% интернет-пользователей читают блоги.
Это большой объем контента, с которым нужно бороться, и большое внимание пользователей, которое нужно привлечь, что дает вам больше оснований убедиться, что ваши сообщения в блоге и статьи отображаются как расширенные результаты в поисковой выдаче.
Как упоминалось выше, для того, чтобы это произошло, вам нужно добавить разметку Article к своим новостным статьям и сообщениям в блогах, но что это такое?

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

Какие типы схем статей можно добавить?

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

Преимущества схемы и структурированных данных

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

• Мы уже говорили о том, что схема и структурированные данные используются для того, чтобы поисковые системы могли лучше понять ваш контент.
• Затем это приводит к расширенным результатам, которые, естественно, имеют более высокий рейтинг кликов, чем обычные результаты поиска.
• Использование структурированных данных и схемы также является одним из факторов ранжирования Google, поэтому их размещение в сообщениях блога и новостных статьях может помочь повысить рейтинг ключевых слов и информационного контента вашего блога.
• Помогает поисковым системам просеивать миллиарды страниц и ранжировать те из них, которые содержат лучший контент и информацию, относящуюся к конкретным поисковым запросам.
• Дает вам возможность контролировать информацию, которую находят и отображают поисковые системы, когда вы указываете ее в коде, который идет на странице. По сути, вы можете выбирать, а не поисковые системы выбирают за вас то, что отображается на страницах результатов.

Таким образом, все вышеперечисленное поможет вашей стратегии SEO и контент-маркетинга, а также общим целям цифрового маркетинга, став более заметным в поисковых системах и привлекая больше органического трафика.

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

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

Сторонний инструмент или подключаемый модуль 

В наши дни многие CMS добавят его автоматически или, по крайней мере, будут совместимы с подключаемым модулем, который это делает. Например, Yoast для WordPress, Amasty для Magento и Hello Rich Snippets для Shopify.
Вам просто нужно найти тот, который совместим с вашим сайтом, и убедиться, что он не мешает другим плагинам и не влияет на скорость сайта.
Это также очень удобно, так как это означает, что в каждый пост в блоге, который вы пишете, будет динамически вставлена ​​схема BlogPosting — вам не нужно добавлять ее в каждый пост.

Спросите своих разработчиков

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

Диспетчер тегов Google

Если вы не можете получить плагин, который вставляет его динамически, и ваши разработчики не могут жестко запрограммировать его на сайт, в крайнем случае вы можете добавить его через Диспетчер тегов Google. Это крайняя мера, так как только Google сможет увидеть код, а не все поисковые системы.
Диспетчер тегов Google сам по себе является целым минным полем и временами может быть темпераментным, поэтому он не идеален.

Сделай сам!

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

1. Во-первых, вы можете протестировать страницу, чтобы узнать, может ли она поддерживать расширенные результаты, что вы можете сделать с помощью тестера расширенных результатов Google.
   
2. Например, в этом сообщении в блоге говорится, что было обнаружено семь типов структурированных данных, одним из которых является схема статьи, которая нас и интересует.
   
3. Эти результаты также полезны для вас, чтобы увидеть, есть ли какие-либо ошибки, которые вы можете исправить. В этом случае URL-адрес страницы автора отсутствует, поэтому я обязательно добавлю его.
4. Schema.org также можно использовать для тестирования и проверки структурированных данных для конкретной страницы.
   
5. Теперь, когда мы знаем, что эта страница может реализовывать структурированные данные, теперь нам нужно создать фактический код, который будет стоять за сообщением в блоге, которое поисковые системы будут сканировать, чтобы отображать его как расширенные результаты в поисковой выдаче.
   
6. Вы можете сделать это с помощью генератора разметки схемы, такого как Помощник по разметке структурированных данных Google или Генератор разметки схемы Merkle, который является моим личным фаворитом.
7. Это говорит само за себя. Вы просто выбираете, какой тип кода разметки схемы вы хотите сгенерировать, и заполняете сведения о странице, такие как заголовок, URL-адрес, автор, описание сообщения в блоге, URL-адрес изображения и т. д. — все это информация, которая сформирует расширенный результат, если он будет хорошо ранжироваться.
8. Когда вы заполните все данные, генератор добавит их красным и оранжевым цветом к коду напротив, который после заполнения вы сможете скопировать и вставить в серверную часть вашего веб-сайта.
   
   
9. Вы также можете напрямую протестировать этот код, используя те же расширенные результаты и инструменты тестирования структурированных данных, которые упоминались ранее.
10. Если вы не уверены, куда должен идти этот фрагмент кода, поговорите со своим разработчиком.

Для справки и если вы хотите просто использовать код напрямую, ниже приведен пример схемы статьи:

Заключительные мысли

Напомню, что разметка схемы статьи — это фрагмент кода, который скрывается за сообщениями в блогах и новостными статьями и предоставляет поисковым системам больше информации о содержании страницы.
Затем это помогает поисковым системам лучше понять контент, чтобы он занимал более высокое место в поисковой выдаче, поскольку расширенные результаты, поскольку информация, которую они видят, является более подробной и релевантной для конкретных поисковых запросов.
Эти расширенные результаты содержат гораздо больше деталей, которыми вы захотите воспользоваться, и, поскольку они выделяются среди остальных органических результатов, у них будет более высокий рейтинг кликов, что даст вам больше шансов привлечь больше органического трафика и конверсий.
Существует несколько способов реализации разметки схемы статьи, в том числе с помощью Диспетчера тегов Google, сторонних инструментов и плагинов, заставить разработчиков жестко закодировать ее или сгенерировать код и добавить его самостоятельно.
Я надеюсь, что это пошаговое руководство оказалось для вас полезным, но если у вас есть дополнительные вопросы или вы застряли, пожалуйста, не стесняйтесь обращаться ко мне в LinkedIn или к члену нашей команды SEO.

Получайте подобный контент в свой почтовый ящик еженедельно.

Подписаться

Более популярный контент

Другие новости

микроданных — Schema.org для страницы категории со списком статей

Задавать вопрос

спросил 4 года, 7 месяцев назад

Изменено 4 года, 7 месяцев назад

Просмотрено 3к раз

Я помечаю свой веб-сайт с помощью микроданных и задаюсь вопросом о том, как пометить список статей.

На странице категории я нашел большую статью с тегом, но я не знаю, должен ли я также пометить листинг.

 

    <заголовок>
        
статья 1/a>
        
    
    <дел>
         jpg" />
        
bépo bépo bepo … (Lire la suite…)