×
Россия +7 (495) 139-20-33

Optimization 2020: Внедрение AMP для интернет-магазина без потери конверсии в Google

Россия +7 (495) 139-20-33
Шрифт:
0 4942

19 ноября – второй день онлайн-конференции Optimization 2020. SEOnews продолжает следить за ходом конференции и делиться с вами интересными докладами.

В рамках секции «Кейсы и нюансы продвижения в Google» выступил Никита Селиванов, руководитель SEO в Pult.ru c докладом «Кейс: решение проблем со скоростью и трафиком в Google для интернет-магазина через внедрение AMP без потери конверсии».

Предлагаем вам текстовый обзор доклада.

Все обзоры с конференции можно посмотреть по тегу Optimization 2020.

SEO и скорость загрузки

Google еще в 2010 году объявил о том, что скорость загрузки является фактором ранжирования. В июле 2018 Google запустил алгоритм Speed Update. А с мая 2021 года запустит Page Experience, включающий в себя метрики Core Web Vitals, где сигналы скорости загрузки страниц и удобство для мобильных устройств будут влиять на ранжирование.

Проблемы со скоростью загрузки есть у многих интернет-магазинов. И одно из возможных решений проблемы загрузки на мобильных устройствах – внедрение формата AMP.

AMP (Accelerated Mobile Pages) – ускоренные мобильные страницы, которые позволяют отобразить страницу в мобильной выдаче намного быстрее.

Никита поделился, как внедрял этот формат для интернет-магазина pult.ru и с каким сложностями и нюансами столкнулся.

Что представляет собой формат AMP:

В формате AMP урезаны многие возможности, представленные в HTML, например, нельзя отображать изображения с помощью обычных тегов, подключать внешние JS, iframe и т.д. 

Ограничения AMP


За счет этих ограничений и того, что AMP версии хранятся в кэше Google и страницы открываются здесь – достигается оптимальная скорость загрузки.

После внедрения формата сайт получает специальную иконку в мобильной выдаче.

Некоторые возможности у AMP в плане внедрения скриптов все-таки есть и они закрывают большую часть потребностей современного интернет-магазина.

Никита приводит пример отличия загрузки картинки на AMP и HTML.

Загрузка картинки. Отличие AMP от HTML

В стандартном HTML формате картинка внедряется с помощью тега <img>, у которого есть атрибут с адресом картинки, альтернативным текстом и, возможно, какие-либо стили.

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

Как внедрить AMP для блога на WP?

  1. Установить плагин.
  2. В настройках выбрать материалы.
  3. Подключить аналитику.
  4. Проверить тег каноничности (rel=“canonical”) и amphtml.
  5. Проверить AMP версии страниц на валидность.
  6. Отправить страницы на переобход.

Для сайта «статейника» на WordPress, AMP внедряется просто. Все это, по словам докладчика, занимает 5-10 минут.

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

Как внедрить AMP для интернет-магазина

1. Сделать верстку необходимых страниц. Стоит учесть несколько обязательных атрибутов, указанных на слайде:

Обязательные атрибуты amp страницы

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

2. Подключить аналитику.

3. Подключить микроразметку.

4. Связать AMP и обычные страницы.

5. Запретить индексацию для Яндекса и других ПС.

6. Отправить страницу на переобход.

В интернет-магазине есть много элементов, которые подключаются с помощью внешних JS. Так выглядит документация по основным элементам верстки для интернет-магазина в html:

Документация по основным элементам верстки для интернет-магазина в HTML

Все эти скрипты для AMP подключить нельзя. Но разработчики формата AMP создали готовые скрипты, встроенные в формат AMP почти для любой задачи, которая возникает у интернет-магазина. 

Что не получилось в формате AMP: реализовать добавление товара в корзину, сравнение товаров и некоторые другие элементы.

Элементы, которые не получается сделать в AMP

РЕШЕНИЕ: Никита нашел способ, как обойти эти ограничения и сделать полноценную копию сайта. Кнопка «В корзину» была сделана ссылкой, при клике на которую пользователь попадал на обычную версию этого же товара. Но при этом передавался GET-параметр. Т.е. html страница была настроена так, что при добавлении GET-параметра с ID-товара, товар автоматически добавлялся в корзину.

С помощью GET-параметра было реализовано и сравнение товаров, и добавление товаров в избранное, и возможность поиска по сайту.

Но фильтры, формы, e-mail подписки и онлайн-консультанты реализовать в формате AMP не получилось , поэтому их оставили просто ссылками, которые ведут на обычную версию страницы.

Подключение микроразметки JSON-LD

После того, как подготовили верстку для всех страниц на сайте, нужно подключить микроразметку. Cтраницы AMP отдаются только Google. Для Яндекса следует запретить эти страницы в robots.txt, чтобы не создавать дублей.

Поскольку Яндекс плохо обрабатывает микроразметку JSON-LD, то для Google можно спокойно ее отдавать. По мнению докладчика, она удобнее, чем создавать Shema.org с помощью атрибутов.

Важно не забыть проверить микроразметку через валидатор.

После того, как сделали верстку и добавили на сайт AMP версии страниц, нужно рассказать Google, что у обычной html-страницы есть альтернатива в формате AMP.

Как связать обычную и AMP страницу

На обычные страницы нужно добавить тег <link> и указать ссылки на AMP-страницы. А на AMP-страницы указать ссылки на html-страницы. У каждой AMP-страницы должен быть тег, который в canonical указывает адрес основной страницы.

После того, как все сделано и проверено, нужно все страницы отправить на переиндексацию в Google.

Как ускорить индексацию для большого количества страниц:

Быстрая переиндексация большого количества страниц

