*️⃣ Proč AI crawler často nevidí to, co vy vidíte v prohlížeči
AI Crawler a Váš obsah WEBu
⚠️ Problém: Elementor PRO přidává animovaným prvkům třídu elementor-invisible, která obsah v CSS skryje. AI crawlery (GPTBot, ClaudeBot, PerplexityBot) JavaScript nespouštějí a skrytý obsah jednoduše ignorují.
✅ Řešení: Dva řádky CSS do Vzhled → Přidat CSS zajistí, že obsah je vždy přítomen v DOM, tedy viditelný pro crawlery, animovaný pro návštěvníky.
⏱️ Čas implementace: 30 sekund. Bez pluginu, bez nákladů.
📋 Neřeší: obsah načítaný přes AJAX, iframes, lazy-load obrázky a obsah za přihlášením.
Váš prohlížeč je sofistikovaný stroj: stáhne HTML, spustí JavaScript, vykreslí CSS, zahraje animace. Výsledkem je stránka, kterou vidíte. AI crawlery, kterých jsou dnes již desítky, ale i řada dalších robotů včetně části Googlebotu fungují jinak. Stáhnou surový HTML kód a JavaScript (často) nespustí. Pro obsah, jehož viditelnost závisí na JS, to znamená jediné:
Pro crawler jako by ten Váš obsah vůbec neexistoval !!
„Pokud je váš obsah skrytý třídou, kterou definuje JavaScript - a konkrétní crawler pak ten JavaScript nespustí - tak crawler váš obsah prostě nevidí.
A co AI nevidí, nemůže ani citovat."
Konkrétně se to týká crawlerů jako GPTBot (OpenAI/ChatGPT), ClaudeBot (Anthropic), PerplexityBot, a všech dalších AI systémů, které staví na jednoduchém HTML stažení bez renderování. Google sám renderuje JS, ale s prodlevou a ne u všech URL rovnoměrně.
*️⃣ Jak Elementor PRO problém způsobuje? Třída `elementor-invisible`
Elementor PRO nabízí efekty při načtení prvků (tzv. entrance animations): fade in, slide up, zoom in a desítky dalších. Implementace je elegantní: každý prvek s animací dostane při generování HTML třídu `elementor-invisible`, která ho v CSS skryje:
.elementor-invisible {
visibility: hidden;
}
- Když se stránka načte v prohlížeči, JavaScript tuto třídu odstraní ve správný moment a prvek se zobrazí s animací. Uživatel nic nevidí, efekt funguje perfektně.
- Crawler bez JS ale vidí HTML s třídou elementor-invisible a skrytý prvek tedy prostě ignoruje. Ani text, ani nadpisy, ani CTA, ani FAQ odpovědi. Vše co má animaci pro crawlera neexistuje.
Praktická ukázka → máte problém se zobrazením JS?:
- zobrazte si svůj web s vypnutým JavaScriptem v prohlížeči. Pokud se část obsahu nezobrazí nebo se stránka zobrazí prázdná tak přesně takhle to vidí AI crawler. 🥹🥹
Jak zjistit, jestli mám problém se zobrazením JS?
Pokud používáte prostředí Elementor nebo Elementor PRO a používáte občas animaci, máte problém zcela jistě a ani to nemusíte testovat. Pokud používáte jiné prostředí:
Vypnutí JS přímo v Chrome:
- Otevřete Chrome DevTools (F12)
- Stiskněte F1 → otevřou se Settings
- Najděte sekci Debugger → zaškrtněte „Disable JavaScript“
- Načtěte stránku (Ctrl+R)
Výsledek: pokud text zmizel nebo se stránka zobrazuje bez části obsahu máte úproblém s JavaScriptem. Pokud ale vše zůstalo viditelné, tak buď animace nepoužíváte, nebo je váš web v tomto ohledu v pořádku.
Kontrola obsahu v Google Search Console:
- GSC → URL Inspection → Test Live URL
- V Google Search Console:
- Vložte URL stránky do URL Inspection
- Klikněte na Test Live URL (vpravo nahoře)
- Po načtení přejděte na záložku HTML a hledejte váš obsah
Výsledek: Toto je pohled Googlebotu na stránku v době testu. Pokud Vám obsah nebo část obsahu v renderu chybí → Google ho momentálně nevidí, ani ostatní Crawlery. A tedy ani neindexuje/jí.
A obsah Indexu v GSC před implementací opravy:
➡️ Řešení: CSS override ve 2 řádcích
Pokud jste ve zdrojovém kódu text s třídou elementor-invisible našli, řešení je jednoduché. Přidejte do WordPressu následující CSS:
.elementor-invisible {
visibility: visible !important;
opacity: 1 !important;
}
Kde přidat:
- WordPress admin → Vzhled → Přidat CSS (Customize → Additional CSS)
- nebo Elementor → libovolná stránka → Site Settings → Custom CSS
Proč to funguje: Toto pravidlo přepisuje Elementor výchozí skrytí. Výsledek pak:
- Pro crawlery bez JS: obsah je od začátku viditelný v DOM → crawler ho přečte
- Pro návštěvníky s JS: JavaScript přepíše třídy elementor-invisible vlastními třídami animace → animace probíhá normálně, toto CSS neovlivní vizuální zážitek
- Poznámka – vedlejší efekt: na velmi pomalém připojení může dojít k rychlému „bliknutí“ obsahu před spuštěním animace (FOUC tedy Flash of Unstyled Content). Ve většině případů nepozorovatelné.
„Elegance tohoto řešení je v tom, že neodstraní animace pro návštěvníky — jen zajistí, že obsah je vždy přítomen v DOM. JavaScript ať si ho pak stylizuje jak se mu chce."
Test po implementaci, co a kde zkontrolovat
CSS se aplikuje okamžitě po uložení, není tedy třeba čekat na indexaci. Ověřte si ve dvou krocích:
- Krok 1: Okamžitý vizuální test (30 sekund)
Vypněte JS v Chrome (viz Test výše) a načtěte stránku. Tentokrát by měl být veškerý text ihned viditelný, bez animací. To je přesně to, co chcete aby viděl AI crawler.
- Krok 2: GSC Test Live URL (do 30 sekund)
Vraťte se do GSC → URL Inspection → Test Live URL. V záložce HTML nyní uvidíte obsah, který dříve chyběl.
Poznámky k:
- re-indexaci: viditelnost obsahu pro Googlebot je okamžitá… při příštím crawlu… který ale nemusí nastat (a nenastane) okamžitě. Samotná re-indexace a update v SERPu může trvat od několika hodin do několika dní podle crawl frekvence domény. Pro AI systémy (ChatGPT, Perplexity, Claude) je zpoždění ještě delší, AI modely aktualizují svůj index méně často, ne v reálném čase.
- grafice: Já to testoval na živé doméně. Takže když mám tu opravu již nasazenou, logicky Vám nemůžu ukázat PrintScreen reálného obsahu. Ten se mi načte vždy správně a celý. Ale můžu vám pro potvrzení, že to funguje ukázat Prinstceen obsahu indexu těch stránek, které ještě nestačil GoogleBot navštívit v rámci své tůry po mém WEBu.
➡️ Co tato úprava pro JS obsah neřeší
Tato CSS úprava řeší specificky problém elementor-invisible třídy a animací při načtení.
Neřeší:
- Obsah načítaný přes AJAX. Pokud Elementor nebo plugin tahá obsah dynamicky po načtení stránky (produkty, recenze, popups), ten ve zdrojovém kódu není. Crawlery ho nevidí.
- Obsah v iframes. Třeba vložený obsah (YouTube, mapy, externí widgety) crawlery prostě nečtou.
- Lazy-load obrázků. Netýká se to textu, ale alt texty u lazy-load obrázků mohou být pro crawlery bez JS také nedostupné.
- Samozřejmě obsah za přihlášením nebo v dynamických filtrech. Tedy členské sekce, filtrovatelné katalogy a pod. Ale ty se většinou takhle neindexují „z podstaty“.
- Crawl budget. S tím nemá co do činění. Pokud provozujete velký WEB a Googlebot crawluje pouze část rozsahu URL, tak toto CSS samo o sobě crawl frekvenci nezmění/nezvýší.
Poznámka.
Jak jsem na toto řešení pro scuka.cz a Elementor PRO přišel? Při kontrole v Claude in Chrome jsem si všiml, že fetch stránky bez JS vrací text v DOM, ale s třídou elementor-invisible. Přidal jsem CSS override a ihned po uložení test přes GSC potvrdil viditelnost celého obsahu. Žádné pluginy, žádné dodatečné náklady 👏.
Ale vymýšlím si trochu- tohle řešení mi neporadil Claude, ale věděl o něm Perplexity. Zajímavé je, že Perplexity neuvádí zdroj tohoto postupu. Asi je to fakt běžná věc.
➡️ Časté otázky k Elementor animacím a AI crawlerům
Ovlivní toto CSS animace pro normální návštěvníky webu?
Ne. Pro návštěvníky se zapnutým JavaScriptem se CSS přepíše třídami animace a vše funguje jako dřív. Jedinou výjimkou je dočasné „bliknutí“ obsahu na velmi pomalém připojení před spuštěním animací.
Musím upravovat každou stránku zvlášť?
Ne. CSS přidané přes Vzhled → Přidat CSS nebo Elementor Site Settings → Custom CSS platí globálně na celém webu.
Jak poznám, zda mám na webu elementor-invisible vůbec aktivní?
Ve zdrojovém kódu libovolné stránky (Ctrl+U) vyhledejte text elementor-invisible. Pokud výsledek je 0, tak nemáte entrance animations aktivní a problém se vás netýká.
Pomůže to s Google AI Overviews a ChatGPT citacemi?
Přímo a okamžitě ne. AI systémy aktualizují znalostní bázi v dlouhých cyklech. Ale z dlouhodobého hlediska ANO. Pokud crawler AI Overview obsah nevidí, nemůže ho citovat. Pokud ho vidí, získal jste svoji šanci!
Funguje stejné řešení i na jiných page builderech?
Záleží na page builderu. Divi používá podobný přístup, Bricks Builder má odlišnou implementaci. Princip (CSS přepsání skrývající třídy) je obecný, ale konkrétní název třídy se liší. V Elementoru je to vždy elementor-invisible.
Užitečné zdroje:
- Vlastní test na scuka.cz – ověření přes GSC URL Inspection + Chrome DevTools (červenec 2026)
- Elementor GitHub Issue #2806 — zdrojová diskuze o FOUC efektu při skrytí entrance animations
- Google Search Console dokumentace, URL Inspection Tool
