Турбо-страница
Аудитория мобильного интернета быстро растет
66 млн российских пользователей используют его наряду с десктопным, а 20 млн уже выходят в интернет только с мобильных устройств — это на 15% больше, чем год назад.
Страницы на смартфонах могут загружаться медленно
Причин несколько: нестабильное соединение с сетью, низкая скорость интернета — или сайт не адаптирован для мобильных устройств. Если ждать приходится слишком долго, пользователи уходят на другие сайты.
Мы предлагаем пользователям технологию Турбо
Она в разы ускоряет загрузку текста, изображений и видео на смартфонах и помогает экономить время и мегабайты мобильного интернета.
Монетизация
Рекламная сеть Яндекса
В RTB-блоках могут быть показаны объявления десятков тысяч рекламодателей Яндекса. Управлять блоками удобно из партнерского интерфейса: среди них – популярный и доходный Motion.
Прямые продажи рекламы
Управляйте кампаниями прямых рекламодателей через ADFOX или другие сервисы.
Комбинации бизнес-моделей
Используя ADFOX, вы можете передавать в РСЯ показы, которые не были выкуплены прямыми рекламодателями, а также сравнивать ставки всех монетизаторов в Динамической монетизации.
Преимущества
Потери трафика при переходе со смартфонов уменьшаются, даже если у пользователей медленный или нестабильный интернет
Рост популярности Турбо-страниц у пользователей положительно влияет на посещаемость сайта
Снижается нагрузка на хостинг и серверы: для создания Турбо-страниц мы используем ваш контент и наши вычислительные мощности
Дополнительные рекламные места помогают увеличивать доход от монетизации — например, в Рекламной сети Яндекса
План развития
3 квартал 2017 г.- Поддержка мультимедиа контента (иллюстрации, видео)
- Поддержка сторонних рекламный сетей через ADFOX
- Поддержка сторонних счетчиков аналитики (Google Analytics, Mail.Ru, Rambler Топ-100, Mediascope)
- Ускорение загрузки Турбо-страниц в 4 раза
- Таблицы, списки, цитаты
- Галереи изображений и фото
- Отображение комментариев
- Коды вставки контента из YouTube, Vimeo, Instagram, Twitter
- «Бесконечная» лента (блок «Вам может быть интересно»)
- Навигация по сайту
- Кнопка «Поделиться»
- Дополнительные рекламные места
- Расширенные возможности аналитики
- Скорость отрисовки рекламы
плюсы, минусы и результаты внедрения / Habr
Мобильный трафик в последние годы неуклонно растет. Пользователи все чаще читают новостные сайты, заказывают продукты и вещи с телефонов. Мобильные и адаптивные версии сайтов перестали быть привлекательным бонусом, а стали реальной необходимостью.
Но не все так прекрасно. В погоне за трафиком и снижением отказов, приходится искать новые пути решения. Мобильные и адаптивные версии не всегда спасают ситуацию, а иногда вообще неудобны: адаптив получается слишком “тяжелыми” для скачивания, из-за этого скорость загрузки на смартфонах оставляет желать лучшего. (Говорить про то, что посетители, да и поисковые системы, не любят долгую загрузку, нужно?)
Мы в AlkoDesign.ru работаем с одним крупным информационным порталом. (Обойдемся без имен). Одними из поставленных перед нами задач, были: увеличение трафика и снижение процента отказов. Недолго думая, мы решили воспользоваться быстрыми страницами от Google и Яндекса.
В этой статьей мы поделимся результатами внедрения таких страниц на одном из новостных порталов и вкратце расскажем, что такое быстрые страницы и с чем их едят (для тех, кто не в теме).
AMP и Турбо-страницы — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается обеими поисковыми системами. Такие страницы загружается даже быстрее чем страница мобильной версии сайта.
AMP страницы google.ru
Суть в том, что на сайте используются специальные теги (с префиксом amp), количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.
Поисковые системы находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то, браузер на фоне подгружает информацию из CDN, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.
При использовании на сайте какой-либо CMS, для AMP страниц необходимо сделать свой отдельный шаблон для отображения данных согласно требованиям к разметке AMP страниц.
Турбо-страницы Яндекса
Основное отличие от AMP — контент Турбо-страниц берется не со страниц сайта, а из специального RSS-канала.
Их содержимое хранится на серверах Яндекса. Но для того, чтобы Яндекс забрал с нашего сайта контент, мы должны написать скрипт, который будет передавать все необходимые данные (текст, изображения, стили и т.д.) в специальном формате XML-документ. Процесс похож на подготовку данных для Яндекс.Товары или Яндекс.Маркета.
Честно говоря, настройка максимально простая. Если количество страниц небольшое (10-20), то сделать RSS-канал для Яндекса можно самим, без привлечения программиста. Правда, в этом случае обновляться он будет тоже вручную.
Скорость загрузки Турбо — страницы превышает обычную примерно в 15 раз. И, дополнительный (но не последний), бонус — если сайт упадёт, например, из-за заражения или DDoS-атаки, его Турбо-страницы продолжат открываться и контент будет по-прежнему доступен пользователям.
Страницы с AMP и Турбо, ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке.
Особенности AMP и Турбо-страниц
Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.
Решение — использование доступных компонентов и iframe. Доступные компоненты позволяют добиться, пусть и не полной, реализации привычного инструментария на сайте, но представляют ему достойную замену и оптимизированы для быстрой загрузки.
С помощью AMP и Турбо-тегов, можно реализовать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее. Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.
Особенности Турбо-страниц
Они помогают увеличивать охват мобильной аудитории — пользователям не приходится долго ждать загрузки сайта, и они почти сразу переходят к вашему контенту. Прирост трафика может быть существенным.
Преимущества Турбо-страниц в том, что после их внедрения на вашем сайте:
- Падает показатель отказов. Когда пользователь заходит на ваш сайт и из-за своего плохого интернета долго не может открыть вашу страницу, он может просто не дождаться ее загрузки, закрыть и снова вернуться в поисковую выдачу, чтобы найти какой-то другой, более быстрый сайт. Таким образом у вас повышается показатель отказов, а чем больше показатель отказов, тем хуже ваши позиции в поисковой выдаче.
- Растет мобильный трафик. На сегодняшний день многие пользователи уже знают, что сайты, отмеченные в выдаче значком ракеты, грузятся очень быстро и поэтому по ним активно кликают. Это дает вам преимущество перед конкурентами и позволяет увеличить посещаемость вашего сайта с мобильных устройств.
- Снижается нагрузка на хостинг. Если на сайте довольно высокая посещаемость, то этот пункт будет тоже актуален. За счет того, что загрузка контента идет не с вашего хостинга, а с серверов Яндекса, нагрузка снижается. При этом для создания и хранения Турбо-страниц Яндекс использует собственную сеть доставки контента (CDN), что еще сильнее ускоряет загрузку контента.
Недостатки Турбо – в ограниченном функционале:
- Не поддерживаются формы обратной связи, нет возможности заказа товара или услуги. Это можно назвать самым главным минусом, т.к. для посадочной страницы или интернет-магазина использование турбо-страниц будет нецелесообразным, ведь вы все равно не сможете получить с них заявки.
- Сайт оформляется по предопределенному малогибкому шаблону. Когда вы кликаете по ссылке, помеченной значком «Турбо», то ваш контент отобразиться в упрощенной странице, созданной поисковиком, и ваше уникальное оформление сайта никто не увидит. Поэтому здесь придется выбирать между высокой скоростью загрузки сайта и уникальным оформлением вашей мобильной или адаптивной версии.
Особенности AMP
- Создание «легких» страниц;
- Поисковик сохраняет облегченные версии страниц у себя на серверах;
- «Яндекс» предлагает владельцам смартфонов турбо-страницы в поиске или новостной ленте;
- Благодаря высокой скорости загрузки улучшается пользовательский опыт и поведенческие показатели.
После создания AMP страниц, Google пошел дальше. Он перевел все сайты на новую систему ранжирования — Google Mobile Friendly. Теперь ранжирование сайтов зависит в первую очередь от мобильной версии сайта. Если раньше можно было создать и «вылизать» десктопную версию сайта, не делая адаптивную или на крайний случай мобильную версию сайта. То теперь при разработке сайта, особое внимание нужно обращать на адаптивную версию.
Подготовка данных
Для AMP-страниц
Все изображения на странице должны быть описаны в особом теге , что затрудняет вставку изображений пользователем через текстовый редактор.
Так же, если используются карусель или lightbox, нужно вставить аналоги из компонентов amp. Для реализации этого функционала был реализован обработчик, который с помощью регулярных выражений заменяет стандартные HTML-теги, на теги используемые в amp спецификации.
Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.
Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:
А на AMP-странице — присутствовать обратная ссылка:
Css стили пишутся inline, и их размер не должен превышать 50кб.
Для Турбо-страниц
Чтобы подключить Турбо-страницы, достаточно внести небольшие изменения в текущий экспортный файл согласно техническим требованиям:
- Корневым элементом RSS-файла является rss, атрибут version которого должен иметь значение 2.0.
- Внутри элемента rss содержится элемент channel, который включает информацию об источнике и его содержание.
Далее указываются:
- Информация о сайте-источнике — сведения передаются в элементе channel.
- Информации о сообщении — данные передаются в элементе item.
- контент для турбо-страницы
В турбо страницы можно встроить дополнительные элементы типа: шапка страницы, ссылки, картинки, видео, кнопка «Поделиться», цитаты, таблицы и т.д. Также можно подключить некоторые системы веб-аналитики.
Практика
Внедряем AMP на сайт
Учитывая, что мы далеко не новички в IT-сфере, внедрение страниц не составило большого труда.
Сразу после внедрения быстрых страниц, запустили проверку через Google и Яндекс валидатор. После запуска обнаружили дополнительные ошибки, которые были успешно устранены.
Внедряем Турбо-страницы
Для внедрения Турбо-страниц на сайте, была изучена спецификация формата. Определены шаблоны для генерации заголовков турбо-страниц и указания дополнительных изображений. Был разработан специализированный модуль для CMS, который генерирует RSS файлы с данными, согласно технической документации Яндекса ( partner.news.yandex.ru/tech.pdf ).
Поскольку материалы на сайте постоянно добавляются, то обновление RSS ленты с турбо-страницами, также обновляется путем запуска скрипта обновления на CRON. Из-за специфики проекта было принято решение сделать несколько RSS лент, каждая для своего типа контента.
В настройках модуля можно указать какие разделы сайта необходимо экспортировать в RSS, указать дополнительные данные для экспорта. Частота обновлений RSS ленты турбо-страниц задается периодичностью выполнения задачи на CRON.
После прохождения валидации RSS со стороны Яндекса, Турбо-страницы были добавлены к индексации.
Результаты
Отказы
После внедрения AMP и Турбо-страниц изменились поведенческие метрики.
За квартал показатель отказов на сайте в целом составил 14,2 %. Здесь учитываются все посетители, включая пользователей десктопов.
Показатель отказов для владельцев смартфонов, которые приходили на обычные страницы, составил за квартал 23,7%.
Показатель отказов для посетителей Турбо-страниц за этот же период составил 6,2 %.
То есть по показателю отказов, обычные страницы проигрывают турбо-страницам более чем в два раза: 23,7 % против 6,2% с Турбо-страницами и в целом 14,2%.
Посещаемость
С момента внедрения AMP и Турбо-страниц мы увеличили посещаемость портала в 2 раза.
Скорость загрузки страниц
Главный плюс — увеличение скорости загрузки страницы в 3 — 10 раз. Она мгновенно выросла за счет кеширования.
А также:
- Снизилась нагрузка на серверы
- Выросли поведенческих факторов (на позиции в органике AMP непосредственно не влияет).
Вывод: внедряем к месту и с умом
Там где нужно донести до пользователя контент максимально быстро и в простой форме.
В нашем случае результатом внедрения стало:
- процент отказа снизился в целом в 2 раза;
- посещаемость выросла в 2 раза;
- скорость загрузки выросла в 3-10 раз
Кому пока не подходит Турбо:
- Ecommerce, потому что нет корзины. (на данный момент в разработке)
- Landing page, потому что не поддерживаются любые кнопки и формы на страницах
Кому идеально подходят Турбо-страницы:
- СМИ
- Контентные проекты
- Блоги внутри сайтов (например, информационный раздел в интернет-магазине, с новостями, описанием новинок индустрии и т.д.)
Настоятельно рекомендуем владельцам новостных порталов, сайтов СМИ или информационных блогов подключить такие страницы. Это позволит вам получить дополнительный трафик, уменьшить количество показов и увеличить количество просмотренных страниц.
AMP и Турбо-страницы — интересная технология, которую нужно использовать с умом. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. И, конечно, это отличное решение для информационных сайтов, блогов, интернет-журналов.
что это такое и как настроить?
Турбо-страница Яндекса становится все более популярной, поэтому именно о ней и пойдет разговор. В этой статье мы поговорим о том, что это такое. Также расскажем о создании и настройке таких страниц, их подключении, преимуществах и недостатках.
Турбо-станица Яндекса – это новая технология, которая способствует увеличению скорости доступа к информации на мобильных устройствах при низкоскоростном подключении в 15 раз. Это возможно благодаря уменьшению контента на странице в 10 раз. Храниться он на серверах Яндекса. Эта дополнительная скорость стала возможна благодаря тому, что турбо-страницы выдерживают высокую нагрузку и отвечают на запросы с минимальной задержкой. Это, в свою очередь, позволяет продвигать сайты в разных регионах при помощи скорости загрузки страниц, ведь отказов с них будет меньше.
Формируются турбо-страницы на основе контента ресурса и технологий Яндекса по стандарту. Это логотип сайта, графические элементы текстовая часть страницы, реклама, состоящая всего лишь из нескольких баннеров, и дополнительные материалы. Такие страницы отмечаются иконкой в виде ракеты.
Турбо-режим срабатывает при скорости связи меньше 128 Кбит/с автоматом и и остается пока скорость не станет выше 512 Кбит/с. Сказать о включении этого режима вам может синий значок ракеты в адресной строке браузера. Конечно, в настройках можно поставить запрет на сжатие видео или полное отключение режима турбо.
Все это помогает увеличит охват мобильной аудитории. Если раньше 70% аудитории пользовались для просмотра страниц компьютером и 30% мобильными устройствами, то сейчас картина поменялась.
Создание и настройка турбо-страницы
Создаются и настраиваются турбо-страницы двумя способами. Первый метод создания при помощи RSS-канала, который доступен администраторам сайта. Ранее мы уже писали о том, что такое RSS-канал, где рассказывали о том, как им пользоваться и о его преимуществах и недостатках. Кроме того, через Яндекс.Вебмастер во вкладке «Турбо-страницы».
Вторым способом добавления стал автопарсинг. Парсинг – это способ автоматического анализа и сбора информации с сайтов при помощи спецпрограммы или скрипта. Однако, автопарсинг доступен в бета-режиме и то не всем платформам Вебмастера.
Как подключить турбо-страницы Яндекса
Чтобы подключить турбо-страницу требуется сначала войти в Яндекс.Вебмастер. Мы уже писали и о том, что дает и зачем нужен Яндекс Вебмастер, а также обо всем, что нужно знать, для первого знакомства с этим сервисом. После чего добавить сайт, подтвердив права на управление им, и перейти в соответствующую вкладку для настроек. В ней подключается статистика, счетчик, система рекламного блока, а также принцип отображения с мобильных устройств.
Затем надо создать RSS-канал. Для этого следует ввести ссылку на него. Вам будет предложено выбрать из 10 вариантов один. Исключение составляет, если есть несколько веб-ресурсов, которые связаны одним доменом. Тогда доступно 60 каналов (по 10 на проект). Это будет преимуществом, ведь можно настроить каждый канал по отдельности. После следует загрузить полученный файл в Вебмастер и включить показ турбо-страниц.
Напомним, что материал с турбо-страниц попадает из специального канала. Поэтому такая технология отлично подходит для коммерческих проектов, веб-магазинов, новостных сайтов. Все это позволит таким ресурсам осуществлять продвижение сайта по ключевым словам в Яндексе более эффективно, так как пользователям не придется долго ждать загрузки нужной информации.
Преимущества и недостатки турбо-страниц
Как и у каждой технологии у турбо-страниц есть свои преимущества и недостатки. Поговорим сначала о положительных сторонах. Турбо-страницы работают эффективнее оригинальных сайтов, а значит, будет меньше отказов со страницы.
Другие причины следующие:
- сервер сайта освобождается от некоторой нагрузки, так как его облегченная версия размещается на отдельных серверах Яндекса. Значит ваш сайт может проводит другие операции;
- страницы не требуется преобразовывать, ведь Яндекс помогает подстроить страницу при помощи своих инструментов;
- для администратора веб-ресурса остается открытым использование инструментов интернет-аналитики.
Да, турбо-страницы решают различные проблемы читателей, но главный ее недостаток в том, что такую веб-страницу невозможно оформить оригинальном стиле ресурса.
Еще один минус — владельцы сайтов теряют контроль над своим сайтом, так как управление, можно сказать, переходит Яндексу. Это связано с ограничением количеств блоков в облегченной версии. Их может быть всего лишь 2-3.
Мы рассказали вам о том, что из себя представляют турбо-страницы Яндекса. Однако, прежде чем переходить на новый формат стоит взвесить все плюсы и минусы.
Частное мнение о Яндекс.Турбо / Habr
Что такое Турбо-страницы Яндекс официально?
Турбо-страницы — лёгкие версии страниц вашего сайтаВ принципе описано все четко, для чего это нужно. И хотя понимаешь, что технология привязывается к Яндексу, ну да ладно. Тем более, если это повышает удобство пользователей и тем самым увеличивает пользовательский трафик, то почему бы и нет?
Исследования показывают, что люди не готовы ждать загрузки более 2 секунд.
Мы предлагаем вам подключить Турбо-страницы, которые очень быстро открываются из сервисов Яндекса и эффективно монетизируются.
Но как всегда, есть нюанс.
Технические подробности
Ссылки на хабро-статьи с подробным описанием технологии:
Если кратко, то технология позволяет увеличить скорости загрузки web страниц на мобильные устройства пользователя за счет их предварительной обработки и кеширования на отдельных серверах.
В настройках страниц тоже нет ничего сложного (по крайне мере для разработчика). Я настроил их генерацию у себя на сайте в конце прошлого года и если судить по отчетам, то получилось несколько сотен Турбо-страниц, так что полет нормальный.
Сравнение страниц
А
А это страницы, которые открываются по ссылкам из поисковой выдачи:
Какое же было мое удивление, когда стало понятно, что я не перехожу на целевой сайт, а продолжаю оставаться на Яндексе! Ссылки в поисковой выдаче отображаются как обычно, но открывается URL, который начинается на _https://yandex.ru/turbo?text=[URL]…
Еще раз акцентирую внимание на том, что эта поисковая выдача на обычном десктопном компьютере, а не на мобильном телефоне, ради увеличения скорости загрузки страниц на котором все и затевалось!
Вот оригинальные страницы сайтовИ только после прочтения технических подробностей про данную технология до меня дошло! В статьях особо не заостряется внимание на том, что при открытии Турбо-страницы пользователь не переходит на целевой сайт, а все время продолжает остается на сервере поисковика!
Тонкости пользовательского соглашения
А что написано в пользовательском соглашении? Можно не обращать внимание на детали, в которых компания ни за что не несет ответственности. Такие оговорки являются обычными для подобных сервисов.
Но меня очень заинтересовали два пункта, которые были внесены при двух последних изменениях пользовательского соглашения.
Пункт 2.6.3. в версии от 29.12.2018 г. в котором
«Пользователю может предоставляться техническая возможность автоматической расстановки Рекламы в составе Пользовательской информации…»Весь пункт 2.6.3.
2.6.3. В отдельных случаях Пользователю может предоставляться техническая возможность автоматической расстановки Рекламы в составе Пользовательской информации в соответствии со следующим алгоритмом: рекламные блоки расставляются в количестве, не превышающем соотношение один рекламный блок на каждые два экрана (под экраном понимается часть Пользовательской информации, соответствующая одному пролистыванию Пользовательской информации на экране мобильного устройства пользователя сети Интернет). Место расположения рекламных блоков определяется по усмотрению Яндекса. Более подробная информация о работе указанного функционала предоставляется Пользователю по его запросу. При этом Пользователь обязуется утвердить результаты автоматической расстановки рекламных блоков в составе Пользовательской информации через предоставляемый Пользователю веб-интерфейс, либо направить Яндексу возражения относительно результатов автоматической расстановки рекламных блоков. Пользователь также подтверждает в отношении использования описанного в настоящем пункте функционала все гарантии и ответственность, предусмотренные настоящими Условиями, включая, но не ограничиваясь, п.2.5.
Другими словами, в страницу пользователя на усмотрение Яндекса может внедрятся реклама. Залез в исходный код одной из страниц, о точно! В оригинале на сайте установлен AdWords, а на Турбо-страницах транслируется реклама от Яндекса. Хотя, может быть я тут зря нагнетаю и рекламная система была заменена в шаблоне Турбо-страниц самим владельцем сайта или он согласовал подобную замену, т.к. какая-то галочка про рекламу есть в настройках?
Но это еще не все. В изменениях от 19.07.2019 г. появился новый пункт:
«2.14. Пользователь дает согласие на передачу Пользовательской информации, данных о сайте, а также технических, статистических и аналитических данных, третьим лицам для обработки на условиях и для целей, определённых в Политике конфиденциальности, доступной для ознакомления по адресу …»No comment.
Предыстория
Некоторое время назад я делился своими наблюдениями о связи органического трафика из поисковой выдачи Яндекса и наличием платной рекламной компании в Я.Директ (Когда рекламная компания в Я.Директ повышает органическую выдачу, а прекращение рекламной компании уменьшает и органический трафик с поисковой системы habr.com/ru/post/459462).
По мнению некоторых специалистов, такая связь логична, т.к. это объясняется поведенческими факторами пользователей на сайте. Другими слова, пользователь переходит по оплаченной рекламной ссылке на сайт, проводит там какое-то время и может даже покликать по другим ссылкам. Яндекс видит, что пользователям на сайте интересно и повышает его рейтинг в выдаче. И хотя реальная формула связи между ранжированием и поведенческими факторами пользователей никому неизвестна, но большинство сошлось во мнении, что корреляция между ними безусловно существует.
И ведь поведенческие факторы пользователей играют для ранжирования сайта большую роль не только в Яндекс, но и для всех остальных поисковых систем! В том числе и за счет анализа статистики о поведения пользователей на сайте (Я.Метрика, Google Analytics и т.д.). Вот только в случае с Турбо-страницами, пользователь не переходит на целевой сайт, а остается на сайте поисковой системы.
Посмотрел на статистику переходов с других поисковых систем (в первую очередь Google) и что-то мне кажется, что их стало меньше. Но ведь с Я.Турбо это же никак не связано? Подумал, подумал, да и выключил Турбо-страницы. Посмотрю, какие изменения будут с трафиком после их отключения.
Дисклеймер
К сайтам, приведенным в статье как пример, я не имею никакого отношения, а что бы размещать ссылку на свой в соответствующем хабе, мне не хватает кармы.
Также, не уверен до конца в негативном влиянии Я.Турбо на ухудшение поведенческих метрик на сайте. Я не SEO специалист и не ставил для себя задачи по изучению конкретных цифр с целью их последующего использования. Но буду признателен всем читателям, кто поделится наблюдениями, сделанными после подключения Турбо-страниц в своих проектах!
UPDATE:
Интересный комментарий написал Am0ralist, который я решил добавить непосредственно в саму статью.
А вообще, нюанс в том, что эти турбо страницы оказались принудительно включены на кучах сайтов, и трафик был уведён от сайтов в пользу рекламы яндекса.
При этом в ТП яндекса не увидели никаких проблем с тем, что турбо страницы загажены рекламой уровня начала нулевых, в замен нормальной верстки оригинальных сайтов.
Не говоря уже о том, что турбо страницы ломают эти самые верстки сайтов.
К сожалению, достучаться по контактам одного сайта у меня не получилось, чтоб узнать — давал ли его хозяин разрешению яндексу так ломать свой сайт, ибо почта в контактах сайта не рабочая была…
Технологии Яндекс Турбо-страницы и Google AMP для e-commerce / Habr
Введение
Веб разработка давно двинулась в сторону мобильного контента. Тренд последних нескольких лет в пользу трафика с мобильных устройств вместо десктопа, привёл к тому что поисковики сначала стали требовать от сайтов адаптивности и быстрой скорости загрузки, а с 1 июля 2019 года Google для новых сайтов перешёл на mobile only, вместо mobile first. Это значит, что ему совсем не интересна десктоп версия.
Одновременно с этим поисковики предложили технологии очень быстрой загрузки страниц. У Google это AMP (Accelerated mobile pages), у Яндекс — Турбо-страницы.
Далее в статья я хочу рассказать о плюсах, минусах и проблемах с которыми я столкнулся при внедрении AMP и Турбо-страниц для действующих интернет-магазинов.
Суть обеих технологий сводится к тому, что поисковики кешируют содержание страницы с картинками у себя и отдают их посетителю со своих серверов. При этом учитывается ряд факторов посетителя: устройство, экран, браузер, скорость интернета и т.д. В зависимости например от разрешения экрана или скорости мобильного интернета поисковик может отдать картинку меньшего разрешения, чем она была на сайте, плюс вся графика будет с отложенной загрузкой и прелодерами. Я обратил внимание, что Яндекс на Турбо-страницах из JPG изображений делает WebP и если браузер поддерживает отдаёт в WebP формате, что даёт выигрыш в 2-3 раза по размеру файла.
В результатах поиска эти страницы отмечены молнией (AMP) и ракетой (Турбо) и открываются мгновенно из кеша поисковика без перехода на сайт.
За счет скорости загрузки, страницы, использующие технологии AMP и Турбо скорее всего ранжируются несколько лучше обычных в выдаче обоих поисковиков. Хотя ни Google ни Яндекс об этом в прямую не говорят, лишь ссылаясь на то что для алгоритмов важна скорость загрузки и такие сайты получают больше баллов в выдаче.
Мне как потребителю эти технологии очень нравятся. Помимо скорости загрузки контента, данные страницы максимально облегчены в плане дизайна и навигации, и я могу мгновенно открыть карточку товара, либо прочитать какую-то статью без лишних отвлечений на элементы дизайна.
Технические особенности
С точки зрения разработки данные технологии накладывают множество ограничений, особенно Турбо-страницы от Яндекса. Их пока можно рассматривать, только как игрушку, если говорить про e-comm сайты. Турбо-страницы на текущий момент не позволяют взаимодействовать с бэкэндом магазина и являются просто промежуточным статическим звеном между поисковиком и сайтом, т.к. для совершения действия по покупке товара пользователю нужно переходить на сайт магазина.
У Google с AMP всё выглядит гораздо бодрее. Технология позволяет сделать динамические страницы, которые могут полноценно “общаться” с вашим сервером. Например, в момент открытия карточки товара, в фоне делается запрос на сервер для актуализации цены, проверки наличия товара. Таким образом, даже если товар закончился, или изменилась цена, а поисковик ещё не проиндексировал данные изменения, пользователь всё увидит корректно и быстро. Товар из кеша загрузится мгновенно и дальше обновится цена и наличие, после получений данных от вашего сервера.
Далее можно отправить полноценный заказ в вашу систему с данным товаром и показать пользователю информацию с номером заказа. Таким образом с помощью AMP можно сделать полноценный сайт с корзиной, авторизацией, обратным звонком и т.п., хоть и в сильно усеченном варианте.
По моему мнению поисковики будут пытаться принуждать всех к использованию данных технологий, чтобы посетители не выходили из поиска, а прям на страницах поисковых систем авторизовывались на сайтах, делали заказы, оплачивали их и т.д.
Для больших топовых магазинов, у которых есть своих приложения, которые и так работают быстро, эти промежуточные AMP и Турбо-страницы, могут оказаться вредными, т.к. пользователю нужно всё равно переходить на сайт чтобы получить полноценный функционал, по выбору доставки к примеру.
Небольшим магазинам без автоматизированных складов и т.д., данный формат возможно будет интересен. Особенно если воссоздать минимальную логику взаимодействия с бэком: актуализация цены, авторизация с получением персональной скидки/бонусов, отправка заказа с учётом бонусов и скидок.
Насколько данные технологии будут эффективны против полноценных сайтов покажет время, но если поисковики будут активно двигаться в этом направлении, то это просто будет новой реальностью с которой всем нужно будет жить.
К минусам обоих технологий на текущий момент можно отнести, что сайты открываются не под реальным адресом, а с префиксами поисковиков, что например не позволяет добавить страницу в избранное или поделиться:
- Google: google.com/amp/s/[URL вашего сайта]
- Яндекс: yandex.ru/turbo?text=[URL вашего сайта]
Частично это проблема решается у Google в Chrome с 71 версии для AMP страниц появилась возможность сделать свой адрес. Для этого надо настроить AMP Packager на сервере, и ssl сертификат с поддержкой «CanSignHttpExchange».
Яндекс тоже не отстаёт и в последних версиях Яндекс бразуера для iOS и Android также будет отображаться домен сайта без префиксов.
AMP и Турбо-страницы с точки зрения разработки
AMP — это полноценные HTML-страницы с поддержкой всех тэгов и CSS. Есть ряд несущественных ограничений, и отличие в оформлении head. Например запрещён тэг img, вместо него нужно использовать amp-img. Есть JavaScript компоненты позволяющие наладить взаимодействие с вашим сервером посредством JSON. Например можно отправлять форму быстрого заказа с AMP страницы на ваш сервер, получить ответ в виде JSON и отобразить его. Есть компоненты для карусели картинок, видео и т.д. Собственный JavaScript изначально был запрещён, но недавно была добавлена поддержка своих скриптов.
Турбо-страницы это сильно усеченный html до поддержки ряда тэгов, правда с полноценной поддержкой CSS3. Никаких сценариев по взаимодействию с бэкендом на текущий момент сделать нельзя. Также есть компоненты для каруселей, видео и прочего.
Отмечу, что Яндексе идут по следам Google и планируют до конца 2019 года добавить возможности по взаимодействию с бэкендом для e-comm на Турбо-страницах:
- быстрый заказ
- авторизация
- оплата.
Как передать страницы поисковику
Между AMP и Турбо-страницами существует принципиальная разница.
AMP доступны на сайте по определенному URL, на них можно зайти браузером, например:
- /catalog/category/tovar.html — обычная страница
- /amp/catalog/category/tovar.html — AMP
Для каждой страницы, создается AMP, и в head прописывается связь через link rel:
- С обычной страницы на AMP link rel=»amphtml» href=»»
- С AMP обратно link rel=»canonical» href=»»
Google во время обхода сайта обрабатывает и обычные и AMP страницы. Всё довольно прозрачно для разработки, можно в одном и том же компоненте/скрипте генерировать разный html (обычный и AMP) и в зависимости от URL отдавать браузеру.
С Турбо-страницами всё сложнее. Их нужно передавать в Яндекс по API в XML, где внутри CDATA отправляются оформленные HTML-страницы. При передаче надо учитывать ограничения на количество страниц в одном XML, на количество картинок на каждой странице, и общее количество картинок в каждом XML.
Здесь у меня возникла дилема, где генерировать этот XML. Варианта здесь два.
Первый это это воссоздать всю логику сайта на бэке, что дорого и не удобно. Нужно учитывать все варианты URL (современный магазин это бесконечное кол-во URL получаемые из фильтров), цены, скидки, акции и прочее. Всё это нужно в дополнении к фронту дублировать на бэке.
Второй вариант генерировать Турбо-страницы в момент обращения на фронте, писать их в какую-то таблицу в базе и передавать в Яндекс. Это удешевит и упростит задачу, т.к. генерировать их можно вместе с обычными страницами.
Оба варианта жизнеспособны, в зависимости от ситуации и сложности сайта, может быть использовать и первый и второй. У меня используются оба на разных сайтах.
Что в будущем?
Смотрел трансляцию AMP Conf 2019, которая проходила Японии в апреле. Основная мысль прозвучавшая, что AMP будет позиционироваться как “AMP as service”. Это значит что созданные страницы постоянно будут апгрейдиться автоматически с точки зрения технологий. Например созданная сегодня lightbox галерея на AMP страницах, завтра может начать работать с другими эффектами увеличения картинки, свайпа картинок и т.д.
Также ключевые моменты считаю важными, которые уже появились или появятся в ближайшее время:
- Использование собственных JavaScript с ограничениями
- Возможность делать Сторисы, которые Google экспериментально начал поддерживать в отдельном блоке в выдаче (пока только в США)
- AMP для E-mail (поддерживает gmail, mail.ru запускает, outlook летом)
- Поддержка русского языка
- Компонент amp-experiment для A/B тестов
- Поддержка Recaptcha 3
Можно предположить, что многое из этого будет применено и в Турбо-страницах, но с отставанием.
Также Google позволяет делать Progressive Web App на основе AMP. Глубоко в этот вопрос не вдавался, но если сделать весь сайт на AMP и следовать инструкциям Google по адаптации для Progressive Web App, получиться PWA, которое из браузера устанавливаться на домашний экран. Оно позволит смотреть сайт без подключения к интернету и получить доступ к Push уведомлениями пользователя.
Вывод
Google и Яндекс будут склонять как обычные сайты так и e-comm проекты, чтобы те делали AMP и Турбо-страницы. Что в свою очередь для пользователя будет размывать понимание на каком сайте он находится и у кого заказывает товар. Может получится глобальный маркетплейс внутри поисковых систем.
Разметка RSS-канала — Технологии Яндекса
Название канала
http://www.example.com/
Краткое описание канала
ru
http://www.example.com/category/sub-category/page1.html
Tue, 21 Apr 2015 14:15:00 +0300
Иван Иванов
]]>
...
]]>
...
Информация о сайте-источнике.
title
Если экспортируется содержимое всего сайта, укажите название сайта. Если экспортируется раздел сайта, укажите только название раздела.
link
Домен сайта, данные которого транслируются.
description
Описание канала одним предложением. Не используйте HTML-разметку.
language
Язык статьи по стандарту ISO 639-1.
turbo:adNetwork
Используйте для отображения блоков Рекламной сети Яндекса и сторонней рекламы, подключенной через ADFOX на Турбо‑страницах. А также для учета доходов от рекламы при использовании Турбо‑страниц.
Подробнее.
Информация о странице.
Для отображения Турбо‑страниц, добавьте атрибут turbo=»true». Чтобы отключить отображение Турбо‑страницы, используйте значение false. Подробнее см. в разделе Управление показами Турбо‑страниц.
Один элемент item описывает одну страницу.
URL страницы сайта, для которой нужно сформировать Турбо‑страницу.
При переходе по ссылке заголовок и начало текста должны быть видны на первом экране при разрешении 1024 × 768.
turbo:source
URL страницы-источника, который можно передать в Яндекс.Метрику.
turbo:topic
Заголовок страницы, который можно передать в Яндекс.Метрику.
«Как сделать турбо-страницы Яндекс?» – Яндекс.Знатоки
Турбо страницы для сайта можно создать на основе ленты новостей rss.
Перво — наперво Вам нужно определиться контент какого рода Вы собираетесь публиковать в виде ускоренных страниц.
В своё время я был заинтересован в том чтобы в виде турбо страниц в поиске Яндекса отображалась информация из Каталога статей сайта ( publ ) моего сайта.
Однако вы можете отдавать в rss канал новости, материалы своего блога и т.д.
Для этого вам нужна ссылка вида site.ru/publ/rssya_turbo , в которой вместо publ вам нужно подставить наименование раздела вашего сайта информацию из которого вы бы хотели видеть в формате турбо страниц.
Далее нам необходимо отправиться в Яндекс Вебмастер, для того чтобы подключить наш Новостной канал RSS к этому сервису.
Заходим в Вебмастер Яндекса, в раздел подключение Турбо страниц :
Нужная нам страница добавления турбо страниц находится на вкладке источники.
Кликаем на эту вкладку и открывается форма добавления RSS-канала :
Вставляем ссылку на нашу rss-ленту в форму Загрузки Турбо страниц через RSS-канал и жмём на кнопку «Добавить».
Системе понадобится некоторое время для проверки вновь добавленного источника турбо страниц RSS. В моём случае на это ушло около часа.
Пока ссылка проходит проверку проделаем ещё некоторые манипуляции на странице добавления источника Турбо страниц в Яндекс Вебмастере.
Вам Необходимо включить Переобход источника Турбо Страниц и принять публичную оферту. Впрочем Вы можете сделать это после того как проверка успешно завершится.
Таким образом создание и настройка Турбостраниц для Яндекса успешно завершена. Теперь роботы Яндекса будут периодически проверять Ваш источник ускоренных страниц на предмет возможных изменений или добавления новых материалов.
Это будет происходить автоматически. Вам больше не придётся добавлять новые статьи или новости непосредственно в Яндекс Вебмастер, чтобы сформировать новые ускоренные страницы. Система будет делать это сама!
Если вам нужна более подробная информация можете прочесть мой урок Турбо страницы на основе ленты новостей В нём много иллюстраций всего процесса создания Турбо страниц.
Правда речь в уроке идёт о создании турбо страниц для сайта сделанного в конструкторе Юкоз, но общие принципы схожи для сайтов на любых платформах.
Отправить ответ