Korištenje Chrome DevTools za rješavanje problema - Semalt odzivi



Chrome DevTools nije nešto što većini SEO profesionalaca nije strano. S druge strane, to bi moglo biti jedna od stvari koju tek trebate naučiti. Pa, u Semaltu se dio našeg procesa u pružanju SEO-ovih potreba klijenta oslanja na naš način edukacije o potrebnim aspektima onoga što vaše web mjesto treba.

Chrome Dev Tools za SEO važan je jer ga koristimo za rješavanje problema. Da bismo omogućili jednostavnu komunikaciju između Semalta i naših klijenata, željeli bismo vam pokazati kako koristimo ovaj alat za rješavanje problema sa SEO-om na vašoj web stranici.

Pomoću Chrome Dev Tools možemo pronaći osnovne SEO probleme, od pretraživanja i indeksiranja web mjesta do njegove izvedbe. U ovom ćemo članku istaknuti tri načina na koje koristimo ove alate kako bismo bolje služili svojim klijentima.

Što su Chrome DevTools?

DevTools ili Chrome DevTools u cijelosti skup je alata za pomoć web programerima koji su ugrađeni izravno u preglednik Chrome. Koristimo ove alate u letu za brzo uređivanje stranica i brzo dijagnosticiramo probleme. To nam pomaže u izradi boljih web stranica za naše klijente, ali to možemo učiniti brže i osigurati da su savršene.

Svi se možemo u velikoj mjeri složiti da je Google Chrome jedan od najvažnijih alata u arsenalu bilo kojeg SEO stručnjaka. Bez obzira na SEO softver koji koristite za automatizaciju revizija ili dijagnosticiranje SEO problema, Chrome DevTools i dalje mora biti dostupan. Zahvaljujući svojoj mogućnosti pružanja ključnih načina za provjeru SEO problema u hodu, mnogi SEO stručnjaci, uključujući Semalt, to su iznova koristili.

Mogli bismo potrošiti više vremena raspravljajući o mnogim načinima na koje Chrome DevTools može pomoći profesionalcima i web programerima, ali naša je pažnja usmjerena na nešto specifičnije. Ovdje želimo podijeliti s vama nekoliko različitih slučajeva u kojima smo se pouzdali u Chrome DevTools da bismo otkrili i riješili problem.

Evo tri situacije da posjedovanje Chrome DevTools ne bi bila loša ideja:

Postavljanje Chrome DevTools za rješavanje problema

Šanse su da nikada niste pokušali koristiti Chrome DevTools. Pa, pristupiti mu je jednostavno kao kliknuti web stranicu na SERP-u i kliknuti gumb za inspekciju. Kao SEO profesionalci, moramo biti oprezniji od toga, ali vi imate ideju kako se to koristi. U Semaltu koristimo i ravninu Elementa, koja nam omogućuje promatranje DOM-a, i CSS, koji omogućuje nekoliko drugih različitih alata u ladici konzole.

Vodit ćemo vas korak po korak kako se ovaj alat koristi u rješavanju problema sa SEO-om.

Da biste započeli, trebali biste kliknuti desnu tipku miša, a zatim odaberite pregledati. Prema zadanim postavkama vidjet ćete kako se pojavljuje ploča s elementima, a to vam daje uvid u DOM i prirodu stilskog lista korištenog u konstrukciji stranice.

Imajući ovaj pogled nudi nam puno stvari u koje bismo mogli zaroniti; međutim, omogućujemo ladici konzole da u potpunosti iskoristi komplet alata.

Kliknite točke koje se pojavljuju pored ikone postavki i pomaknite se prema dolje dok ne naiđemo na opciju Pokaži ladicu konzole. Ili jednostavno kliknemo tipku za bijeg.

S omogućenom konzolom i pločom elemenata, korisnici mogu dobiti uvid u kôd koji je prikazan u DOM-u. Korisnici će također vidjeti stilske tablice koje su korištene za bojanje koda u pregledniku. Kao i nekoliko drugih alata kojima imate pristup iz ladice konzole.

Za početnike ladica konzole možda neće prikazati samu konzolu, ali nakon što ste neko vrijeme koristili Chrome DevTools, ladica konzole počinje prikazivati ​​samu konzolu. Ploča konzole omogućuje vam pregled prijavljenih poruka, kao i pokretanje javascripta. Danas ne bismo zaronili u to.

Umjesto toga, evo tri dodatna alata koja ćemo pogledati:
Da biste pronašli ove alate, odaberite više alata i odaberite svaku od ove tri stavke tako da se u ladici konzole prikazuju kao kartice. Nakon što omogućimo ove tri ploče, možemo započeti rješavanje problema.

Prebacivanje korisničkog agenta u DevTools

Prebacivanje User-Agenta jedan je od najzanemarivanijih načina korištenja DevTools-a. Ovo je jednostavan test koji nam je pomogao otkriti nekoliko različitih problema jer pruža uvid u to kako Googlebot vidi i obrađuje značajke informacija na web mjestu.

Za naš tim istraživačkih stručnjaka za SEO, DevTools se koristi kao dostojno i pouzdano povećalo, što nam omogućava da uvećamo probleme na web mjestu kako bismo ne samo spriječili njihov razvoj, već i otkrili temeljne uzroke takvih problema.

