Навіщо вам потрібен AMP Google? І потрібен?
На початку минулого року Гугл почав активну роботу з поліпшення своєї пошукової видачі на мобільних пристроях. Першим «дзвіночком» був алгоритм mobile-friendly. Суть – якщо чоловік зайшов у пошук з мобільного телефону, так давайте покажемо йому на перших позиціях ті сайти, які зручніше на цьому самому мобільнику дивитися (природно, при інших рівних).
Взагалі, підхід цілком логічний – якщо з користувачів вашого сайту багато відкривають його зі смартфонів або планшетів, то зробити сайт адаптивним (читай «зручним») для мобільних пристроїв – гарне прояв турботи про своїх користувачів, а відповідно, і про поведінкових факторах свого сайту. Гугл лише підштовхнув процес «мобілізації» сайтів.
В продовження mobile-friendly в жовтні 2015 Гугл анонсував новий проект, який покликаний зробити життя «мобільних» користувачів ще солодше )) Мова йде про технології AMP, Accelerated Mobile Pages – Прискорені сторінки для мобільних пристроїв. Ми не будемо вдаватися в технічні тонкощі, а спробуємо відповісти зрозумілою мовою на основні питання: як це виглядає, кому і навіщо це потрібно, як впровадити на свій сайт.
Зауваження: всі скріншоти в статті зроблені з планшета (з мобільного пристрою).
Як виглядає AMP Google
Взагалі, сторінка сайту, що використовує технологію AMP, зовні мало чим відрізняється від звичайної сторінки. Ось приклад AMP-сторінки:
http://m.lenta.ru/news/2016/01/16/falcon/amp/
Нічого особливого в ній немає. Більш цікаво, як Гугл вирішив виводити AMP-сторінки у своїй мобільного пошуковій видачі. Дивіться, якщо ми шукаємо якісь новини в Гуглі, наприклад, «новини дня», то під рядком пошуку бачимо блок «Головні новини» з картками:
Клацаємо по якій-небудь картці, і вибрану сторінку сайту відкривається в новій вкладці. Часто, особливо якщо швидкість інтернет з’єднання не надто висока, протягом 4-7 секунд ми спостерігаємо таку картину:
Що придумали в Google – з впровадженням AMP пошук блок «Головні новини» зміниться (зверніть увагу на значок AMP):
З першого погляду здається, що ми бачимо ті ж самі картки, тільки з трохи більшими картинками. Клікаємо по одній з них:
Зверніть увагу на 4 моменти (відмічені на скріншоті):
1. Фізично ми не переходимо на інший сайт, а залишаємося в Гуглі, який завантажує нам вміст вибраної сторінки.
2. Виявляється, це слайдер. Ми можемо гортати вліво і вправо, тим самим швидко переключаючись між контентом інших AMP-сторінок блоку «Головні новини».
3. По цій кнопці можемо повернутися на сторінку пошуку.
4. І це найважливіше – контент AMP-сторінки відображається тут буквально за долі секунди.
Виглядає заманливо. Тепер ложка дьогтю:
Поки такий слайдер з AMP-сторінками виводиться тільки в англомовному google.com у російськомовній версії його немає. Ждемс..
Ті, хто хоче вже зараз «помацати» руками російськомовну видачу з AMP-сторінками, тримайте інструкцію:
- З планшета або смартфона заходимо на адресу http://g.co/ampdemo. Відкриється пошук Гугла, але з вже включеною підтримкою AMP.
- Вбиваємо в пошуковому рядку запит «новини дня» (або просто «новини») – профіт! У блоці «Головні новини» бачимо картки з поміткою «AMP», клацаємо, насолоджуємося ))
Ще один нюанс: Якщо Гугл не знайшов достатню кількість AMP-сторінок, які відповідають введеному запиту, то такі картки показані не будуть. Наприклад, за запитом «новини спорту» нічого подібного поки що немає.
Кому потрібні AMP-сторінки
Корисність AMP-сторінок можна розглянути з двох точок зору:
1. Якщо дивитися з точки зору користувача, то таке «швидке» відображення контенту прямо у пошуковій видачі (без додаткових очікувань і переходів на сайти) дуже зручно для людей, які звикли отримувати інформацію переважно з мобільного пристрою. А кількість таких людей з кожним днем лише зростає.
2. Якщо ж дивитися з точки зору бізнесу, то проект AMP буде корисний тільки тим, у кого в основі бізнесу лежить контент – це новинні сайти, інтернет-журнали, блоги, навчальні портали і т. п.
Так що якщо ваш бізнес – це продаж автомобільних шин, то переводити картки товарів на AMP абсолютно безглуздо. Але якщо при цьому ви ведете свій блог з унікальними статтями на різні теми авто індустрії, то зробити для нього AMP-версію буде далеко не зайвим. Як ви бачили на скріншотах вище, картки з відповідними AMP-сторінками відображаються на самому початку пошукової видачі – а чи не це мрія будь-якого власника сайту.
Розрахуйте вартість додавання та налаштування полегшених мобільних сторінок для Яндекса і/або Google. Запитати розрахунок ».
Як влаштований AMP
Тепер, коли ми показали, як це виглядає, можна коротко розповісти про те, як це влаштовано.
По суті, AMP – це лише ще один набір скриптів і правил для відображення веб-сторінок. Наприклад, в розробці сайтів давно використовується готовий набір скриптів (так звана «бібліотека») з назвою jQuery – завдяки їй, верстальщику не треба кожен раз заново програмувати слайдери або, скажімо, модальні віконця. Верстальник просто бере готовий код з бібліотеки і налаштувати його параметри під конкретний сайт.
Але проект AMP має кілька відмінностей від існуючих бібліотек:
1. У ньому залишений тільки той код, який потрібен для швидкого відображення контенту (завантаження картинок по мірі прокручування сторінки, слайдери, завантаження повідомлень з соц. мереж, модальні вікна). Як говориться, нічого зайвого.
2. Код написаний так, щоб бути максимально швидким (використовуються тільки асинхронні скрипти, якщо вам це про щось скаже).
3. Код написаний з урахуванням особливостей різних мобільних пристроїв і браузерів, що AMP-сторінка повинна однаково добре відображатися незалежно від пристрою, на якому вона відкрита.
Три ці відмінності дозволяють AMP-сторінок відображатися в мобільних браузерах швидше. Але при цьому вони накладають суттєві обмеження на функціонал сторінки – наприклад, ви не зможете вставити на AMP-сторінку ніяких своїх скриптів, можна використовувати тільки готові компоненти, так і список доступних html-тегів дещо обмежений (всі правила і вимоги є тут).
Втім, для відображення контенту цього цілком достатньо. Ось ще один приклад AMP-сторінки:
https://www.washingtonpost.com/amphtml/lifestyle/style/six-ways-the-martian-subverts-expectations/2015/10/05/6bba4d42-6873-11e5-8325-a42b5a459b1e_story.html
На ній є все, що потрібно на сторінці новинного видання, відкритої з мобільника – картинки, текст, відео, кнопки соц.мереж, реклама (потрібна, звичайно, не користувачам, але власникам сайту), випадаюче меню.
І ще одна важлива особливість проекту AMP:
При індексації AMP-сторінок Гугл запам’ятовує (кешує) їх вміст на своїх серверах. Тому, коли в пошуковій видачі Гугла ви клацаєте по картці AMP-сторінки:
то Гугл «підтягує» її не з сервера Lenta.ru (що може зайняти чимало часу, наприклад, якщо ви перебуваєте в цей момент в Австралії), а відображає збережений вміст свого найближчого до вас сервера.
Так Tefal Гугл думає про нас і намагається видати користувачеві контент максимально швидко.
AMP – третій у списку
Зверніть увагу, що AMP – це не заміна звичайним html-сторінок або мобільних версій сайту, це лише доповнення. Давайте розглянемо на прикладі.
Візьмемо новинний портал lenta.ru і ось таку статтю:
https://lenta.ru/news/2016/01/16/falcon/
Це стандартна сторінка сайту з контентом, випадаючим меню, додатковими статтями по темі, пошуком, кнопкою «Наверх», блоками реклами, кнопками соц. мереж, різними системами статистики і пр. і пр.
І якщо на планшеті це велика кількість інформації ще сприймається нормально, то на екрані телефону навряд чи все це знадобиться (і вже явно не поміститься).
Тому для мобільних пристроїв у lenta.ru давно є мобільна версія сайту, де менше додаткового контенту (і трохи менше реклами):
http://m.lenta.ru/news/2016/01/16/falcon/
Тепер же у lenta.ru з’явилася 3-я версія цієї сторінки в форматі AMP:
http://m.lenta.ru/news/2016/01/16/falcon/amp/
Тут ще менше будь-яких додаткових скриптів (реклами взагалі немає, хоча її можна вставити в AMP), тільки контент.
Як же ці 3 версії однієї сторінки співіснують разом?
Вихідною є сторінкою http://lenta.ru/news/2016/01/16/falcon/. Саме ця сторінка бере участь в основній пошуковій видачі. На основній сторінці розміщуємо максимум функціоналу, інформації і інших «плюшок» для користувачів (не забуваємо рекламу, монетизуватися як потрібно).
У «підвалі» сторінки є посилання на мобільну версію, і крім того, при заході з мобільника на основну сторінку відбувається автоматичне перенаправлення на мобільну версію. Тому в пошуковій видачі Гугла на мобільних пристроях буде показана саме посилання на мобільну версію. У мобільній версії зменшуємо число додаткового контенту і реклами, що зумовлено меншим розміром екрану і більш повільним інтернетом.
На AMP-версію вказує тег <link rel=”amphtml”> в коді основної сторінки:
<link href=”http://m.lenta.ru/news/2016/01/16/falcon/amp/” rel=”amphtml” />
При індексації основної сторінки Гугл «побачить» цю посилання і проіндексує зазначену AMP-сторінку, щоб потім показувати саме її у своєму новинному слайдері AMP-сторінок на першій сторінці мобільного пошукової видачі (у разі релевантності пошуковому запиту).
Таким чином, lenta.ru видає 3 різних версії однієї і тієї ж сторінки під різні типи цільової аудиторії (версії різні по функціоналу, незмінним залишається тільки основний контент).
Важливо: На всіх трьох сторінках вказано тег <link rel=”canonical”> з адресою основної сторінки, щоб уникнути дублювання контенту:
<link href=”http://lenta.ru/news/2016/01/16/falcon/” rel=”canonical” />
Впроваджуємо AMP на сайт
Створити AMP-версію свого сайту не так вже й складно (при наявності грамотного фахівця). Потрібно створити окремий шаблон для сайту з використанням необхідних тегів специфікації AMP. Потім вручну робити AMP-версію кожної нової сторінки за готовим шаблоном. Або налаштувати автоматичну генерацію AMP-сторінки засобами своєї CMS.
Тим, чиї сайти зроблені на WordPress, пощастило, в останню версію цієї системи підтримка AMP-шаблонів вже вбудована.
Також слід розуміти, що немає необхідності переводити всі сторінки сайту AMP-формат. Це стосується тільки тих сторінок, основний цінністю яких є контент (в основному, це статті).
Якщо ви хочете додати AMP-версію для свого сайту, але важко це зробити – пишіть, ми постараємося вам допомогти. А може, ваш сайт взагалі не адаптований під мобільні? Тоді тим більше пишіть, порадимо, що можна зробити.
Підсумок
AMP – нова розробка, спрямована на прискорення завантаження контенту на мобільних пристроях. Річ досить специфічна, для тих, хто заробляє контентом.
Активно підтримується поки тільки Гуглом. В російськомовну версію видачі Гугла AMP-сторінки ще не входять (хоча це лише питання часу). А ось ставлення Яндекса до AMP-сторінок не відомо.
Висновок: поки не зрозуміло, «вистрілить» чи ні. Але підтримка з боку не самого останнього пошуковика дозволяє думати, що все-таки «вистрілить». Час покаже. Але якщо AMP підходить вашому сайту, є час і ресурси, чому б не підготувати сани влітку сайт заздалегідь ))
