Mini guida SEO per gli sviluppatori web

Una mini guida SEO / manuale da tenere sempre “in tasca” ed estrarre quando ci sfugge qualche concetto. Nella parte finale del post, potete trovare lo schema da scaricare!

 

Mini guida SEO per webmaster

Mini guida SEO per webmaster

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.

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.

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“.

 

Gli elementi HTML più importanti

Il tag Title
<head>
<title>Titolo della pagina</title>
</head>

Best Practices

  • 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

  • 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 del seguente post: “SEO: come ottimizzare le immagini“.

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

  • 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.

 

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

  • 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" />

 

La struttura degli URL

Vediamo quali sono le componenti di un comune URL.

http://blog.sitoweb.com/categoria/parola-chiave?id=321#ancora

  1. Protocollo
  2. Sottodominio
  3. Dominio principale
  4. Estensione (Top-Level Domain)
  5. Directory (o elemento creato attraverso il rewrite dell’URL)
  6. Pagina (o elemento creato attraverso il rewrite dell’URL)
  7. Parametri
  8. Ancora” per raggiungere immediatamente un determinato elemento della pagina web

 

Best Practices

  • Creiamo URL più brevi possibile, leggibili e contenenti parole chiave coerenti.
  • Evitiamo (nei limiti dell’utilizzo) di utilizzare parametri dinamici.
  • 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
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“.

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>
La paginazione

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">
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>
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”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?“.

 

Scarica lo schema che riepiloga ed integra il contenuto di questo post.

SCARICA LO SCHEMA.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *