Как расширить представление сайта в выдаче с помощью Google Tag Manager

На новый пост о фишках Диспетчера тегов Google нас вдохновила статья Симо Агавы из Netbooster.

end-110

У Google есть разные способы сделать результаты поисковой выдачи (SERP) живее. Когда вы вводите поисковый запрос, цель поисковой системы — предоставить вам наиболее релевантную информацию. Часто это значит, что вы увидите ответ на свой запрос непосредственно в SERP:

skitch

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

Теперь к делу. Google недавно выпустил инструмент для тестирования структурированных данных, который понимает разметку JSON-LD.

JSON-LD является ответвлением формата данных JavaScript Object Notation (JSON), его особенность в том, что вы можете указать связанные узлы данных между различными объектами.

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

  • всех функций Knowledge Graph;
  • Rich Snippets для событий;
  • формы поиска по сайту (Sitelink search box).

Отличная информация об этой новой функции в цитате со страницы технической поддержки:

JSON-LD позволяет вам встроить блок данных JSON внутри скрипта в любом месте HTML. Также Google может читать данные JSON-LD даже когда они динамически добавляются в содержимое страницы, например, с помощью Javascript кода или встроенных «виджетов».

Прочитайте последний абзац еще раз. Разве это не звучит, как «пользовательский HTML-тег в Google Tag Manager»? Именно так и есть.

Разметка структурированных данных с помощью Google Tag Manager

Вы можете динамически добавлять данные JSON-LD на страницах, используя Google Tag Manager. Единственное условие в том, что код должен быть запущен во время первой загрузки страницы. Это означает, что вы не можете динамически расширять структурированные данные на сайте после того, как окно загрузится, то есть после того, как событие gtm.loadзаписано в dataLayer. Пока теги структурированных данных выполняются по триггеру «Все страницы», все должно быть в порядке.

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

Размечайте социальные профили для Knowledge Graph

Если сайт включен в Граф знаний, вы сможете добавить ссылки на социальные профили прямо в SERP, как сделала компания Marimekko, например:

social-profile-data-1

Для этого вы должны добавить в пользовательском HTML-теге следующее (примеры сайтов взяты из текста Симо Агавы):

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Person",
  "url" : "http://www.simoahava.com/",
  "name" : "Simo Ahava",
  "sameAs" : [ "http://fi.linkedin.com/in/simoahava",
      "http://plus.google.com/+SimoAhava",
      "http://www.twitter.com/SimoAhava" ]
}
</script>

Код выше дополнит блок Knowledge Graph для сайта Симо Агавы (если его сайт будет добавлен в Граф знаний) ссылками на его профили в социальных сетях непосредственно в поисковой выдаче.

Активируйте блок поиска по сайту

Это одно из самых крутых дополнений для SERP.

На некоторых сайтах вы можете увидеть окно поиска прямо в выдаче (в sitelinks — быстрых ссылках). Эта поисковая форма связана с внутренней системой поиска на сайте, что позволяет делать поиск непосредственно по содержанию сайта.

sitelinks-search

Чтобы этот блок появился, код в пользовательском HTML-теге должен выглядеть так:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://www.simoahava.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://www.simoahava.com/?s={search_term}",
    "query-input": "required name=search_term" }
}
</script>

Здесь предоставлен URL и необходимый параметр поискового запроса, которым оперирует система внутреннего поиска на сайте автора. Теперь, если кто-то введет поисковый запрос в быстрых ссылках в SERP, он будет перенаправлен на страницу результатов поиска по сайту по указанному запросу.

На заметку

Запомните, что вы можете комбинировать разные типы структурированных данных в одном пользовательском HTML-теге и лучше делать именно так, чтобы уменьшить количество тегов в контейнере. Два примера, приведенных выше, будут скомбинированы в одном теге так:

<script type="application/ld+json">
[{
  "@context" : "http://schema.org",
  "@type" : "Person",
  "url" : "http://www.simoahava.com/",
  "name" : "Simo Ahava",
  "sameAs" : [ "http://fi.linkedin.com/in/simoahava",
      "http://plus.google.com/+SimoAhava",
      "http://www.twitter.com/SimoAhava" ]
},
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://www.simoahava.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://www.simoahava.com/?s={search_term}",
    "query-input": "required name=search_term" }
}]
</script>

Тут были включены два JSON объекта, которые вставлены в один массив данных (обратите внимание на квадратные скобки, что оборачивают два объекта), разделенные запятыми.

После того как вы создали свой тег и опубликовали контейнер, не забудьте проверить сайт в инструменте для тестирования структурированных данных:

testing-tool

Симо Агава отмечает, что инструмент проверки не всегда работает, особенно если HTML на сайте достаточно сложный. Это не означает, что структурированные данные не проверяются, это просто означает, что есть какая-то ошибка в самом процессе работы инструмента.

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

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

Поисковые роботы Google довольно давно ждали реализации этой возможности icon_smile Также это дает возможность вводить аннотации о контенте с JavaScript, вместо того, чтобы применять их непосредственно в шаблоне страницы с помощью CMS. Замечательно и то, что вы можете вводить объект в любом месте страницы, а не только в head.