Come Vedere Il Codice Sorgente Di Un Sito Web E Perchè

Hai idea di come visualizzare il codice sorgente di qualsiasi sito web e perché può essere una buona idea iniziare a guardarlo?

La maggior parte delle persone non lo sa, ma puoi guardare molto facilmente il codice sorgente di qualsiasi sito web.

Sono qui per dirti come si fa, perché dovresti farlo e ti insegnerò come farlo.

Tutto ciò che viene visualizzato nei browser viene da migliaia di righe di codice. In generale, queste linee di codice non hanno molto senso per un umano normale.

Google può vedere il tuo sito web solo attraverso il codice che scrivi per i tuoi siti. Se scrivi codice brutto e il tuo sito web sembra bello, Google e i motori di ricerca non lo sapranno.

Se commetti degli errori dietro le quinte, prima o poi sarai penalizzato e non ti classificherai.

Questo è il motivo per cui sono qui oggi per insegnarti come visualizzare il codice sorgente e capire alcuni concetti di base e le cose che devono essere fatte per avere un sito SEO friendly.

 

Come Visualizzare Il Codice Sorgente

Esistono molti modi per vedere il codice sorgente di qualsiasi sito. Ma in generale, se sei un principiante potresti voler iniziare con il codice sorgente di un sito web nel browser.

Qui su questa tabella, ti mostrerò le scorciatoie che puoi usare su un PC e su un Mac a seconda del browser che stai utilizzando.

 

WordPress Tables Plugin

 

Tutto quello che devi fare è andare su un qualsiasi sito web e utilizzare le scorciatoie nella tabella sopra, a seconda del browser che stai utilizzando.

 

Se tutto ciò non è abbastanza, puoi aggiungere semplicemente questo codice:

view-source:

prima di qualsiasi URL che si desidera vedere il codice sorgente, ad esempio:

view-source:https://marcodiversi.com

Questo trucco può essere utilizzato ad esempio per visualizzare il codice sorgente sul cellulare.

 

Quindi ti suggerisco di imparare a programmare un pò con freecodecamp.org. Completa almeno la sezione sviluppatori front-end.

 

IMPARA A PROGRAMMARE GRATIS

 

Se sei pigro per imparare a programmare, ti dirò come muoverti nel codice sorgente almeno per le nozioni di base.

 

Come Cercare Le Cose Nel Codice Sorgente

Una volta che sei nella pagina del codice sorgente, puoi finalmente cercare cose per il SEO.

Il modo più semplice per trovare le cose è utilizzare la funzione CMD + F o CTRL + F di qualsiasi browser che ti permetterà di trovare del testo all’interno della pagina.

Una cosa basilare da sapere è che ciò che viene visualizzato su una pagina web è fatto principalmente con questi linguaggi di programmazione:

1. HTML
2. CSS
3. JS

1. L’HTML è in genere il codice che è possibile visualizzare utilizzando i metodi di visualizzazione del codice sorgente nella tabella sopra.

Il codice HTML è la struttura del sito web, è il linguaggio più semplice da comprendere e probabilmente l’unico che devi capire quando si tratta di SEO.

2. Una pagina web senza CSS avrà l‘aspetto di una lista di parole senza senso e stile, il codice CSS è quello che dà stile al tuo sito.

Puoi trovare il codice CSS di qualsiasi pagina se esegui una ricerca CMD + F per:

.css

Quindi atterrai su alcuni link che puoi cliccare; se fai clic otterrai il codice CSS di quella pagina. Di solito ci sono diversi link CSS.

3. Il codice JS invece è qualcosa che dovresti anche capire almeno un pò. Solitamente viene utilizzato per creare effetti speciali o per aggiungere scripts ai siti Web che svolgono un lavoro specifico.

Ad esempio, se hai familiarità con Google Analytics, quando crei un account Google Analytics, Google ti dirà di aggiungere uno script JS su tutte le pagine in cui desideri Google Analytics che funzioni.

 

