A Chrome DevTools használata a hibaelhárításhoz - Semalt kéri



A Chrome DevTools nem idegen a legtöbb SEO szakembertől. A lakóknak viszont ez lehet az egyik olyan dolog, amit még meg kell tanulnod. Nos, a Semaltnél az ügyfelünk SEO-igényeinek kiszolgálására irányuló folyamatunk egy része arra támaszkodik, hogy oktassuk Önt a webhelyének szükséges szempontjairól.

A Chrome Dev Tools for SEO fontos, mivel a hibaelhárítás során használjuk. A Semalt és ügyfeleink közötti egyszerű kommunikáció érdekében szeretnénk megmutatni, hogyan használjuk ezt az eszközt a SEO-val kapcsolatos problémák megoldására az Ön weboldalán.

A Chrome Dev Tools segítségével meg tudjuk találni a mögöttes SEO problémákat, a webhely feltérképezésétől a teljesítményéig. Ebben a cikkben három módszert emelünk ki, amelyekkel ezeket az eszközöket felhasználjuk ügyfeleink jobb kiszolgálása érdekében.

Mi a Chrome DevTools?

A DevTools vagy a Chrome DevTools teljes egészében webfejlesztői segédeszközök összessége, amelyek közvetlenül a Chrome böngészőbe vannak beépítve. Ezeket az eszközöket az oldalak menet közbeni szerkesztésében használjuk, és azonnal diagnosztizáljuk a problémákat. Ez segít abban, hogy jobb weboldalakat építsünk ki ügyfeleink számára, de ezt gyorsabban megtehetjük, és biztosíthatjuk, hogy tökéletesek legyenek.

Mindannyian nagy mértékben egyetértünk abban, hogy a Google Chrome az egyik legfontosabb eszközkészlet bármely SEO pro arzenáljában. Függetlenül az ellenőrzések automatizálásához vagy a SEO-problémák széles körű diagnosztizálásához használt SEO-szoftvertől, a Chrome DevTools továbbra is kötelező. Köszönhetően annak, hogy kulcsfontosságú módszereket tud nyújtani a SEO kérdések menet közbeni ellenőrzésére, sok SEO szakember, köztük a Semalt is, újra és újra felhasználta.

Több időt tölthetnénk annak megvitatásával, hogy a Chrome DevTools hogyan segíthet a szakembereknek és a webfejlesztőknek, de figyelmünk valamivel konkrétabbra irányul. Itt szeretnénk megosztani Önnel néhány különböző esetet, amikor a Chrome DevTools programra támaszkodtunk egy probléma kitalálása és kijavítása érdekében.

Három olyan helyzet van, amelyeknél a Chrome DevTools használata nem lenne rossz ötlet:

A Chrome DevTools beállítása a hibaelhárításhoz

Valószínű, hogy még soha nem próbálta meg használni a Chrome DevTools alkalmazást. Nos, elérése ugyanolyan egyszerű, mint a SERP-n található webhelyre kattintani, és az ellenőrzés gombra kattintani. SEO szakemberekként ennél óvatosabbaknak kell lennünk, de van ötlete, hogyan kell használni. A Semaltnél mind az Element síkot használjuk, amely lehetővé teszi számunkra a DOM megfigyelését, mind pedig a CSS-t, amely lehetővé teszi még néhány különféle eszköz használatát a konzol fiókjában.

Lépésről lépésre bemutatjuk, hogyan használják ezt az eszközt a SEO hibaelhárításában.

A kezdéshez kattintson a jobb gombbal, majd válassza az Ellenőrzés lehetőséget. Alapértelmezés szerint látni fogja az elempanelt, és ez bepillantást enged a DOM-ba és az oldal elkészítéséhez használt stíluslap jellegébe.

Ennek a nézetnek a birtokában rengeteg dolog kínál bennünket, amelyekben elmerülhetünk; azonban lehetővé tesszük a konzolfiók számára, hogy teljes mértékben kihasználja az eszköztár előnyeit.

