Яндекс-ОСТРОВА Интерактивные ответы

Интернет маркетинг. SEO. Юзабилити. Электронная коммерция.

2013-06-29

Введение

Яндекс запустил платформу «Острова» — новый интерфейс и новые инструменты, которые помогают владельцам сайтов сделать ответы в результатах поиска интерактивными:
переносить ввод данных на страницу результатов поиска;
передавать информацию от сервиса в режиме реального времени;
переносить транзакцию на страницу результатов поиска.
Для создания интерактивных ответов мы предлагаем использовать язык описания форм и API для real-time взаимодействия с Яндексом. Здесь мы вначале рассмотрим эти технологии, а затем перейдем к примерам ответов, которые можно сделать с их помощью.
Краткий обзор возможностей
Язык описания форм;
Правила для описания формы с произвольной семантикой в формате xml;
Инструмент для тестирования форм в поисковом интерактивном ответе;
Расширение стандарта разметки Open Graph для интеракций: web-handler (deep link) и http-handler (real-time взаимодействие).
Статус этого документа — предварительная спецификация. Это первая версия, в которой описано наше представление о способах реализации интерактивных ответов в поиске Яндекса. Мы предполагаем, что спецификация будет дополняться в процессе совместной работы с владельцами сайтов, поэтому рады получить от вас обратную связь.
В настоящий момент доступна бета-версия инструмента для вебмастеров. В качестве примера в нем реализованпоисковый интерактивный ответ для сервиса Яндекс.Авто. Чтобы сделать такой ответ для своего сайта, ознакомьтесь с документацией и воспользуйтесь редактором форм.

Язык описания форм

Для того, чтобы в ответе могли появиться интерактивные элементы, мы предлагаем использовать язык описания форм. С его помощью можно рассказать о полях формы, указать их тип и возможные значения.
Сообщить Яндексу описание полей формы можно с помощь разметки внутри страницы или в отдельном xml/json-файле. Мы будем поддерживать оба способа.
Возможные значения полей (словари) позволяют Яндексу разбирать поисковые запросы, относящиеся к вашему сайту, и автоматически выставлять значения в соответствующие поля формы. Пользователь сможет уточнить запрос с помощью выпадающих списков, чекбоксов и т.д., при этом по клику на кнопку он будет попадать на правильно сформированный URL на вашем сайте.

Семантика

Названия полей и их значения могут быть произвольными или фиксированными. В некоторых случаях мы будем требовать, чтобы описание формы соответствовало семантическому стандарту, разработанному для конкретной тематики. Например, для регистрации на авиарейс. Такие тематические спецификации будут публиковаться в качестве дополнения к этому документу. Также мы предполагаем наследовать семантику, которая вводилась ранее вместе с запуском наших сервисов. Например, для Яндекс.Услуг.
Далее рассмотрим примеры: транзакционная кнопка, простая форма с несколькими полями и сложная форма с большими словарями значений.

Транзакционная кнопка

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

Пример разметки в стандарте Open Graph

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

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta property="og:type" content="..." />
    ...
    <meta property="og:interaction" content="BookTable" /> 
    <meta property="og:interaction:web_handler" content="http://menu.ru/order/table" /> 
  ...
  </head>
  ...
</html>