Cosa Cercare Nel Codice Sorgente?

Se il sito web è il tuo puoi cercare cose, bug e roba non SEO friendly in modo che tu possa modificarlo e migliorarlo.

Se stai guardando il sito di qualcun altro, puoi semplicemente provare a spiare e vedere come appare il loro codice. Puoi migliorare i tuoi siti in base alle informazioni raccolte.

Tutto il codice HTML è composto da tag, c’è sempre un tag di apertura <> e un tag di chiusura </>.

Super semplice!

Ad esempio, se vuoi creare un titolo per il tuo sito, le cose tra i tag saranno ciò che vedi nel browser, mentre i tag dicono ai motori di ricerca chi è il titolo, per esempio:

<title>Questo è il titolo della mia pagina fantastica</title>

Se hai fatto freecodecamp un pò, la tua vita sarà più facile. In caso contrario, parlando di SEO qui ci sono le cose che puoi controllare.

Il tag title, ad esempio, è molto importante, questo è ciò che apparirà sulle pagine dei risultati dei motori di ricerca (SERP).

I meta tag invece sono invisibili sulla pagina Web ma aiuteranno i motori di ricerca a ottenere preziose informazioni. Per esempio:

<meta content="Questa è la meta descrizione per i motori di ricerca" property="description">

Anche se Google potrebbe cambiarla in base ai loro algoritmi, teoricamente questo è ciò che desideri mostrare a Google sulla SERP.

Questo non sarà sulla tua pagina web, ma queste sono informazioni che darai ai crawler.

Ci sono un sacco di questi tag, e qui ho intenzione di elencare alcuni dei più importanti per SEO.

 

Il Tag Title

<title>Questo è un titolo</title>

Il tag title è uno dei tag più importanti parlando di SEO, dovresti averne uno su qualsiasi pagina.

Ci sono alcune regole da rispettare quando si tratta del tag title, qui le 2 più importanti:

1. lunghezza: 50-60 caratteri max.
2. unico: è necessario inserire solo un tag titolo per pagina ed è necessario non avere titoli duplicati tra le pagine.

 

La Meta Descrizione

<meta content="La mia bella descrizione SERP va qui" name="description">

Esistono molti meta tag e anche il tag “meta description” ha le sue varianti. Ad esempio, il property="og:description" è la descrizione per l’anteprima dei social network.

Ma per ora non ci interessa, è essenziale inserire un tag meta description unico come per i titoli.

Questo dirà a Google cosa visualizzare nello snippet. Ci sono alcune buone pratiche da seguire, e qui ci sono le 2 più importanti:

1. lunghezza: da 120 a 158 caratteri max.
2. unica: è necessario inserire solo una meta description per pagina e non è necessario avere una meta description duplicata tra le pagine.

 

Lo Slug

https://marcodiversi.com/blog/semrush-competitive-intelligence/

Lo slug è la parte dopo il nome di dominio di una qualsiasi delle tue pagine web. Questa può essere vista sul codice sorgente e si consiglia di aggiungere un attributo canonico alle tue pagine uniche.

<link href="https://yourwebsite.com" rel="canonical">

Lo slug è qualcosa di cui i motori di ricerca hanno bisogno per capire la tua pagina.

È molto simile al tag del titolo e anche molto importante. Ci sono alcune regole da rispettare quando si scrivono slug efficaci:

1. lunghezza: si raccomanda che la lunghezza totale del dominio URL + Slug < 115 caratteri,
2. dovresti dividere le parole solo con trattini (–),
3. si consiglia di rimuovere numeri, lettere maiuscole, caratteri speciali,
4. lo slug dovrebbe riflettere l’argomento della pagina,
5. deve essere unico tra tutte le pagine

 

I Meta Tags Di Verifica

<meta name="google-site-verification" content="btigtf1LVTbcEpzZvBYFKmbuPrMkbyT27lgfPDcknZY" />

