Accelerated Mobile Pages (AMP)

Daniel Nytra

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…

Facebook v Accelerated Mobile Pages (AMP)

..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:

mobile screenshot v Accelerated Mobile Pages (AMP)

Mám to AMP taky?

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

google search console v Accelerated Mobile Pages (AMP)

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 🙂

20 komentářů u „Accelerated Mobile Pages (AMP)“

  1. 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
    • 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).

      Odpovědět
    • 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.

      Odpovědět
      • 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.

        Odpovědět
  2. 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
    • 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

      Odpovědět
    • 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 🙂

      Odpovědět
  3. 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
  4. 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
  5. Ahoj Dane,
    vyzkoušel jsem plugin Glue for Yoast SEO & AMP u blog, kde mám Yoast, ale k ničemu nedošlu a plugin není ani v adminu, jen v seznamu pluginů. Používáš ho, nebo máš zkušenost jen s tím prvním Tebou jmenovaným?

    Odpovědět
  6. Kedysi dávno som AMP skúšal a bolo tam viac problémov s ktorými som sa nejako nevedel stotožniť, napríklad v AMP verzií nešla zobrazovať reklama adsense (dnes je to už vyriešené) .. a zopár ďalších nepekných problémov s tým ďalších tiež bolo, dúfam že sú vyriešené už tiež – pretože zoberme si že napr. 50-60% a aj viac percent návštevnosti weboch (aspoň mojich he z mobilných zariadení) a bude to ešte určite rásť tieto čísla. Tak vyjsť v ústrety ľuďom a ponúkať im rýchlejšie weby mi príde ako veľmi fajn krok. Musím to skúsiť znovu nahodiť a som veľmi zvedavý či zaznamenám nejaké výraznejšie zmeny či už v počte návštev alebo v dobe udržania pozornosti na webe – myslím že áno. A vďaka za tip na ten yoast AMP plugin.

    Odpovědět
    • Ne, to jsem nezaznamenal.. trend je spíše v tom, že lidé raději na „blesk“ přes mobil klikají a to by potom mělo mít vliv na pozice… bohužel u nás v ČR si ještě na toto moc nezvykli 🙁 Doufám, že časem…

      Odpovědět

Napsat komentář