Egy SEO szakember számtalan eszköz közül válogathat: a konkrét feladattól függően egészen széles paletta áll rendelkezésre, legyen az ingyenes vagy fizetős. Hogyha technikai jellegű probléma lép fel, akkor az egyik nagyon hasznos eszköz a Chrome Developer Tools.
A legtöbb SEO specialista egy technikai kérdés esetén már szinte gondolkodás nélkül nyomja meg a Ctrl+Shift+I kombinációt (Mac-en Command+Option+I), vagy kattint a Chrome menüben a More tools, majd Developer tools-ra. Összegyűjtöttük azokat a lehetőségeket, amiket a DevTools kínál és érdemes elsajátítani.
1. Mobil vagy asztali nézet
Alapértelmezetten asztali nézettel tölt be a DevTools, azonban a mobilos keresések előretörésével, illetve a mobile-first indexing miatt elengedhetetlen, hogy a mobil verziója is megfelelően töltsön be az oldalnak.
Hogyan érhető el ez a funkció?
Kattints az eszköz ikonra a bal felső menüsorban, vagy csak nyomd meg a Ctrl+Shift+M billentyűkombinációt. Ekkor automatikusan mobil nézetre vált át az elemzett honlap.
Nincs más hátra, mint tesztelni a mobil verzió navigációját, az egyes gombokat, illetve a tartalom megjelenítését.
Pro tanács: Megadhatsz akár tablet nézetet is, vagy szabályozhatod a mobil kijelző méretét is. Sőt, akár a készülék fekvését is megváltoztathatod fekvő vagy álló nézetre.
2. Másik user-agent beállítása
Kíváncsi vagy, miként interaktálódnak az egyes keresőrobotok a weboldal tartalmával? Válts egy tetszőleges keresőrobotra néhány lépésben.
Így csináld!
- Menj rá a DevTools menü jobb szélén található 3 pontra, majd:
- More tools → Network conditions
- Vegyük ki a pipát a “Use browser default” mezőből.
- Menjünk rá a “Custom” mezőre és válasszuk ki azt a user-agentet, amit szimulálni szeretnénk, legyen az Googlebot Smartphone, vagy bármi egyéb. Lehetőségünk van akár egy saját keresőrobotot is megadni.
- More tools → Network conditions
Pro tanács: A “Network throttling” szekciónál válaszd ki például a “Slow 3G” opciót hogy megtudd, miként látják a lassú internettel rendelkező felhasználók a honlapod, hogyan tölt be nekik.
3. Tartalom és elemek változtatása
Amennyiben szeretnénk megtudni, hogy nézne ki a Header szekció plusz egy sorral, vagy egy gombot szeretnénk lejjebb elhelyezni az oldalon belül, lehetőségünk van valós időben letesztelni ezeket. Nyugalom, ezek a módosítások csak a DevTools-ban jelennek meg és nem változtatják meg a HTML fájlt.
Mik a lépések és mire lehet használni ezt a funkciót?
Kattintsunk arra az elemre (legyen az kép vagy akár egy szövegrész), amit szeretnénk módosítani. Nyomjuk meg a Ctrl (vagy Cmd)+Shift+I billentyűkombinációt és klikkeljünk bele vagy a szövegrészbe, vagy pedig a CSS-be.
Módosíthatjuk magát a szöveget, a betűméretet, vagy a menüstruktúra elemeit is. Sőt, változtathatunk az oldalcímen vagy akár a meta leíráson is.
4. Készíts képernyőképet gyorsan és egyszerűen
Számtalan program és bővítmény alkalmas képernyőkép készítésére, de a Chrome DevTools-ban is van egy beépítve. Ha elkészítettük a kívánt változtatásokat az oldalon, készíthetünk egy screenshotot a végeredményről.
Hogyan csinálj képernyőképet?
Hogyha mobil nézetben vagy, kattints a bal felső menünél a 3 pöttyre. Ezután válaszd ki, hogy egy bizonyos szekciót jelölnél ki, vagy teljes képernyős képernyőképet szeretnél: “Capture screenshot”, vagy “Capture full site screenshot”.
Asztali nézetben pedig az alábbiak a lépések: nyomd le a Ctrl+Shift+P (Cmd+Shift+P) billentyűket és írd be a mezőbe, hogy “screenshot”. Ezután válaszd ki azt az opciót, amire éppen szükséged van:
- egy kiválasztott oldalszekcióról (a konkrét szekciót az opció kiválasztása után tudod definiálni),
- az oldal egészéről,
- egy bizonyos elemről (amit először ki kell jelölnöd),
- vagy az éppen látható oldalról.
5. HTTP headers: státusz kód, robot szabályok (például noindex), canonical
A DevTools “Network” tabjénél számtalan fontos információra tehetünk szert:
- Mennyi ideig tart egyes erőforrások betöltése?
- Hogyan néz ki mindez vízesés modellként ábrázolva?
- Mekkora méretűek az egyes erőforrások?
- Milyen státuszkóddal rendelkeznek?
- Milyen robot szabályok vannak beállítva?
- Elérhető a gzip tömörítés?
Hogyan érheted el ezeket az információkat?
- Menj a “Network” szekcióra. Lehetséges, hogy újra be kell töltened az oldalt, hogy a DevTools az összes erőforrást betölthesse. Ha ez kész, utána az összes erőforrást látni fogod, ami az adott oldalon elérhető, mellette a betöltődési idővel és a mérettel, illetve a státuszkóddal. → Gyorsan kiszűrheted, ha valamelyik erőforrás például 404-es státuszkódot ad, miközben maga a tartalom elérhető (soft 404 hiba).
- Ezután kattints arra az erőforrásra, amire részletesebben kíváncsi vagy. A fenti szűrők segítségével szűrheted őket típus szerint, például CSS vagy JS.
- Amint ez meg van, rögtön láthatod a vízesés modellt, illetve egy felugró panelt több opcióval.
- Itt ha a “Headers”-re kattintasz, megtalálod az összes HTTP headerst.
Pro tanács: Ellenőrizheted azt is, hogy a canonical tag egyértelműen van-e jelezve a Googlebot-nak. Elképzelhető ugyanis, hogy más szerepel a forráskód rel=”canonical” tagjében, mint a HTTP headers-ben.
6. Renderelést blokkoló erőforrások
Hogyha még a renderelés megkezdése előtt sok fájlnak kell betöltődnie, az hosszú oldalbetöltődési időhöz vezethet. A Chrome Developer Tools-ban meg tudjuk nézni, melyek azok a tipikusan JavaScript fájlok, amik a renderelés útjában állnak.
Hogyan térképezzük fel a renderelést blokkoló erőforrásokat?
A “Network” szekción belül, miután az összes erőforrás betölt látni fogunk mindegyik erőforrás mellett egy vízesés modellt a betöltődésre. Azok a fájlok, amik függőleges kék vonaltól balra találhatóak, a DOM tartalom betöltése előtt zajlanak le, ezzel késleltetve a renderelést.
7. Nem használt kódok kiszűrése
Ha egy oldal lassan tölt be, az könnyen lehet a nagy arányban nem használt CSS és JavaScript fájlok miatt. Szerencsére ezek az erőforrások egyszerűen kiszűrhetőek a DevTools felületén. Ezután nincs is más hátra, mint elküldeni a fejlesztőknek a tapasztaltakat és meghatározni, miként lehet optimalizálni az erőforrásokon.
Hogyan fedezzük fel a nem használt erőforrásokat?
- Maradva a “Network” fülön kattints a 3 pontra jobb felül.
- Menj rá, hogy “More tools”, majd válaszd ki a “Coverage” opciót.
- Ezután alul látni fogod az összes CSS és JS fájlt, mellettük a nem használt kódmennyiség konkrét byte értékével és arányával, illetve mindezt vizuálisan is ábrázolva.
Pro tanács: Ha rákattintunk az egyik erőforrásra, részletesen megnézhetjük, mely kódsorok kerülnek valóban használatra renderelés során. Piros csíkkal szerepelnek a nem használt, míg zölddel a használt sorok.
8. Képek optimalizálása: képméret, felbontás
A képek optimalizáltsága könnyen az egyik legfontosabb SEO tényezővé válhat, ami a betöltődést illeti.
Az egyik probléma a képek mérete szokott lenni: ha nagyon sok MB-os kép van feltöltve, az lassítja a felhasználóknál az oldal betöltését. A másik probléma pedig az, amikor nagyobb méretben, felbontásban kerül megadásra a kép, mint ahogy az ténylegesen megjelenik.
Így bizonyosodhatsz meg a ténylegesen betöltött kép méretéről
Klikkelj az “Elements”-re a felső menüben és válaszd ki azt a képet, amit vizsgálni szeretnél. Ezt akár úgy is megteheted, hogy a képre kattintva megnyomod a jobb egérgombot és rámész az “Inspect” lehetőségre. Utána már látni is fogod a tényleges képméretet, illetve a honlapra feltöltött méretet is.
Amennyiben nagy eltérést tapasztalsz a kettő között, érdemes kisebb felbontású képet feltöltened.
9. Core Web Vitals faktorok
Sok olyan külső eszköz van, mellyel ellenőrizhető honlapunk teljesítménye: PageSpeed Insights, WebPage Test, vagy akár a Lighthouse. Ez utóbbi be van építve a DevTools-ba és könnyedén lekérhető a riport bármelyik URL-re.
Különösen fontos odafigyelni a Core Web Vitals faktorokra, hiszen azon kívül, hogy a felhasználói élményt tudjuk növelni, Google rangsorolási tényező is.
Hogyan ellenőrizhetjük az oldalélményt?
Menj rá a “Performance” fülre és pipáld be a “Screenshots”, illetve a “Web Vitals” mezőket. Ezután kattints a record gombra (vagy nyomj Ctrl+E / Cmd+E-t).
Amint lefut az elemzés, kapsz egy nagyon részletes diagnosztikát az oldalról: hogyan töltődtek be az egyes elemek, mennyi ideig tartott, míg teljesen láthatóvá vált a honlap tartalma. A képernyőképek, amik a felső sávban jelennek meg tovább segítenek megérteni a renderelés közbeni folyamatot.
Hogyha szeretnéd megtudni, mely elemek okoznak vizuális elmozdulást az oldalbetöltés közben, érdemes megnyitni a “Rendering” fület (3 pont a jobb felső menüben → More tools → Rendering). Ezután pipáld be a “Layout Shift Regions” mezőt és ahogy interaktálódsz az oldallal és betölt, úgy változik a kijelölt szekció is, ami éppen elmozdulást okoz a tartalomban.
Szintén nagyon hasznos, hogyha lefuttatjuk a Lighthouse elemzését. Ehhez a “Lighthouse” menüpontot válasszuk ki a felső menüből, majd döntsük el, hogy mobil vagy asztali eszközre szeretnénk megkapni az eredményeket.
A DevTools-ban futtatott Lighthouse elemzés nagy előnye, hogy mind a CLS (Cumulative Layout Shift, avagy elrendezés összmozgása), mind pedig az LCP esetében (Largest Contentful Paint, avagy legnagyobb vizuális tartalomválasz) pontosan visszaadja az eszköz, hogy hol található az adott elem, kijelölve azt a szekciót.
10. Kód kicsomagolása, hogy átlátható legyen
Gyakran tapasztalt jelenség, hogy egy CSS, JavaScript vagy HTML kicsinyítésre kerül (minify) annak érdekében, hogy kisebb legyen a mérete. Amikor azonban szeretnénk bugot keresni, vagy csak megérteni a kódot, nagyon jól jön a DevTools “Pretty print” funkciója, ami sorokba rendezve adja vissza ugyanezt.
Hogyan lehet un-minify-olni?
Jelöld ki azt a kódfájlt, amit szeretnél elrendezetten látni. Ezután be fog tölteni egy panel, aminek az alján két kapcsos zárójel {} található. Így máris sorokba rendezve láthatod az eddig tömörített kódot.
11. Hogy néz ki a honlap JavaScript nélkül?
A Google általában megérti a JavaScript-be ágyazott tartalmat, ha az megfelelően van megadva. Annak érdekében, hogy biztosra menjünk, ténylegesen jól jelenik meg a tartalmunk és akár JavaScript nélkül is értelmezhető a content, javasolt kikapcsolni a JS-t és úgy is ránézni oldalunkra.
Bartosz Góralewicz és csapata készített egy nagyon hasznos SEO tesztoldalt, ahol a különböző JavaScript frameworkok működését lehet tesztelni. Ez remek terep annak megértésére, hogy nem mindegyik framework értelmezhető a Googlebot számára.
Így érhető el ez a funkció
Kattintsunk a kis fogaskerékre a jobb felső menüben (vagy nyomjuk meg az F1 billentyűt) és pipáljuk be a “Disable JavaScript” mezőt. Ezután töltsük be újra az oldalt.
Amennyiben megfelelően tölt be a tartalom és nincs különbség a JavaScript-es és anélküli betöltésen, nincs további teendőnk.
Teljes technikai SEO auditot szeretnél? Segítünk!
Cikkünkben bemutatásra kerültek a legfontosabb, leghasznosabb és a legérdekesebb Chrome DevTools funkciók. Ezek mind-mind fontos részei egy honlap technikai feltérképezésének, azonban közel sem elégségesek.
Hogyha egy mindenre kiterjedő technikai SEO elemzést szeretnél, vedd fel velünk a kapcsolatot elérhetőségeinken.
