Jak vytvořit AMP stránku pro rychlejší mobilní web

Co je AMP a proč na něm záleží

AMP (Accelerated Mobile Pages) je open-source framework, který Google vyvinul v roce 2015, aby dramaticky zrychlil načítání webových stránek na mobilních zařízeních. Ve světě, kde více než 60 % internetového provozu pochází z mobilních telefonů, ovlivňuje rychlost načítání webu přímo uživatelský zážitek, míru opuštění (bounce rate) i pozici ve výsledcích vyhledávání. Výzkumy ukazují, že 53 % mobilních uživatelů opustí web, který se načítá déle než 3 sekundy. AMP tento problém řeší tím, že omezuje HTML, CSS a JavaScript způsobem, který zaručuje extrémně rychlé vykreslení stránky.

AMP stránky se obvykle načtou za méně než vteřinu, což je 4–5× rychleji než průměrná mobilní stránka. Google AMP obsah dále zrychluje tím, že jej cachuje na svých serverech prostřednictvím systému AMP Cache, takže se stránka doručuje z nejbližší lokace Google k uživateli. Výsledkem je téměř okamžité načtení, když uživatel klikne na AMP výsledek ve vyhledávání Google.

Jak AMP funguje

Tři komponenty AMP

AMP se skládá ze tří klíčových komponent, které společně zajišťují rychlé načítání. První je AMP HTML – rozšířená verze HTML s vlastními tagy, které nahrazují standardní HTML prvky optimalizovanými verzemi pro obrázky, video a komponenty karuselu. Druhou komponentou je knihovna AMP JS, která spravuje zdroje, asynchronně načítá externí zdroje a zajišťuje, aby nic neblokovalo vykreslování stránky. Třetí je AMP Cache – proxy CDN, které automaticky stahuje AMP stránky, validuje je a cachuje pro rychlé doručení.

Omezení AMP

Aby AMP dosáhl výjimečné rychlosti, vynucuje přísná omezení. Nemůžete používat vlastní JavaScript – můžete použít pouze AMP komponenty a omezený prvek amp-script. CSS musí být inline a omezené na 75 KB. Všechny externí zdroje (obrázky, reklamy, videa) musí předem deklarovat svou velikost, aby prohlížeč mohl vypočítat rozvržení ještě před načtením zdrojů. Formuláře a interaktivní prvky používají speciální AMP komponenty. Tato omezení mohou působit přísně, ale právě ona zaručují konzistentně rychlý zážitek.

Struktura AMP stránky

Základní šablona AMP HTML

Každá AMP stránka začíná specifickou strukturou. Doctype je standardní HTML5, ale tag html musí obsahovat atribut amp nebo emoji blesku. V sekci head jsou povinnými prvky meta tag charset, meta tag viewport, kanonický odkaz na ne-AMP verzi stránky, AMP boilerplate CSS, které představuje standardizované styly bránící Flash of Unstyled Content, a odkaz na knihovnu AMP JavaScript. Tělo stránky používá pro mediální obsah AMP-specifické tagy místo standardních HTML prvků.

AMP komponenty

AMP nabízí bohatý ekosystém komponent pro různé potřeby. Pro obrázky použijte amp-img s povinnými atributy width a height. Pro video obsah existují amp-video a amp-youtube. Interaktivní prvky zahrnují amp-carousel pro slidery, amp-accordion pro rozbalovací sekce, amp-lightbox pro modální zobrazení a amp-form pro formuláře. Pro analytiku použijte amp-analytics, které podporuje Google Analytics, Facebook Pixel a další platformy. Každá komponenta se načítá asynchronně a neblokuje vykreslování.

Implementace AMP na WordPress webu

Oficiální plugin AMP

Nejjednodušším způsobem, jak přidat AMP na WordPress web, je použít oficiální plugin AMP. Tento plugin nabízí tři režimy provozu: režim Standard promění celý web v AMP, režim Transitional vytváří AMP verze všech stránek vedle originálů a režim Reader vytváří AMP verze pouze pro příspěvky. Pro většinu webů doporučujeme režim Transitional, protože umožňuje postupnou migraci. Po instalaci plugin automaticky generuje AMP verze vašich stránek a přidává potřebné meta tagy, které je propojí s původními stránkami.

Plugin AMP for WP

AMP for WP je alternativní plugin s více možnostmi přizpůsobení designu. Nabízí přes 10 vestavěných šablon AMP stránek, podporu WooCommerce, integraci s populárními SEO pluginy jako Yoast a Rank Math i pokročilé možnosti reklam. Bezplatná verze pokrývá základní potřeby, zatímco verze Pro přidává vlastní AMP šablony, podporu Contact Form 7 a pokročilou analytiku. Pokud vám záleží na vizuální identitě vašich AMP stránek, nabízí tento plugin oproti oficiálnímu pluginu větší flexibilitu.

