Riešenie problémov s nástrojmi Chrome DevTools - Semalt Prompts



Chrome DevTools nie je pre väčšinu profesionálov v oblasti SEO cudzí. Na druhej strane to môže byť jedna z vecí, ktoré sa ešte musíte naučiť. V spoločnosti Semalt sa časť nášho procesu pri uspokojovaní potrieb SEO našich klientov spolieha na náš spôsob, ako vás vzdelávať v potrebných aspektoch toho, čo vaša webová stránka potrebuje.

Chrome Dev Tools for SEO je dôležitý, pretože ho používame pri riešení problémov. Aby sme umožnili ľahkú komunikáciu medzi Semalt a našimi klientmi, chceli by sme vám ukázať, ako používame tento nástroj na riešenie problémov SEO na vašom webe.

S nástrojmi Chrome Dev Tools dokážeme vyhľadať základné problémy so SEO, od prehľadávania webu až po jeho výkon. V tomto článku zdôrazníme tri spôsoby, ako používame tieto nástroje na lepšie poskytovanie služieb našim klientom.

Čo je Chrome DevTools?

DevTools alebo Chrome DevTools v plnom rozsahu je sada nástrojov na pomoc vývojárom webu, ktoré sú zabudované priamo do prehliadača Chrome. Tieto nástroje používame pri priebežnej úprave stránok a pohotovo diagnostikujeme problémy. To nám pomáha vytvárať lepšie webové stránky pre našich klientov, ale môžeme to robiť rýchlejšie a zabezpečiť, aby boli dokonalé.

Všetci môžeme vo veľkej miere súhlasiť s tým, že prehliadač Google Chrome je jednou z najdôležitejších súprav nástrojov v arzenáli každého profesionála SEO. Bez ohľadu na softvér SEO, ktorý používate na automatizáciu auditov alebo diagnostiku problémov SEO, je Chrome DevTools nevyhnutnosťou. Vďaka svojej schopnosti poskytovať rozhodujúce spôsoby, ako skontrolovať SEO problémy za behu, ho mnoho SEO profesionálov, vrátane Semalt, opakovane používalo.

Mohli by sme stráviť viac času diskusiou o mnohých spôsoboch, ako môže Chrome DevTools pomôcť profesionálom a webovým vývojárom, ale naša pozornosť sa venuje niečomu trochu konkrétnejšiemu. Tu sa s vami chceme podeliť o niekoľko rôznych prípadov, keď sme sa pri riešení a riešení problému spoliehali na Chrome DevTools.

Tu sú tri situácie, kedy by vybavenie Chrome DevTools nebolo zlým nápadom:

Nastavenie nástrojov Chrome DevTools na riešenie problémov

Je pravdepodobné, že ste nikdy nevyskúšali používať Chrome DevTools. Prístup k nej je jednoduchý ako kliknutie na webovú stránku na serveri SERP a kliknutie na tlačidlo skontrolovať. Ako SEO profesionáli musíme byť opatrnejší, ale vy máte predstavu, ako sa to používa. V spoločnosti Semalt používame rovinu Element, ktorá umožňuje pozorovať DOM, a CSS, ktoré umožňujú niekoľko ďalších rôznych nástrojov v zásuvke konzoly.

Prevedieme vás procesom krok za krokom, ako sa tento nástroj používa pri riešení problémov so SEO.

Ak chcete začať, mali by ste kliknúť pravým tlačidlom myši a potom zvoliť možnosť skontrolovať. V predvolenom nastavení uvidíte panel prvkov, ktorý vám umožní nahliadnuť do modelu DOM a do povahy šablóny štýlov použitých pri konštrukcii stránky.

Tento pohľad nám ponúka veľa vecí, do ktorých sa môžeme ponoriť; povoľujeme však zásuvke konzoly, aby využila všetky výhody tejto sady nástrojov.

Kliknite na bodky, ktoré sa zobrazia vedľa ikony nastavení, a posúvajte sa nadol, kým nenarazíme na možnosť Zobraziť zásuvku konzoly. Prípadne jednoducho klikneme na kláves Escape.

Ak je povolená konzola a panel prvkov, používatelia môžu nazrieť do kódu, ktorý bol vykreslený v DOM. Používateľom sa v prehliadači zobrazia aj šablóny štýlov, ktoré boli použité na vykreslenie kódu. Rovnako ako niekoľko ďalších nástrojov, ku ktorým máte prístup zo zásuvky konzoly.

Pre začiatočníkov nemusí zásuvka konzoly zobrazovať samotnú konzolu, ale potom, čo ste Chrome DevTools určitý čas používali, sa v zásuvke konzoly začne zobrazovať samotná konzola. Váš panel konzoly vám umožňuje prezerať prihlásené správy a tiež spúšťať javascript. Dnes by sme sa do toho neponárali.

Namiesto toho sú tu tri ďalšie nástroje, na ktoré sa pozrieme:
Ak chcete nájsť tieto nástroje, vyberte viac nástrojov a vyberte každú z týchto troch položiek tak, aby sa zobrazovali ako karty v zásuvke konzoly. Po povolení týchto troch panelov môžeme začať s riešením problémov.

Prepínanie agenta používateľa v nástroji DevTools

Prepínanie User-Agent je jedným z najviac prehliadaných spôsobov použitia DevTools. Toto je jednoduchý test, ktorý nám pomohol odhaliť niekoľko rôznych problémov, pretože poskytuje prehľad o tom, ako Googlebot vidí a spracováva informačné funkcie na webe.