I motori di ricerca devono verificare che tu sia il proprietario di un sito web specifico. Puoi iniziare la procedura di verifica dagli strumenti del webmaster di qualsiasi motore di ricerca.

Quello che devi usare per Google, ad esempio, è questo.

Il modo più semplice per verificare la proprietà è aggiungendo un metatag di verifica al tuo sito.

Questi tag sono forniti dagli strumenti per i webmaster e non verranno visualizzati sul tuo sito.

 

I Tag Link

<link href="css/bootstrap.min.css" rel="stylesheet">

I tag link sono solitamente tag che dicono ai motori di ricerca di cercare anche i file esterni per visualizzare quella pagina specifica.

Ad esempio, si consiglia sempre di utilizzare sempre i tag link per collegare il codice CSS a una pagina specifica.

Tutto ciò che è statico che deve andare su una pagina specifica e che non è un codice HTML deve avere un tag link e link a un file esterno.

 

Il Tag Head

1. <head> 
2. .
3. .
4. </head>

Tutto quello sopra non viene visualizzato nella pagina del browser. Questo deve essere racchiuso tra il tag head.

Di solito, le cose nell’head sono usate dai motori di ricerca per raccogliere informazioni preziose. Gli utenti non sono in grado di vederli a meno che non visualizzino il codice sorgente di una pagina.

 

I Tag Body

1. <body> 
2. .
3. .
4. </body>

Le cose che vengono renderizzate nel browser sono solitamente racchiuse tra i tag body.

Questi tag indicano ai browser che è necessario che le informazioni siano visualizzate quando un utente visita un sito Web.

I pochi tag elencati di seguito verranno inclusi nel tag body.

Nota che se usi WordPress tutto questo verrà generato automaticamente. Ma, a volte a seconda del tipo di sito Web che hai, WordPress commette errori e dovrai correggere questi errori.

 

I Tag Del Footer

1. <footer> 
2. .
3. .
4. </footer>

Lo stesso vale per il tag footer, di solito posizionato alla fine del codice della tua pagina web. Come puoi vedere, questo includerà informazioni sul piè di pagina del tuo sito e nella maggior parte dei casi, il materiale in esso contenuto verrà visualizzato.

Si consiglia di inserire gli script subito dopo il tag footer, in quanto gli script di solito rallentano il rendering del sito web.

Se metti gli script EXTRA alla fine dopo il footer questi verranno caricati in un secondo momento e potresti migliorare l’esperienza utente.

 

I Tag Script

1. <script> 
2. .
3. .
4. </script>

Gli script sono generalmente costituiti da codice javascript (JS). Ad esempio, se guardi il mio sito web c’è un supporto per le chat in basso a sinistra, in modo che tu possa vederlo è necessario installare uno script.

Questo sarà dato dal fornitore del servizio che stai tentando di utilizzare.

Si consiglia di inserire gli script aggiuntivi subito dopo il tag footer. (extra = file non necessari per il rendering della pagina).

Se hai molti script in cima alla tua pagina o all’interno dei tag head, spostali dopo il tag footer.

 

I Tag H

<h1>Heading 1</h1>

Anche i tag H sono molto importanti. Questi sono i titoli delle tue pagine e dicono ai motori di ricerca quali sono gli argomenti principali della tua pagina.

I tag H hanno un peso diverso:

• <h1>Più importante, prova a usare solo uno per pagina</h1>
• <h2>Meno importante di h1, non utilizzare più di 2-3</h2>
• <h3>Meno importante di h2, non utilizzare più di 6-9</h3>
• <h4>Meno importante di h3, nessuna restrizione ma non troppi</h4>
• <h5>Meno importante di h4, nessuna restrizione ma non troppi</h5>
• <h6>Meno importante di h5, nessuna restrizione ma non troppi</h6>

 

Prova a utilizzare questi tag in modo intelligente per evidenziare gli argomenti nella tua pagina e come per i titoli dei tuoi paragrafi.

 

 

Il Tag P

<p>questi sono paragrafi</p>

La maggior parte delle tue pagine web sarà composta da paragrafi. Se sei un utente di WordPress puoi vedere tutti questi tag dalla barra dell’editor.

 

Puoi usare il tag di paragrafo tutte le volte che vuoi. Dovresti usarlo per scrivere il contenuto delle tue pagine web.

 

 

L’Attributo Rel

<a href='https://awebsite.com' rel='nofollow'>questo è un link</a>

Ogni tag può avere un attributo rel, questa informazione è solitamente preziosa quando si tratta di rankings.

Ci sono molti attributi rel:

• alternate
• next
• nofollow
• noopener
• prev
• etc.. etc..

Quello con cui dovresti avere più familiarità è l’attributo nofollow.

Per impostazione predefinita, se non si aggiunge un rel="nofollow" i tuoi link o qualsiasi altra cosa sarà dofollow.

Un attributo nofollow significa che non vuoi che i motori di ricerca passino il link juice e il valore al link che stai linkando.

È necessario utilizzare il link nofollow in modo intelligente e questo è un argomento separato da approfondire qui, ad esempio.

 

ALT Tag

<img alt="fai soldi extra" src="img/soldi.jpg">

L’attributo alt deve essere sempre aggiunto a una qualsiasi delle tue immagini. Se sei su WordPress avrai un posto dove puoi aggiungerlo facilmente.

Lo scopo dell‘attributo ALT è fondamentalmente quello di dire a Google di cosa tratta la tua immagine.

Hanno algoritmi sofisticati per capire di cosa si tratta. Ma se descrivi anche l’immagine, metti le giuste parole chiave in esso ecc … Questo aiuterà la tua strategia SEO.

 

La Sitemap

https://iltuosito.com/sitemap.xml

La sitemap è anche un’altra parte importante del tuo sito web che non vedi ma che aiuterà con il SEO.

Per vedere la mappa del sito del tuo sito nella maggior parte dei casi devi solo aggiungere:

/sitemap.xml

dopo il dominio,

o su WordPress, se stai usando Yoast SEO:

/sitemap_index.xml

Puoi leggere questo articolo sui migliori generatori di sitemap e capire meglio.

 

Il File robots.txt

https://iltuosito.com/robots.txt

Il robots.txt è un altro file che devi avere nel tuo codice sorgente. Questo informerà i motori  di ricerca su cosa eseguire la scansione e su cosa non eseguire la scansione.

Ci sono molti usi di questo file e dovresti dare un’occhiata a questo articolo se sei interessato a questo.

Tutto quello che devi fare è buttare il file nella cartella principale e chiamarlo:

robots.txt

Se sei su WordPress puoi gestirlo con plugin ecc …

 

Come Modificare Il Codice Sorgente

Ora che sei in grado di visualizzare il codice sorgente potresti voler essere in grado di modificarlo e apportare modifiche.

Il modo più semplice per farlo è accedere al tuo hosting via FTP. Dovresti leggere questo tutorial su come impostare un accesso FTP.

Non si dovrebbe mai modificare il codice con TextEdit / Notepad o un normale editor di testo.

Esistono editor specificamente progettati per gestire i linguaggi di programmazione.

Questi editor ti aiuteranno a scoprire dove il codice non funzionerà; se hai chiuso i tag correttamente e anche per avviare i tuoi siti in modalità anteprima sulla tua macchina.

I miei migliori consigli per gli editor di codifica sono:

1. brackets.io
2. atom.io
3. sublimetext.com

Dovresti configurare il tuo client FTP per aprire qualsiasi file che sia codice con un editor di codifica.

Il mio client FTP preferito è FileZilla, anche se sembra obsoleto, è il migliore, il più facile da usare e il più efficiente e veloce.

 

Come Modificare Il Codice Sorgente Con WordPress

Si consiglia di modificare il codice sorgente dei siti WordPress tramite FTP.

Tutto quello che devi fare prima di modificare il codice è fare un backup. È possibile utilizzare updraftplus per eseguire backup fantastici.

ATTENZIONE: se si incasina con il codice, il tuo sito potrebbe non funzionare più e potrebbe essere impossibile tornare indietro.

Gioca con il codice solo se sai cosa stai facendo.

Cambiare il codice WordPress è una cosa molto interessante da fare, ad esempio puoi modificare temi e plugin e molto altro ancora.

Se stai scrivendo un articolo, l’editor di codifica più semplice che troverai è quello sotto l’opzione:

text

vicino al visual editor.

La scheda visiva è il modo semplice per scrivere articoli mentre la scheda di testo è il codice HTML che andrà sulla tua pagina web in modo che il browser possa capirlo.

Puoi modificare il codice HTML del tuo articolo dalla scheda di testo.

Se vuoi scavare più a fondo e modificare il tuo codice WordPress devi andare su:

aspetto > editor

Questo porterà un elenco di file, ad esempio nella maggior parte dei casi è possibile individuare:

1. header.php
2. footer.php
3. style.css
4. etc…

Se sai come codificare un pò puoi fare grandi cose modificando il codice lì.

Puoi usare questo editor per aggiungere altri script per esempio al file footer.php.

Per operazioni più complesse, prova a utilizzare brackets.io e un client FTP per accedere ai file raw.

 

FAI SEMPRE IL BACKUP PRIMA DI EFFETTUARE QUALSIASI MODIFICA #problemiwp #backup #ideafurba Condividi il Tweet

 

Conclusioni

Spero che ora tu sappia come visualizzare il codice sorgente di qualsiasi sito Web e perché questo è importante!

Se inizi a imparare a programmare un pò, scoprirai presto che puoi fare un sacco di cose spiando il codice sorgente del tuo concorrente.

Questa guida è stata solo un’introduzione e abbiamo scoperto che:

1. per leggere e visualizzare il codice sorgente di qualsiasi sito Web, è sufficiente utilizzare un browser e nella maggior parte dei casi premere CTRL + U o fare clic con il tasto destro del mouse e visualizzare il codice sorgente.
2. per modificare il codice sorgente si consiglia di utilizzare un editor di codifica come brackets.io e accedere ai file raw tramite FTP.
3. leggere il codice sorgente può aiutarti a rendere il tuo on page SEO eccezionale.
4. ciò che vedi su una pagina web non è necessariamente quello che vede un crawler dei motori di ricerca. È necessario avere un codice perfetto e pulito per distinguersi dalla massa.
5. se vuoi vedere il codice sorgente da un cellulare puoi semplicemente aggiungere view-source: prima di qualsiasi URL. cioè : view-source: https: //marcodiversi.com

 

Questa è solo un’introduzione, eppure alcuni concetti sono molto potenti e dovresti approfondire ulteriormente gli argomenti.

 

È consigliato e assolutamente fantastico imparare a programmare un pò, puoi usare #freecodecamp per imparare a codificare come un re gratuitamente. Condividi il Tweet

Cosa Imparerete Su Questo Blog!

Resta sintonizzato e iscriviti al mio blog in modo da ricevere notifiche sui nuovi post. Lentamente spiegherò questi argomenti: 

1. SEO (Search Engine Optimization).
2. Affiliate Marketing
3. Trucchi per traffico gratuito e a pagamento.
4. Coding e WordPress
5. Guadagnare con un computer e una connessione  Internet anche mentre dormi.

Seguimi sui social media, hai tutti i link nella parte in basso a destra di questo blog, inoltre commenta e contattami se hai bisogno di aiuto.

Qua ci sono le migliori risorse che uso per essere un super affiliato, guardale qua!

Vuoi essere un uomo o una donna libera? Salta nella squadra allora!

Marco Diversi.

Cool?
Article Value / Product Value
Summary