RealizzareilpropriositoWEB

ValerianoSalve

Pescara,27aprile2017

Cos’èl’HTML

• HTML èl'acronimodi HyperText MarkupLanguage edèillinguaggiocolqualevengonocreatelepagineweb.SitrattadiunlinguaggiodipubblicodominiosviluppatoinsenoalW3C,ovveroilWorldWideWebConsortium,cioèilconsorziochepresiedeallosviluppodelwebedeilinguaggiadessoconnessi.

• QuestolinguaggioèstatosviluppatodaunricercatoredelCERN- TimBernersLee - versolafinedeglianniottantaparallelamentealladefinizionedelprotocolloHTTP.Nelcorsodeglianniillinguaggiohasubitodiversemodificheerevisioni.AdoggilaversioneufficialediHTMLèla4.01(pubblicataneldicembredel1999)madamoltiannisistalavorandoadHTML5chesipreannunciacomeunaveraepropriarivoluzioneperilweb.AttualmenteHTML5èsoltantouna"bozza"(cioènonèancorastatorilasciatoufficialmente),tuttavialamaggiorpartedeibrowserincircolazioneneoffregiàundiscretosupporto.

2

Cos’èl’HTML

• IllinguaggioHTML nonèunlinguaggiodiprogrammazioneveroeproprio.Puòesseredefinitocomeun linguaggiodimarcatura (olinguaggiodimarkup)basatosu tag.Itag sonoglielementistrutturalidiognipaginawebecostituisconole"mattonelle"chedannovitaeformaaidocumentiipertestuali.• Ipertestuale perché,attraversoisuoitag,oltreaconsentiredicrearepaginecompostedadiversielementitracuitesto,immagini,video,ecc.permettediconnetteretradiloropaginediversediunostessositoesitiwebdiversi.

3

Lafunzionedelbrowser• IlcompitodiinterpretareimarkupHTMLèaffidatoai browser;cioèaisoftwaredinavigazionesuInternetiqualihannoilcompitodiconnettersiadunserverremotoescaricare(download)ildocumentorichiesto.Unavoltascaricato,ildocumentoverràinterpretatodal"motore"delbrowsercherestituiràall'utentelapaginawebprontaperesserefruita.• sulmercatoesistonodiversibrowser,ipiùfamosisono: Internet Explorer,Edge, Firefox, Chrome,Safari.• E'beneprecisarefindasubitochenontuttiibrowserinterpretanoilcodiceHTMLallastessamaniera,èpertantopossibilenotaredellepiccoledifferenzevisualizzandolastessapaginawebconbrowserdiversi.• Anchesmartphone etablet hannoilorobrowser perleggerelepagineHTML

4

Comeèfattaunapaginaweb

5

Proviamoadaggiungerecodiceaunapaginaweb

• http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

ComevisualizzareilcodiceHTMLdiunapagina:• UtentiPCconsistemaoperativoWindows:perChrome eFirefox cliccareconiltastodestrosuunapaginawebescegliere«visualizza sorgente pagina»,mentreperInternet Explorer oEDGE cliccareconiltastodestrosuunapaginawebescegliere«HTML»• UtentiMACdaSafari scegliere«preferenze»->«avanzate»->spuntare«mostra menuSviluppo…»equindinelmenù«sviluppo»scegliere«mostra sorgentepagina»mentreperChrome eFirefox ècomeperl’ambianteWindows.

6

CMS(ContentManagementSystem)

• UnCMSèunsoftwarepergestireicontenutidiunsitowebinstallatosuunserver.• Neesistonomoltisiaapagamentochegratuiti.ICMSgratuitioggipiùutilizzatisono:• Wordpress (www.wordpress.org)• Joomla (www.joomla.org)• Drupal (www.dropal.org)

• LasceltadiqualeCMSutilizzaredipendedamoltifattori(Scopodelsito,aggiornabilità,ecc…).ICMSpiùutilizzatioggisonoWordpress eJoomla.

7

https://it.wordpress.com/create/

8

Scegliereillayoutdelpropriosito

9

Scegliereiltipodigraficadelpropriosito

10

Sceltadelnomedelsito

11

Sceltadell’indirizzodelsito

12

Undominio

13

160.78.48.68160.78=indirizzodirete48=indirizzodellasottorete68=indirizzodelcomputer

