Post on 11-Aug-2015
transcript
Mi Presento
Matteo Russo
Matteo RussoWebdeveloper 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 RussoWebdeveloper HTML&PHP, SEO
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 RussoWebdeveloper HTML&PHP, SEO
Notepad++ (o equivalente editor testuale)FirebugScreaming Frog SEO Spider & XenuFileZilla Client (o equivalente Client FTP)Account “Google Webmaster Tools”Account “Strumenti di Bing Webmaster”…tanta pazienza
Gli strumenti indispensabili
Perché un editor testuale
Matteo RussoWebdeveloper HTML&PHP, SEO
Codice pulito
Più ci si sporca le mani, prima si impara
Gli strumenti indispensabili
Firebug: meglio di un’autopsia
Matteo RussoWebdeveloper HTML&PHP, SEO
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”
Gli strumenti indispensabili
Screaming Frog SEO Spider – Lo Strumento n. 1
Matteo RussoWebdeveloper HTML&PHP, SEO
Errori del sito (40X, 50X) e Redirect (30X)
Validità Url e indicizzazione (index, follow)
Meta Tag & Headline Paragraph
Image Optimization
Creazione Sitemap
Gli strumenti indispensabili
Google & Bing Webmaster Tools
Matteo RussoWebdeveloper HTML&PHP, SEO
Rivendicare la proprietà di un sitoPossibilità di sottoporre le sitemapRichiesta di indicizzazione di una o più pagineQuery di ricercaErrori di scansioneTest per markup e dati strutturatiAnalisi dei link verso il nostro sitoDisavow Tool (rifiuto link)Azioni Manuali (Penalizzazioni)
HTML5 – diamo una mano ai motori di ricerca
Matteo RussoWebdeveloper HTML&PHP, SEO
<!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="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 RussoWebdeveloper HTML&PHP, SEO
<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 RussoWebdeveloper HTML&PHP, SEO
<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=“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 RussoWebdeveloper HTML&PHP, SEO
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 RussoWebdeveloper HTML&PHP, SEO
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 RussoWebdeveloper HTML&PHP, SEO
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 RussoWebdeveloper HTML&PHP, SEO
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=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 RussoWebdeveloper HTML&PHP, SEO
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 RussoWebdeveloper HTML&PHP, SEO
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