Ruční konfigurace

Pro úplnou kontrolu nad implementací AMP můžete ve své WordPress šabloně vytvořit vlastní AMP šablony. Vytvořte samostatné soubory šablon, které generují validní AMP HTML. Pomocí WordPress hooků přidejte kanonické odkazy mezi AMP a ne-AMP verzemi. Tento přístup vyžaduje více technických znalostí, ale dává vám úplnou kontrolu nad vzhledem a chováním AMP stránek. Doporučujeme jej pouze pokročilým vývojářům se specifickými požadavky, které pluginy nedokážou splnit.

Testování a validace AMP stránek

AMP Validator

Google nabízí několik nástrojů pro validaci AMP stránek. AMP Validator na validator.ampproject.org je online nástroj, kam zadáte URL nebo HTML kód a získáte podrobné informace o chybách. Chrome DevTools má vestavěnou validaci AMP – přidejte #development=1 na konec AMP URL a otevřete konzoli, abyste viděli chyby. Nástroj AMP Test Tool v Google Search Console ukazuje, jak Google vidí vaše AMP stránky, a identifikuje problémy, které mohou bránit indexaci. Vždy validujte každou AMP stránku před publikováním, protože nevalidní AMP stránky se nebudou cachovat ani zobrazovat s AMP značkou ve vyhledávání.

Časté chyby

Mezi nejčastější chyby při implementaci AMP patří použití zakázaných HTML tagů místo AMP ekvivalentů, CSS překračující limit 75 KB, inline styly s deklarací important, která je v AMP zakázána, zakázaný JavaScript v těle stránky, obrázky bez deklarovaných rozměrů a formuláře bez AMP action endpointu. Validator jasně ukazuje na každou chybu s popisem a řádkem kódu, což usnadňuje opravu.

AMP a SEO

Vliv na umístění

AMP samo o sobě není přímým faktorem hodnocení ve vyhledávání Google. AMP však nepřímo zlepšuje SEO, protože drasticky snižuje dobu načítání, která je faktorem hodnocení, zlepšuje metriky Core Web Vitals, snižuje míru opuštění, protože uživatelé nečekají na načtení, a zvyšuje zapojení uživatelů, což vysílá pozitivní signály Googlu. AMP stránky se dříve zobrazovaly ve speciálním karuselu v horní části mobilního vyhledávání, ale od roku 2021 se v této sekci mohou zobrazovat i ne-AMP stránky. AMP stránky si přesto díky AMP Cache udržují náskok v rychlosti doručení.

Kanonické odkazy

Správné umístění kanonických odkazů je pro AMP SEO klíčové. Každá AMP stránka musí mít odkaz rel canonical směřující na původní ne-AMP verzi stránky. Původní stránka musí mít odkaz rel amphtml směřující na AMP verzi. Pokud používáte režim Standard, kde je celý web AMP, kanonický odkaz směřuje sám na sebe. Tím se zajistí, že Google správně indexuje a propojí obě verze stránky bez problémů s duplicitním obsahem.

Alternativy k AMP

AMP není jediným způsobem, jak dosáhnout rychlých mobilních stránek. Moderní webová optimalizace se zaměřením na Core Web Vitals může dosáhnout podobných výsledků bez omezení AMP. Líné načítání (lazy loading) obrázků a videí, efektivní správa CSS a JS, použití CDN, optimalizace serveru a moderní obrázky ve formátech WebP a AVIF mohou web dramaticky zrychlit. Next.js, Gatsby a podobné frameworky generují extrémně rychlé stránky bez AMP. AMP zvažte, pokud je vaší prioritou viditelnost v Google News nebo máte web s převážně statickým obsahem. Pro složité webové aplikace s velkým množstvím interaktivity je lepší volbou standardní optimalizace.

Závěr

AMP může být mocným nástrojem pro zrychlení mobilního webu, zejména u webů s převážně textovým obsahem, jako jsou blogy, zpravodajské portály a informační weby. Implementace přes WordPress pluginy je relativně jednoduchá a může přinést výrazné zlepšení mobilního zážitku. AMP však není univerzálním řešením – omezení v JavaScriptu a designu mohou být u složitých webů problematická. V BeoHosting jsou naše servery optimalizovány jak pro AMP, tak pro standardní stránky, s rychlým SSD úložištěm a webovým serverem LiteSpeed, který poskytuje výjimečný výkon bez ohledu na to, jaký přístup zvolíte.