Як швидко налаштувати AMP на WordPress

  1. Що таке AMP-сторінки? AMP-сторінка, це оптимізована сторінка, яка прискореного спеціально для мобільних...
  2. Як налаштувати AMP на WordPress сайті?
  3. Крок # 1: Встановіть плагін «Accelerated Mobile Pages (AMP) Project»
  4. Крок # 2: Встановіть плагін Yoast Glue Plugin
  5. Крок # 3: Додавання AMP сторінок в Search Console
  6. Як відстежувати прискорені мобільні сторінки (AMP)
  7. висновок

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

AMP-сторінка, це оптимізована сторінка, яка прискореного спеціально для мобільних пристроїв. Це HTML сторінка з відкритим вихідним кодом, яка оптимізована для пристроїв з маленьким екраном, навіть якщо вона містить відео або рекламу.

AMP сторінки зберігаються в окремому кеші Google і тому у них більш висока швидкість завантаження. Google вперше анонсував Accelerated Mobile Pages - Прискорені сторінки для мобільних пристроїв в жовтні 2015 року.

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

Обмеження для AMP сторінок:

  • Тільки асинхронні скрипти
  • Не можна описувати стилі за допомогою «style» за місцем застосування, всі вони повинні бути описані в HTML файлі в тезі «style amp-custom»
  • Обмеження на розмір стилів в 50 КБ
  • Параметри «width» і «height» зовнішніх ресурсів, таких як картинки, повинен бути зазначений усередині html
  • Обмеження на Javascript, можна використовувати тільки підтримувану бібліотеку AMP JS
  • Шрифти повинні бути завантажені за посиланням або в CSS-конструкції @ font-face

Навіщо вам AMP?

Швидкі сторінки - щасливі відвідувачі. Щасливі відвідувачі частіше залишаються на сайті, читають і взаємодіють контентом. Google любить таку поведінку.

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

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

Як налаштувати AMP на WordPress сайті?

Налаштування AMP сторінок, на багато легше, ніж багато хто думає. Дотримуйтесь цих інструкцій, щоб реалізувати AMP на вашому WordPress сайті.

Крок # 1: Встановіть плагін «Accelerated Mobile Pages (AMP) Project»

Це безкоштовний плагін AMP від ​​Automattic. Для установки заходимо в Модулі> Додати новий і шукаємо плагін «Accelerated Mobile Pages (AMP) Project», він підтримує останню версію WordPress 4.6.1.
Це безкоштовний плагін AMP від ​​Automattic
Після того, як ви його активуєте, він відразу ж створить AMP сторінки на сайті. Що б перевірити, додайте в кінці адреси будь-якої сторінки / amp /.

Так само вам не варто побоюватися дублювання контенту плагін автоматично додати в код вашої сторінки:

<Link rel = "amphtml» href = https: //www.example.com/page/amp/ »/>

А на AMP сторінку додасть:

<Link rel = "canonical» href = "https://www.example.com/page/amp/» />

Крок # 2: Встановіть плагін Yoast Glue Plugin

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

Плагін Yoast Glue Plugin інтегрує основні SEO мета-дані на сторінки AMP і дозволяє налаштовувати їх оформлення.
Плагін Yoast Glue Plugin інтегрує основні SEO мета-дані на сторінки AMP і дозволяє налаштовувати їх оформлення
Після того, як ви встановили та активували плагін, перейдіть в Yoast SEO> AMP в панелі управління WordPress. У вкладці «Design» ви можете завантажити лого, налаштувати основні кольори.

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

На даний момент у вас вже є дві версії сторінок. Версія AMP урізання. На ній немає Хідер, розширень соціальних мереж, коментарів і меню.

Крок # 3: Додавання AMP сторінок в Search Console

Після того, як ви реалізували AMP і налаштували їх, прийшов час перевірити, що б Google зауважив ваші зусилля. Увійдіть в Google Search Console і натисніть Вид в пошуку> Прискорені мобільні сторінки (AMP).
Тут можна перевірити AMP сторінки:

  • Кількість проіндексованих прискорених мобільних сторінок (AMP)
  • Кількість AMP-сторінок з помилками (без попереджень).

Кількість проіндексованих прискорених мобільних сторінок (AMP)   Кількість AMP-сторінок з помилками (без попереджень)

Будь-які помилки в AMP будуть відображатися в цьому звіті. При виникненні помилок просто натисніть кнопку, щоб з'ясувати, що викликає помилку. Це може бути скрипт або плагін. Усуньте проблему, а потім запустити AMP валідатор, за посиланням:
https://validator.ampproject.org/#url= <url_страніци>

приклад:

https://validator.ampproject.org/#url=http://www.example.com/myamp

Як відстежувати прискорені мобільні сторінки (AMP)

Стандартний код лічильників можна встановити на AMP сторінки, на даний момент є можливість установки лічильника Google Analytics. ось офіційне керівництво по налаштуванню на Developers.google і детальний розбір в блозі Netpeak . Metrika не встановлюється на AMP, але швидше за все Yandex скоро запровадить цю можливість.

висновок

Ось і все, це просте трьох крокова керівництво по створенню AMP-сторінок на WordPress сайті. Якщо у вас не WordPress, не хвилюйтеся. є докладний керівництво створенню AMP сторінок . Це буде не так просто, як в WordPress, але воно того варте.)

Залишилися питання? Задавайте!

Читайте також: Google Search Console: Фільтр AMP показує дані лише з розділу «Головні новини»

Що таке AMP-сторінки?
Як налаштувати AMP на WordPress сайті?
Як налаштувати AMP на WordPress сайті?
Залишилися питання?