Skip to Content

Обеспечиваем комплексное продвижение и поддержку в сети Интернет с 1997 года: анализируемформализуемрисуемразрабатывемпрограммируемпродвигаемсоздаемрассылаемподдерживаемразмещаемподсказываемремонтируемобучаем.

аудит сайта, конкурентный анализ, предметную область, задачи, ищем решения
пишем ТЗ, структуру БД, пишем бизнес план развития проекта
качественный индивидуальный дизайн сайта, и фирменного стиля, визитки, буклеты
интерфейсы, мобильные версии, улучшаем юзабилити
сложные аналитические системы, алгоритмы, базы данных, интерфесы
комплексное продвижение с оптимальным бюджетом. Гарантия результата. Подбираем маркетинговые инструменты под задачи клиента
имидж компании, бренда, поддерживаем отзывы, гасим негатив, работаем с рекламациями
прямые адресные рассылки по Email SMS информирование
собираем и наполняем сайт контентом, качественные фото, снимаем видео
обеспечиваем хостингом, регистрируем домены, настраиваем серверы
куруглосуточная поддержка VIP клиентов на русском и англиском
скорая помощь для вашего сайта, восставливаем после сбоев, чистка вирусов, устранение ошибок
семинары, трениги, курсы, вебинары и консультации

info@novikov.ua

 

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

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 данными

 

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

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

 

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

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

 

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

Для демонстрации поискового интерактивного ответа мы подготовили работающий пример для сервиса Яндекс.Авто.

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

 

Наконец, добавим форме интерактивности — начнем real-time отвечать на работу пользователя с формой. В нашем примере API сервиса возвращает стоимость поездки в зависимости от указанного маршрута.

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

 

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

В нашем примере осталось ввести свое имя, контактный телефон и указать время подачи такси. Если API сервиса подтвердит оформление заказа, Яндекс сообщит об этом пользователю.





+38(044) 353-70-09

(050) 837-25-64
(044) 353-70-09
(093) 119-63-11
Как у любой IT компании,
наш основной канал связи
это E-mail:
info@novikov.ua