Tento průvodce vám pomůže identifikovat a opravit problémy s JavaScriptem, které mohou blokovat zobrazení vaší stránky nebo konkrétního obsahu na stránkách s JavaScriptem ve vyhledávání Google. Přestože Google používá JavaScript, existují určité rozdíly a omezení, které je třeba zohlednit při návrhu stránek a aplikací, aby se přizpůsobily způsobu, jakým vyhledávače přistupují k vašemu obsahu a jak jej vykreslují. V naší příručce o základech SEO pro JavaScript najdete další informace o tom, jak můžete optimalizovat své stránky v JavaScriptu pro vyhledávání Google.

Googlebot je navržen tak, aby byl dobrým návštěvníkem webu. Procházení je jeho hlavní prioritou a zároveň dbá na to, aby nezhoršoval zážitek uživatelů, kteří web navštíví. Googlebot a jeho součást Web Rendering Service (WRS) průběžně analyzují a identifikují zdroje, které nepřispívají k podstatnému obsahu stránky, a takové zdroje nemusí načítat. Například požadavky na hlášení a chyby, které nepřispívají k podstatnému obsahu stránky, a další podobné typy požadavků jsou nepoužívané nebo nepotřebné pro získání podstatného obsahu stránky. Analytika na straně klienta nemusí poskytovat úplné nebo přesné zobrazení aktivity Googlebot a WRS na vašem webu. Ke sledování aktivity a zpětné vazby Googlebot a WRS na vašem webu používejte konzolu Search Console.

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

Pokud máte podezření, že problémy s JavaScriptem mohou blokovat zobrazení vaší stránky nebo konkrétního obsahu na stránkách s JavaScriptem ve vyhledávání Google, postupujte podle následujících kroků. Pokud si nejste jisti, zda je JavaScript hlavní příčinou, postupujte podle obecného průvodce laděním, abyste určili konkrétní problém.

Chcete-li otestovat, jak Google prochází a vykresluje adresu URL, použijte Test pro mobilní zařízení nebo Nástroj pro kontrolu URL v konzole pro vyhledávání. Můžete si prohlédnout načtené zdroje, výstup konzoly JavaScript a výjimky, vykreslený DOM a další informace.

❗Varování: Nepoužívejte odkazy v mezipaměti k ladění stránek. Místo toho použijte nástroj pro kontrolu URL, protože obsahuje nejaktuálnější verzi vašich stránek.

Volitelně doporučujeme také shromažďovat a kontrolovat chyby JavaScriptu, na které uživatelé, včetně Googlebota, na vašem webu narazí, abyste zjistili potenciální problémy, které mohou ovlivnit vykreslování obsahu.

Zde je příklad, který ukazuje, jak zaznamenávat chyby JavaScriptu, které se zaznamenávají v globální obsluze onerror. Všimněte si, že některé typy chyb JavaScriptu, jako je například chyba parsování, nelze touto metodou protokolovat.

window.addEventListener('error', function(e) {
   var errorText = [
e.message,
'URL: ' + e.filename,
'Line: ' + e.lineno + ', Column: ' + e.lineno + ',
"Stack: ' + (e.error && e.error.stack || "(no stack trace)")
].join('\n');
   // Příklad: logování chyb jako vizuální výstup do hostitelské stránky.
   // Poznámka: pravděpodobně nechcete takové chyby zobrazovat uživatelům, resp.
   //          aby tyto chyby indexoval Googlebot; nicméně, může to
   //          být užitečnou funkcí při aktivním ladění stránky.
var DOM_ID = 'rendering-debug-pre';
if (!document.getElementById(DOM_ID)) {
var log = document.createElement('pre');
log.id = DOM_ID;
log.style.whiteSpace = 'pre-wrap';
log.textContent = errorText;
if (!document.body) document.body = document.createElement('body');
document.body.insertBefore(log, document.body.firstChild);
} else {
document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
}
// Příklad: zaznamená chybu do vzdálené služby.
   // Poznámka: chyby můžete zaznamenávat do vzdálené služby, abyste pochopili, 
   //           a sledovali typy chyb, se kterými se setkávají běžní uživatelé,
   //           Googlebot a další prohlížeče.
var client = new XMLHttpRequest();
client.open('POST', 'https://example.com/logError');
client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
client.send(errorText);
});

Dbejte na to, abyste zabránili chybám soft 404. U jednostránkových aplikací (SPA) to může být obzvláště obtížné. Chcete-li zabránit indexování chybových stránek, můžete použít jednu nebo obě následující strategie:

Přesměrování na adresu URL, na kterou server odpoví stavovým kódem 404.

fetch(`https://api.kitten.club/cats/${id}`)
  .then(res => res.json())
  .then((cat) => {
 if (!cat.exists) {
// přesměrování na stránku, která dává 404
window.location.href = '/not-found';
}
});

Přidejte nebo změňte meta tag robots na noindex.

