Chrome DevToolsin käyttäminen vianmääritykseen - Semalt-kehotteet



Chrome DevTools ei ole vieras useimmille SEO-ammattilaisille. Toisaalta asiakkaille se voi olla yksi niistä asioista, jotka sinun on vielä opittava. No, Semaltissa osa asiakkaan SEO-tarpeiden palvelemisprosessia perustuu tapaan kouluttaa sinua verkkosivustosi tarvitsemista tarpeista.

Chrome Dev Tools for SEO on tärkeä, koska käytämme sitä vianetsinnässä. Semaltin ja asiakkaidemme välisen viestinnän helpottamiseksi haluamme näyttää, kuinka käytämme tätä työkalua SEO-ongelmien korjaamiseen verkkosivustollasi.

Chrome Dev Toolsin avulla voimme etsiä taustalla olevia hakukoneoptimointiongelmia verkkosivuston indeksoinnista sen suorituskykyyn. Tässä artikkelissa korostamme kolmea tapaa, joilla käytämme näitä työkaluja palvellaksemme asiakkaitamme paremmin.

Mikä on Chrome DevTools?

DevTools tai Chrome DevTools in full on joukko verkkokehittäjien aputyökaluja, jotka on rakennettu suoraan Chrome-selaimeen. Käytämme näitä työkaluja sivujen muokkaamiseen lennossa ja diagnosoimme ongelmat nopeasti. Tämä auttaa meitä rakentamaan parempia verkkosivustoja asiakkaillemme, mutta voimme tehdä sen nopeammin ja varmistaa, että ne ovat täydellisiä.

Voimme kaikki suuressa määrin hyväksyä sen, että Google Chrome on yksi SEO-ammattilaisten arsenaalin tärkeimmistä työkalupakkeista. Riippumatta SEO-ohjelmistosta, jota käytät auditointien automatisointiin tai SEO-ongelmien diagnosointiin mittakaavassa, Chrome DevTools on edelleen pakollinen. Kiitos kykynsä tarjota ratkaisevia tapoja tarkistaa SEO-ongelmat lennossa, monet SEO-ammattilaiset, mukaan lukien Semalt, ovat käyttäneet sitä yhä uudelleen.

Voisimme viettää enemmän aikaa keskustellessamme monista tavoista, joilla Chrome DevTools voi auttaa ammattilaisia ​​ja verkkokehittäjiä, mutta huomiomme on jotain hieman tarkempaa. Tässä haluamme jakaa kanssasi pari erilaista tapausta, joissa olemme käyttäneet Chrome DevToolsia ongelman selvittämiseen ja korjaamiseen.

Tässä on kolme tilannetta, joista Chrome DevToolsin käyttäminen ei olisi huono idea:

Chrome DevToolsin määrittäminen vianmääritystä varten

Mahdollisuudet ovat, että et ole koskaan yrittänyt käyttää Chrome DevToolsia. No, sen käyttäminen on yhtä helppoa kuin napsauttamalla SERP-verkkosivustoa ja napsauttamalla tarkastuspainiketta. SEO-ammattilaisina meidän on oltava varovaisempia siitä, mutta sinulla on idea siitä, miten sitä käytetään. Semaltissa käytämme sekä Element-tasoa, jonka avulla voimme tarkkailla DOM: ää, että CSS: ää, joka mahdollistaa muutaman muun työkalun konsolilaatikossa.

Otamme sinut vaiheittain läpi, kuinka tätä työkalua käytetään SEO-vianetsinnässä.

Aloita napsauttamalla hiiren kakkospainikkeella ja valitsemalla sitten tarkastaa. Oletusarvon mukaan elementtipaneeli tulee näkyviin, ja tämä antaa sinulle vilauksen DOM: sta ja sivun rakenteessa käytetyn tyylitaulukon luonteesta.

Tämän näkemyksen tarjoaminen tarjoaa meille paljon asioita, joihin voi sukeltaa; kuitenkin annamme konsolilaatikon hyödyntää työkalupaketin kaikkia mahdollisuuksia.

