Tomáš Novák
Zdrojový kód vašeho webu je to, co „pohání“ váš web. Je to to, co určuje dojem, vzhled a funkčnost vašich webových stránek a pomáhá vám dosáhnout skvělé uživatelské zkušenosti a dalších cílů značky, jako jsou konverze a potenciální zákazníci.
Zdrojový kód vaší stránky ovlivňuje vaše SEO. Je to proto, že to je to, co vyhledávače ‘čtou’, aby určily, kde se vaše stránky řadí. To v podstatě znamená, že neodhalené chyby ve vašem zdroji stránky by mohly vést k tomu, že vaše stránky nebudou hodnoceny tak, jak by měly, a co je ještě horší, mohou vést k nepřesným údajům SEO nebo dokonce ke špatným uživatelským zkušenostem.
Proč potřebujete zobrazit zdrojový kód svého webu?
Jak již bylo zmíněno, zdroj vaší stránky ovlivňuje SEO. Ve skutečnosti byste měli zahrnout zobrazení zdrojového kódu jako součást vašeho auditu SEO, i když pokud je potřeba hlouběji použít nástroj SEO jako kombinaci. Jedna skvělá věc na možnosti zobrazit zdrojový kód stránky je, že je to jeden způsob, jak vidět, co dělá vaše konkurence, a přijít na způsoby, jak to „zpětně analyzovat“, abyste dosáhli svých vlastních obchodních cílů.
Zde je několik dalších důvodů, proč byste si měli prohlédnout zdrojový kód:
Pomáhá při kontrole značek titulků
Pokud vaše stránky nemají značky názvu, jednoduše se nezobrazí ve vyhledávačích. Tag title na HTML dokumentu najdete v sekci head. Tagy názvu jsou to, co se zobrazuje ve vyhledávačích, a obvykle na ně lze kliknout.
Pokud zadáte „SEOoptimer“ například ve vyhledávání Google je prvním výsledkem „Ahrefs: Analyzujte webové stránky pomocí našeho bezplatného nástroje SEO Audit & Reporting“
Pokud nejste webový vývojář a používáte CMS založený na javascriptu nebo AJAXu, můžete narazit na několik problémů se SEO. Kontrola zdrojového kódu nebo výběr platformy webových stránek může záviset na vašich potřebách a množství úsilí, které byste potřebovali k indexování a hodnocení vašich webových stránek.
Zkontrolujte skryté soubory, které by neměly být
Někdy jsou soubory, které by neměly být skryty, obvykle. To se obvykle provádí v souboru pomocí „displej: žádný” vlastnictví. Někdy to může být kombinováno s Javascriptem a přidat další funkce. Nebo některé pluginy nebo odborníci na SEO mohou chtít provést triky ke zvýšení vašeho hodnocení nebo může být obsah omylem skrytý.
Někdy může být skrytý obsah způsoben také:
- pluginy nebo nepoctivé agentury, které mohou chtít manipulovat s výsledky vyhledávání,
- záměrná manipulace s CSS – maskované prvky div, neviditelný text, obsah mimo viditelnou oblast nebo bílé písmo na bílém pozadí.
Ať už jsou důvody jakékoli, můžete si prohlédnout zdrojový kód stránky zobrazení své stránky.
Chcete-li zobrazit skryté soubory, stiskněte Cmd+Opt+F (Mac), Ctrl+F (Linux) a Ctrl+Shift+F (Windows), jakmile jste již získali přístup ke zdrojovému kódu.
Zadejte “skrytý“ nebo „displej: žádný“ na vyhledávací liště. Měli byste být schopni vidět všechny skryté položky. Pokud by neměly být, můžete si promluvit se svým vývojářem a zvrátit tuto konkrétní funkci/styl.
Zkontrolujte fragmenty analýzy
Je váš fragment Google Analytics správně nainstalován na každé webové stránce? Vyhledejte „UA“ ve zdroji stránky. Za „UA“ byste měli vidět 7 číslic. Pokud máte Google Analytics nainstalovanou více než jednou, můžete ji nechat odebrat.
Ruční kontrola úryvků Google Analytics může být vyčerpávající, zvláště pokud máte web s mnoha stránkami. Jednodušší způsob, jak zkontrolovat úryvky sledování, je použití souborů Sitemap XML. Poskytne vám rozpis všech adres URL, které máte. Z nich můžete vidět, které potřebují přidat úryvky sledování. Někdy může být lepší požádat svého vývojáře, aby vytvořil skripty, které mohou kontrolovat úryvky sledování.
Zkontrolujte, zda existují odkazy, které jsou „nofollow“, ale neměly by být
Pokud děláte jakýkoli linkbuilding nebo pokud jste si najali odborníka na SEO, můžete zkontrolovat své odkazy z webů, které odkazovaly na vaše stránky, a zjistit, zda váš odkaz nenastavují jako odkaz „sledovat“ nebo „nofollow“. Odkaz „nofollows“ říká vyhledávačům, aby tuto webovou stránku v podstatě ignorovaly. Vyhledejte ve svých odkazech „rel=external nofollow“ a identifikujte ty, které by jej neměly mít. Opět platí, že možnost vyhledávání bude užitečná při sledování toho, jak jsou implementovány v DOM.
Můžete zkontrolovat, zda značky existují v hlavičkách HTTP. Chcete-li to provést, klikněte na „Sítě“ (stejný panel, který používáte k vyhledávání). Zdroje uvidíte v části „Název“ vlevo. Klikněte na zdroj a poté na „záhlaví“. Uvidíte rozpis zdroje. Zkontrolujte existenci jakýchkoli kanonických značek, například „rel=nofollow“.
Zde můžete ověřit stav HTTP zdrojů pro přesměrování. Potvrďte také typ přesměrování a případné chybové stavy a značky, jako je značka robots nebo hreflang.
Zkontrolujte správné použití značky meta robots
Dalším způsobem, jak sdělit vyhledávačům, aby indexovaly webové stránky nebo ne, je použít značku metarobots. Tyto začínají následován jméno = “roboti”. Pokud tyto existují ve vašem zdrojovém kódu, ujistěte se, že nebrání obsahu, který je třeba indexovat, ve skutečném indexování.
Zkontrolujte dobu načítání stránky
Chcete-li zkontrolovat dobu načítání, klikněte na „Síť“ v horní části nástrojů pro vývojáře a poté vyberte „Další nástroje“. Uvidíte, jak dlouho trvá načítání jednotlivých zdrojů v milisekundách.
Posledním nástrojem v seznamu nástrojů jsou „audity“. Kliknutím sem zobrazíte návrhy, které obdržíte pro zlepšení doby načítání webové stránky. Po dokončení auditu obdržíte shrnutí.
Přejděte dále dolů do sekcí „příležitosti“. Mezi návrhy patří:
- Poskytujte obrázky ve formátech nové generace
- Odstraňte prostředky blokující vykreslování
- Předem připojte požadované zdroje
Je zde také shrnutí odhadovaných úspor z hlediska času, které by ušetřila implementace každého z zvýrazněných problémů. Další návrhy na zlepšení můžete také vidět v „diagnostické relaci“.
K dispozici je ikona videa, kterou můžete použít k pořízení snímků obrazovky toho, co vaši uživatelé skutečně zažívají.
Podívejte se na zdroje JS a CSS, které se načítají před DOM. Klikněte na JS a CSS, když jste stále v „Síťových podmínkách“.
Zkontrolujte vykreslení výřezu
Doposud jsme prvky kontrolovali pomocí ‘Elementy’, ‘Zdroje’ a Sítě. To vše se nachází v DevTools, což je okno, které obsahuje všechny tyto nástroje. Dalším nástrojem, který bychom mohli použít, je panel nástrojů zařízení těsně před „prvky“. To vám umožní vidět, jak se různé zdroje vykreslují v různých výřezech, například na mobilu.
Chcete-li vidět, jak se vykresluje na konkrétních zařízeních, vyberte „nastavení“ v nástrojích Customize and Control Dev Tools (tři tlačítka) v pravé horní části nástrojů pro vývojáře a poté vyberte „devices“.
Zkontrolujte optimalizaci obrazu
Mají vaše obrázky tagy title a alt? Značky alt obrázků jsou popisem vašich obrázků a roboti vyhledávačů je používají k „pochopení vašich obrázků“. To je důležité zejména v případě, že prodáváte produkty prostřednictvím svých stránek. V případě elektronického obchodování chcete do popisu alt tagu zahrnout název značky a sériové číslo produktu. Něco k poznámce. „Ozdobné obrázky“, jako jsou ty, které se posouvají v horní části stránky, nemusí mít alt tagy. Ujistěte se, že obrázky zboží, infografiky, snímky obrazovky, diagramy, týmové fotografie a loga mají alt tagy.
Vaše značky by neměly být „vycpané klíčovými slovy“, místo toho by měly být označeny relevantními způsoby k vašemu obsahu. Chcete-li zobrazit své obrázky, vyhledejte značku s .
Dalším způsobem, jak ověřit popisy alt obrázků, je přes panel ‘prvky’ poté, co zpřístupníte zdrojový kód.
Zvyšuje váš obrázek velikost stránky a dobu načítání? Jsou vaše obrázky optimalizované pro mobily? Můžete zkontrolovat vnitřní hodnotu obrázku v porovnání s obrázkem, jehož velikost je měněna na základě zvoleného zobrazení:
Pokud vaše obrázky nereagují nebo pokud lze obrázky komprimovat nebo změnit jejich velikost, abyste mohli zlepšit velikost stránky a dobu načítání, můžete si prohlédnout zdrojový kód a zjistit, zda má smysl jej měnit.
Zobrazit zdroj vs. Kontrolní prvek
Existují dva způsoby, jak zobrazit kód „Zobrazit zdroj“ a „Zkontrolovat prvek“. Jsou to dvě funkce prohlížeče, které vám umožní podívat se na HTML vaší stránky. Hlavním rozdílem je, že „Zobrazit zdroj“ zobrazuje HTML, které bylo doručeno z webového serveru do vašeho prohlížeče. Inspect elements je vývojářský nástroj, který umožňuje sledovat stav stromu DOM poté, co prohlížeč použil opravu chyb a poté, co jakýkoli Javascript zpracoval DOM.
Zde je rozpis:
- Oprava chyb HTML prohlížečem
- HTML normalizace prohlížečem
- Manipulace s DOM pomocí Javascriptu
Jak jsem již zmínil, při použití „Zobrazit zdrojový kód“ s jednostránkovou aplikací uvidíte Javascript versus HTML. Jakékoli chyby HTML lze také opravit v nástroji „Inspect Elements“.
Zde je hypotetická chyba, kterou můžete vidět při použití „Zobrazit zdroj“
Název
První věta.Druhá věta.
Zatímco „Inspect Element“ by opravilo
na
Jak zobrazit zdrojový kód webových stránek v prohlížeči Chrome
Podle W3Counter je Chrome nejpopulárnějším prohlížečem.
To znamená, že většina lidí jej použije k přístupu na váš web z několika zařízení. Jako webmaster, vlastník webu proto potřebujete vědět, jak zobrazit jeho zdrojový kód, abyste mohli skutečně analyzovat, co uživatelé při používání vašeho webu zažívají.
Na PC
Zkratka – Ctrl+U nebo Ctrl+Shift+I nebo F12
- Můžete také kliknout pravým tlačítkem myši na webovou stránku, jejíž zdrojový kód chcete zobrazit (ujistěte se, že kliknete na prázdnou část stránky)
- Vyberte „zobrazit zdroj stránky“
- Třetí možností je přejít na „přizpůsobit a ovládat Google Chrome“ (ikona v pravé horní části prohlížeče)
- Přejít na „další nástroje“
- Poté „nástroje pro vývojáře“
Zde je návod, jak byste pomocí vývojářského nástroje zobrazili zdrojový kód své stránky:
Případně můžete místo použití vývojářského nástroje kliknout na „Zobrazit zdrojový kód stránky“ nebo Ctrl+U, pokud chcete místnost uvolnit.
Všimnete si, že se změnila adresa URL zdroje zobrazení: https://www.yourwebsite.com/ a budete moci vidět celý kód pro tuto konkrétní stránku bez všech nástrojů:
Nebudete však moci vizuálně vidět, jaký kód je pro konkrétní obsah:
Na výše uvedeném snímku obrazovky mohu kliknout pravým tlačítkem na konkrétní slovo nebo obsah a zjistit, co to je. V tomto případě je „SEO Audit & Reporting Tool“