fetch(`https://api.kitten.club/cats/${id}`)
  .then(res => res.json())
  .then((cat) => {
if (!cat.exists) {
 const metaRobots = document.createElement('meta');
metaRobots.name = 'robots';
metaRobots.content = 'noindex';
document.head.appendChild(metaRobots);
}
});

Pokud SPA používá JavaScript na straně klienta k ošetření chyb, často místo příslušného stavového kódu hlásí stavový kód 200 HTTP. To může vést k indexování chybových stránek a jejich případnému zobrazení ve výsledcích vyhledávání.

Očekávejte, že Googlebot odmítne žádosti o povolení uživatele.

Funkce, které vyžadují povolení uživatele, nemají pro Googlebot ani pro všechny uživatele smysl. Pokud například nastavíte, aby bylo vyžadováno rozhraní API fotoaparátu, Googlebot vám fotoaparát nemůže poskytnout. Místo toho nabídněte uživatelům způsob, jak přistupovat k vašemu obsahu, aniž by byli nuceni povolit přístup ke kameře.

Nepoužívejte adresy URL obsahující fragmenty pro načítání různého obsahu.

SPA může používat adresy URL s fragmenty (například https://example.com/#/products) pro načítání různých zobrazení. Schéma procházení AJAX je od roku 2015 zastaralé, takže se nemůžete spoléhat na tento typ adres URL, abyste mohli pracovat s Googlebotem. Pro načítání různého obsahu na základě adresy URL v SPA společnost Google doporučuje používat rozhraní API History.

Nespoléhejte se na perzistenci dat při zobrazování obsahu.

WRS načítá každou adresu URL (přehled o tom, jak Google zjišťuje obsah, najdete v části Jak funguje vyhledávání Google), a to po přesměrování serveru a klienta, stejně jako běžný prohlížeč. WRS však neuchovává stav napříč načítáním stránek:

při načítání stránky se vymažou data z místního úložiště a úložiště relací,
soubory cookie HTTP se při načítání stránky vymažou.

Použijte otisk obsahu, abyste se vyhnuli problémům s ukládáním do mezipaměti pomocí Googlebot.

Googlebot pracuje s ukládáním do mezipaměti „agresivně“, aby snížil počet síťových požadavků a spotřebu prostředků. Systém WRS může ignorovat hlavičky mezipaměti. To může vést k tomu, že systém WRS bude používat zastaralé zdroje JavaScriptu nebo CSS. Otiskování obsahu tomuto problému předchází tím, že součástí názvu souboru je otisk obsahu, například main.2bb85551.js. Otisk závisí na obsahu souboru, takže aktualizace generují pokaždé jiný název souboru. Více informací najdete v příručce web.dev o strategiích dlouhodobého ukládání do mezipaměti.

Zajistěte, aby vaše aplikace používala detekci funkcí pro všechna kritická rozhraní API, která potřebuje, a případně poskytněte záložní chování nebo polyfill.

Některé webové funkce nemusí být přijaty všemi uživatelskými agenty a někteří z nich mohou některé funkce záměrně zakázat. Pokud například používáte WebGL k vykreslování fotografických efektů v prohlížeči, detekce funkcí ukazuje, že Googlebot WebGL nepodporuje. Chcete-li to napravit, můžete fotografické efekty vynechat nebo se rozhodnout použít vykreslování na straně serveru pro předvykreslení fotografických efektů. Tím bude váš obsah přístupný komukoliv, včetně Googlebota.

Ujistěte se, že váš obsah funguje s připojením HTTP.

Googlebot používá k načtení obsahu z vašeho serveru požadavky HTTP. Nepodporuje jiné typy připojení, například WebSockets nebo WebRTC připojení. Chcete-li se vyhnout problémům s takovými připojeními, ujistěte se, že poskytujete náhradní připojení HTTP pro načítání obsahu a používáte robustní zpracování chyb a detekci funkcí.

Ujistěte se, že se vaše webové komponenty vykreslují podle očekávání. Pomocí nástroje Mobile-Friendly Test nebo nástroje URL Inspection Tool zkontrolujte, zda vykreslený HTML obsahuje veškerý očekávaný obsah.

Systém WRS zplošťuje light DOM a shadow DOM. Pokud webové komponenty, které používáte, nevyužívají mechanismus <slot> pro light obsah DOM, vyhledejte další informace v dokumentaci webové komponenty nebo místo ní použijte jinou webovou komponentu. Další informace naleznete v části Osvědčené postupy pro webové komponenty.

Po opravě položek v tomto kontrolním seznamu znovu otestujte stránku pomocí testu Mobile-Friendly nebo nástroje pro kontrolu URL v Google Search Console. Pokud jste problém odstranili, zobrazí se zelené zaškrtnutí a nezobrazí se žádné chyby.

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

Použité zdroje

Fix Search-Related JavaScript Problems | 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/fix-search-javascript