Napsauta asetuskuvakkeen vieressä näkyviä pisteitä ja vieritä alaspäin, kunnes kohtaamme Näytä konsolilokero -vaihtoehdon. Vaihtoehtoisesti napsautamme yksinkertaisesti paeta-näppäintä.

Kun konsoli ja elementtipaneeli ovat käytössä, käyttäjät voivat nähdä vilauksen DOM: ssä renderoidusta koodista. Käyttäjät näkevät myös tyylisivut, joita on käytetty koodin maalaamiseen selaimessa. Sekä useita muita työkaluja, joihin pääset käsiksi konsolin laatikosta.

Ensikertalaisille konsolilokero ei välttämättä näytä itse konsolia, mutta kun olet käyttänyt Chrome DevTools -ohjelmaa jonkin aikaa, konsolilaatikko alkaa näyttää itse konsolin. Konsolipaneelissasi voit tarkastella lokiin tallennettuja viestejä sekä suorittaa javascriptiä. Emme sukella siihen tänään.

Sen sijaan tässä on kolme uutta työkalua, joita tarkastelemme:
Löydät nämä työkalut valitsemalla lisää työkaluja ja valitsemalla nämä kolme kohdetta siten, että ne näkyvät välilehdinä konsolin laatikossa. Kun olemme ottaneet nämä kolme paneelia käyttöön, voimme aloittaa vianetsinnän.

Käyttäjäagentin vaihtaminen DevToolsissa

User-Agentin vaihtaminen on yksi unohdetuimmista tavoista käyttää DevToolsia. Tämä on yksinkertainen testi, joka on auttanut meitä paljastamaan useita eri asioita, koska se tarjoaa käsityksen siitä, miten Googlebot näkee ja käsittelee sivuston tieto-ominaisuuksia.

Tutkivien SEO-ammattilaisten tiimillämme DevToolsia käytetään arvokkaana ja luotettavana suurennuslasina, jonka avulla voimme lähentää verkkosivuston aiheita, jotta emme vain estä tällaisten ongelmien kehittymistä vaan myös paljastaa tällaisten ongelmien perimmäiset syyt.

Kuinka voit vaihtaa käyttäjäagenttisi Chrome DevToolsiin?

Kun vaihdat käyttäjäagenttiasi Chromessa, sinun on käytettävä konsoli-laatikon verkko-välilehteä. Voit tehdä tämän poistamalla valinnan automaattisesti, jolloin voit tarkastella sisältöä Googlebot-älypuhelimella, Bingbotilla tai useilla muilla käyttäjäagenteilla nähdäksesi, miten sisältösi toimitetaan.

Jos Google ei näytä päivitettyä otsikkotunnistetta tai metakuvausta SERP: ssä, epäilemättä tällaisen verkkosivuston omistaja on huolissaan. Ymmärtäminen, miksi Google on päättänyt käyttää täysin erilaista otsikkotunnistetta tai epäonnistunut päivittämään tunnistetta, on tärkeää varmistaa, että tekemäsi muutokset toteutetaan.

Chrom DevToolin käyttäminen mobiilivaihtoehtosivustolle

Vastaavassa tapauksessa, vaihdettuamme käyttäjäagentin Googlebot-älypuhelimeen, huomasimme, että sivusto palvelee edelleen vaihtoehtoista mobiilisivustoa Googlebotille. Mutta koska Google oli jo siirtynyt hakemiseen mobiililaitteille ensin, se käsitteli ja indeksoi muutokset mobiilisivustolla, mutta ei onnistunut saamaan verkkotunnuksen työpöytäversioon tehtyjä päivityksiä.

Voit olettaa, että mobiilisivustot ovat jäänne, mutta niitä on silti olemassa.

Chrome DevToolsin käyttäminen ylimitoitetun palvelinsuojauksen havaitsemiseen

Verkossa on monia henkilöitä, joilla on haitallisia tarkoituksia. Monet hakkerit ja pahantahtoiset yrittävät käyttää Googlea Internet-sivustoja vastaan. Tästä syystä jotkut palvelinpinoa CDN: itä ja muut palveluntarjoajat voivat tarjota tiettyjä sisäänrakennettuja ominaisuuksia, jotka estävät Googlebot-huijauksia, kun heidän todellisena tarkoituksena on estää roskapostirobotteja pääsemästä sivustolle. Liian innokkaasti nämä sivustot saattavat päätyä estämään Googlebotia pääsemästä sivustolle. Joskus käyttäjät näkevät viestejä, joissa lukee "Luvaton pyyntö estetty".

Jos kohtaamme tällaisia ​​viestejä Googlen SERP: ssä, tiedämme heti, että virhe on käynnissä, vaikka selain lataa sisällön ongelmitta.

Käyttämällä User-Agent-kytkinominaisuutta voimme nähdä, että sivusto näyttää kyseisen viestin heti, kun asetamme User-Agent -asetukseksi Googlebot Smartphone.

DevToolsin ydinverkkoelinten diagnosointi

Suorituskyky-välilehti on yksi DevToolsin tärkeimmistä ominaisuuksista. Se toimii erinomaisena yhdyskäytävänä ongelmien selvittämiseen, jotka vaikuttavat sivun nopeuteen ja suorituskykyyn. Yleisesti ottaen DevTools voi tarjota joitain toimintakelpoisia tietoja ydinversioista.

Googlen Core Web Vitalsin muodostavat mittarit ovat olleet osa sivun nopeus- ja tehokkuusraportteja jo jonkin aikaa. On erittäin tärkeää, että hakukoneoptimoinnin ammattilaiset ovat perehtyneitä näiden asioiden leikkaamiseen. Web-ylläpitäjinä olemme tulleet tarkemmin tietoiseksi ydinosaamisen tärkeydestä hakutehokkuuden kannalta.

Kun käytät DevToolsin suorituskyky-välilehteä, otamme askeleen lähemmäksi tärkeiden verkkomittareiden ymmärtämistä.

Tarkista vielä kerran HTTP-otsikot ja tarkista käyttämätön koodi

Oletko koskaan kuullut pehmeistä 404: stä SEO-auditoinneissasi? No, pehmeät 404: t ovat, kun selain saattaa näyttää 404-sivun, mutta ne palauttavat 200 OK-vastauskoodin.
Joissakin tapauksissa sisältö voi latautua täsmälleen selaimen odotusten mukaisesti. HTTP-vastauskoodi voi kuitenkin näyttää 404- tai 302-virheen. Se voi myös olla yleensä väärä tai ei odotettua. Kummassakin tapauksessa on hyödyllistä nähdä jokaisen sivun ja resurssin HTTP-vastauskoodi.

Vaikka on olemassa monia upeita Chrome-laajennuksia, jotka antavat sinulle arvokasta tietoa vastauskoodeista DevToolsin avulla, voit tarkistaa nämä tiedot suoraan.

Tässä vaiheessa DevTools näyttää kaikki yksittäiset resurssit, joita kutsutaan kääntämään sivu. Se sisältää vastaavat tilakoodit ja vesiputouksen visualisoinnin.

Johtopäätös

Chrome DevToolsin avulla voit löytää ja ratkaista taustalla olevat ongelmat, jotka estävät verkkosivustoasi saavuttamasta todellisia mahdollisuuksiaan. DevTools on erityisen hyödyllinen teknisissä tarkastuksissa. Näiden lisäksi nautit myös nopeudesta käyttäessäsi DevTools-ohjelmaa. Poistumatta verkkoselaimistamme Semalt-tiimimme voi tuntea olevansa valtuutettu havaitsemaan tarkistusongelmia verkkosivuston indeksoinnista sen suorituskykyyn.

Semalt on täällä auttamassa sinua tuomaan esiin verkkosivustosi parhaat puolet, ja toivomme, että otat yhteyttä tiimimme. Me odotamme yhteydenottoasi.


mass gmail