www.univaq.it

it =nomedominio(Toplevel domain)univaq =nomesottodominio(Dominiodi2° livello)www =serviziorichiesto

www.odg.abruzzo.it

it =nomedominio(Toplevel domain)abruzzo =nomesottodominio(Dominiodi2° livello)odg =nomesottodominio(Dominiodi3° livello)www =serviziorichiesto

Sceltadeldominio

• Nonutilizzarenomitroppolunghiedifficilidaricordare(nonpiùditreparole)• Scegliereparolecomuniutilizzatedagliutenti• Evitarecaratterispecialietrattininelnome:meglioricettedicucina.itchericette-di-cucina.it.Perimotoridiricercaèindifferente(riesconoadistricarsifinoatreparole),masicomunicanoesiricordanomeglio;• Cercareunacorrispondenzatraparolechiaveneldominioeargomentitrattati• L’estensione.it,.com,.org nonèpiùimportantealivelloSEO.

14

Gratisoapagamento?

15

Creareunaccount

16

Dashboard

17

HostingsuARUBA

18

WordPress

Esisteunaversioneon-linediWordPress (www.wordpress.com)chepermettedirealizzareunsitocollegandosidirettamentealserverWordPress.Hapotenzialitàmoltolimitate,offredominiditerzolivello(es.:www.miosito.wordpress.com)edèrivoltosoprattuttoachivuolemettereon-lineunblogconpocheconoscenzetecnicheesenzaalcunaspesa.

19

Itag HTMLpiùimportantiperlericerche

Gestirebenealcunitag èfondamentale,siaperfacilitareillavoroagliSPIDER,siaperaveredellepaginebenleggibilienoncompletamentedipendentidalbrowserchel’utentestautilizzando.Vediamoquellicheciinteressanodipiù:• Title• Description (cheinrealtàèunmetatag)• Keyword• Tag di intestazione

20

Iltag TitleIltag TITLE èlegatoaltitolo dellanostrapaginaweb.

<!DOCTYPEhtml><html><head><title>Quièinserito il titolo della pagina</title></head>

<body><h1>ThisisaHeading</h1><p>Thisisaparagraph.</p></body>

</html>21

Comeimpostarecorrettamenteiltag Title

• Utilizzodeiduepunti:Googledàimportanzaalleprimeparoledeltitoloepremiauncontenutodivisoindueparti.Es.:«MareAbruzzo:nuoveoffertealberghi2016»• Utilizzodelsimbolopipe|:Ilsimbolo| (PIPEèilprimosimboloinaltoasinistranellatastierasottoiltastoESC)divideiltitoloindueblocchi.Puòesseresostituitoanchedaltrattino-Es.:«MareAbruzzo:nuoveofferte2016|AlbergoIlSole»

PercapirecomeGooglecifavedereiltitoloèpossibilevisitare:https://moz.com/blog/new-title-tag-guidelines-preview-tool

22

Comeimpostarecorrettamenteiltag Title

• Iltitolonondovrebbeesserecostituitodapiùdi12parole(quanteneconsideraGoogleperl’indicizzazione)einnonpiùdi60caratteri(spaziinclusi)• Usateimodificatori: inambitoSEO, modificatori sonoparolecome “nuovo”,“migliori”, “offre“,“acquistare”,“economico”e“recensioni”. Gliutentitendono adincludere i modificatori durantelaricerca e durantelavisualizzazionedellaSERP.

23

Iltag DescriptionIltag DESCRIPTION fornisce,all’utenteeaGoogle,ladescrizionedellapagina.

<!DOCTYPEhtml><html><head><title>Quièinserito il titolo della pagina</title>

<metaname=“description”content=“Quideve essere inserita ladescrizione dellapagina webed Isuoi contenuti.”/>

</head>

</html>

24

ComeimpostarecorrettamenteiltagDescription

• Ilnumerodelleparoleutilizzatenondovrebbeesseresuperiorea15inmodocheGooglepossafarlevederetutte;• Ilnumerodeicaratteri(secondoleindicazionidiGoogle)nondovrebbeesseresuperiorea155 (spaziinclusi)• Ilcontenutodelmetatag DESCRIPTION verràvisualizzatonelloSnippet dellaSERP.Inmancanzadeltag DESCRIPTION Googlecercheràladescrizioneall’internodellapaginaeirisultatipotrebberononesserequellidesiderati

25

Snippet

Description

ComeimpostarecorrettamenteiltagDescription

• NonèdettoperòcheunavisualizzazionesullaprimapaginadiGooglesitrasformiautomaticamenteinunaconversione;• Perottenereirisultatidesideratiènecessariolavorare moltoebene sulladescription;• Andrebberoinseriticontenutifortementepersuasiviperl’utente;• Andrebberomesseincorrelazioneleparolechiavicompreseneltitoloeneltestodellapaginaweb;• Utilizzareunadescription unicaperognipagina.AiutaGoogle,maaiutaanchel’utente.

26

Unplugin perWordPressWordPress èunCMSfortementeorientatoversoill’ottimizzazioneperimotoridiricerca.

Unplugin èunpiccoloprogrammachepermettediestenderelefunzionalitàdelCMSperattivitàparticolari

Ilplugin perWordPress è«WordPress Seo»che,unavoltainstallatoedattivato,perogninuovoarticolocheverràinseritoproporràunaschermataincuisiavranno:

• l’anteprimadellosnippet;

• ilcampoperinserireunaparolachiave(ilplugin faràunaverificadell’articolopersuggerirla,maèmeglioinserirlamanualmente);

• Ilcampoperinserireiltitle;

• Ilcampoperinserireladescription;

Terminatol’inserimentoilplugin cipermettedifareunaanalisidellapaginadalpuntodivistadell’ottimizzazioneperimotoridiricerca,conconsigliesuggerimentipermigliorarla.Appenasalvatol’articoloilplugin faràun’altraverificaecidiràdovecomparelaparolachiave,quantevoltecompareecc…ecc…

27

Iltag keywords

• Conl’evoluzionedellacapacitàdeimotoridiricerca,soprattuttoGoogle,difarelascansionedeitestiilmetatag keywordsèdiventatopocoimportante.Moltisiti,anchedigranderilievo,nonloutilizzano,maèsempreutileindicarleperchécontinuanoadessereutilizzatidaalcunimotori.• Ilmetatag keywordshaloscopodiindicareaimotoridiricercaunalistadiparolechiaveinerentiicontenutidellapaginawebincuiiltagappare.

28

Strutturadeltag keywords

Iltag METANAMEvaindicatoall’internodelblocco<head></head>

<!DOCTYPEhtml><html><head><title>Pagetitle</title><METANAME= “KEYWORDS“CONTENT=“confetti,matrimonio,sposi,comunione,battesimo,laurea”>

</head>

<body></body></html>

29

Itag diintestazioneDefinisconol’intestazionedadarealtestocome,adesempio,glistilideicaratteriinWord.Lalorofunzionenonèutilesoloallavisualizzazionedeicaratteri,mahannounruoloancheperimotoridiricerca.

<!DOCTYPEhtml><html><head><title>Pagetitle</title></head>

<body>

<h1>Primaintestazione</h1><h2>Seconda intestazione</h2><p>Questo èunparagrafo</p></body></html>

30

Usodeitag diintestazione:unesempio

31

TestoinHTML Testovisualizzatodalbrowser

Possiamofarequalcheprovaqui:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_defaultOqui:http://htmleditor.in/index.html

GliURL«parlanti»

• AlcuniCMSnonoffronolapossibilitàdimodificarel’URL(indirizzoweb)diunapagina,mageneranoURLnumerici.Seèpossibilemodificarliogestirliautomaticamenteconilnomedell’articoloèsempremegliofarlo;• E’benechel’URLdiunapaginacontengaleparolechiaverilevantiperitag title edescriptionEs.:http://www.salve.ws/index.php/articoli/38-scoop-it-content-curation-alla-portata-di-tutti

• Leparoledell’url vannoseparatedatrattinicosìmotoridiricercapossonoindicizzarleseparatamente;• IprincipaliCMSpossonoessereimpostatiintalsenso

32

UnocchioancheaglialtricontenutiUnsitoweboltrechetesticontieneimmaginiespessoanchefileinformatoPDF.Anchequestielementivannoottimizzatiperfacilitareillavorononsoloaglispider,maancheagliutentichenaviganosulsito

33

OttimizzareifilePDF

AncheperifileinformatoPDFvalequantodettoperlepagineweb.• ScrivereilnomeutilizzandolestesseregolevalideperifileHTML• Definiregliattributidelfile• Titolo (Title):vieneutilizzatocometitoloneimotoridiricerca;• Autore (Author):indical’autoredeldocumento;• Oggetto (Subject):indical’oggettodeldocumentocheèequivalentealladescription neimetatag deifilehtml• L’ottimizzazionepuòesserefattadirettamentesulfile,mavolendosipuòscaricareuntool (inwindows)chepermettedifaremoltealtrecose:http://www.debenu.com/thank-you/tools-free

34

Ottimizzareleimmagini

• Stessodiscorsoancheperleimmagini• RinominareilfileconleregolevisteperifileHTMLeifilePDF(nome«parlante»conparoleseparateda-);

• Modificaregliattributi<alt>e<title>nelcodiceHTML• <alt>(alternativetext)natoperdescrivereicontenutidiunapaginawebancheperinonvedentipuòessereusatoancheperdareinformazionialmotorediricerca.Vienecaricatoquando,perunqualsiasimotivo,nonfossepossibilevisualizzarel’immagine;

• <title>mostrauntestdescrittivoquandosipassaconilmousesuunaimmagine.PuòessereutilizzatodalpuntodivistaSEOsenzatimorediincorrereinripetizionipenalizzanti;

• GooglepremialepaginechesicaricanopiùvelocementefacendoleapparireaiprimipostinellaSERP,quindiattenzionealpeso(dimensioneinbyte)dell’immaginechevienecaricata.

35

Ottimizzareilink

Ancheilinkpossono/debbonoessereottimizzati.• Inserirel’attributotitle neilink(l’attributotitle siattivaalpassaggiodelmousesullink);• Nonutilizzareperillinkparolegenerichedeltipo«cliccaqui»,«seguiillink»ecc…chenondannonessunainformazioneaimotoridiricerca;• Unabuonamossaèinserirenell’attributotitle lostessotestosceltoperleparoledalinkare.

36

Facilitarelanavigazionedelsito

37

• Lanavigazioneèimportantesiapergliutenticheperimotoridiricerca.Googlefornisceirisultatialivellodipagina,maèimportanteche«sappia»qualepuòessereilruolodiunapaginaall’internodiunsito.• LanavigazioneandrebbepianificatapartendodallaHomepagedelsito.Sesihannomolticontenutichepossonoessereraggruppatipotrebbevalerelapenadicreareunapaginaintermediaperciascungruppodipagine.• Utilizzarele«breadcrumb»(bricioledipane).

Ancoraunplug-inperWordPress

38

RisorsediGoogleperl’ottimizzazionedeisiti

Googlecimetteadisposizioneunaseriedirisorseperanalizzareilcomportamentodelnostrosito.Leprincipalisono:• GoogleWebmasterToolshttps://www.google.com/webmasters/tools/home?hl=it• GoogleAnalyticshttps://www.google.com/analytics/

PerentrambibisogneràdisporrediunaccountGoogle

39

GoogleWebmasterTools

40

GoogleWebmasterTools

41

GoogleAnalytics

42

UtilizzareGoogleAnalytics1. CreareunaccountsuGoogleAnalytics

http://www.google.com/intl/it/analytics/2. PercreareunaccountGoogleAnalyticsènecessarioavereunaccountGmail e

quindiinserirenomeutenteepasswordallavoce«creaaccount»;3. Unavoltafattal’iscrizioneilserviziofornisceuncodicejava-script dainserire

nellepaginedelnostrositoperconsentireadAnalyticsdirilevareiltrafficogeneratodaivisitatori.

Perinserireilcodicenelsitoconsultareilserviziodiassistenzaall’url:http://support.google.com/analyticsSesiutilizzaWordPress èpossibileinserireilcodiceattraversounplugin.Possiamotrovarneunoalseguenteurl:http://wordpress.org/extend/plugins/google-analytics-for-wordpress/

43

Scrivereperilweb

Regoladellapiramiderovesciata

Regoladelle5W

44

Lapiramiderovesciata

Informazioneprincipale(Regoladelle5W)

Informazioneimportante

Dettagli

45

Scrivereperilweb

• Lastrutturaapiramiderovesciataèmoltoimportanteperilwebpoichélaletturaon-lineèunaletturaparticolare,moltoveloce,chespessosifainposizioninoncomodee,sempredipiù,condispositiviportatiliconschermidipiccoledimensioniecondizionidilucenonottimali.• Presentarelaconclusionefindalleprimerighepermettedicatturaresubitol’attenzionedellettorecheinquestomodosaràpiùincentivatoacontinuarenellalettura.• Laregoladelle5W(who,what,where,when,why)inquestocasodiventafondamentalepersintetizzareimmediatamenteilcontenutodell’articolo.

46

Scriverepergliutentienonperimotoridiricerca

Googlenelfarelericercheèmoltopiùraffinatodiquantosipossapensare.Provateafarequestedomande:•Quantofa20+2?• TrovamiunparrucchiereaL’Aquila•Dimmichetempofaoggi/domani•QuantoèaltalatorrediPisa?• Fafreddo?

47

Crearecontenutidiqualità

Crearecontenutidiqualitàperunmotorediricercasignificaanche:• Pertinenza• AutorevolezzaMentresullapertinenzasipuòintervenireperquellocheriguardal’autorevolezzailproblemaèchenondipendedanoi,masiacquisisceconiltempoedipendeanchedachiutilizzaicontenuticheabbiamocreato.

48

Visualizzazioneconidispositivimobili:Testdicompatibilità

Googlecioffreglistrumentiperverificareseunsitowebècompatibileconilmobile.All’URL:https://www.google.com/webmasters/tools/mobile-friendly/èpossibileverificareseunsitoèottimizzatoperunafruizionecompletaanchedadispositivimobili.Nellostessotempovengonoindividuatelecriticitàelepossibilisoluzionidaadottare.SempreGoogle,all’URL:https://developers.google.com/webmasters/mobile-sites/get-started/?hl=itcioffreunaguidaperl’ottimizzazionedeisitiwebperilmobile.

49

Problemipiùcomuni

• Visualizzazionenonconfigurata• Caratteritroppopiccoli• Elementitroppoviciniperesseretoccaticonprecisione• Contenutinonridimensionatiinbaseallavisualizzazione• Visualizzazioneimpostatasuunalarghezzafissa• UtilizzodisistemipocoonullacompatibiliqualiadesempioFlash

50

AlcunisuggerimentidirettamentedaGoogle

• VerificarecheilsitopermobilesiaindicizzatodaGoogle(sipuòusareanchel’operatoresite:perfarelaricerca)• Creareunasitemap mobile.Potetetrovarequalchesuggerimentoqui:https://code.google.com/archive/p/sitemap-generators/wikis/SitemapGenerators.wikiancheseGooglenonlofapiùdirettamentecisonoilinkasitichegeneranositemap percellulari• VerificarecheGooglericonoscagliURLpericellulariutilizzandoglistrumentidiGoogle:https://developers.google.com/webmasters/mobile-sites/?hl=itOppurequi:https://support.google.com/webmasters/answer/72462?hl=it

51

Esempidicodiceottimizzatopercellulari

InquestoesempiofornitodaGoogleèevidenziatoilcodiceHTMLnecessarioper«dire»aGooglecheilsitoèottimizzatopericellulari

52

Dispositivi«ammessi»allavisualizzazionedelsito

Codiceconilqualeèstatoscrittoilsito

53

Comeregistrarsisuimotoridiricerca:Google

54

https://www.google.it/intl/it/add_url.html

Comeregistrarsisuimotoridiricerca:Bing

55

http://www.bing.com/toolbox/submit-site-url

RisorsefornitedaGoogle• GruppodiGoogleperilsupportoaiWebmasterhttps://productforums.google.com/forum/#!forum/webmaster-it

• IlGoogleWebmaste central Blog:https://webmasters.googleblog.com/

• Centrodiassistenza«Search Console»diGoogle:https://support.google.com/webmasters/#topic=3309469

• StrumentiperilWebmaster:https://www.google.com/webmasters/tools/home?hl=it

• LineeguidaperWebmaster:https://support.google.com/webmasters/answer/35769

• GoogleAnalyticshttps://www.google.it/analytics/

• Sperimentarecosafunzionaecosanonva:https://support.google.com/analytics/answer/1745147?hl=it

• Avetebisognodiqualcunochelofacciapervoi:https://support.google.com/webmasters/answer/35291

56