Close

Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages jsou speciální stránky pro rychlé načítání statického obsahu v mobilních zařízeních podporované Googlem. Responzivní šablona je sice fajn, ale pro mobilní připojení představuje stále problém: Pomalé načítání obsahu. Proto Google přišel s AMP (Accelerated Mobile Pages) a o nich bude tento článek…

..a doufám, že vás přesvědčím, abyste si je zavedli i k vám (ukážu na pluginech WordPressu).

AMP ze 3 částí

Systém Accelerated Mobile Pages se skládá z těchto základních částí: HTML a JS na vašich stránkách a Google Cache na straně velkého bratra Googla… tím se zajistí rychlé načítání vašeho obsahu.

  1. AMP část: HTML – velice jednoduchá struktura s minimem tagů a hlavně obsah
  2. AMP část: JS – základní javascript, který stačí bohatě pro rychlé zobrazení stránek
  3. AMP část: Google Cache – přes validační systém načte HTML, JS, obrázky. Potom vše uloží do vlastní cache a díky HTTP 2.0 velice rychle zobrazuje obsah

Jak to funguje

Při vyhledávání na mobilu vám Google nabídne přednostně stránky AMP. Něco hledáte a zobrazí se vám na mobilu výsledky vyhledávání s označením AMP. Tyto stránky jsou už cachované (od vás se obsah stáhl na Google a zobrazuje se přímo od něj).

Výsledek vyhledávání vypadá na mobilu takto takto:

Mám to AMP taky?

Nejjednodušší je zajít do Google Search Console a najít pododkaz: Accelerated Mobile Pages přímo tam:

Jestli tam žádné stránky nevidíte, tak máte smůlu a čtěte dále 🙂

WordPress a AMP

Pokud máte WordPress, máte obrovskou výhodu: Stačí 2 pluginy a vše funguje správně 🙂

  1. Plugin AMP vám nastaví pro každý příspěvek novou stránku. Můžete udělat i některé základní grafické úpravy pro nový typ stránek.
    Zde je ukázka nově vzniklé stránky:

  2. Pokud využíváte SEO Yoast, stačí použít plugin Glue for Yoast SEO & AMP a vše funguje perfektně 🙂

Zjednodušeně to funguje tak, že do každé ne-AMP stránky vložíte nový tag:

<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />

a do AMP stránky vložíte

<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

Na co dát bacha

  • Nefunugje asynchronní načítání obrázků u AMP 🙁 Takže jsem plugin Lazy Load XT musel vypnout, dokud nenajdu náhradu.
  • Čeština není v AMP pluginu v pořádku (diakritika)
  • U stránek AMP se může zobrazit, že nejsou uzpůsobené pro mobily. Zkontolujte si, jestli se zobrazuje vše správně… včetně obrázků

Závěr

Zase znovu a znovu vidíme, jak se google snaží urychlovat načítání stránek. Využijte toho, protože vás za to google ohodnotí ve výsledcích vyhledávání na mobilech.

Napište mi vaše zkušenosti do komentářů níže 🙂

14 Comments on “Accelerated Mobile Pages (AMP)

Radim
19.12.2016 at 9:12

S článkem mám jeden problém, přijde mi příliš jednostranný a zapomíná na jedno důležité pravidlo: používat selský rozum. Dnes je bohužel taková doba, že tvůrci webů používají několik externích fontů, zbytečně robustní JS framworky a pluginy na každou hloupost. Výsledkem jsou pak právě obludně náročné weby, které se sice tváří jako responzivní, ale s responzivitou mají společného jen to, že se přizpůsobují rozlišením, ale tu druhou stránku responzivity, kterou je rychlost načtení, zcela ignorují. Takže pokud se nejprve člověk zaměří na rychlost, tak se může stát, že dosáhne lepších výsledků než AMP, protože bude mít rychlý web pro všechny, ne „pouze“ pro mobily.

Odpovědět
Daniel Nytra
19.12.2016 at 13:03

Selský rozum je fajn, ale tohle je něco jiného. Většina webů používá webhosting za 20-200 Kč/měsíc. Google se snaží vylepšovat zobrazování obsahu lidem a nebízí vlastní cachovací systém na svých serverech zdarma. Dle mého názoru jde o správný krok (Facebook má Instant Articles).

Radim
19.12.2016 at 13:53

I na levném webhostingu lze zajistit výkon. V případě WordPressu existují pluginy, které zajistí cachování webu a fungují myslím docela spolehlivě. HTTP 2 je sice na hostinzích ještě problém, ale už se na ně taky dostává. To, že nabízí Google něco zdarma je fajn do chvíle, kdy nemá několikahodinový výpadek a už víme, že se to stát může, druhá věc je, jak často tu cache aktualizuje, taková změna ceny produktu na eshopu, která se v cachi objeví až po několika hodinách může znamenat zbytečné ztráty.
Neberte to tak, že shazuji AMP, tak to není, jen je prostě potřeba individuálně u každého projektu zvážit, jestli má „investice“ do AMP opravdu smysl. Pokud vím, tak velké americké deníky, které nad příchodem AMP „jásaly“, jsou teď docela zklamané, protože nemohou použít vlastní reklamní systémy a přicházejí tak o peníze.

