Ukrainian (українська мова) translation by Pembelight (you can also view the original English article)
Що таке AMP?
У жовтні минулого року Google оголосив AMP як ініціативу з відкритим вихідним кодом для забезпечення швидкого мобільного завантаження. Як заявляє TechCrunch, багато хто вважає, що AMP - це спроба Google бути конкурентоспроможним поряд з Facebook Instant Articles та мобільними додатками, які забезпечують більш швидкий та спрощений перегляд. Я напевне погоджуся.
Сторінки, оптимізовані за допомогою AMP, відображатимуться в каруселі мобільного браузера у верхній частині результатів пошуку Google Search, показуючи звичайні статті HTML внизу сторінки. Сторінки з AMP завантажуються майже миттєво.
Чесно кажучи, я скептично ставлюся щодо AMP для блогерів і малих видавців. Ми пишемо чудовий контент з метою видачі в топі результатів Google Search. Тепер для того, щоб наш контент вийшов в топ, для наших обмежених ресурсів потрібно впровадити ще одну технологію. Цікаво, що в цей самий час, в топі результатів пошуку я не бачу статтей з AMP від великих медіа-видавців та інших блогерів WordPress:
Я також підозрюю, що вплив 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:
Ось такий тег <link> прописується в <head> кожної сторінки, тим самим повідомляє пошуковим системам, що це AMP сторінка.
1 |
<link rel="amphtml" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/amp/" /></head> |
2 |
Але також прописано канонічне посилання, яке визначає URL-адресу цієї сторінки:
1 |
<link rel="canonical" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/" /> |
Зображення сторінки AMP на сайті JeffReifman.com:
Меню, навігація та лого завантажилися моментально, (незважаючи на їх функціональність), сторінка завантажується швидко.
Дозвольте мені показати, як активувати AMP на WordPress.
Плагін AMP WordPress
Ви можете дізнатися та завантажити плагін AMP WordPress з каталогу плагінів WordPress. Або ви можете пошукати та встановити його безпосередньо з адмінпанелі WordPress.
Просто перейдіть на вкладку Plugins > Add New та знайдіть AMP. Потім натисніть кнопку Install Now:
Після встановлення натисніть кнопку Activate:
Після активації, просто відвідайте будь-який пост у вашому блозі WordPress за допомогою /amp/ розширення. Наприклад, повідомлення про шахрайство Amazon Marketplace Made Easy - це один з моїх найпопулярніших результатів пошуку Google. Ось як це виглядає при відвідуванні версії AMP на сторінці http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:
Плагін Glue for Yoast SEO & AMP
Загальний плагін AMP для WordPress пропонує декілька налаштувань. Розробники Yoast SEO створили додаток для свого популярного плагіна, який ще більше підсилює підтримку AMP.
Ви можете переглянути плагін Glue for Yoast SEO & AMP або встановити його через панель інструментів WordPress, як це було зроблено раніше для плагіна AMP. Після активації панель повинна виглядати так:
Примітка: Переконайтеся, що у вас завчасно встановлений плагін SEO Yoast WordPress SEO.
Ви можете змінити налаштування AMP за допомогою меню бокової панелі Yoast SEO - натисніть AMP у нижній частині меню:
Ви побачите різні способи, якими плагін Glue дозволяє поліпшити реалізацію AMP.
По-перше, Yoast дозволяє розширити функціональність AMP на сторінки та інші типи сторінок WordPress. Функція AMP за умовчанням змінює лише публікації, які є чутливими відповідно до часу їх створення:
Примітка: Якщо під вкладками відображаються порожні сторінки, переконайтеся, що ваш плагін Yoast SEO оновлений, якщо ні, то виправіть це.
По-друге, Yoast пропонує кілька корисних способів налаштування брендингу, дизайну та кольорової схеми:
І, нарешті, вони пропонують спосіб розміщення користувальницького коду Analytics у стилі AMP. Це не так просто, як здається. Щоб Analytics спрацював, зверніть увагу на код, який я інтегрував нижче:
Ось тут я знайшов версію AMP коду для інтеграції в Google Analytics; просто налаштуйте код облікового запису для свого веб-сайту:
1 |
<amp-analytics type="googleanalytics" id="analytics1"> |
2 |
<script type="application/json"> |
3 |
{
|
4 |
"vars": { |
5 |
"account": "UA-xxxxxxxx-x" |
6 |
},
|
7 |
"triggers": { |
8 |
"trackPageview": { |
9 |
"on": "visible", |
10 |
"request": "pageview" |
11 |
}
|
12 |
}
|
13 |
}
|
14 |
</script>
|
15 |
</amp-analytics>
|
Я впевнений, що з часом Yoast оновлюватиме свій плагін Glue, оскільки функціональність плагінів AMP буде розширюватися.
Загалом, налаштовувати плагін - це типу легко. Але не завжди.
Налагодження помилок AMP
Через кілька днів після встановлення AMP, я отримав електронний лист від Google Search Console, яка повідомляла про 10 сторінок з помилками. Але насправді, кожний моя AMP публікація була з помилками.
Я залогінився до 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 веб-сайту JeffReifman.com зламані через помилку: The tag 'script' is disallowed except in specific forms. Проте PublishingwithWordPress.com таких помилок не виявив:
У наступному уроці на Envato Tuts +, я розкажу, як мені вдалося налаштувати JeffReifman.com для досягнення Google PageSpeed 100. Для цього я використав спеціальні можливості W3 Total Cache для розміщення деяких мінімізованих функцій JavaScript внизу сторінки перед </body>. Для AMP оптимізації дане питання має бути вирішеним, а плагін WordPress AMP цього зробити не може.
1 |
<script type="text/javascript" src="http://c4.jeffreifman.com/wp-content/cache/minify/000000/68b0b/default.include-footer.952e41.js?d4992f"></script></body> |
Мені потрібно більше дослідити та визначити, чи буде 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 дійсно допомагає найбільшим веб-видавцям, а не простим блогерам.
Схожі статті
- The AMP Project Documentation FAQ
- The AMP WordPress Plugin
- The Glue for Yoast SEO AMP Plugin
- Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web (Google Blog)
- Google Announces Accelerated Mobile Pages Project To Bring You Quick-Loading Articles (TechCrunch)
- Facebook Starts Hosting Publishers’ “Instant Articles” (TechCrunch)
