Как использовать расширенные сниппеты в WordPress

Опубликовано: ADv Дата 21.04.2016 в рубрике WP для начинающих Комментировать

Хотели бы вы добавить на свой WordPress сайт расширенные сниппеты? Не уверены, что знаете, что такое расширенные сниппеты, и зачем их нужно использовать на своем сайте? Rich snippets (они же — расширенные сниппеты) позволят вам настраивать внешний вид определенного вида контента в поисковой выдаче, как например обзоры, рецепты, события и т.п. В сегодняшней статье мы покажем вам как применять расширенные сниппеты на вашем WordPress сайте.

Зачем нужно использовать расширенные сниппеты

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

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

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

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

Теперь, когда мы разобрали какие же преимущества есть у сниппетов, давайте рассмотрим, как их добавить в WordPress.

Мы покажем два способа: ручное добавление расширенных сниппетов в WordPress, а также их имплементация с помощью плагина.

Добавляем расширенные сниппеты в WordPress с помощью плагина

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

Первым делом вам необходимо установить и активировать плагин All In One Schema.org Rich Snippets. После активации просто нажимаем на значок меню Rich Snippets.

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

Обзоры продуктов
События
Люди
Товары
Кулинарные рецепты
Программы/приложения
Видео
Статьи

После нажатия на любой из этих типов контента, вы увидите поля, которые будут доступны для пользователя в процессе создания страницы/записи или любого произвольного типа записи.

Теперь вам нужно создать новую запись или перейти в редактирование существующей. Ниже редактора записей вы увидите новый метаблок под названием Configure Rich Snippet. Внутри него вы заметите выпадающее меню, где и нужно выбрать тип контента для записи, над которой предстоит работа.

При выборе типа контента появятся соответствующие ему поля для заполнения. На скриншоте ниже мы выбрали типа контента «Статья», и плагин выводит нам Название статьи, автор, краткое описание, а также поля для изображений статьи.

Вы можете выбирать любой тип контента (например, рецепты, события), а затем заполнять поля. Не обязательно заполнять все поля, однако некоторые всё же являются обязательными для Google, чтобы корректно отображать сниппет.

Не забудьте сохранить запись для того, чтобы указанные данные не были утеряны.

Ручное добавление расширенных сниппетов в WordPress

Расширенные сниппеты или же разметка структурированных данных могут быть написаны в трех различных словарях. Этими словарями являются microdata, RDFa и JSON-LD. На своем сайте можно использовать любой из них, однако большинство новичков предпочитают RDF.

Ниже пример страницы «О нас» для WordPress. Обычно текст этой страницы выглядит вот так:

John Smith
<img src="johnsmith.jpg" alt="Photo of John Smith"/>
Support Technician
342 Acme Inc.
101 Washington Avenue
Eagleton IN 98052
(425) 123-4567
<a href="mailto:johnsmith@example.com">johnsmith@example.com</a>
Website:
<a href="http://www.example.com">example.com</a>

Его можно легко трансформировать с помощью расширенных сниппетов. Если вы знакомы с HTML, то вы легко поймете следующий пример:

<div vocab="http://schema.org/" typeof="Person">
  <span property="name">John Smith</span>
  <img src="johnsmith.jpg" property="image" alt="Photo of John Smith"/>
  <span property="jobTitle">Support Technician</span>
  <div property="address"  typeof="PostalAddress">
    <span property="streetAddress">
      342 Acme Inc.
      101 Washington Avenue
    </span>
    <span property="addressLocality">Eagleton</span>,
    <span property="addressRegion">IN</span>
    <span property="postalCode">46818</span>
  </div>
  <span property="telephone">(425) 123-4567</span>
  <a href="mailto:johnsmith@example.com" property="email">johnsmith@example.com</a>
Website
  <a href="http://example.com" property="url">example.com</a>
</div>

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

Вот еще одни пример кулинарного рецепта, трансформированного в расширенный сниппет.

<div vocab="http://schema.org/" typeof="Recipe">
  <span property="name">Mom's World Famous Banana Bread</span>
  By <span property="author">John Smith</span>,
    <img property="image" src="bananabread.jpg"
    alt="Banana bread on a plate" />
  <span property="description">This classic banana bread recipe comes
  from my mom -- the walnuts add a nice texture and flavor to the banana
  bread.</span>
  Prep Time: <meta property="prepTime" content="PT15M">15 minutes
  Cook time: <meta property="cookTime" content="PT1H">1 hour
  Yield: <span property="recipeYield">1 loaf</span>
  Ingredients:
  - <span property="recipeIngredient">3 or 4 ripe bananas, smashed</span>
  - <span property="recipeIngredient">1 egg</span>
  - <span property="recipeIngredient">3/4 cup of sugar</span>
  ...
  Instructions:
  <span property="recipeInstructions">
  Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
  the flour last. Pour the mixture into a loaf pan and bake for one hour.
  </span>
</div>

Если вы решили вручную добавлять расширенные сниппеты в свои записи WordPress, то вам нужно будет пользоваться Текстовой версией редактора для написания необходимой разметки. Также стоит обратиться к Google’s Developer resource on structured data для понимания того, какие свойства будут обязательными для определенного типа контента.

тестирование расширенных сниппетов

Google и другие поисковые системы не смогут моментально подтянуть ваши расширенные сниппеты и сразу же выводить их в результатах поиска. Как же тогда узнать, корректно ли прописаны сниппеты на сайте?

Для этого переходим на Google’s Structured Data Testing Tool. Можно либо вставить свою разметку в соответствующее поле, либо указать ссылку на тестируемую страницу. Далее нажимаем на кнопку «Проверить» и инструмент протестирует вашу разметку.