Daniel Nytra
21.12.2016 at 7:05

Dobrý den, Radime,
co je dobré a špatné nechám na každém zvlášť (co se týče zobrazování reklam). Dle mého názoru jde o krok správným směrem. CDN77 s HTTP2 problém nemá, ale o to nejde: Hlavní důvod je, že většina lidí nemá vůbec šajnu, co znamená rychlé… jsou rádi, že znají slovo webhosting… pro ně jde o perfektní věc a pokud využívají např. WordPress, budou díky pluginům jednoduše fungovat.

Pavol
19.12.2016 at 14:57

Dobrý deň.

1.Ak tomu správne rozumiem, tak tie nove url s /amp/ sa budú zobrazovať len v SERPe na mobilnom vyhľadávaní?
2.Nepíšete nič o nastaveniach daných pluginov tj. v ideálnom prípade by to malo fungovať bez dodatočných nastavení?
3.Ak by som niečo pokazil, po odinštalovaní nebude žiadny problém a url s /amp/ sa „stratia“? 🙂
4.Ako zistím, či je všetko OK? Stačí, že mi stránky zobrazí v Google Search Console? A ako dlho to trvá?

Ďakujem

Odpovědět
Daniel Nytra
21.12.2016 at 9:46

Dobrý den,
hezky popořadě:
add 1/ ANO, „jen“ pro mobilní vyhledávání
add 2/ ANO, bude to fungovat… můžete si nastavit ale barvu apod.
add 3/ ANO, po odinstalování vše fachá stejně
add 4/ ANO, to je myslím dostatečné ..nebo se podíváte do výsledků vyhledávání na vašem mobilu 🙂 Mě se to „nastartovalo“ za 1 den

Není zač. Daniel

Pavol
21.12.2016 at 14:30

Náhodne som natrafil na článok, kde bol uvedený link: https://search.google.com/search-console/amp kde sa dá overiť, či je web AMP platný. A ukazuje, že váš blog nie je. Tak akosi nerozumiem, že kde je problém..

Odpovědět
Daniel Nytra
21.12.2016 at 14:45

Dobrý den,
musíte dávat příspěvky s /amp na konci (jde o AMP stránky): https://search.google.com/search-console/amp?id=XzJd_l4Dv6s6WZfBs8C8OA

AMP
30.12.2016 at 12:32

Dobrý deň.

Nainštaloval som si dané pluginy, v search console mi zobrazilo prvé amp stránky ale ukazuje závažné chyby : https://search.google.com/search-console/amp?id=iNtDWaVgG8L8GWp4sNlGEQ Neviete, prosím, že čo s tým? V kóde sa príliš nevyznám, no vyzerá to tak, akoby bol nejaký problém , ktorý súvisí s hodnotením príspevkov..(?)

Odpovědět
Daniel Nytra
1.1.2017 at 8:55

Dobrý den, Pavol,
vypadá to, že to dělá nějaký jiný plugin. Doporučuji všechny vypnout a postupně zkusit zjistit, který to dělá… V článku mám nějaká doporučení, tak to porovnejte s vašim nastavením 🙂

AMP
3.1.2017 at 12:10

Dobrý deň Daniel.

Píšem Vám na uzavrenie témy a prípadnú pomoc aj pre ostatných. Ako som predpokladal, mal som pravdu, problémy robil plugin KK star ratings – myslím, že celkom obľúbený plugin na hodnotenie článkov v podobe hviezdičiek pri článku.Chcel som hľadať alternatívny plugin, no podarilo sa mi nájsť tému, kde daný problém riešili https://wordpress.org/support/topic/your-plugin-is-compatible-with-amp-3/

Vy nepotrebujete na tomto blogu hodnotenie článkov kvôli snippetom?

Všetko dobré v Novom roku!

Odpovědět
Daniel Nytra
4.1.2017 at 14:10

Ano, také to řeším 🙁 Je to v začátcích, tak doufám, že to opraví…

AMP
3.1.2017 at 17:10

Až teraz som si všimol, že na AMP príspevkoch chýba SideBar a Shortcody „nefungujú“. Ako sa na to pozeráte, v zmysle tých, ktorí sa snažia na svojich weboch zarábať..oplatí sa im AMP?

Odpovědět
Daniel Nytra
4.1.2017 at 14:11

Je tam více chyb 🙁 Vše je nahlášeno a doufejme v brzký update.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *