7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Інтеграція  AMP в WordPress

Scroll to top
Read Time: 7 mins

Ukrainian (українська мова) translation by Pembelight (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Що таке AMP?

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

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

AMP for WordPress - AMPed Google Search Results on MobileAMP for WordPress - AMPed Google Search Results on MobileAMP for WordPress - AMPed Google Search Results on Mobile

Чесно кажучи, я скептично ставлюся щодо AMP для блогерів і малих видавців. Ми пишемо чудовий контент з метою видачі в топі результатів Google Search.  Тепер для того, щоб наш контент вийшов в топ, для наших обмежених ресурсів потрібно впровадити ще одну технологію.  Цікаво, що в цей самий час, в топі результатів пошуку я не бачу статтей з AMP від великих медіа-видавців та інших блогерів WordPress:

AMP for WordPress - WordPress Codex Users Not Seeing Posts in Search ResultsAMP for WordPress - WordPress Codex Users Not Seeing Posts in Search ResultsAMP for WordPress - WordPress Codex Users Not Seeing Posts in Search Results

Я також підозрюю, що вплив UX допоможе Google розмістити всі інші результати пошуку під слайдером.

Працюючи у Microsoft у 1995 році, я допомагав запустити MSN News як частину мережі MSN Online на основі Windows 95, відповідь від Microsoft до AOL.  MSN News потребував користувальницького додатку для перегляду, який працював би на версії платформи Microsoft Media Viewer, медіа програвача з можливістю записів на CD.  Але протягом року ми були змушені переорієнтуватися на Інтернет у зв'язку зі злиттям з NBC - в результаті ми стали MSNBC.com. Тоді ми  повинні були створювати одночасно публікації у форматах Media View і HTML.  Це створило безліч нових складностей. 

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

Безкоштовний плагін WordPress AMP

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

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

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

Як виглядає AMP на WordPress?

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

Зображення сторінки на HTML5 сайту JeffReifman.com:

AMP for WordPress - Jeff Reifman Home Page Without AMPAMP for WordPress - Jeff Reifman Home Page Without AMPAMP for WordPress - Jeff Reifman Home Page Without AMP

Ось такий тег <link> прописується в <head> кожної сторінки, тим самим повідомляє пошуковим системам, що це AMP сторінка.

Але також прописано канонічне посилання, яке визначає URL-адресу цієї сторінки:

Зображення сторінки AMP на сайті JeffReifman.com:

AMP for WordPress - Jeff Reifman Home Page With AMPAMP for WordPress - Jeff Reifman Home Page With AMPAMP for WordPress - Jeff Reifman Home Page With AMP

Меню, навігація та лого завантажилися моментально, (незважаючи на їх функціональність), сторінка завантажується швидко.

Дозвольте мені показати, як активувати AMP на WordPress.

Плагін AMP WordPress

AMP for WordPress - the Plugin Home PageAMP for WordPress - the Plugin Home PageAMP for WordPress - the Plugin Home Page

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

Просто перейдіть на вкладку Plugins > Add New та знайдіть AMP.   Потім натисніть кнопку Install Now:

AMP for WordPress - Search for AMP plugin and Install buttonAMP for WordPress - Search for AMP plugin and Install buttonAMP for WordPress - Search for AMP plugin and Install button

Після встановлення натисніть кнопку Activate:

AMP for WordPress - Activate the AMP pluginAMP for WordPress - Activate the AMP pluginAMP for WordPress - Activate the AMP plugin

Після активації, просто відвідайте будь-який пост у вашому блозі WordPress за допомогою /amp/ розширення.  Наприклад, повідомлення про шахрайство Amazon Marketplace Made Easy - це один з моїх найпопулярніших результатів пошуку Google.  Ось як це виглядає при відвідуванні версії AMP на сторінці http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:

AMP for WordPress - An example JeffReifmancom page with AMPAMP for WordPress - An example JeffReifmancom page with AMPAMP for WordPress - An example JeffReifmancom page with AMP

Плагін Glue for Yoast SEO & AMP 

Загальний плагін AMP для ​​WordPress пропонує декілька налаштувань.  Розробники Yoast SEO створили додаток для свого популярного плагіна, який ще більше підсилює підтримку AMP.

AMP for WordPress - Glue for Yoast SEO AMP Plugin HomepageAMP for WordPress - Glue for Yoast SEO AMP Plugin HomepageAMP for WordPress - Glue for Yoast SEO AMP Plugin Homepage

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

AMP for WordPress - Glue for Yoast SEO AMPAMP for WordPress - Glue for Yoast SEO AMPAMP for WordPress - Glue for Yoast SEO AMP

Примітка: Переконайтеся, що у вас завчасно встановлений плагін SEO Yoast WordPress SEO.

Ви можете змінити налаштування AMP за допомогою меню бокової панелі Yoast SEO - натисніть AMP у нижній частині меню:

AMP for WordPress - Glue for Yoast SEO AMP MenuAMP for WordPress - Glue for Yoast SEO AMP MenuAMP for WordPress - Glue for Yoast SEO AMP Menu

Ви побачите різні способи, якими плагін Glue дозволяє поліпшити реалізацію AMP.

По-перше, Yoast дозволяє розширити функціональність AMP на сторінки та інші типи сторінок WordPress.  Функція AMP за умовчанням змінює лише публікації, які є чутливими відповідно до часу їх створення:

AMP for WordPress - Glue for Yoast SEO AMP Post Types TabAMP for WordPress - Glue for Yoast SEO AMP Post Types TabAMP for WordPress - Glue for Yoast SEO AMP Post Types Tab

Примітка: Якщо під вкладками відображаються порожні сторінки, переконайтеся, що ваш плагін Yoast SEO оновлений, якщо ні, то виправіть це.

По-друге, Yoast пропонує кілька корисних способів налаштування брендингу, дизайну та кольорової схеми:

AMP for WordPress - Glue for Yoast SEO AMP Design TabAMP for WordPress - Glue for Yoast SEO AMP Design TabAMP for WordPress - Glue for Yoast SEO AMP Design Tab

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

AMP for WordPress - Glue for Yoast SEO AMP Analytics TabAMP for WordPress - Glue for Yoast SEO AMP Analytics TabAMP for WordPress - Glue for Yoast SEO AMP Analytics Tab

Ось тут  я знайшов версію AMP коду для інтеграції в Google Analytics; просто налаштуйте код облікового запису для свого веб-сайту:

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

Загалом, налаштовувати плагін - це типу легко.  Але не завжди.

Налагодження помилок AMP

Через кілька днів після встановлення AMP, я отримав електронний лист від Google Search Console, яка повідомляла про 10 сторінок з помилками.  Але насправді, кожний моя AMP публікація була з помилками.

AMP for WordPress - Email from Google Search ConsoleAMP for WordPress - Email from Google Search ConsoleAMP for WordPress - Email from Google Search Console

Я залогінився до Google Search Console, щоб переглянути сторінки з помилками та побачив таке:

AMP for WordPress - List of Pages with AMP Errors in Google Search ConsoleAMP for WordPress - List of Pages with AMP Errors in Google Search ConsoleAMP for WordPress - List of Pages with AMP Errors in Google Search Console

Я натиснув одну з сторінок:

AMP for WordPress - Page Detail of AMP Error in Google Search ConsoleAMP for WordPress - Page Detail of AMP Error in Google Search ConsoleAMP for WordPress - Page Detail of AMP Error in Google Search Console

Потім я натиснув кнопку Open Page і більш детально переглянув помилки. По суті, ви можете зробити це вручну, додавши /amp#development=1 до URL, наприклад: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential- theft / amp / # development = 1.  А потім відкрийте консоль JavaScript у браузері.

AMP for WordPress - JavaScript Console Showing AMP Page with ErrorAMP for WordPress - JavaScript Console Showing AMP Page with ErrorAMP for WordPress - JavaScript Console Showing AMP Page with Error

Виявляється, всі мої сторінки з підтримкою AMP веб-сайту JeffReifman.com зламані через помилку: The tag 'script' is disallowed except in specific forms.  Проте PublishingwithWordPress.com таких помилок не виявив:

AMP for WordPress - JavaScript Console Showing AMP page without errorsAMP for WordPress - JavaScript Console Showing AMP page without errorsAMP for WordPress - JavaScript Console Showing AMP page without errors

У наступному уроці на Envato Tuts +, я розкажу, як мені вдалося налаштувати JeffReifman.com для досягнення Google PageSpeed ​​100.  Для цього я використав спеціальні можливості W3 Total Cache для розміщення деяких мінімізованих функцій JavaScript внизу сторінки перед </body>. Для AMP оптимізації дане питання має бути вирішеним, а плагін WordPress AMP цього зробити не може.

Мені потрібно більше дослідити та  визначити, чи буде W3 Total Cache вимикати AMP для певних URL, таких як /amp/ (що не досить добре), або чи потрібно мені знайти іншу альтернативу. Розміщення таких скриптів у </head>  призведе до зменшення швидкості завантаження сторінки в Google Page Speed. Що цікаво - це те, що нещодавно я  виявив, що використання реклами Google DFP на моєму сайті також порушує Google Page Speed. Google - складна пошукова система, яка не дозволяє легко використовувати всі його технології водночас.

Тому мені довелося замислитися, що важливіше: рейтинг Google Page Speed, підтримка AMP, або час, який я витратив на налаштування та усунення помилок.

Підсумки

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

По суті, AMP - це шлях сумнівно корисної оптимізованої мережі для спільноти з відкритим вихідним кодом, тоді як Facebook's Instant Articles призначені для вибраної еліти.  Як на мене було б краще, якщо б Google створив пріоритетну HTML5 модель з супровідними скриптами для кращого завантаження.

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

Схожі статті

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.