Odložení načítání nekritického nebo neviditelného obsahu, známé také jako „líné načítání“, je běžným a osvědčeným postupem v oblasti výkonnosti a UX. Pokud však není tato technika správně implementována, může neúmyslně skrýt obsah před Googlem. Tento dokument vysvětluje, jak zajistit, aby Google mohl procházet a indexovat lazy-loaded obsah.

Načtení obsahu, když je viditelný v okně zobrazení

Chcete-li zajistit, aby společnost Google viděla veškerý obsah na stránce, ujistěte se, že implementace líného načítání načte veškerý relevantní obsah, kdykoli je viditelný v okně zobrazení. Zde je několik příkladů, jak toho můžete dosáhnout:

Nemáte představu, kolik tržeb ze SEO Vašemu webu či e-shopu měšíčně utíká? Rádi Vám budeme věnovat čas osobně. Ukážeme Vám, o kolik peněz byste mohli každý měsíc vydělat více jen díky SEO! A to ZDARMA. Chci konzultaci ZDARMA >>

nativní líné načítání pro obrázky a iframe,
IntersectionObserver API a polyfill,
knihovna JavaScriptu, která podporuje načítání dat při jejich vstupu do viewportu.

Nezapomeňte svou implementaci otestovat.

Podpora stránkovaného načítání pro nekonečný scrolling

Pokud implementujete infinite scroll (nekonečný scrolling), nezapomeňte podporovat stránkované načítání. Stránkované načítání je pro uživatele důležité, protože jim umožňuje sdílet a znovu se zapojit do vašeho obsahu. Umožňuje také společnosti Google zobrazit odkaz na konkrétní místo v obsahu, nikoli na začátek nekonečně se posouvající stránky.

Chcete-li podpořit stránkované načítání, poskytněte ke každé části jedinečný odkaz, který mohou uživatelé sdílet a načíst přímo. K aktualizaci adresy URL při dynamickém načítání obsahu doporučujeme použít rozhraní API History.

Test

Po nastavení implementace se ujistěte, že funguje správně. Jedním ze způsobů, jak to provést, je použít skript Puppeteeru k lokálnímu testování implementace. Puppeteer je knihovna Node.js pro ovládání prohlížeče headless Chrome. Ke spuštění skriptu budete potřebovat Node.js. Pomocí následujících příkazů skript vyzkoušejte a spusťte:

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Po spuštění skriptu ručně zkontrolujte snímky obrazovky, které vytvořil, a ujistěte se, že obsahují veškerý obsah, který má být viditelný a indexovaný společností Google.

Můžete také použít nástroj pro kontrolu URL v konzoli Search Console, abyste zjistili, zda byly načteny všechny obrázky. Zkontrolujte snímek obrazovky a vykreslený HTML a ujistěte se, že se obrázky načetly.

Překlad, odborná a obsahová korektura: SEOPRAKTICKY.CZ

Použité zdroje

Fix Lazy-Loaded Website Content | Google Search Central | Documentation | Google for Developers. Google for Developers – from AI and Cloud, to Mobile and Web [online]. Dostupné z: https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading