Навіщо вам потрібен 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 у російськомовній версії його немає. Ждемс..

Читайте також  Що таке CTA: справжній гіпноз в текстах що продають

Ті, хто хоче вже зараз «помацати» руками російськомовну видачу з AMP-сторінками, тримайте інструкцію:

  • З планшета або смартфона заходимо на адресу http://g.co/ampdemo. Відкриється пошук Гугла, але з вже включеною підтримкою AMP.
  • Вбиваємо в пошуковому рядку запит «новини дня» (або просто «новини») – профіт! У блоці «Головні новини» бачимо картки з поміткою «AMP», клацаємо, насолоджуємося ))

Ще один нюанс: Якщо Гугл не знайшов достатню кількість AMP-сторінок, які відповідають введеному запиту, то такі картки показані не будуть. Наприклад, за запитом «новини спорту» нічого подібного поки що немає.

Кому потрібні AMP-сторінки

Корисність AMP-сторінок можна розглянути з двох точок зору:

1. Якщо дивитися з точки зору користувача, то таке «швидке» відображення контенту прямо у пошуковій видачі (без додаткових очікувань і переходів на сайти) дуже зручно для людей, які звикли отримувати інформацію переважно з мобільного пристрою. А кількість таких людей з кожним днем лише зростає.

2. Якщо ж дивитися з точки зору бізнесу, то проект AMP буде корисний тільки тим, у кого в основі бізнесу лежить контент – це новинні сайти, інтернет-журнали, блоги, навчальні портали і т. п.

Так що якщо ваш бізнес – це продаж автомобільних шин, то переводити картки товарів на AMP абсолютно безглуздо. Але якщо при цьому ви ведете свій блог з унікальними статтями на різні теми авто індустрії, то зробити для нього AMP-версію буде далеко не зайвим. Як ви бачили на скріншотах вище, картки з відповідними AMP-сторінками відображаються на самому початку пошукової видачі – а чи не це мрія будь-якого власника сайту.

Розрахуйте вартість додавання та налаштування полегшених мобільних сторінок для Яндекса і/або Google. Запитати розрахунок ».

Як влаштований AMP

Тепер, коли ми показали, як це виглядає, можна коротко розповісти про те, як це влаштовано.

По суті, AMP – це лише ще один набір скриптів і правил для відображення веб-сторінок. Наприклад, в розробці сайтів давно використовується готовий набір скриптів (так звана «бібліотека») з назвою jQuery – завдяки їй, верстальщику не треба кожен раз заново програмувати слайдери або, скажімо, модальні віконця. Верстальник просто бере готовий код з бібліотеки і налаштувати його параметри під конкретний сайт.

Але проект AMP має кілька відмінностей від існуючих бібліотек:

1. У ньому залишений тільки той код, який потрібен для швидкого відображення контенту (завантаження картинок по мірі прокручування сторінки, слайдери, завантаження повідомлень з соц. мереж, модальні вікна). Як говориться, нічого зайвого.

Читайте також  Поради по SEO при редизайні із збереженням позицій

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/. Саме ця сторінка бере участь в основній пошуковій видачі. На основній сторінці розміщуємо максимум функціоналу, інформації і інших «плюшок» для користувачів (не забуваємо рекламу, монетизуватися як потрібно).

Читайте також  Інструменти та програми в допомогу SEO-оптимізатору

У «підвалі» сторінки є посилання на мобільну версію, і крім того, при заході з мобільника на основну сторінку відбувається автоматичне перенаправлення на мобільну версію. Тому в пошуковій видачі Гугла на мобільних пристроях буде показана саме посилання на мобільну версію. У мобільній версії зменшуємо число додаткового контенту і реклами, що зумовлено меншим розміром екрану і більш повільним інтернетом.

На 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 підходить вашому сайту, є час і ресурси, чому б не підготувати сани влітку сайт заздалегідь ))

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *