Як правильно налаштувати WordPress AMP

1. Що таке WordPress AMP і чим він корисний для вашого сайту
2. Як встановити WordPress AMP за допомогою двох плагінів
3. Варіант 1: Використовуємо плагін AMP для WordPress
4. Варіант 2: Установка плагіна AMP для WP - Прискорені мобільні сторінки
5. висновок

Згідно з дослідженнями проведеним Google, більше 50% пошукових запитів по всьому світу проводяться з мобільних телефонів. У зв'язку з цим варто переконатися, що ваш сайт на WordPress завантажується швидко і виглядає пристойно для цієї категорії виробляють пошук користувачів. На щастя, проект Google Accelerated Mobile Pages (AMP) робить цю задачу легше здійсненним.

У цьому керівництві ми розповімо, як встановити WordPress AMP двома способами:

1. використовуючи плагін AMP for WordPress .
2. через плагін AMP для WP - Прискорені мобільні сторінки .

Ми також пояснимо, що таке WordPress AMP і обговоримо, як перевірити їх коректність роботи після установки. Занурюємося!

Що таке WordPress AMP і чим він корисний для вашого сайту

Google Accelerated Mobile Pages (AMP) - це бібліотека з відкритим програмним кодом, яка допомагає створити швидкі, плавно прокручуваний і спрощені версії ваших веб-сторінок, які чудово виглядають на мобільних пристроях. AMP дуже дружелюбна, побудована на існуючих платформах і фреймворками . До того ж, вона повністю сумісна з WordPress.

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

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

• Поліпшення пошукової оптимізації (SEO). Найбільш очевидною перевагою Google AMP є приріст швидкості. Так як швидкість - це критичний фактор , Коли мова йде про рейтинг ваших сторінок в результатах пошуку (Search Engine Results Pages - SERPs), це може допомогти зробити ваш сайт більш помітним. Google AMP гарантує, сторінки вашого сайту будуть показані в новинний каруселі Google (Google News carousel), в пріоритетному положенні вгорі в що не вимагає прокрутки області результатів пошуку на мобільних (ще більше підвищує SEO позиції).
• Покращений інтерфейс користувача. Було підраховано, що 33% всіх потенційних продажів губляться , Якщо сайт не оптимізований під мобільні пристрої. Ще більш тривожні результати досліджень показують, що 57% користувачів інтернету не стануть рекомендувати бізнес з сайтом, який не адаптований для мобільних пристроїв. Google AMP робить таку оптимізацію простий і можливої ​​і тим самим дозволяє уникнути цієї небезпеки.
• Підвищена продуктивність сервера. Google AMP отримує вигоду з деяких ключових функцій оптимізації Google. Зменшує трафік від зображень до 50% без втрати якості і знижує навантаження на роботу сервера. Знижуючи навантаження на сервер, AMP допомагає поліпшити продуктивність вашого сайту.

З іншого боку, у Google AMP є і свої недоліки:

• Обмеження каскадних таблиць стилів (Cascading Style Sheets - CSS) і JavaScript. Хоча Google AMP дозволяє вам досягти блискавичного часу завантаження, це може вам коштувати окремих елементів сайту. AMP видалить графіку дуже високої якості, складну анімацію та інші яскраві елементи, які використовують CSS і JavaScript.
• Відображаються лише сторінки з кешу. Висока швидкість Google AMP також є наслідком того, що Google включає відображення версії ваших сторінок з кешу . З цієї причини ваші користувачі не завжди зможуть отримати доступ до останніх версій контенту.
• Обмежені можливості доступу до рекламних оголошень. Не дивлячись на те, що Google AMP підтримує рекламу , Процес її опису дуже складний. Він також має обмежені можливості інтеграції з зовнішніми рекламними платформами.

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

У наступному розділі ми опишемо два методу установки WordPress AMP за допомогою декількох зручних плагінів для прискорення мобільних сторінок в WordPress.

Як встановити WordPress AMP за допомогою двох плагінів

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

Варіант 1: Використовуємо плагін AMP для WordPress

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

Перш, перейдіть в Модулі> Додати новий в своїй консолі адміністрування WordPress. Введіть "AMP for WordPress" в рядку пошуку і знайдіть плагін AMP для WordPress. потім встановіть і активуйте його:

Далі перейдіть в розділ Зовнішній вигляд> AMP. Це відкриє сторінку налаштувань AMP. Тут виберіть вкладку Design:

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

Ще ви можете встановити, де записи, сторінки або і ті й інші будуть розташовуватися в WordPress AMP. Щоб це зробити, просто поверніться в консоль WordPress і перейдіть в AMP> General:

На цій сторінці відзначте поруч з налаштуванням Post Type Support ті види публікацій, які ви хотіли б бачити на сайті WordPress AMP і натисніть на Save Changes.

Ви, напевно, звернули увагу, що тут не так вже й багато налаштувань. На щастя, є кілька плагінів, які ви можете використовувати для розширення вашого вибору. Наприклад, ви можете використовувати Glue for Yoast SEO & AMP для інтегрування з плагіном Yoast SEO з вашої установкою AMP.