Kako možete prebaciti svog korisničkog agenta na Chrome DevTools?

Prilikom prebacivanja korisničkog agenta u Chrome, morat ćete upotrijebiti karticu mrežnih uvjeta u ladici konzole. Da biste to učinili, poništite odabir opcije automatski, što vam omogućuje prikaz sadržaja pomoću Googlebot pametnog telefona, Bingbota ili niza drugih korisničkih agenata da biste vidjeli kako se vaš sadržaj isporučuje.

U slučaju da Google ne prikazuje ažuriranu oznaku naslova ili metaopis u SERP-u, nesumnjivo će vlasnik takve web stranice biti zabrinut. Razumijevanje razloga zašto je Google odlučio koristiti potpuno drugu oznaku naslova ili nije uspio ažurirati oznaku važno je za osiguravanje provedbe promjena koje ste izvršili.

Korištenje Chrom DevTool-a za slučaj mobilne web stranice

U sličnom slučaju, nakon prebacivanja korisničkog agenta na Googlebot pametni telefon, otkrili smo da web lokacija i dalje poslužuje zamjensku mobilnu web lokaciju Googlebotu. No, budući da je Google već prešao na indeksiranje s mobilnim uređajima, obradio je i indeksirao promjene na mobilnom web mjestu, ali nije uspio uhvatiti ažuriranja izvršena u desktop verziji Domene.

Možete pretpostaviti da su web lokacije za mobilne uređaje neka relikvija, ali one doista još uvijek postoje.

Korištenje Chrome DevTools u uočavanju pretjerane zaštite poslužitelja

Na internetu ima mnogo pojedinaca sa zlonamjernim namjerama. Mnogi hakeri i zlonamjerni zločinci pokušavaju koristiti Google protiv web lokacija na Internetu. Iz tog razloga neki CD-ovi na poslužitelju snose hrpe i drugi pružatelji usluga hostinga mogu ponuditi određene ugrađene značajke koje zaustavljaju lažne podmetače Googlebota kada je njihova stvarna namjera zaustaviti neželjeni alati za indeksiranje da dobiju pristup web mjestu. U pretjeranom naporu ove web stranice mogu na kraju blokirati Googlebot u pristupu web mjestu. Ponekad korisnici vide poruke u kojima stoji "Blokiran neovlašteni zahtjev".

Ako na Googleovom SERP-u naiđemo na takve poruke, odmah znamo da je došlo do prekršaja iako preglednik bez problema učitava sadržaj.

Korištenjem značajke prekidača User-Agent možemo vidjeti da web lokacija služi tu poruku čim postavimo User-Agenta na Googlebot Smartphone.

Dijagnosticiranje osnovnih web značajki u DevTools

Kartica izvedbe jedna je od najvažnijih značajki DevTools-a. Služi kao izvrstan prolaz za rješavanje problema koji utječu na brzinu i performanse stranice. Općenito, DevTools može ponuditi neke korisne informacije kada je riječ o osnovnim vitalnim vrijednostima.

Mjerni podaci koji tvore Googleove Core Web Vitals već su neko vrijeme dio izvješća o brzini stranice i izvedbi. Vrlo je važno da SEO stručnjaci budu upoznati s načinom seciranja ovih problema. Kao webmasteri, postali smo sve svjesniji važnosti osnovnih vitalnih vrijednosti za učinkovitost pretraživanja.

Kada koristimo karticu izvedbe u DevToolsu, koračamo bliže ka boljem razumijevanju važnih web mjernih podataka.

Još jednom provjerite HTTP zaglavlja i pregledajte nekorišteni kod

Jeste li ikad čuli za soft 404-e u svojim SEO revizijama? Pa, meki 404-i su kada preglednik može prikazati stranicu 404, ali oni vraćaju 200 OK odgovorni kôd.
U nekim se slučajevima sadržaj može učitati točno onako kako se očekuje u pregledniku; međutim, HTTP odgovor kod može prikazivati ​​pogrešku 404 ili 302. To također može biti općenito netočno ili ne ono što ste očekivali. U svakom slučaju, korisno je vidjeti HTTP kod odgovora za svaku stranicu i resurs.

Iako postoji mnoštvo nevjerojatnih Chromeovih proširenja koja vam daju dragocjene informacije o kodovima odgovora pomoću DevTools-a, mogu vam omogućiti izravnu provjeru tih podataka.

U ovom trenutku, DevTools prikazuje sve pojedinačne resurse koji se pozivaju za sastavljanje stranice. To uključuje odgovarajuće statusne kodove i vizualizaciju vodopada.

Zaključak

Uz Chrome DevTools imate mogućnost pronaći i riješiti osnovne probleme koji sprječavaju da vaše web mjesto dostigne svoj pravi potencijal. DevTools su posebno korisni u vašim tehničkim revizijama. Uz ove, uživate i u brzini kada koristite DevTools. Ne napuštajući naše web preglednike, naš tim u Semaltu može se osjećati ovlaštenim uočavati probleme od pretraživanja i indeksiranja web stranice do toga koliko dobro funkcionira.

Semalt je ovdje da vam pomogne da otkrijete najbolje na vašoj web stranici i nadamo se da ćete stupiti u kontakt s našim timom. Radujemo se vašem javljanju.