Utilizzo di Chrome DevTools per la risoluzione dei problemi - Prompt Semalt



Chrome DevTools non è qualcosa di estraneo alla maggior parte dei professionisti SEO. A lenti, d'altra parte, potrebbe essere una di quelle cose che devi ancora imparare. Bene, in Semalt, parte del nostro processo nel soddisfare le esigenze SEO dei nostri clienti si basa sul nostro modo di istruirti sugli aspetti necessari di ciò di cui il tuo sito web ha bisogno.

Chrome Dev Tools per SEO è importante in quanto lo utilizziamo per la risoluzione dei problemi. Per consentire una facile comunicazione tra Semalt ei nostri clienti, vorremmo mostrarti come utilizziamo questo strumento per risolvere i problemi SEO sul tuo sito web.

Con Chrome Dev Tools, possiamo individuare i problemi SEO sottostanti che vanno dalla scansione di un sito Web alle sue prestazioni. In questo articolo evidenzieremo tre modi in cui utilizziamo questi strumenti per servire meglio i nostri clienti.

Che cos'è Chrome DevTools?

DevTools o Chrome DevTools in pieno è un insieme di strumenti di aiuto per sviluppatori web che sono integrati direttamente nel browser Chrome. Usiamo questi strumenti per modificare le pagine al volo e diagnosticare tempestivamente i problemi. Questo ci aiuta a creare siti web migliori per i nostri clienti, ma possiamo farlo più velocemente e assicurarci che siano perfetti.

Siamo tutti in gran parte d'accordo sul fatto che Google Chrome è uno dei toolkit più importanti nell'arsenale di qualsiasi professionista SEO. Indipendentemente dal software SEO che utilizzi per automatizzare gli audit o diagnosticare problemi SEO su larga scala, Chrome DevTools rimane un must. Grazie alla sua capacità di fornire modi cruciali per controllare i problemi SEO al volo, molti professionisti SEO, incluso Semalt, lo hanno utilizzato più e più volte.

Potremmo dedicare più tempo a discutere i molti modi in cui Chrome DevTools può aiutare professionisti e sviluppatori web, ma la nostra attenzione è su qualcosa di un po 'più specifico. Qui, vogliamo condividere con te un paio di casi diversi in cui ci siamo affidati a Chrome DevTools per capire e correggere un problema.

Ecco tre situazioni in cui avere Chrome DevTools non sarebbe una cattiva idea:

Configurazione di Chrome DevTools per la risoluzione dei problemi

È probabile che tu non abbia mai provato a utilizzare Chrome DevTools. Bene, accedervi è semplice come fare clic su un sito Web su SERP e fare clic su un pulsante di ispezione. Come professionisti della SEO, dobbiamo stare più attenti, ma hai l'idea di come viene utilizzato. In Semalt, utilizziamo sia il piano Element, che ci consente di osservare il DOM, sia il CSS, che abilita alcuni altri strumenti diversi nel cassetto della console.

Ti guideremo passo dopo passo su come questo strumento viene utilizzato nella risoluzione dei problemi SEO.

Per iniziare, è necessario fare clic con il pulsante destro del mouse e quindi selezionare ispeziona. Per impostazione predefinita, vedrai apparire il pannello degli elementi e questo ti dà un'idea del DOM e della natura del foglio di stile utilizzato nella costruzione della pagina.

Avere questo punto di vista ci offre molte cose in cui tuffarci; tuttavia, consentiamo al cassetto della console di sfruttare appieno il toolkit.

Fai clic sui punti che appaiono accanto all'icona delle impostazioni e scorri verso il basso fino a quando non troviamo l'opzione Mostra cassetto della console. In alternativa, facciamo semplicemente clic sul tasto Esc.

Con la console e il pannello degli elementi abilitati, gli utenti possono dare un'occhiata al codice di cui è stato eseguito il rendering nel DOM. Gli utenti vedranno anche i fogli di stile che sono stati usati per disegnare il codice nel browser. Oltre a molti altri strumenti a cui hai accesso dal cassetto della console.

Per i principianti, il cassetto della console potrebbe non mostrare la console stessa, ma dopo aver utilizzato Chrome DevTools per un po ', il cassetto della console inizia a mostrare la console stessa. Il pannello della tua console ti consente di visualizzare i messaggi registrati e di eseguire javascript. Non ci immergeremo in questo oggi.

Invece, ecco tre strumenti aggiuntivi che vedremo:
Per trovare questi strumenti, selezionare più strumenti e selezionare ciascuno di questi tre elementi in modo che appaiano come schede nel cassetto della console. Dopo aver abilitato questi tre pannelli, possiamo iniziare la risoluzione dei problemi.

Cambio dell'agente utente in DevTools

Il cambio di user-agent è uno dei modi più trascurati di utilizzare DevTools. Questo è un semplice test che ci ha aiutato a scoprire diversi problemi diversi in quanto fornisce informazioni su come Googlebot vede ed elabora le funzioni delle informazioni su un sito.

Per il nostro team di professionisti SEO investigativi, DevTools viene utilizzato come una lente d'ingrandimento degna e affidabile, che ci consente di ingrandire i problemi in un sito Web non solo per impedire che tali problemi si sviluppino, ma anche per scoprire le cause profonde di tali problemi.

Come puoi cambiare il tuo agente utente su Chrome DevTools?

Quando cambi il tuo user-agent in Chrome, dovrai utilizzare la scheda delle condizioni di rete nel cassetto della console. Per fare ciò, deselezioni seleziona automaticamente, che ti consente di visualizzare il contenuto utilizzando lo smartphone Googlebot, Bingbot o una serie di altri agenti utente per vedere come vengono consegnati i tuoi contenuti.

In un evento in cui Google non mostra il tag del titolo aggiornato o la meta descrizione nella SERP, senza dubbio il proprietario di tale sito web sarà preoccupato. Capire perché Google ha scelto di utilizzare un tag del titolo completamente diverso o non è riuscito ad aggiornare il tag è importante per garantire che le modifiche apportate siano implementate.

Utilizzo di Chrom DevTool per un caso di sito alternativo per dispositivi mobili

In un caso simile, dopo aver cambiato l'agente utente sullo smartphone Googlebot, abbiamo scoperto che il sito stava ancora offrendo un sito mobile alternativo a Googlebot. Ma poiché Google aveva già effettuato il passaggio all'indicizzazione mobile first, ha elaborato e indicizzato le modifiche sul sito mobile ma non è riuscito a rilevare gli aggiornamenti che erano stati apportati alla versione desktop del dominio.

Puoi presumere che i siti per dispositivi mobili siano una reliquia, ma in effetti esistono ancora.

Utilizzo di Chrome DevTools per individuare una protezione server troppo zelante

Ci sono molte persone con intenzioni dannose sul Web. Molti hacker e malintenzionati tentano di utilizzare Google contro siti su Internet. Per questo motivo, alcuni stack di server CDN e altri provider di hosting possono offrire alcune funzionalità integrate che bloccano gli spoofing di Googlebot quando la loro reale intenzione è impedire ai crawler di spam di accedere al sito. Con uno sforzo eccessivo, questi siti potrebbero finire per impedire a Googlebot di accedere al sito. A volte, gli utenti visualizzano messaggi che indicano "Richiesta non autorizzata bloccata".

Se incontriamo tali messaggi sulla SERP di Google, sappiamo subito che è in corso un fallo anche se il browser carica il contenuto senza problemi.

Utilizzando la funzione di cambio utente-agente, possiamo vedere che il sito sta servendo quel messaggio non appena abbiamo impostato lo user-agent su Googlebot Smartphone.

Diagnosi dei principali elementi vitali Web in DevTools

La scheda delle prestazioni è una delle caratteristiche più importanti di DevTools. Serve come un ottimo gateway per la risoluzione dei problemi che influenzano la velocità e le prestazioni della pagina. In generale, DevTools può offrire alcune informazioni utilizzabili quando si tratta di elementi vitali web di base.

Le metriche che formano i principali dati vitali di Google fanno parte da tempo dei rapporti sulla velocità della pagina e sulle prestazioni. È molto importante che i professionisti SEO abbiano dimestichezza con come analizzare questi problemi. In qualità di webmaster, siamo diventati più consapevoli dell'importanza dei principali web vitals per l'efficienza della ricerca.

Quando si utilizza la scheda Prestazioni in DevTools, facciamo un passo avanti per migliorare la comprensione di importanti metriche web.

Controlla le tue intestazioni HTTP e controlla il codice inutilizzato

Hai mai sentito parlare di soft 404 nei tuoi audit SEO? Bene, i soft 404 sono quando il browser può mostrare una pagina 404, ma restituiscono un codice di risposta 200 OK.
In alcuni casi, il contenuto potrebbe essere caricato esattamente come previsto sul browser; tuttavia, il codice di risposta HTTP potrebbe mostrare un errore 404 o 302. Può anche essere generalmente errato o non quello che ti aspettavi. In ogni caso, è utile vedere il codice di risposta HTTP per ogni pagina e risorsa.

Sebbene ci siano una miriade di incredibili estensioni di Chrome che forniscono preziose informazioni sui codici di risposta, l'utilizzo di DevTools può consentirti di verificare direttamente queste informazioni.

A questo punto, DevTools mostra tutte le singole risorse chiamate per compilare la pagina. Ciò include i codici di stato corrispondenti e la visualizzazione a cascata.

Conclusione

Con Chrome DevTools, hai la possibilità di trovare e risolvere i problemi sottostanti che impediscono al tuo sito web di raggiungere il suo vero potenziale. DevTools sono particolarmente utili nei tuoi audit tecnici. Oltre a questi, ti piace anche la velocità quando usi DevTools. Senza abbandonare i nostri browser web, il nostro team di Semalt può sentirsi autorizzato a individuare i problemi di controllo dalla scansione di un sito web al suo rendimento.

Semalt è qui per aiutarti a tirare fuori il meglio dal tuo sito web e speriamo che ti metterà in contatto con il nostro team. Restiamo in attesa della vostra risposta.


mass gmail