Pre náš tím investigatívnych profesionálov v oblasti SEO sa nástroj DevTools používa ako dôstojné a dôveryhodné zväčšovacie sklo, čo nám umožňuje priblížiť problémy na webovej stránke, aby sme nielen zabránili vzniku týchto problémov, ale aj odhalili základné príčiny týchto problémov.

Ako môžete zmeniť svojho používateľského agenta v Chrome DevTools?

Pri prepínaní agenta používateľa v prehliadači Chrome budete musieť použiť kartu sieťové podmienky v zásuvke konzoly. Za týmto účelom zrušíte začiarknutie políčka automaticky, čo vám umožní prezerať obsah pomocou smartphonu Googlebot, Bingbot alebo niekoľkých ďalších používateľských agentov, aby ste videli, ako sa váš obsah dodáva.

V prípade, že Google nezobrazuje aktualizovanú značku názvu alebo meta popis v SERP, bude mať vlastník takejto webovej stránky nepochybne obavy. Pochopenie toho, prečo sa spoločnosť Google rozhodla použiť úplne inú značku názvu alebo ju nedokázala aktualizovať, je dôležité pri implementácii vykonaných zmien.

Používanie nástroja Chrom DevTool v prípade alternatívnych webových stránok pre mobilné zariadenia

V podobnom prípade sme po zmene používateľského agenta na smartphone Googlebot zistili, že web stále poskytuje alternatívny mobilný web pre robota Googlebot. Ale pretože Google už vykonal prechod na indexovanie najskôr pre mobilné zariadenia, spracoval a indexoval zmeny na mobilnom webe, ale nedokázal zachytiť aktualizácie vykonané vo verzii domény pre počítače.

Môžete predpokladať, že mobilné weby sú prežitkom, ale v skutočnosti stále existujú.

Používanie nástrojov Chrome DevTools na zisťovanie príliš horlivej ochrany servera

Na webe existuje veľa jednotlivcov so škodlivými úmyslami. Mnoho hackerov a škodlivých zločincov sa pokúša použiť Google proti stránkam na internete. Z tohto dôvodu môžu niektoré stohy serverov CDN a ďalší poskytovatelia hostiteľských služieb ponúkať niektoré vstavané funkcie, ktoré zastavia spoofovanie robota Googlebot, keď je ich skutočným zámerom zabrániť spamovým prehľadávačom v získaní prístupu na web. Pri nadmernom horlivom úsilí môžu tieto stránky nakoniec blokovať robotu Googlebot v získaní prístupu na tieto stránky. Používateľom sa niekedy zobrazia správy s hlásením „Neoprávnená žiadosť blokovaná“.

Ak sa s takýmito správami stretneme na serveri SERP spoločnosti Google, okamžite vieme, že dôjde k faulu, aj keď prehliadač načítava obsah bez problémov.

Pomocou funkcie prepínania User-Agent vidíme, že web zobrazuje túto správu, akonáhle nastavíme User-Agent na Googlebot Smartphone.

Diagnostika základných životných funkcií webu v nástrojoch DevTools

Karta Výkon je jednou z najdôležitejších funkcií nástroja DevTools. Slúži ako skvelá brána na riešenie problémov, ktoré ovplyvňujú rýchlosť a výkon stránky. Všeobecne platí, že DevTools môže ponúknuť niekoľko použiteľných informácií, pokiaľ ide o základné webové funkcie vitals.

Metriky, ktoré tvoria základné webové informácie spoločnosti Google, sú už istý čas súčasťou správ o rýchlosti a výkone stránky. Je veľmi dôležité, aby odborníci v oblasti SEO vedeli, ako tieto problémy rozobrať. Ako správcovia webových stránok sme si čoraz viac uvedomovali dôležitosť základných webových funkcií pre efektivitu vyhľadávania.

Pri používaní karty výkonnosti v nástroji DevTools sa posúvame o krok bližšie k tomu, aby sme sa zlepšili v porozumení dôležitých metrík webu.

Skontrolujte svoje hlavičky HTTP a skontrolujte nepoužitý kód

Už ste niekedy počuli o mäkkých 404 vo svojich auditoch SEO? Mäkké čísla 404 sú vtedy, keď prehliadač môže zobraziť stránku 404, ale vrátia kód odpovede 200 OK.
V niektorých prípadoch sa obsah môže načítať presne podľa očakávania v prehliadači; Kód odpovede HTTP však môže vykazovať chybu 404 alebo 302. Môže to byť tiež všeobecne nesprávne alebo to, čo ste očakávali. V oboch prípadoch je užitočné zobraziť kód odpovede HTTP pre každú stránku a zdroj.

Aj keď existuje množstvo úžasných rozšírení pre Chrome, ktoré vám poskytujú cenné informácie o kódoch odpovedí pomocou nástroja DevTools, umožňujú vám tieto informácie skontrolovať priamo.

V tomto okamihu program DevTools zobrazuje všetky jednotlivé zdroje, ktoré sa volajú na kompiláciu stránky. Patria sem príslušné stavové kódy a vizualizácia vodopádu.

Záver

S Chrome DevTools máte možnosť vyhľadávať a riešiť základné problémy, ktoré bránia vášmu webu v dosahovaní jeho skutočného potenciálu. Nástroje DevTools sú obzvlášť užitočné pri vašich technických auditoch. Okrem nich vás pri používaní DevTools poteší aj rýchlosť. Bez toho, aby sme opustili naše webové prehľadávače, sa náš tím v Semalt môže cítiť oprávnený zisťovať problémy s kontrolou od prehľadávania webových stránok až po ich dobrú výkonnosť.

Semalt je tu, aby vám pomohol získať to najlepšie na vašom webe, a dúfame, že by ste sa dostali do kontaktu s našim tímom. Tešíme sa na vašu odpoveď.


mass gmail