�ݺ�ߣ

Seo&Html
Impara i trucchi sul codice html e la SEO
Matteo Russo
Webdeveloper Html&Php, SEO

Mi Presento
Matteo Russo
Matteo Russo
Webdeveloper HTML&PHP, SEO
Sviluppatore siti web
•HTML
•PHP&MYSQL
SEO
•(Master SEOTraining 2014)
Freelance & Collaborazione con Agenzie

Perché conoscere HTML
Giocare senza conoscere le regole?
Matteo Russo
Ottimizzare un sito per i motori di ricerca: “onpage” primo passo
Migliorare l’esperienza d’uso dell’utente
Compatibilità con tutti i browser e dispositivi, fissi e mobile
Con la pratica si migliora
Non esiste solamente WordPress (e bisogna comunque metterci le mani)!

Gli strumenti indispensabili
Il coltellino svizzero di chi si “sporca le mani”
Matteo Russo
Notepad++ (o equivalente editor testuale)
Firebug
Screaming Frog SEO Spider & Xenu
FileZilla Client (o equivalente Client FTP)
Account “Google Webmaster Tools”
Account “Strumenti di Bing Webmaster”
…tanta pazienza 

Perché un editor testuale
Matteo Russo
Codice pulito
Più ci si sporca le mani, prima si impara

Firebug: meglio di un’autopsia
Matteo Russo
Ispezione di tutto il codice HTML
Evidenziazione degli elementi, uno ad uno
Modifiche realtime sia ai tag che al CSS
Debug Javascript & jQuery
Analisi del Traffico per individuare i “colli di bottiglia”

Screaming Frog SEO Spider – Lo Strumento n. 1
Matteo Russo
Errori del sito (40X, 50X) e Redirect (30X)
Validità Url e indicizzazione (index, follow)
Meta Tag & Headline Paragraph
Image Optimization
Creazione Sitemap

Google & Bing Webmaster Tools
Matteo Russo
Rivendicare la proprietà di un sito
Possibilità di sottoporre le sitemap
Richiesta di indicizzazione di una o più pagine
Query di ricerca
Errori di scansione
Test per markup e dati strutturati
Analisi dei link verso il nostro sito
Disavow Tool (rifiuto link)
Azioni Manuali (Penalizzazioni)

HTML5 – diamo una mano ai motori di ricerca
Matteo Russo
<!DOCTYPE html>
<html lang="it">
<head>
<title>Titolo della pagina</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<img src=/slideshow/seo-html-russo/46673233/"nome-azienda.png" alt="Sito Web Azienda XYZ">
</header>
<nav>menu di navigazione</nav>
<aside>
<section>Ricerca nel form:...</section>
<nav>... Categorie ...</nav>
</aside>
<section>
<h1>Contenuto Tag H1</h1>
<article>
<h2>Contenuto Tag H2</h2>
<p>...Contenuto...</p>
</article>
</section>
<footer><p>Copyright 2015 - Tutti i diritti riservati.</p></footer>
</body>
</html>

HTML5 – tag <head> per la SEO
Matteo Russo
<html lang=“it"> specifichiamo il linguaggio della nostra pagina
<title>Titolo della pagina</title> il tag più importante, specifica di cosa parliamo
<meta charset="UTF-8"> indichiamo la codifica con cui è scritta la nostra pagina (incluse particolari es. cirillico)
<meta name="description" content=“Riassunto contenuto della pagina"> forniamo sia all’utente che al motore una indicazione breve
<meta name="keywords" content=“elenco keywords"> ormai è pratica comune ometterle causa influenza nulla
<meta name="author" content=“Russo Matteo"> questo viene recepito anche quando condividete un contenuto sui social
Title
Description (o elaborazione Google)
Tag “Author”

HTML5 – tag <body> per la SEO
Matteo Russo
<strong>testo </strong>
<em>testo</em>
<blockquote>testo</blockquote>
<mark>testo</mark>
Enfasi su determinate frasi e concetti, utile sia all’utente che ai motori di ricerca
<h1>capo paragrafo</h1>
<h2>titolo importante</h2>
<p>contenuto</p>
<h3>titolo meno importante</h3>
<p>contenuto</p>
<h2>titolo importante</h2>
<p>contenuto</p>
<h3>titolo meno importante</h3>
Strutturiamo sempre nel migliore dei modi i nostri documenti
<a href=“mia-url.html” title=“descrizione ampia su cosa contiene la risorsa collegata” rel=“follow” target=“_blank”>anchor text</a>
Sfruttiamo il tag title differenziandolo dall’anchor text: potremmo addirittura posizionare alcune pagine di un sito con questa tecnica!
<img src=/slideshow/seo-html-russo/46673233/“nome-file.jpg” alt=“descrizione dell’immagine”> nome del file valido, la descrizione utile per non vedenti e motori di ricerca

HTML5 – markup schema.org
Matteo Russo
Da cosi….
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>
A così….
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name“>Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>
I motori di ricerca utilizzano il markup all'interno della
pagina in diversi modi; Google, ad esempio, lo utilizza per
creare rich snippet nei risultati di ricerca. Nei risultati di
ricerca non vengono presentati tutti i tipi di informazioni
specificati utilizzando schema.org, ma con il passare del
tempo verranno utilizzati più dati in più modi. Inoltre, poiché
il markup è accessibile pubblicamente dalle tue pagine web,
altre organizzazioni potrebbero scoprire nuovi metodi
interessanti per sfruttarlo.

HTML5 – markup schema.org
Matteo Russo
Sono disponibili tantissimi “item”, scegliamo quelli più adatti ai nostri dati da rappresentare:
Libri
Film
Musica
Ricette
Serie TV
Eventi
Persone
Luoghi
Attività Commerciali
Ristoranti
Offerte
Schede Prodotto
….
Qui la lista completa: http://schema.org/docs/full.html
…tra poco vedremo dove e come testare i nostri dati strutturati!

Accesso al sito – robots.txt
Matteo Russo
Un file robots.txt settato male può BLOCCARE l’indicizzazione del vostro sito!!! Massima attenzione!
User-agent: *
Disallow: /
Blocchiamo l’accesso a tutto il nostro sito
User-agent: *
Disallow: /beta/
Disallow: /admin/
Blocchiamo l’accesso solo alla cartella di amministrazione ed alla beta del nuovo sito
User-agent: Google
Disallow:
Via libera solo al Google-bot
User-agent: *
Disallow:
Via libera a tutti 
Sitemap: http://www.miosito.it/sitemap.xml Indichiamo ai motori dove si trova la sitemap (uno spazio dalla riga precedente!)

Cose da sapere.. – tracciamento dati
Matteo Russo
Sicuramente terremo traccia del traffico sul nostro sito web.
Apriamo un account Google Analytics
Creiamo la proprietà e la vista
Recuperiamo il codice di tracciamento
Inseriamo nelle nostre pagine, IMMEDIATAMENTE dopo il tag <body>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=/slideshow/seo-html-russo/46673233/g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-XX', 'auto');
ga('send', 'pageview');
</script>
<p>…contenuto…</p>
</body>
Inserendo il codice appena dopo il tag body,
tracceremo eventuali chiusure anticipate della
pagina

Strumenti per Webmaster
Matteo Russo
Creiamo gli account per entrambi
Inseriamo il nostro sito web, preleviamo il codice di verifica proprietà ed inseriamolo nel tag <head>
<meta name="google-site-verification" content=“AYYGYGYGAYGAYGAYGAYGAAA098908908908908" />
<meta name="msvalidate.01" content=“89C7SD89AS79SA8D70AS98D7AS89D7A" />
Sottoporre sitemap | Controllare le query di ricerca | Controllare eventuali errori di scansione rilevati da Google | Disavow Tool
Markup Test

Abbiamo terminato… per oggi 
Matteo Russo
Grazie per avermi seguito, qui di seguito tutti i miei contatti per informazioni e consulenze:
•E-Mail: info@milazzoshop.com
•Skype: computer-web
•Linkedin: http://it.linkedin.com/in/matteorusso80
•Facebook: https://www.facebook.com/matteo.russo.90260
•Web: http://www.phpseo.it

�ݺ�ߣ

Seo html russo

More Related Content

Seo html russo