Теги, начинающиеся с interaction, являются расширением открытого стандарта Open Graph Protocol (http://ogp.me).

interaction (interaction array) — обязательный тег, обозначающий возможное действие. Примерами могут быть бронирование в ресторане (значение "BookTable"), бронирование отеля (значение "BookHotel") и др. Конкретные действия и значения к ним мы будем публиковать постепенно по мере появления продуктов.
interaction:web_handler (URL) — обязательный тег, обозначающий адрес страницы, на которую нужно перейти для совершения действия. Это может быть как страница на вашем сайте, если действие можно совершить на нём, так и страница на другом сайте (сайте агрегатора), если ваш сайт такой возможности не предоставляет.
interaction:paid_service (Boolean) — необязательный тег, указывающий, что на одном из шагов транзакции пользователю потребуется заплатить денег. Если тег не указан, по умолчанию считается, что вся транзакция бесплатная. Пример платной транзакции — покупка товара.

Также требуется указать prefix="og: http://ogp.me/ns#" в теге html или head — это требование стандарта.

Простая форма

Для простых форм, которые содержат небольшое количество полей, описание удобно выполнять на самой странице внутри html-тега form. Если параметры в тематике зафиксированы в страндартах schema.org или Open Graph, то описание формы можно будет сделать c помощью разметки.
Пример: простая форма для регистрации на рейс
todo: рассмотреть возможность использования стандарта XForms

Сложная форма и словари

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

API для real-time взаимодействия

Для создания интерактивных ответов, которые предполагают реал-тайм взаимодействие c пользователем, на вашем сайте необходимо реализовать API. Сообщить нам о появлении такого API можно будет с помощью разметки в Open Graph или в специальном разделе Яндекс.Вебмастера. Далее приводим возможности API, которые собираемся поддерживать на страницах результатов поиска.

API может возвращать real-time данные для конкретной страницы

Например, для сервиса это могут быть погода на сегодня или табло аэропорта, для страницы товара — его цена и наличие; для страницы, которая содержит списки объектов, — количество найденного или диапазон цен. В этом случае API должен быть привязан к конкретной странице сайта.

API может возвращать real-time данные, в зависимости от входящих параметров

Параметры на входе API могут быть произвольными и передаваться Яндексу через описание полей и значений формы. В некоторых случаях параметры будут фиксироваться для конкретной тематики (см. подробнее о семантике). Помимо ответа real-time данными API сервиса может перенаправлять пользователя на правильный URL (deep link), который соответствует набранным параметрам в форме и учитывает контекст пользователя (например, регион и язык).
Также для API будут специфицированы формат ответа (xml/json), время устаревания ответа (зависит от тематики), разрешенная частота обращений. Мы ожидаем, что API будут отвечать с высокой скоростью (300-400 мсек) и выдерживать некоторую нагрузку.
Пример: выбор даты и вида специалиста показывает актуальное расписание врачей

Спецификация API по стандарту Open Graph

Покажем на примере, как с помощью разметки в Open Graph может быть специфицировано API и его ответ в конкретной тематике — «бронирование отелей».
Представим, что мы хотим показать цену на номер в отеле в зависимости от дат заезда (arrival), выезда (departure) и количества гостей (guests). При этом для корректного отображения необходимо также задать валюту цены (currency) и язык ответа (lang). Изменяя время заезда и выезда пользователь без перехода на сайт получает цену номера в отеле на выбранные даты, а также URL, по которому можно продолжить транзакцию.

Пример описания работы API

Разметка может выглядеть как часть описания объекта:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta property="og:type" content="..." />
    ...
    <!--Возможность забронировать номер в отеле -->
    <meta property="og:interaction" content="BookHotel" /> 
    <meta property="og:interaction:http_handler" content="http://host/prefix?" /> 
  ...
  </head>
  ...
</html>

Теги, начинающиеся с interaction, являются расширением открытого стандарта Open Graph Protocol (http://ogp.me).

interaction:http_handler (URL) обязательный тег, обозначающий API урл. По этому урлу должна быть возможность получить ответ в зависимости от заданных пользователем параметров.
interaction:http_handler:method (enum) — необязательный тег, обозначающий тип запроса к API. Если тег не указан, по умолчанию тип считается GET. Возможные значения GET, POST.
interaction:http_handler:response_format (enum) — необязательный тег, обозначающий тип ответа. Если тег не указан, по умолчанию тип считается JSON. Возможные значения JSON, XML.
interaction:paid_service (Boolean) — необязательный тег, указывающий, что на одном из шагов транзакции пользователю может потребоваться заплатить денег. Если тег не указан, по умолчанию считается, что вся транзакция бесплатная. Пример платной транзакции — покупка товара.

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

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta property="og:type" content="..." />
    ...
    <!--Возможность забронировать номер в отеле -->
    <meta property="og:interaction" content="BookHotel" /> 
    <meta property="og:interaction:http_handler" content="http://host/prefix?hotel=433" /> 
    <meta property="og:interaction:http_handler:method" content="GET" />
    <meta property="og:interaction:http_handler:response_format" content="JSON" />
    ...
  </head>
  ...
</html>

По условиям примера пользователь указывает дату заезда (arrival), выезда (departure) и количества гостей (guests), а параметры — валюта цены (currency) и язык ответа (lang) мы понимаем из его текущего контекста. Тогда полный запрос к API от Яндекса будет выглядеть так: http://host/prefix?hotel=433&arrival=2014-12-10&departure=2014-12-21&currency=RUB&lang=RU&guests=2.

В ответ API сервиса должен вернуть цену номера в отеле на выбранные даты, а также URL, на котором происходит следующий шаг транзакции. Например, так:

{
   "price" : {
     "value" : 2455.00,
     "currency" : "RUB"
   },
   "url" : "http://host/url"
}

Примеры интерактивных ответов

Ответ real-time данными

Транзакционная кнопка

Теперь укажем на возможность совершить транзакцию на сайте, в данном случае — заказать такси. Сайт должен передать Яндексу правильный внутренний URL, на котором выполняется действие. Для некоторых случаев транзакция может выполняться сторонним сервисом и на отдельном URL (например, покупка билета в кино).

Транзакционная форма

Добавим несколько полей, чтобы пользователь мог указать маршут поездки или сообщить его в поисковом запросе. Например, в запросе [заказ такси до ленинградского вокзала] мы распознаем географию и проставим ее в поле «Куда». По клику на кнопку «Заказать» пользователь переходит на сайт для продолжения транзакции, а Яндекс передает сайту параметры указанного маршрута.
Для демонстрации поискового интерактивного ответа мы подготовили работающий пример для сервиса Яндекс.Авто.

Транзакционная форма с real-time предпросмотром результата

Транзакция на СЕРПе в интерфейсе

В некоторых случаях, когда это выгодно и пользователю, и владельцу сайта, транзакцию можно будет полностью провести на странице результатов поиска. Например, зарегистрироватся на рейс или забронировать столик. Для этого мы по-прежнему будем использовать язык описания форм и API для real-time взаимодействия. В первом случае необходимо описать поля по вводу данных для совершения транзакции, во втором - расширить возможности API и возвращать Яндексу соответствующие статусы по транзакции («возможна», «в процессе», «проведена», «отменена»).
В нашем примере осталось ввести свое имя, контактный телефон и указать время подачи такси. Если API сервиса подтвердит оформление заказа, Яндекс сообщит об этом пользователю.

[email protected]

Яндекс-ОСТРОВА Интерактивные ответы

Введение

Язык описания форм

Семантика

Транзакционная кнопка

Пример разметки в стандарте Open Graph

Простая форма

Сложная форма и словари

API для real-time взаимодействия

API может возвращать real-time данные для конкретной страницы

API может возвращать real-time данные, в зависимости от входящих параметров

Спецификация API по стандарту Open Graph

Пример описания работы API

Примеры интерактивных ответов

Ответ real-time данными

Транзакционная кнопка

Транзакционная форма

Транзакционная форма с real-time предпросмотром результата

Транзакция на СЕРПе в интерфейсе

Помощь

Дополнительные услуги