Articolo aggiornato il 30 dicembre 2017
Una mini guida SEO con i principi di base per i ripassi periodici.
Nella parte finale del post, potete trovare lo schema da scaricare!
Il post di oggi è ispirato all’ultima versione della famosa “Web Developer SEO Cheat Sheet” rilasciata da Moz. Nella parte finale ho inserito il link per scaricarla gratuitamente in formato PDF.
SOMMARIO: Cosa troverai nel post?
- 1 Una guida SEO di successo! Perché?
- 2 Gli elementi HTML più importanti
- 3 Scarica lo schema che riepiloga ed integra il contenuto di questo post.
Una guida SEO di successo! Perché?
Da quando è stato creata, nel 2008, questa particolare “guida SEO” ha riscosso un enorme successo, contando decine di migliaia di download da parte di principianti, ma anche di esperti, in quanto, per tutti, rappresenta un riferimento di rapida consultazione in merito alle buone pratiche SEO.
Mini guida SEO per webmaster
La mini guida sarà strutturata per argomenti, ognuno dei quali fornirà delle “nozioni assolutamente da ricordare“, affiancate a quelle che dovrebbero essere le cosiddette “best practices“.
[Tweet “#SEO: una mini guida per i #webmaster”]
Gli elementi HTML più importanti
Il tag Title
<head> <title>Titolo della pagina</title> </head>
Best Practices SEO per il tag title
- Sempre di lunghezza inferiore ai 512px (tra i 50 ed i 7o caratteri).
- La parola chiave di riferimento, va sempre inserita nella parte iniziale: la “zona calda” (di massima considerazione) per il motore di ricerca.
- Ogni tag title dovrebbe essere unico: grazie all’analisi di Google Strumenti per i Webmaster possiamo tenere facilmente monitorata l’eventuale duplicazione.
- Per approfondire, consiglio la lettura del post dal titolo “Tag title: la formula del successo in ottica SEO“.
Il meta tag Description
<head> <meta name="description" content="Descrizione della pagina"> </head>
Best Practices SEO per il mata tag Description
- Sempre di lunghezza inferiore ai 155 caratteri, per evitare il troncamento dello “snippet“ all’interno delle serp.
- Come per i tag title, le meta description, per essere efficaci, devono essere uniche. Anche in questo caso, ci vengono in aiuto gli strumenti per i webmaster di Google.
- Una “description” scritta bene, può contribuire all’aumento del CTR (click-through rate), in quanto rappresenta il metro di valutazione dei risultati da parte dell’utente.
- Per approfondire, consiglio la lettura del post dal titolo “Meta Description: come farsi notare in SERP“.
Le immagini
<img src="/immagini/parola-chiave.jpg" alt="Testo alternativo contenente la parola chiave coerente al contenuto dell'immagine e alla pagina" width="100" height="100" />
Per ottenere una ottimizzazione completa delle immagini del sito web, consiglio la lettura dei seguenti post:
- Immagini SEO: come ottimizzare le immagini. Guida e strumenti;
- Google Immagini: suggerimenti SEO per migliorare il ranking.
La struttura dei link
Link testuale
<a title="Titolo contenente la parola chiave" href="//sitoweb.com/parola-chiave/">Parola chiave</a>
Link “nofollow“
<a title="Titolo contenente la parola chiave" href="//sitoweb.com/parola-chiave/" rel="nofollow">Parola chiave</a>
Link delle immagini
<a href="//sitoweb.com/parola-chiave/" title="Titolo contenente la parola chiave"><img src="/immagini/parola-chiave.jpg" alt="Testo alternativo contenente la parola chiave coerente al contenuto dell'immagine e alla pagina" width="100" height="100"></a>
Best Practices SEO per i link
- Utilizziamo link HTML e non Javascript (se possibile).
- Inseriamo sempre il “nofollow” per i link non attendibili e comunque non verificabili in maniera costante.
- Per quanto riguarda le immagini, il testo alternativo ha la medesima valenza dell’anchor text per un link testuale.
[Tweet “Mini guida #SEO: gli elementi #HTML più importanti”]
La canonizzazione degli URL
Come sappiamo, la dichiarazione della versione canonica degli URL viene utilizzata per evitare che i motori di ricerca considerino le diverse rappresentazioni degli URL di un sito web come contenuti duplicati.
Vediamo quali sono gli esempi più classici di duplicazione degli URL della homepage di un sito web.
- http://www.sitoweb.com
- http://sitoweb.com
- http://www.sitoweb.com/index.html
- http://sitoweb.com/index.html
- http://sitoweb.com/index.php?id=321
Best Practices SEO per il rel=canonical
- E’ preferibile utilizzare la versione http://sitoweb.com/.
- L’url canonico va inserito all’interno della sezione <head> come segue
<link href="http://sitoweb.com" rel="canonical" />
- Per approfondire, consiglio la lettura del post dal titolo “Rel Canonical e SEO: cos’è e come usarlo“.
[Tweet “Mini guida #SEO: #relcanonical best practices”]
La struttura degli URL
Vediamo quali sono le componenti di un comune URL.
http://blog.sitoweb.com/categoria/parola-chiave?id=321#ancora
- Protocollo
- Sottodominio
- Dominio principale
- Estensione (Top-Level Domain)
- Directory (o elemento creato attraverso il rewrite dell’URL)
- Pagina (o elemento creato attraverso il rewrite dell’URL)
- Parametri
- “Ancora” per raggiungere immediatamente un determinato elemento della pagina web
Best Practices SEO per gli URL
- Creiamo URL più brevi possibile, leggibili e contenenti parole chiave coerenti.
- Evitiamo (nei limiti dell’utilizzo) di utilizzare parametri dinamici.
- Per approfondire, consiglio la lettura del post dal titolo “URL seo friendly? Le migliori pratiche SEO“.
- E’ preferibile utilizzare lo stesso dominio con directory, invece di un sottodominio; in questo modo preserveremo l’autorità del dominio principale.
http://sitoweb.com/blog - soluzione raccomandata http://blog.sitoweb.com - soluzione meno indicata
[Tweet “Mini guida #SEO: la struttura degli URL”]
Il file robots.txt
Viene posizionato all’interno della directory radice di un sito web per specificare delle regole ed ottenere delle restrizioni in merito alla scansione da parte degli spider dei motori di ricerca.
La sintassi di base:
User-agent: googlebot Disallow: /pagina-esempio.html Sitemap: http://sitoweb.com/sitemap.xml
Attraverso il Metatag Robots, posizionato all’interno della sezione <head> possiamo creare delle restrizioni specifiche per pagina.
<meta name="NOME del ROBOT" content="ARGOMENTI" />
Per approfondire, consiglio la lettura del post dal titolo “robots.txt: come usare il robots.txt in ottica SEO“.
[Tweet “Mini guida #SEO: il robots.txt ed il meta tag robots”]
La sitemap XML
Vediamo un esempio di sintassi di una sitemap XML e di una sitemap “indice“, ovvero quella di raggruppamento delle mappe specifiche.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://sitoweb.com/</loc>
<lastmod>2015-06-02T09:33:46+02:00</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
</urlset><?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap> <loc>http://sitoweb.com/post-sitemap.xml</loc> <lastmod>015-06-01T18:23:17+00:00</lastmod> </sitemap> <sitemap> <loc>http://sitoweb.com/page-sitemap.xml</loc> <lastmod>2015-06-01</lastmod> </sitemap> </sitemapindex>
[Tweet “Mini guida #SEO: la struttura della sitemap XML”]
La paginazione dei contenuti
Spesso, all’interno delle pagine web, abbiamo la necessità di inserire la paginazione degli elementi. Ricordiamoci di utilizzare sempre rel=”next” e rel=”prev” all’interno della sezione <head> per indicare il “rapporto” tra gli URL delle pagine.
Vediamo un esempio
- Prima pagina: http://sitoweb.com/pagina-prodotti/
<link rel="next" href="http://sitoweb.com/pagina-prodotti/?pag=2">
- Seconda pagina: http://sitoweb.com/pagina-prodotti/?pag=2
<link rel="prev" href="http://sitoweb.com/pagina-prodotti/"> <link rel="next" href="http://sitoweb.com/pagina-prodotti/?pag=3">
- Ultima pagina: http://sitoweb.com/pagina-prodotti/?pag=3
<link rel="prev" href="http://sitoweb.com/pagina-prodotti/?pag=2">
[Tweet “Mini guida #SEO: i consigli per la paginazione”]
SEO Miltilingua e geotargeting
E’ consigliabile valorizzare sempre l’attributo che specifica la lingua all’interno del tag HTML.
<html lang="it">
La struttura degli URL
Esistono diverse soluzioni per quanto riguarda la struttura degli URL in relazione al geotargeting.
- ccTLDs (Country Level Only)
sitoweb.it/
- Sotto-domini con gTLDs (generic top level domain names)
it.sitoweb.com/
- Sotto-directory con gTLDs (generic top level domain names)
sitoweb.com/it/
Ognuna di queste versioni, possiede dei pro e dei contro. Per approfondire, consiglio la lettura del post “SEO multilingua e geotargeting: qual è la strategia migliore?“.
rel=”alternate” hreflang=”x”
Specifichiamo sempre le lingue alternative dei contenuti. Vediamo un esempio:
- Lingua predefinita
<link rel="alternate" hreflang="x-default" href="http://sitoweb.com/" />
- Indicazione della lingua
<link rel="alternate" hreflang="de" href="http://sitoweb.com/de/" />
- Indicazione dell’area geografica e della lingua
<link rel="alternate" hreflang="de-ES" href="http://sitoweb.com/de-es/" />
La sitemap
Un esempio esplicativo di come va realizzata la sitemap in un sito web multilingua.
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://sitoweb.com/english</loc> <xhtml:link rel="alternate" hreflang="de" href="http://sitoweb.com/deutsch/" /> <xhtml:link rel="alternate" hreflang="en" href="http://sitoweb.com/english/" /> </url> <url> <loc>http://sitoweb.com/deutsch/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://sitoweb.com/english/" /> <xhtml:link rel="alternate" hreflang="de" href="http://sitoweb.com/deutsch/" /> </url> </urlset>
[Tweet “Mini guida #SEO: multilingua e geotargeting”]
L’ottimizzazione per i dispositivi mobile
Esistono tre soluzioni, suggerite anche da Google, per la realizzazione di siti web ottimizzate per il mobile. Le vediamo insieme specificando delle note per ognuna.
Responsive Design (RWD)
- Specifichiamo sempre il tag “viewport“ all’interno della sezione <head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- Utilizziamo il CSS per modificare il rendering del layout nei diversi dispositivi attraverso le media queries
<link rel="stylesheet" media="(min-width: 700px)" href="min-700px.css">
<style>
@media (min-width:500px) and (max-width:600px)
{h1{color:#555}}
</style>Dynamic Serving / Adaptive Web Design (AWD)
Viene fornito un diverso HTML e CSS presso il medesimo URL, in base allo User-Agent.
HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 3495 ...
URL distinti
Identifichiamo il dispositivo attraverso rel=”alternate” e rel=”canonical”.
- Pagina per desktop: http://sitoweb.com/
<link rel="alternate" media="only screen and (maxwidth: 640px)" href="http://m.sitoweb.com/"/>
- Pagina per mobile: http://m.sitoweb.com/
<link rel="canonical" href="http://sitoweb.com/"/>
Per approfondire, consiglio la lettura del post “Responsive design: è la soluzione migliore per il mobile?“.
[Tweet “Mini guida #SEO: qual è la migliore soluzione per il #mobile?”]
Scarica lo schema che riepiloga ed integra il contenuto di questo post.