Brug af Chrome DevTools til fejlfinding - Semalt-meddelelser



Chrome DevTools er ikke noget, der er fremmed for de fleste SEO-fagfolk. For Ñ lients kan det på den anden side være en af ​​de ting, du endnu ikke har lært. Nå, hos Semalt er en del af vores proces til betjening af vores klients SEO-behov afhængig af vores måde at uddanne dig på nødvendige aspekter af, hvad dit websted har brug for.

Chrome Dev Tools til SEO er vigtigt, da vi bruger det til fejlfinding. For at muliggøre let kommunikation mellem Semalt og vores kunder vil vi gerne vise dig, hvordan vi bruger dette værktøj til at løse SEO-problemer på dit websted.

Med Chrome Dev Tools kan vi finde underliggende SEO-problemer lige fra crawlabiltiy af et websted til dets ydeevne. I denne artikel vil vi fremhæve tre måder, hvorpå vi bruger disse værktøjer til at betjene vores kunder bedre.

Hvad er Chrome DevTools?

DevTools eller Chrome DevTools fuldt ud er et sæt værktøjer til webudviklerhjælp, der er indbygget direkte i Chrome-browseren. Vi bruger disse værktøjer til at redigere sider på farten og diagnosticere problemer med det samme. Det hjælper os med at opbygge bedre hjemmesider til vores kunder, men vi kan gøre det hurtigere og sikre, at de er perfekte.

Vi kan alle i høj grad være enige i, at Google Chrome er et af de vigtigste værktøjssæt i arsenalet til enhver SEO-pro. Uanset SEO-softwaren, du bruger til at automatisere revisioner eller diagnosticere SEO-problemer i stor skala, er Chrome DevTools stadig et must-have. Takket være dets evne til at give vigtige måder til at kontrollere SEO-problemer på farten, har mange SEO-fagfolk, herunder Semalt, brugt det igen og igen.

Vi kunne bruge mere tid på at diskutere de mange måder, som Chrome DevTools kan hjælpe professionelle og webudviklere, men vores opmærksomhed er på noget lidt mere specifikt. Her vil vi dele med dig et par forskellige tilfælde, hvor vi har påberåbt os Chrome DevTools for at finde og rette et problem.

Her er tre situationer, hvor Chrome DevTools ikke ville være en dårlig idé:

Opsætning af Chrome DevTools til fejlfinding

Chancerne er, at du aldrig har prøvet at bruge Chrome DevTools. Nå, adgang til det er så simpelt som at klikke på et websted på SERP og klikke på en inspektionsknap. Som SEO-professionelle skal vi være mere forsigtige end det, men du har ideen om, hvordan den bruges. På Semalt bruger vi både elementplanet, som giver os mulighed for at observere DOM, og CSS, som muliggør et par andre forskellige værktøjer i konsolskuffen.

Vi tager dig en trinvis proces for, hvordan dette værktøj bruges til SEO-fejlfinding.

For at komme i gang skal du højreklikke og derefter vælge inspicere. Som standard vil du se elementpanelet vises, og dette giver dig et glimt af DOM og arten af ​​det stilark, der bruges til at konstruere siden.

At have denne opfattelse giver os masser af ting at dykke ned i; dog gør vi konsolskuffen i stand til at drage fuld fordel af værktøjssættet.

Klik på de prikker, der vises ved siden af ​​indstillingsikonet, og rul ned, indtil vi kommer på tværs af indstillingen Vis konsolskuffe. Alternativt klikker vi blot på flugtnøglen.

Når konsollen og elementpanelet er aktiveret, kan brugerne få et glimt af den kode, der er gengivet i DOM. Brugere vil også se de stilark, der er brugt til at male koden i browseren. Samt flere andre værktøjer, du har adgang til fra konsolskuffen.

For førstegangsbrugere viser konsolskuffen muligvis ikke selve konsollen, men efter at du har brugt Chrome DevTools i et stykke tid, begynder konsolskuffen at vise selve konsollen. Dit konsolpanel giver dig mulighed for at se loggede meddelelser samt køre javascript. Vi ville ikke dykke ned i det i dag.

I stedet er her tre yderligere værktøjer, vi vil se på:
For at finde disse værktøjer skal du vælge flere værktøjer og vælge hvert af disse tre emner, så de vises som faner i konsolskuffen. Når vi har aktiveret disse tre paneler, kan vi begynde fejlfinding.

Skift af brugeragenten i DevTools

Skift af brugeragent er en af ​​de mest oversete måder at bruge DevTools på. Dette er en simpel test, der har hjulpet os med at afdække flere forskellige problemer, da det giver indsigt i, hvordan Googlebot ser og behandler informationsfunktionerne på et websted.

For vores team af efterforskende SEO-fagfolk bruges DevTools som et værdig og pålideligt forstørrelsesglas, der giver os mulighed for at zoome ind på problemer på et websted for ikke kun at forhindre sådanne problemer i at udvikle sig, men også afdække de grundlæggende årsager til sådanne problemer.

Hvordan kan du skifte din brugeragent til Chrome DevTools?

Når du skifter din brugeragent i Chrome, skal du bruge fanen Netværksforhold i din konsolskuffe. For at gøre dette fjerner du markeringen automatisk, hvilket giver dig mulighed for at se indholdet ved hjælp af Googlebot-smartphone, Bingbot eller et antal andre brugeragenter for at se, hvordan dit indhold leveres.

I en begivenhed, hvor Google ikke viser det opdaterede titeltag eller metabeskrivelse i SERP, vil ejeren af ​​et sådant websted uden tvivl være bekymret. At forstå, hvorfor Google har valgt at bruge et helt andet titellag eller ikke har opdateret tagget, er vigtigt for at sikre, at de ændringer, du har foretaget, implementeres.

Brug af Chrom DevTool til et tilfælde af mobil alternativt websted

I et lignende tilfælde opdagede vi, efter at have skiftet brugeragenten til Googlebot-smartphone, at webstedet stadig serverede et alternativt mobilwebsite til Googlebot. Men fordi Google allerede havde skiftet til mobil-første-indeksering, behandlede og indekserede det ændringerne på mobilwebstedet, men kunne ikke opfange de opdateringer, der var foretaget til desktopversionen af ​​Domænet.

Du antager muligvis, at mobilwebsteder er noget levn, men de eksisterer stadig.

Brug af Chrome DevTools til at spotte overivrig serverbeskyttelse

Der er mange personer med ondsindede intentioner på nettet. Mange hackere og ondsindede forbrydere prøver at bruge Google mod websteder på internettet. Af denne grund kan nogle serverstakke CDN'er og andre hostingudbydere tilbyde visse indbyggede funktioner, der stopper Googlebot-spoofs, når deres egentlige hensigt er at stoppe spammy-crawlere fra at få adgang til webstedet. I en overivrig indsats kan disse websteder ende med at blokere Googlebot for at få adgang til webstedet. Nogle gange ser brugerne meddelelser, der siger "Uautoriseret anmodning blokeret".

Hvis vi støder på sådanne meddelelser på Googles SERP, ved vi straks, at der er en fejl, selvom browseren indlæser indholdet uden problemer.

Ved at bruge funktionen User-Agent switch kan vi se, at webstedet viser denne meddelelse, så snart vi indstiller User-Agent til Googlebot Smartphone.

Diagnosticering af Core Web Vitals i DevTools

Fanen ydeevne er en af ​​de vigtigste funktioner i DevTools. Det fungerer som en god gateway til fejlfinding af problemer, der påvirker sidehastighed og ydeevne. På en generel note kan DevTools tilbyde nogle handlingsmæssige oplysninger, når det kommer til centrale webvitaler.

De metrics, der danner Googles Core Web Vitals, har været en del af sidehastigheds- og effektivitetsrapporter i nogen tid. Det er meget vigtigt, at SEO-fagfolk er fortrolige med, hvordan disse problemer dissekeres. Som webmastere er vi blevet mere opmærksomme på vigtigheden af ​​vigtige webvitaler for søgeeffektivitet.

Når du bruger præstationsfanen i DevTools, tager vi et skridt tættere på at blive bedre til at forstå vigtige webmålinger.

Dobbeltkontrol af dine HTTP-headere og gennemgå den ubrugte kode

Har du nogensinde hørt om bløde 404'er i dine SEO-audits? Nå, bløde 404'er er, når browseren muligvis viser en 404-side, men de returnerer en 200 OK-svarskode.
I nogle tilfælde kan indholdet muligvis indlæses nøjagtigt som forventet i browseren; HTTP-responskoden kan dog vise en 404- eller 302-fejl. Det kan også generelt være forkert eller ikke, hvad du forventede. Uanset hvad er det nyttigt at se HTTP-svarskoden for hver side og ressource.

Mens der er et væld af fantastiske Chrome-udvidelser, der giver dig værdifulde oplysninger om svarkoder ved hjælp af DevTools, kan du gøre det muligt at kontrollere disse oplysninger direkte.

På dette tidspunkt viser DevTools alle de individuelle ressourcer, der kaldes til at kompilere siden. Dette inkluderer de tilsvarende statuskoder og visualisering af vandfald.

Konklusion

Med Chrome DevTools har du muligheden for at finde og løse de underliggende problemer, der forhindrer dit websted i at nå sine sande potentialer. DevTools er specielt nyttige i dine tekniske revisioner. Ud over disse nyder du også hastighed, når du bruger DevTools. Uden at forlade vores webbrowsere kan vores team hos Semalt føle sig bemyndiget til at få øje på problemer fra at gennemgå et websted til hvor godt det fungerer.

Semalt er her for at hjælpe dig med at få det bedste ud på dit websted, og vi håber, du vil komme i kontakt med vores team. Vi ser frem til at høre fra dig.