Для всех страниц нужно добавить ответ в заголовке сервера Last Modified. С помощью него браузер и роботы узнают, что страница недавно изменилась. В Яндекс.Вебмастер можно проверить ответ в заголовке страницы.

Если страница изменилась с какого-то момента времени, то будет показан ответ сервера 200 ОК. Если страница не менялась, то будет показан ответ 304.

Далее можно проставить высокий приоритет в Sitemap и актуализировать lastmod, указав дату изменения: сегодня (или вчера).

Настройка фильтров в Google Analytics

После внедрения AMP в GA появится трафик с источником/каналом в виде:

Отображение трафика в GA

Почему так происходит? Человек заходит в мобильную выдачу Google, вводит запрос и попадает на AMP-версию, а оттуда переходит на основную версию страницы. Для GA и Я.Метрики – это будет новый источник трафика, т.к. AMP-версии страниц отображаются не с вашего сервера, а из кэша Google.

Соответственно, транзакции, которые должны были попадать в органику, будут попадать в новый источник трафика (ampproject.org/referral).

Способы решения данной проблемы

1. Способ: добавить два фильтра в GA, которые будут перезаписывать этот трафик на Google organic.

Ограничения: если на AMP-версию страницы идет трафик не только из SEO, а еще из контекстной рекламы и других источников, то этот трафик тоже будет перезаписываться в «seo-шный».

2. Способ: связать визиты, которые были на AMP-версиях и на основных версиях страниц с помощью тега AMP Linker.

  • Следует добавить тег, передающий параметры AMP Linker.
  • Добавить тег, считывающий параметры AMP Linker.
  • Настроить исключения источников переходов.

Возможные ошибки в Search Console после внедрения AMP:

  • Одна из самых популярных ошибок – неправильный формат картинок.
  • Недопустимые атрибуты (border у картинок и т.д.).
  • Нельзя использовать тег font.
  • Только amp-boilerplate style и amp-custom style.
  • Заменить тег img соответствующим тегом amp-img

Кейс. Результаты внедрения

Результаты по скорости.

После внедрения AMP на сайт интернет-магазина pult.ru, показатели по Page speed Insights изменились в 4 раза: 

Результаты внедрения до и после

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

Результаты по позициям (в мобильной выдаче Google).

После того, как Google проиндексировал AMP-страницы, по всему ядру улучшились позиции:

Трафик после внедрения AMP

Презентация доклада Никиты Селиванова с полезными ссылками доступна по ссылке.


Интересное с Optimization 2020:

Optimization 2020: факторы ранжирования 2020

Optimization 2020: 7 событий 2020 из мира SEO, о которых должен знать каждый

Optimization 2020: SEO или экспертный контент? Борьба за Яндекс.Кью

Optimization 2020: сложности E-A-T и YMYL в Google.ru и способы их решения

Optimization 2020: продвижение локального бизнеса в Google

Optimization 2020: Яндекс про курс на качество сайта

Optimization 2020: Google про Core Web Vitals и метрики здорового сайта

Optimization 2020: круглый стол с поисковиками о накрутке ПФ и агрегаторах в выдаче

Optimization 2020: SERM – как успешно управлять репутацией бренда в поисковой выдаче

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Алгоритм продвижения сайта через Pinterest
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - В самом вверху есть ссылка на мою группу в ВК, там где автор материала. Через группу и свяжитесь со мной_)
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - такое можно делать и с ВЧ_)
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Как продвинуть сайт по коммерческим запросам в ТОП-10 с помощью ресурса Reddit
Denis Zar
2
комментария
0
читателей
Полный профиль
Denis Zar - пользовались услугами по продвижению на реддит от reddit-marketing.pro?
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Сравнительная статистика уровня жизни SEO-специалистов в семи странах, включая Россию
Рустам
1
комментарий
0
читателей
Полный профиль
Рустам - Средняя температура по больнице, подсчет даже близко не отображает действительность, особенно учитывая разность цен и уровня зп в разных частях больших стран (США, Канада, Россия)
Зарабатываем с помощью текстов: как создать уникальный контент и монетизировать сайт
dotaidi
94
комментария
0
читателей
Полный профиль
dotaidi - Какой-то нейро-физиологический подход к теме создания контента: 1. " ..чтобы контент отвечал интересам аудитории, закрывал ее боли и потербности". Закрыть боль аудитории? Это как понимать, текст что должен выполнять функцию анестезии? Зачем падать в медицинские категории, это ведь профессиональный текст о SEO, а не триллер и не художественная литература, где метафоры уместны. 2. "Главное — чтобы процесс сбора информации вас увлекал и нравился, ведь эта работа требует усилий". Построение тезиса предполагает, что если работа не нравится, то и усилий она не требует. И вообще, упор в работе на главное значение "нравится" — очень спорное и тоже из области НЛП-игрушек. Стилистика статьи тоже желает более продуманного подхода к использованию словосочетаний специфической терминологии: "вы можеет создавать материалы в коллаборации с известными брендами, релевантными тематике вашего сайта". Бренд не может быть релевантным из-за того, что это целый комплекс явлений, собранный под некоторой узнаваемой семантической или графической символикой. Релевантность — качество, свидетельствующее о совпадении запроса(желания) и выдачи (полученной информации). Это нужно хотеть бренд, чтобы он стал релевантным. Аналогия и релевантность не синонимы. "прикладывайте усилия в сбор и обработку информации" и многие подобные обороты делают статью не просто нерелевантной, но просто безграмотной.
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
Рост ботных переходов на сайт: как интерпретировать и что делать
Mike
5
комментариев
0
читателей
Полный профиль
Mike - как это проверить? что товары выводится именно на основе спроса, а не по заданным алгоритмам?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
94
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!