AMP сторінки для Google і Яндекс Турбо: все, що потрібно знати

    amp страницы google

    У цій статті ми розглянемо, що таке AMP сторінки в пошуковій системі Google, а також надамо коротку інформацію про те, як працюють турбо сторінки Яндекс.

    Що таке AMP сторінки?

    В кінці січня 2016 року у Google Search Console з’явилася нова опція, що дозволяє прискорити мобільні сторінки AMP. До цього моменту з’являлося мало інформації про подібне прискорення. Це дуже доступна платформа для створення мобільних веб-сайтів, які швидко завантажуються. Ініціатива з відкритим вихідним кодом спрямована на те, щоб програмісти могли легко збільшити швидкість (а, отже, зручність для користувачів) читачів на мобільних пристроях, не жертвуючи при цьому рекламним доходом, на який вони можуть розраховувати.

    Додаткова перевага, яку відкривають AMP сторінки, полягає в зниженні показника відмов, викликаного повільним завантаженням сторінок і контенту, незалежно від того, чи доступний контент на мобільних пристроях, ПК або ноутбуках.

    Хоча досвідчені програмісти часто досягають аналогічних результатів за рахунок інтенсивної оптимізації продуктивності, замовники часто ігнорують це через брак ресурсів. AMP дозволяє легко отримати ці оптимізації без зміни основної роботи мобільної версії.

    Ще один плюс – майбутнє використання Google і іншими великими компаніями з індустрії інтернет-технологій, які заохочують саме AMP сторінки, в значній мірі інтегруючи інструмент на свої платформи.

    amp сторінки

    Як працюють AMP сторінки Google?

    Прискорені мобільні сторінки (AMP) працюють як будь-яка інша сторінка на основі HTML, але з тією різницею, що існують деякі обмеження на певні елементи HTML, які заборонені або можуть використовуватися тільки в конкретних випадках. Прискорення AMP, як годиться, функціонує у всіх сучасних браузерах.

    Інструмент працює з використанням різних технічних елементів, що надаються браузерами і серверами, що збільшує швидкість завантаження сторінок, і в результаті поліпшує користувальницький досвід.

    По суті, основа для створення мобільних веб-сайтів, AMP складається з трьох основних частин:

    amp сторінка як зробити

    • AMP HTML: дана мова розмітки має деякі призначені для користувача теги і властивості, а також безліч обмежень. Але якщо ви знаєте простий HTML, не важко налаштувати існуючі сторінки на AMP HTML. Для отримання додаткової інформації про те, чим він відрізняється від базового HTML, перевірте список обов’язкових елементів бренду AMP Project, які повинні містити сторінку AMP HTML.
    • AMP JS: JavaScript-фреймворк для мобільних сайтів. У більшості випадків він керує підтримкою ресурсів і асинхронного завантаженням. Зверніть увагу, що стороння підтримка JavaScript не дозволена для AMP.
    • AMP CDN: додаткова мережу доставки контенту буде приймати сторінки з підтримкою AMP, кешувати їх і автоматично оптимізувати продуктивність.

    AMP сторінка: як зробити?

    1. Спочатку ви повинні зберегти як мінімум дві версії будь-якої сторінки: оригінальну версію сторінки сайту, яку зазвичай бачать користувачі, і версію AMP цієї сторінки.
    2. Оскільки AMP не допускає використання таких елементів, як сторонні форми і елементи JavaScript, у вас, ймовірно, не буде провідних форм, коментарів на сторінці та деяких інших елементів, які використовуються на ресурсі в стандартній реалізації.
    3. Також цілком можливо, що доведеться переписати шаблон сайту, щоб врахувати обмеження. Наприклад, всі CSS в AMP повинні бути в рядку і мати розмір менше 50 КБ. Через інтенсивність завантаження призначених для користувача шрифтів вони повинні завантажуватися з використанням спеціального розширення шрифту.
    4. До мультимедіа потрібно ставитися особливо уважно. Наприклад, зображення повинні використовувати користувальницький елемент amp-img і мати чітку ширину і висоту. (При перетворенні старого сайту в шаблон AMP це може стати серйозною проблемою, якщо атрибути width і height більше не використовуються). Крім того, якщо ваші зображення представляють собою анімовані GIF-елементи, необхідно використовувати окремий розширений компонент amp-anim.
    5. Як і в ситуації з зображеннями, існує спеціальний тег, який необхідно використовувати для вбудовування локально розміщених відео через HTML5, званий відеопідсилювачем. Проте, при встановленні відео на YouTube, який становить більшу частину веб-відео, є окремий розширений компонент amp-youtube.
    6. Існує також підтримка таких речей, як слайд-шоу через amp-carousel і лайтбокси зображень через amp-image-lightbox, а також соціальні мережі в Twitter, Instagram, Facebook, Pinterest та Vine через їх власні розширені компоненти.

    Ці теги і розширені компоненти не складні у використанні. Вони вимагають лише невеликого планування в дизайні сайту.

    Щоб Google (і інші технології, що підтримують AMP) могли визначати версію вашої AMP сторінки, потрібно змінити вихідну версію коду. Код оригінальної сторінки повинен містити наступний тег:

    <link rel = “amphtml” href = “http://www.example.com/blog-post/amp/“>

    На сайті AMP Discovery також згадується, що для деяких платформ з підтримкою AMP потрібні метадані Schema.org для визначення типу вмісту сторінки. (В даний час «article», «recipe», «review» і «video» перераховані як приклади типів сторінок на GitHub.)

    Більш того, це також означає, що метадані Schema.org необхідні для того, щоб ваш контент міг відображатися у видачі в Пошуку Google.

    Так що, якщо ви намагаєтеся отримати майбутні переваги від Google за допомогою AMP, переконайтеся, що ви провели всі роботи по ресурсу!

    Як заробити на рекламі AMP?

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

    монетизація amp сторінок

    Збільшення кількості блокуючих оголошень заважає видавцям монетизувати свої сайти. Для деяких користувачів скорочення часу завантаження сайту є стимулом для використання блокування реклами, яка може допомогти збільшити швидкість перегляду. AMP можна розглядати як відповідь на цю проблему.

    Проект має на меті «Прискорені мобільні сторінки AMP» – забезпечити ефективну монетизацію реклами в мобільній мережі за допомогою орієнтованого на користувача підходу. У цьому контексті мета полягає в тому, щоб забезпечити підтримку широкого спектру рекламних форматів, рекламних мереж і технологій на прискорених мобільних веб-сайтах.

    В результаті багато з найпопулярніших рекламних мереж зараз використовують розширений компонент amp-ad (з більшою сумісністю).

    Якщо ваша монетизація складніша – з використанням платних мереж або підписок – документація доступна для реалізації в AMP з використанням розширення «AMP Access».

    Чи є у AMP аналітика?

    Так. Насправді, аналіз AMP дуже інтелектуальний. Щоб запобігти уповільненню роботи сайту багатьма аналітичними системами, тут застосовується спеціальні інструменти. Існує два шляхи включення аналітичних функцій AMP для сайту:

    1. Елемент Amp-Pixel: це простий тег, який можна використовувати для підрахунку переглядів сторінок, як у випадку звичайного пікселя відстеження, з використанням запиту GET. Через нього можна передати багато змінних, таких як DOCUMENT_REFERRER і Title.

    amp pixel

    1. Компонент Extended Amp-Analytics: він трохи більш просунутий, ніж піксель. Для реалізації ви, ймовірно, будете використовувати аналітику на своєму сайті, оскільки вона забезпечує більш високий рівень конфігурації для аналітичних взаємодій.

    Як буде виглядати AMP в Google?

    amp сторінки гугл

    У мобільній пошуковій системі значок AMP вказує користувачам веб-сайти, які відкриваються швидко і ефективно. Коли користувачі вибирають сторінку AMP, Google Search витягує її з кеша сторінок Google AMP і надає різні способи оптимізації завантаження (наприклад, попередній рендеринг), завдяки чому сторінки відображаються негайно. В даний час сторінки на робочий стіл AMP не містять розширених функцій (таких як каруселі та логотипи AMP) і не відображаються на рівні кеша сторінок AMP Google або браузера AMP. Канонічні сторінки AMP нагадують стандартні результати пошуку.

    AMP-сторінки в результатах пошуку Google

    Вміст AMP може з’являтися в результатах пошуку Google у вигляді каруселі або результатів з розширеними елементами. Карусель – це контейнер для багатьох результатів з розширеними елементами одного типу. В рамках однієї каруселі ви також можете переглядати рецепти, статті та візуальні матеріали з різних веб-сайтів (наприклад, найважливіші статті). Результат з розширеними елементами включає в себе стиль, зображення та інші функції.

    Яндекс Турбо – оперативна відповідь ПС Google

    amp сторінки google

    Пошукова система Яндекс не змусила себе довго чекати і вже в листопаді 2017 року оголосила про запуск Турбо-сторінок. Проект передбачає аналогічну ціль, що і у випадку з AMP. Миттєва швидкість завантаження, зниження навантаження на хостинг, доступність 24/7 (навіть, якщо немає відповіді від основного сайту), значок ракети – основні переваги. Крім них варто згадати і про недоліки: однотипність сайтів, відсутність можливості оформлення замовлення. Створення Турбо сторінок Яндекс – хороший варіант для інформаційних ресурсів з великою кількістю статей.

    Висновок

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

    Поділитися:
    16.04.2019
    81

    Дивіться свіжі кейси:

    SEO кейси від НАС!

    Останні пости: