Google indicizzazione https

Google indicizzazione https

Il 6 agosto 2014 su Google Webmaster Central Blog viene pubblicato un articolo intitolato HTTPS as a ranking signal.

L’articolo inizia con:

Security is a top priority for Google. We invest a lot in making sure that our services use industry-leading security, like strong HTTPS encryption by default. That means that people using Search, Gmail and Google Drive, for example, automatically have a secure connection to Google.

Già da diverso tempo molti dei servizi di Google come Search, Gmail, Drive, Youtube, AdWords, Analytics, ecc.  interagiscono con gli utenti attraverso connessioni crittografate su HTTPS.

Google attraverso questo post su Webmaster Central Blog, inizia a manifestare la volontà di voler fornire agli utenti, contenuti e servizi attraverso connessioni sicure, in un contesto di sicurezza più ampio che va oltre le proprie App o servizi.

Rendere Internet più sicuro, lavorando soprattutto sui risultati forniti dal motore di ricerca, proponendo agli utenti contenuti ritenuti più attendibili, perché forniti attraverso connessioni crittografate.

Le risorse messe in campo sono diverse, qualche mese prima di questo post, al Google I/O 2014 con un video disponibile su youtube viene presentato il progetto HTTPS Everywhere, mentre i Webmaster già da diverso tempo hanno a disposizione in Search Control un tool per prevenire e risolvere violazioni della sicurezza sui siti web.

Per queste ragioni già a partire dall’agosto 2014 l’HTTPS diventa un fattore di ranking, non rilevante come i contenuti di qualità, ma viene preso in considerazione come un elemento che può influire sul ranking stesso.

Il post chiude con questo auspicio:

We hope to see more websites using HTTPS in the future. Let’s all make the web more secure!

HTTPS_icon

Indicizzazione di default della pagine https

Il 17 dicembre 2015 con un altro articolo su Google Webmaster Central Blog – Indexing HTTPS pages by default viene annunciata l’indicizzazione di default delle pagine HTTPS.

L’https diventa elemento di ranking inserito definitivamente anche nelle linee guida di Google per i webmaster.

Google rafforza e conferma la volontà di voler promuovere l’adozione di HTTPS ovunque. Il web inteso come esplorazione privata tra utente e sito web, senza avere problemi legati a rischi per la sicurezza come intercettazioni, man-in-the-middle o modifica dei dati stessi.

Come avverrà l’indicizzazione di default della pagine https?

Nel post si legge che inizieranno a scansionate tutte le pagine HTTPS che già hanno un equivalente HTTP.

In presenza di due URL identiche dello stesso dominio, con contenuti equivalenti, ma servite su protocolli diversi, verranno scelte ed indicizzate URL fornite su HTTPS se:

  • Non contengono dipendenze insicure
  • Non sono risorse bloccate da robots.txt
  • Non reindirizzano l’utente su una pagina HTTP
  • Non contengono un rel = “canonical ” alla pagina HTTP
  • Non contengono un robot noindex tag
  • La sitemap contiene URL HTTPS e non elenca la versione HTTP delle URL
  • Il Server dispone di un certificato TLS valido

In questo modo nel motore di ricerca inizieranno ad essere indicizzate pagine HTTPS che verranno successivamente fornite agli utenti attraverso il motore di ricerca Google.

In generale dopo aver attivato un certificato HTTPS che lavora sia per un dominio www che non www, sul proprio sito sarà sufficiente inserire nell’ .htaccess:

in questo modo tutti i link http://tuodominio.com e http://www.tuodominio.com verranno reindirizzati e forniti su https://tuodominio.com.

Sarà importante attivare una nuova proprietà web su Google Search control inviando una nuova sitemap con link HTTPS del tipo https://tuodominio.com/sitemap.xml

Sarà necessario attivare anche una nuova proprietà su Google Analytics, fornendo come dominio il link servito su HTTPS e sostituendo il vecchio codice UA-XXXXXX (con riferimento ad HTTP) con il nuovo codice UA-XXXXXXX che fa riferimento al dominio HTTPS.

 

 

Google aggiorna le sue linee guida per i Webmaster in Search Control

Google aggiorna le sue linee guida per i Webmaster in Search Control

Google ha una lunga serie di linee guida per i Webmaster, queste sono indicazioni su come migliorare il proprio sito, ottimizzarlo per la ricerca operando in Google Webmaster Tool o Search Control

Di recente le linee guida per i Webmaster di Google sono state aggiornate, ed ogni volta che questo avviene è sempre molto interessante capire cosa è stato aggiunto e cosa è stato rimosso.

La maggior parte dei nuovi cambiamenti non sono proprio una novità, erano già stati comunicati, ed ora materialmente sono stati inseriti all’interno delle linee guida.

google linee guida webmaster search console

Cosa sono le linee guida per i Webmaster di Google?

Per rispondere a questa domanda e comprendere l’importanza delle linee guida di Google è sufficiente partire dall’inizio, leggendo proprio la prima riga:

Ti consigliamo di attenerti alle seguenti Istruzioni generali per consentire a Google di trovare, indicizzare e posizionare il tuo sito.

Quanto si legge è in assoluto l’informazione più importate (anche perché risulta chiarissima), si tratta dell’indicazione principale per assicurarsi che Google possa inserire il nostro sito nel motore di ricerca, ma è anche interessante soffermarsi su quanto si legge subito dopo:

Ti consigliamo di prestare particolare attenzione alle Norme sulla qualità che seguono, che descrivono alcune pratiche illecite che possono comportare la completa rimozione di un sito dall’indice Google oppure un’azione manuale antispam o algoritmica sul sito. Se un sito è stato sottoposto a un’azione antispam, potrebbe non essere più visualizzato nei risultati di Google.com o in qualsiasi sito partner di Google.

A quanto pare in questo ultimo aggiornamento Google precisa con forza che tutte le pratiche illecite come azioni manuali o algoritmiche si spam (ad esempio) potrebbero incidere a tal punto da portare alla completa rimozione del sito dall’indice di Google e dei siti partner.

Le nuove linee guida per i webmaster di Google

Vediamo in questo aggiornamento delle linee guida per i webmaster, quali sono i nuovi punti integrati. Di seguito un elenco degli elementi completamente nuovi integrati nelle linee guida:

Nuove linee guida su HTTPS

Nelle nuove indicazioni presenti nelle linee guida su HTTPS per webmaster, Google indica chiaramente come “buon pratica” quella di fornire all’utente interazioni crittografate con il nostro sito web.

Non solo, se ci guardiamo in giro, sono innumerevoli i segnali e gli articoli che Google ha disseminato, indicando il passaggio ad HTTPS come un fattore che incide positivamente sul rank del nostro sito. Nel blog ufficiale di Google Webmaster Central Blog sono stati rilasciati diversi articoli in merito, HTTPS as a ranking signal oppure ancora di recente Indexing HTTPS pages by default

Google in merito ad HTTPS sembra voler andare oltre, è possibile leggere in questo articolo a firma di  LORENZO FRANCESCHI-BICCHIERAI, che nei prossimi aggiornamenti di Google Chrome i siti web non crittografati verranno segnalati chiaramente all’utente. La volontà è quella di indicare all’utente che l’HTTP non fornisce sicurezza per i propri dati a differenza di HTTPS.

Nuove linee guida per rendere il vostro sito web mobile-friendly

Nella nuova linea guida su mobile-friendly Google indica ai webmaster di progettare siti web per tutti i dispositivi desktop, tablet e smartphone.

Mette inoltre a disposizione un tool per la verifica di compatibilità dei siti web con dispositivi mobile, che fornisce un feedback su ciò che è stato progettato correttamente e quanto deve essere ancora ottimizzato, per raggiunge una visualizzazione e funzionalità ottimale su dispositivi mobili.

In realtà questa non è una novità, sono circa 2 o 3 anni che Google rilascia indicazioni ai webmaster in merito alla fruibilità di contenuti web ottimizzati per gli utenti che navigano da dispositivi mobili. Il web ha visto esplodere i temi responsive e relativi framework che forniscono a sviluppatori e webdesigner la possibilità di creare siti web con contenuti accessibili per tutti i dispositivi.

Inoltre nelle ultime settimane oltre all’aggiornamento delle linee guida, ritroviamo all’interno di Search Control anche una nuova sezione dedicata alle pagine AMP – Accelerated Mobile Pages, tecnologia che consente di fornire contenuti web ottimizzati per il mobile rendendo le pagine notevolmente più leggere per i dispositivi smartphone.

Nuove linee guida su Accessibilità

Nelle nuove linee guida sull’accessibilità possiamo chiaramente percepire la volontà Google di spingere i webmaster a rendere più accessibili i contenuti importanti del sito web. Come sappiamo attraverso i crawler Google ha la capacità di raggiungere anche contenuti nascosti, come schede o elementi in sezioni in espansione all’interno degli elementi della navigazione, ma precisa che si dovrebbe fare di più per rendere fruibili tutti i contenuti più importanti rendendoli visibili nella pagina predefinita.

In un altra sezione delle linee guida sull’accessibilità parlando di attributi alt  e tag <title>, Google indica al webmaster di assicurarsi di assegnare a questi elementi <title> e alt descrizioni univoche, precise e dettagliate

L’importanza di scrivere correttamente questi attributi è ormai nota in ambito Seo, ma spesso si punta all’utilizzo di plugin che automatizzano questa fase di scrittura e probabilmente Google punta proprio a scoraggiare questa pratica.

Aggiornamenti delle linee guida per i webmaster di Google

Accanto alle nuove sezioni delle linee guida per i webmaster, troviamo diversi aggiornamenti relativi a quelle già esistenti. Di seguito diamo uno sguardo alle più importanti:

Aggiornamento link e struttura del sito

Prima di questo ultimo aggiornamento avevamo:

Realizzare un sito web con una chiara gerarchia e link testuali. Ogni pagina dovrebbe essere raggiungibile da almeno un link testuale statico.

mentre ora Google scrive:

Assicurarsi che tutte le pagine del sito possano essere raggiunte da un link proveniente da altre pagine “trovabili”. Il link di riferimento dovrebbe includere testo o, per le immagini, l’attributo alt, che è rilevante per la pagina di destinazione.

Google indica al webmaster di fornire informazioni attraverso una gerarchia di pagine concettualmente chiare.

Non solo assicurarsi che ogni pagina possa essere raggiungibile attraverso link chiari e non nascosti, ma fornire all’utente una gerarchia di pagine concettualmente funzionali.

Aggiornamento XML e HTML Sitemaps

Anche qui leggiamo nuovi aggiornamenti:

Fornire un  file per la mappa del sito o sitemap con link che puntano alle pagine importanti del tuo sito. Fornire anche una pagina con un elenco leggibile di link a queste pagine (a volte chiamato indice del sito o una pagina mappa del sito).

Offrire una mappa del sito per gli utenti con link che puntano alle sezioni più importanti del tuo sito. Se la mappa del sito ha un numero estremamente elevato di collegamenti, si consiglia di interrompere e dividere la mappa del sito in più pagine.

Come per alcuni dei punti citati sopra, anche in questo caso per XML e HTML Sitemap, gli aggiornamenti delle linee guida per i webmaster, vanno a perfezionare concetti già ampiamente consolidati.

Conclusione sull’aggiornamento delle linee guida per i webmaster di Google

La direzione in cui Google si muove non cambia, le nuove linee guida di Google per i webmaster rafforzano il concetto di progettare siti web che danno maggior valore all’utente.

Un valore espresso appunto dalla volontà di fornire al nostro utente:

  • un sito web sicuro, attraverso interazioni crittografate
  • un sito web mobile-friendly navigabile da qualsiasi dispositivo
  • un sito web che fornisce contenuti concettualmente chiari e facilmente raggiungibili, attraverso una struttura gerarchica fluida e semplice

Polymer Elements, Yeoman generator per Polymer

yeoman_generator

Polymer Elements cosa sono?

Nel post Polymer, Html5 e WebComponents, come iniziare? abbiamo visto quali strumenti sono necessari per iniziare a familiarizzare con Polymer e come installarlo. Abbiamo in realtà creato un app demo vuota, un contenitore in cui abbiamo installato le librerie e settato le dipendenze.

In questo post entriamo nel dettaglio cercando di approfondire Polymer le sue caratteristiche ed il suo utilizzo.

Polymer include al suo interno al momento gli “Element collection” ovvero Polymer Core elements e Paper Elements.

Polymer core elements

Il core di Polymer è l’insieme degli elementi e delle utility che permettono di lavorare sul layout, sull’input dell’utente, selezioni e struttura delle app che si andranno a realizzare.
Documentazione e Demo

Paper elements

L’implementazione del Material Design di Google per il web, un set di elementi interattivi disponibili per costruire applicazioni web ricche di nuove funzionalità.
Documentazione e Demo

Polymer Elements come utilizzarli?

Partendo dall’app creata in precedenza in questo post Polymer, Html5 e WebComponents, come iniziare? vedremo come installare, includere ed utilizzare i Polymer Core elements e Paper Elements. 

Utilizzeremo Yeoman generator for Polymer projects

Le caratteristiche di Yeoman:

  • Polymer app scaffold costruito con Html5 Boilerplate (tutti gli elementi strutturali di Polymer)
  • Sub-generator per creare gli elementi del core di Polymer
  • Boilerplate per creare elementi di Polymer riutilizzabili
  • Supporto SASS/SCSS
  • PageSpeed Insights per i test sulle performance
  • altro

Vediamo come installarlo nella nostra app, apriamo git e posizioniamoci nella cartella della nostra app creata in precedenza /nomeApp

[crayon-5a8f5b39127bd620775927/]

ora siamo nel folder della nostra app /nomeApp

[crayon-5a8f5b39127cb296650961/]

ci verranno poste alcune richieste

yopolymer

Vogliamo includere i core-elements di Plolymer? SI
Vogliamo includere i paper-elements di Plolymer? SI
Vogliamo utilizzare SASS/SCSS per gli elementi di stile? SI
Vogliamo utilizzare libsass? SI
yopolymer2

Bower ora sta creando le dipendenze per gli elementi che Yeoman si appresta ad installare, ha trovato all’interno della root della nostra app il file bower.json che avevamo creato in precedenza e ci chiede se vogliamo sovrascriverlo, gli diciamo di si e confermiamo.

A questo punto Bower inizia l’installazione, ci vorrà un minuto circa…

Finita l’installazione dei Polymer Core elements e Paper Elements diamo uno sguardo alla root della nostra app. Questa è la struttura generata che modifica quella in precedenza creata nel post Polymer, Html5 e WebComponents, come iniziare? – innanzitutto possiamo subito notare che Yeoman ha installato tutto il contenuto in /app all’interno troviamo /bower_components , ma se scendiamo più in basso troviamo (indicato con la freccia rossa) il vecchio folder creato in precedenza /bower_components che a questo punto non ci serve più e possiamo cancellare.

yopolymersublime

Diamo subito uno sguardo all’index.hml nella directory /app

Possiamo notare subito l’inclusione della piattaforma

[crayon-5a8f5b39127da486430405/]

e l’inclusione degli elementi di Polymer

[crayon-5a8f5b39127e3443471627/]

 

yopolymersublime2

 

A questo punto dovremmo entrare nel vivo di Polymer, ovvero provare a strutturare qualcosa, ma volutamente lo rimandiamo ad un post successivo…

Al momento limitiamoci a lanciare l’app test creata di default andiamo nel terminale:

[crayon-5a8f5b39127ed228553214/]

vi dovrebbe lanciare in automatico il browser e l’applicazione su http://localhost:9000/

se ricevete errori dal terminale installate:

[crayon-5a8f5b39127f5434521865/]

e poi riprovate a lanciare nuovamente

[crayon-5a8f5b39127fd823855303/]

ecco l’app demo

app

 

Al momento ci fermiamo qui, ma inserirò presto per entrambe gli articoli due video in italiano per facilitare la comprensione delle operazioni da fare e con un terzo successivo post vedremo dettagliatamente la struttura e le caratteristiche degli elementi di Polymer.

Qui inoltre trovate il video di Rob Dodson che vi sarà utile sicuramente per approfondire quanto abbiamo già visto, fate particolare attenzione in quanto potreste trovare piccole discrepanze sull’inclusione dei core-elements e della piattaforma stessa, in quanto Polymer stesso si evolve ed attualmente è alla versione 0.5, mentre il video in basso fa riferimento ad un version precedente.

 

 