Перейдіть в Модулі> Додати новий, знайдіть, встановіть і активуйте Yoast SEO:

Після цього зробіть те ж саме з плагіном Glue for Yoast SEO & AMP. Потім перейдіть в SEO> AMP в адмін консолі. Тут ви можете вибрати, чи хочете ви включити записи і медіа типи даних в підтримку AMP:

Після цього натисніть кнопку Save changes. Додаткові настройки можна знайти на вкладці Design. Тут ви можете встановити іконку для сайту WordPress AMP, підібрати колірну схему і навіть додати свій CSS:

І ще раз не забудьте зберегти зміни, коли ви закінчите настроювання свого сайту.

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

Варіант 2: Установка плагіна AMP для WP - Прискорені мобільні сторінки

На додаток для забезпечення привабливого і зручного для початківців інтерфейсу налаштування сторінок цей плагін WordPress AMP може інтегруватися з безліччю інших інструментів. Серед них: WooCommerce (Провідний плагін для електронної комерції в WordPress), Alexa metrics , OneSignal push button notifications та інші.

Для використання цього плагіна AMP для WordPress, спочатку потрібно перейти в Модулі> Додати новий у вашій консолі. Знайти "AMP for WP", встановити і активувати плагін:

Далі перейдіть на нову вкладку AMP в адмін панелі WordPress. Ви побачите підпункти меню з розділами Settings, Design, Extensions і інші. Давайте докладніше розглянемо настройки в Settings:

Швидше за все ви захочете почати з розділу керівництва з посиланнями Getting Started на цій сторінка. Це допоможе вам найкращим чином налаштувати свій WordPress AMP. Після цього, ви можете запускати різні опції AMP для WP, включаючи:

• SEO: Це включає настройки мета опису, інтеграцію з плагінами SEO та інше.
• Performance: Це єдина настройка включає і вимикає мініфікацію файлів. Мініфікація може поліпшити швидкість роботи вашого сайту.
• Analytics: Тут ви можете налаштує інтеграцію з Google Tag Manager , Також як і налаштування аналітики.
• Comments: Це дозволяє налаштувати чи хочете ви включити коментарі WordPress, Disqus або Facebook в своєму WordPress AMP.
• Advanced Settings: Ви можете вводити свій HTML код для заголовка або підвалу, встановити мобільне перенаправлення і включити або виключити retina images .

Натисніть на Save Changes для кожної настройки вище, як тільки ви закінчите з нею. Після цього виберіть вкладку Design:

Власне тут ви можете керувати зовнішнім виглядом свого сайту WordPress AMP. Для цього виберіть конкретну тему AMP зі списку в меню Theme Selector.

Після вибору теми ви можете налаштовувати її зовнішній вигляд. Ви знайдете налаштування дизайну для колірної схеми і шрифту (вкладка Global), вибір відображення заголовка і підвалу, слайдер на головній сторінці та багато іншого. У розділі Social ви можете також вибрати, які кнопки соціальних сійте ви бажаєте відображати на своєму сайті WordPress AMP.

Якщо ви задоволені виглядом свого AMP-сайту, збережіть всі зміни. Ви також можете попередньо їх подивитися, якщо перейдете в Appearance> AMP:

Безкоштовна версія AMP для WP містить широкий набір функцій. Однак, ви можете значно поліпшити зовнішній вигляд і функціональність вашого сайту AMP з платними розширеннями. Є розширення для опису рейтингу (буде корисним для товарів або профілів нерухомості), інтеграції з AMP WooCommerce Pro , Використання призначених для користувача типів записів і іншого:

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

Якщо ви бажаєте спробувати ще більше додаткових функцій, то для вас цілий ряд тарифних планів Pro plans доступних для цього плагіна. Діапазон від плану Personal (обслуговування одного сайту за $ 149 на рік) до плану Agency (обслуговування необмеженої кількості сайтів за $ 499 на рік).

Коли ви налаштували будь-який з плагінів AMP для WordPress, ви підійшли до ще одного кроку. Вам потрібно перевірити роботу WordPress AMP, щоб переконатися, що він доступний і залінкован на supported platforms . Перевірка - це також зручний шлях подивитися помилки AMP з метою їх усунення.

Один їх швидких і простих способів перевірити AMP - використовувати інструмент розробника в браузері. Для цього вам потрібно перейти на сторінку AMP в вашому браузері (в нашому прикладі ми використовуємо Google Chrome). Далі вам потрібно додати наступне в кінці URL:

# development = 1

Як тільки ви це зробите, відкрийте консоль інструментів розробника в браузері. Для Google Chrome це Chrome DevTools console . Якщо знайдені помилки, вони будуть підсвічені червоним, разом з аналізом їх причин.

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

Інший ефективний спосіб перевірки AMP - використання розширення AMP Validator для Google Chrome і Opera :

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

висновок

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

Залишилися питання про те, як встановити будь-якої плагін WordPress AMP? Дайте нам знати в коментарях!