Kattintson a beállítások ikon mellett megjelenő pontokra, és görgessen lefelé, amíg rábukkanunk a Konzol fiók megjelenítése lehetőségre. Alternatív megoldásként egyszerűen kattintson a menekülési gombra.

A konzol és az elempanel engedélyezésével a felhasználók bepillantást nyerhetnek a DOM-ban renderelt kódba. A felhasználók meglátják azokat a stíluslapokat is, amelyekkel a böngészőben a kódot festették. Több más eszköz mellett, amelyekhez hozzáférhet a konzol fiókjából.

Első alkalommal használók számára a konzolfiók nem feltétlenül jeleníti meg magát a konzolt, de miután egy ideig használta a Chrome DevTools alkalmazást, a konzolfiók elkezdi megmutatni magát a konzolt. A konzol panel lehetővé teszi a naplózott üzenetek megtekintését, valamint a javascript futtatását. Ma nem merülnénk bele ebbe.

Ehelyett itt van további három eszköz, amelyet meg fogunk vizsgálni:
Ezen eszközök megkereséséhez jelöljön ki további eszközöket, és jelölje ki mindhárom elemet úgy, hogy fülként jelennek meg a konzol fiókjában. Miután engedélyeztük ezt a három panelt, elkezdhetjük a hibaelhárítást.

A felhasználói ügynök kapcsolása a DevTools alkalmazásban

A User-Agent váltása az egyik leginkább figyelmen kívül hagyott módszer a DevTools használatára. Ez egy egyszerű teszt, amely több különböző kérdés feltárásában segített nekünk, mivel betekintést nyújt abba, hogy a Googlebot hogyan látja és dolgozza fel a webhely információs funkcióit.

Az oknyomozó SEO szakemberekből álló csapatunk számára a DevTools-t méltó és megbízható nagyítóként használják, amely lehetővé teszi számunkra, hogy nagyítsunk egy webhelyen található kérdéseket, hogy ne csak megakadályozzuk az ilyen kérdések kialakulását, hanem az ilyen problémák kiváltó okainak feltárására is.

Hogyan kapcsolhatja be felhasználói ügynökét a Chrome DevTools alkalmazásban?

Ha a felhasználói ügynököt a Chrome-ban váltja, akkor a konzol fiókjában a hálózati feltételek fület kell használnia. Ehhez szünteti meg a Kiválasztás jelölőnégyzet bejelölését, amely lehetővé teszi a tartalom megtekintését a Googlebot okostelefon, a Bingbot vagy számos más felhasználói ügynök segítségével, hogy lássa, hogyan szállítják a tartalmát.

Abban az esetben, ha a Google nem jeleníti meg a SERP-ben a frissített címkét vagy meta-leírást, kétségtelen, hogy egy ilyen webhely tulajdonosa aggódik. Annak megértése, hogy a Google miért választott egy teljesen más címkét, vagy miért nem frissítette a címkét, fontos annak biztosításában, hogy az Ön által végrehajtott módosítások megvalósuljanak.

A Chrom DevTool használata mobil alternatív webhelyek esetén

Hasonló esetben, miután a felhasználói ügynököt átállítottuk a Googlebot okostelefonra, rájöttünk, hogy a webhely továbbra is egy alternatív mobil webhelyet szolgáltat a Googlebot számára. De mivel a Google már átállt a mobilindexes indexelésre, feldolgozta és indexelte a változásokat a mobilwebhelyen, de nem sikerült elérnie a Domain asztali verziójának frissítéseit.

Feltételezheti, hogy a mobil webhelyek valamilyen ereklye, de valóban léteznek.

A Chrome DevTools használata a túlbuzgó kiszolgálóvédelem kiszűrésében

Az interneten sok rosszindulatú szándékú személy található. Sok hacker és rosszindulatú gazember megpróbálja használni a Google-t az internetes oldalak ellen. Emiatt egyes szerverek egymásra rakják a CDN-eket, és más tárhelyszolgáltatók felajánlhatnak bizonyos beépített szolgáltatásokat, amelyek megakadályozzák a Googlebot-hamisításokat, amikor tényleges szándékuk megakadályozni a spam jellegű robotok hozzáférését a webhelyhez. Túl buzgó erőfeszítések miatt ezek a webhelyek végül blokkolhatják a Googlebot hozzáférését a webhelyhez. Előfordul, hogy a felhasználók olyan üzeneteket látnak, amelyekben a „Jogosulatlan kérelem blokkolva” felirat szerepel.

Ha ilyen üzenetekkel találkozunk a Google SERP-jén, azonnal tudjuk, hogy szabálytalanság van, annak ellenére, hogy a böngésző problémamentesen tölti be a tartalmat.

A User-Agent kapcsoló funkció használatával láthatjuk, hogy a webhely ezt az üzenetet szolgáltatja, amint a User-Agent-t Googlebot Smartphone-ra állítjuk.

Az alapvető webes vitálok diagnosztizálása a DevTools alkalmazásban

A teljesítmény fül a DevTools egyik legfontosabb jellemzője. Nagyszerű átjáróként szolgál az oldalsebességet és teljesítményt befolyásoló problémák elhárításához. Általánosságban elmondható, hogy a DevTools felajánlhat néhány hasznos információt, amikor az alapvető internetes vitálokról van szó.

A Google Core Web Vitals részét képező mutatók egy ideje az oldalsebesség és a teljesítmény jelentések részét képezik. Nagyon fontos, hogy a SEO szakemberek ismerjék ezeket a kérdéseket. Webmesterekként jobban felismertük az alapvető webes vitálok fontosságát a keresés hatékonysága szempontjából.

A DevTools teljesítmény lapjának használatakor egy lépéssel közelebb kerülünk ahhoz, hogy jobban megértsük a fontos webes mutatókat.

Ellenőrizze még egyszer a HTTP fejléceket, és ellenőrizze a fel nem használt kódot

Hallottál valaha a soft 404-esekről SEO ellenőrzése során? Nos, a puha 404-eseknél a böngésző megjeleníthet 404-es oldalt, de 200 OK válaszkódot adnak vissza.
Bizonyos esetekben a tartalom pontosan a várakozások szerint tölthető be a böngészőben; azonban a HTTP válaszkód 404 vagy 302 hibát mutathat. Ez általában hibás is lehet, vagy nem az, amire számítottál. Bárhogy is legyen, hasznos minden oldal és erőforrás HTTP-válaszkódjának megtekintése.

Bár számos csodálatos Chrome-bővítmény található, amelyek értékes információkat nyújtanak a DevTools használatával készített válaszkódokról, lehetővé teszi, hogy közvetlenül ellenőrizze ezeket az információkat.

Ekkor a DevTools megmutatja az oldal összeállításához felhasznált összes erőforrást. Ez magában foglalja a megfelelő állapotkódokat és a vízesés megjelenítését.

Következtetés

A Chrome DevTools segítségével megtalálhatja és megoldhatja azokat a mögöttes problémákat, amelyek megakadályozzák, hogy webhelye elérje valódi lehetőségeit. A DevTools kifejezetten hasznos a műszaki ellenőrzések során. Ezek mellett élvezheti a sebességet a DevTools használatakor is. A webböngészőink elhagyása nélkül a Semalt csapatunk felhatalmazást kap arra, hogy észrevegye az ellenőrzési kérdéseket a webhely feltérképezésétől a teljesítményükig.

Semalt itt van, hogy segítsen Önnek a legjobbat kihozni a webhelyéből, és reméljük, hogy kapcsolatba lépne csapatunkkal. Várom válaszukat.