Polymer, Html5 e WebComponents, come iniziare?

polymer

Polymer di cosa parliamo?

Presentato al Google keynote 2014 il progetto “Polymer and the Web Components revolution” definisce un nuovo approccio alla costruzione del web con Html5 attraverso un Ecosistema di librerie, strumenti e framework che consentono di snellire una serie di pratiche consolidate, ma soprattutto di generare piattaforme web scalabili su qualsiasi dispositivo da SmartPhone a Smart Tv.

In questo primo post su Polymer l’intenzione è quella di descrivere brevemente l’idea di base su cui si fonda l’utilizzo di Polymer, ma soprattutto e principalmente delineare i passaggi fondamentali che ne consentono l’utilizzo.

Polymer è una libreria che consente l’utilizzo di Web Components in dotazione e la creazione di nuovi, incapsulati ed interoperabili che estendono di fatto Html5 stesso. Polymer rende più facile e veloce la creazione di qualsiasi elemento web da un semplice bottone fino ad applicazioni desktop o mobile più complesse.

 

Polymer quali strumenti ci servono per iniziare?

Git (Sistema controllo versione e terminale )
Node e npm
  (è una soluzione server-side per JavaScript, in particolare, in grado di ricevere e rispondere alle richieste HTTP)
Bower (Package manager per applicazioni web)
Polymer
Editor di testo

Abbiamo anche necessità di avere un ambiente HTTP server base per lanciare in locale le nostre applicazioni web. Possiamo utilizzare diverse soluzioni, Apache o oppure se già installato Python.

Qualche chiarimento sul flusso di utilizzo ed installazione degli strumenti:
Per utilizzare Polymer o più ingenerale i Web Components dobbiamo utilizzare Bower
Per installare ed utilizzare Bower dobbiamo installare Node,npm e Git

Per iniziare sarà sufficiente andare sui siti di riferimento scaricare ed installare Node,npm e Git

Attraverso la console di Git faremo la maggior parte delle operazioni legate al nostro progetto, ma iniziamo installando Bower (che riutilizzeremo anche per progetti web futuri)

[crayon-5a8f5b39130c6287644278/]

gitbash

Dopo aver installato Bower, dobbiamo creare la directory che conterrà il nostro progetto

[crayon-5a8f5b39130d3159385721/]

Per esplorare la directory in cui ci troviamo e verificare che /nomeApp sia stata correttamente creata possiamo digitare

[crayon-5a8f5b39130db473823312/]

A questo punto posizioniamoci all’interno della directory /nomeApp

[crayon-5a8f5b39130e3160968544/]

gitbash2

Ora inizializziamo il nostro progetto, ovvero dobbiamo creare il file bower.json che conterrà le diverse informazioni, in questa fase possiamo inserire i dati richiesti o comunque trattandosi di un test lasciarli vuoti, dando un return/invio verranno definiti i dati di default, l’ultima richiesta ci mostrerà il file bower.json che stiamo per creare per conferma.

[crayon-5a8f5b39130eb823658079/]

gitbash3

Adesso installiamo Polymer, Bower aggiungerà /bower_components nella root della nostra applicazione /nomeApp inserendo all’interno /Polymer e le sue dipendenze

[crayon-5a8f5b39130f3322238380/]

ecco come appare la root della nostra App, come possiamo notare è stato aggiunto al file bower.json la dipendenza di Polymer
sublimetext

Quando vengono rilasciate nuove versioni di Polymer sarà sufficiente aggiornare con:

[crayon-5a8f5b39130fb937287601/]

A questo punto abbiamo tutto quello che ci serve per procede.
Se avete già installato un serve locale Apache oppure qualsiasi altra soluzione potete già provare a lanciare qualche file presente nell’App, altrimenti possiamo velocemente installare con npm serve:

[crayon-5a8f5b3913103242768933/]

Ora aprendo in un qualsiasi browser http://localhost:3000/ abbiamo la possibilità di accedere alla nostra App e navigare tra le cartelle e dare uno sguardo ai file html all’interno.

Al momento abbiamo un bel contenitore, ma sostanzialmente vuoto.

Di seguito qualche link per approfondire: