Cerchi un modo semplice per visualizzare l'HTML di una pagina?
Quando ho iniziato a creare siti web WordPress, non sapevo perché fosse importante visualizzare l'HTML di una pagina o quanto fosse facile farlo. Come molti proprietari di siti web, sentivo altri sviluppatori parlare di controllare il codice sorgente della pagina, ma pensavo fosse qualcosa di cui solo i programmatori esperti dovessero preoccuparsi.
Dopo aver gestito diversi siti WordPress e aver aiutato i clienti a migliorare la loro SEO, ho scoperto che visualizzare l'HTML di una pagina è in realtà uno strumento semplice ma potente. Mi aiuta a individuare problemi tecnici di SEO, a verificare se i miei meta tag funzionano correttamente e persino a imparare dai siti web dei concorrenti di successo, il tutto senza bisogno di essere un esperto di programmazione.
Condividerò anche modi pratici per utilizzare queste conoscenze per migliorare la SEO del tuo sito web, anche se non hai mai guardato il codice HTML prima. Fidati di me, se ho potuto impararlo io, puoi farlo anche tu. E vale la pena dedicare i pochi minuti necessari per padroneggiarlo.
Chiunque può accedere al codice di una pagina web utilizzando il metodo visualizza sorgente pagina. E ci sono alcune buone ragioni per cui questo può essere utile nella SEO.
In questa guida, ti mostrerò esattamente come visualizzare il codice sorgente di qualsiasi pagina web, ed è facilissimo!
In questo articolo
Cos'è il Codice Sorgente di una Pagina Web?
Le pagine web sono file di codice. E i siti web sono raccolte di file di codice organizzati in cartelle.
Questo codice fornisce il formato, lo stile e l'interattività per la pagina.
Ad esempio,
- HTML fornisce formattazione come titoli e paragrafi.
- CSS fornisce stile, inclusi colori e layout.
- JavaScript fornisce elementi interattivi come popup.
I browser caricano e interpretano istantaneamente questi file di codice, rendendo visibile una pagina web.
Chiunque può visualizzare il codice sorgente di un sito web. Marketer e sviluppatori web sono tra coloro che utilizzano "visualizza sorgente pagina".
Puoi usarlo anche tu per alcuni semplici controlli SEO.
Come Visualizzare l'HTML della Pagina in Google Chrome
Useremo Google Chrome come esempio, poiché ha la quota di mercato più ampia tra tutti i browser. E le scorciatoie da tastiera che condivideremo per Chrome funzionano anche sulla maggior parte degli altri browser, inclusi Apple Safari e Brave.
Ci sono diversi modi per visualizzare il codice di una pagina web in Chrome. Ecco 3 elencati con il metodo più veloce per primo.
Metodo 1: Scorciatoia da tastiera
- Mac: ⌘ + option + u
- Windows/Linux: Ctrl + U
Metodo 2: Clic destro, Seleziona
- Fai clic destro su una pagina web. (Su un Macbook, premi il touchpad con entrambe le dita.)
- Seleziona Visualizza sorgente pagina dalla finestra popup che appare.
Metodo 3: Menu App Apple
- Con Chrome aperto, naviga nel Menu App Apple e seleziona Visualizza. Da quel menu a discesa, seleziona Sviluppatore » Visualizza sorgente
Usa l'A capo e Cerca nel Codice
Quando la pagina del codice si apre in una nuova scheda, seleziona la casella contrassegnata con "a capo" in alto a sinistra. Questo ti assicurerà di non dover scorrere orizzontalmente per visualizzare il codice.
Usa ⌘ + f per aprire una casella di ricerca per il codice.
Come Usare gli Strumenti per Sviluppatori di Chrome per Visualizzare l'HTML della Pagina
Oltre a visualizzare una singola pagina di codice sorgente, puoi accedere agli strumenti per sviluppatori di Chrome da qualsiasi pagina web per ottenere informazioni più dettagliate sul codice. Web designer e sviluppatori utilizzano questi strumenti.
Per accedere agli Strumenti per sviluppatori di Chrome, usa Chrome per navigare in una pagina web.
Quindi usa la scorciatoia da tastiera appropriata:
- Mac: ⌘ + option + i
- Windows/Linux: F12 o Control + Shift + I
Questo aprirà una nuova finestra nella stessa scheda del browser, rivelando il codice dietro la pagina.
Questa vista mostra, tra le altre cose, gli ascoltatori di eventi CSS e JavaScript.
Suggerimento: tutti i principali browser web, inclusi Mozilla Firefox e Microsoft Edge, offrono una finestra "dev tools" e la stessa scorciatoia di Chrome funziona anche per questi.
Usi comuni di Visualizza sorgente pagina
Ci sono 2 ragioni comuni per cui i non sviluppatori vogliono vedere il codice sorgente di una pagina.
Uno è controllare i backlink dei guest post. E l'altro è la curiosità: vedere come sono i meta tag in HTML.
Uso 1: Controlla i Backlink dei Guest Post
I backlink, link da altri siti al tuo, sono un fattore di ranking.
Un modo comune in cui i siti web ottengono backlink è scrivere guest post per altri siti in cambio di un link.
Questa strategia di backlink aiuta gli individui a elevare la propria presenza online e a comunicare competenza.
È importante controllare il codice di ogni singolo link che ottieni, però. Perché? A volte il proprietario di un sito aggiungerà accidentalmente un attributo di link, come "sponsored" o "nofollow", che annullerà qualsiasi valore SEO.
Questi attributi di link, chiamati anche tag, possono essere visti solo nel codice sorgente della pagina.
Come controllare l'HTML per gli attributi dei link: Metodo 1
- Naviga alla pagina collegata alla tua.
- Fai clic destro su qualsiasi area della pagina.
- Seleziona "Visualizza sorgente pagina."
Il codice HTML della pagina si aprirà in una nuova finestra.
Cerca il testo di ancoraggio e controlla il link circostante per gli attributi di link nofollow, sponsored o UGC.
Come esempio, useremo un articolo di ReadWrite.com.
Scorrendo fino in fondo a questo articolo, vediamo che la biografia dell'autore ospite include un link al suo sito web, Ditto Transcripts.
Fai clic destro in un punto qualsiasi della pagina e seleziona Visualizza sorgente pagina.
Questo aprirà il codice HTML della pagina in una nuova scheda. (Ricorda di selezionare la casella "a capo".)
Ora, puoi cercare la pagina per "Ditto Transcripts". Questo è ciò che vediamo.
Il link è un link "dofollow", che è ottimale per la SEO. Nota la mancanza di qualsiasi attributo nofollow, sponsored o UGC nel codice del link.
Come controllare l'HTML per gli attributi dei link: Metodo 2
Puoi anche accedere al codice del link utilizzando gli Strumenti per sviluppatori di Chrome. Tuttavia, tieni presente che questo strumento visualizza codice più dettagliato, il che potrebbe confondere i principianti.
Ecco come controllare un link utilizzando gli Strumenti per sviluppatori di Chrome.
- Naviga alla pagina collegata alla tua.
- Fai clic con il pulsante destro del mouse sul backlink.
- Seleziona Ispeziona dal piccolo popup che appare.
Questo aprirà gli Strumenti per sviluppatori di Chrome.
Convenientemente, questa azione evidenzierà il link (in blu), così saprai esattamente dove guardare.
Qui useremo lo stesso ReadWrite.com come nostro esempio.
Per visualizzare il codice del link, faremo clic con il pulsante destro del mouse su di esso e selezioneremo "Ispeziona" dal popup.
Selezionare "Ispeziona" farà aprire gli Strumenti per sviluppatori di Chrome. Il link sarà evidenziato in blu.
Ingrandiamo quella porzione evidenziata.
Sebbene il codice di questo link possa contenere cose che non capisci, puoi vedere che non c'è un tag nofollow, sponsored o UGC.
Uso 2: Vedere come sono i meta tag
La seconda ragione per cui i non sviluppatori potrebbero utilizzare la visualizzazione dell'origine della pagina è che sono curiosi di vedere come sono i meta tag nel codice.
Potresti aver sentito che i tag title e le meta description sono importanti per la SEO.
E i plugin, come All in One SEO (AIOSEO), rendono facile modificarli e ottimizzarli.
Ma potresti chiederti come sono questi 2 meta tag nel codice sorgente.
Per scoprirlo,
- Naviga verso una pagina.
- Vai su Visualizza origine pagina.
- Seleziona la casella "a capo" in alto a sinistra.
- Usa ⌘ + f per cercare <title o <meta name=”description”.
Ecco un esempio di tag title.
Ed ecco la meta description per lo stesso articolo.
Ottimizza i meta tag con All in One SEO (AIOSEO)
L'ottimizzazione di questi meta tag è facile con il plugin All in One SEO (AIOSEO) per WordPress.
E non avrai bisogno di visualizzare l'origine della pagina per controllare i meta tag.
Questo plugin consolidato ha migliaia di recensioni a 5 stelle su WordPress.org e oltre 3 milioni di utenti.
Sebbene AIOSEO sia facile da usare per i principianti, offre risultati professionali.
Puoi scaricare All in One SEO qui.
Vedrai un anteprima del tuo titolo e della meta description nei risultati di ricerca di Google.
E ottieni modi semplici per ottimizzare questi tag, come mantenere la tua meta description entro una lunghezza prestabilita.
Inoltre, All in One SEO fornisce raccomandazioni per migliorare la SEO delle tue singole pagine web.
Altri vantaggi includono
- Facile configurazione per la SEO locale (per piccole imprese).
- Raccomandazioni sull'uso della keyword principale.
- Trasforma le tue pagine in rich snippet con pochi clic.
Domande e risposte sulla visualizzazione del codice sorgente della pagina
Come visualizzo il codice sorgente della pagina in Safari?
Per visualizzare il codice sorgente della pagina in Safari, fai clic con il pulsante destro del mouse sulla pagina e scegli Mostra sorgente pagina. Oppure, nel menu del browser, seleziona Sviluppo » Mostra sorgente pagina.
Usare Opzione + Comando (⌘) + U aprirà la finestra degli strumenti per sviluppatori.
Come trovo il codice HTML e CSS di un sito web?
Ci sono diversi modi per trovare il codice HTML e CSS di un sito web. Per trovare l'HTML puoi usare vari metodi di visualizzazione del codice sorgente della pagina illustrati qui.
Per vedere il codice HTML e CSS, puoi usare la funzione Strumenti per sviluppatori nel tuo browser web.
Puoi anche trovare i file di codice CSS cliccabili per un sito web nell'elemento head dell'HTML.
E adesso?
Speriamo che questo articolo ti abbia aiutato a capire come visualizzare il codice sorgente di una pagina e perché le persone lo usano.
Potresti anche voler saperne di più sul ruolo dei backlink nella SEO e ottenere informazioni sui link a pagamento e sul link building. E non dimenticare di catturare quei lead.
Se hai trovato utile questo articolo, iscriviti al nostro canale YouTube per tutorial SEO. Puoi anche seguirci su Twitter, LinkedIn o Facebook per rimanere aggiornato.
Vuoi Provare AIOSEO Gratuitamente?
Inserisci l'URL del tuo sito web WordPress per installare AIOSEO Lite.
Divulgazione: I nostri contenuti sono supportati dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Raccomandiamo solo prodotti che crediamo aggiungeranno valore ai nostri lettori.
