Google Mi Sento Fortunato : ormai è inutile

15 nov 2011

Inserito da: Andrea Lanfranchi in: Internet

La prolificità degli sviluppatori Google è nota. Come è pure noto che non ci mettono molto ad abbandonare le idee che non vanno o che non generano i corretti profitti.

Tra le tante cose che ormai siamo abituati a percepire come familiari è l’immagine della home di Google

Notate niente di strano ? Ci sono due bottoni ormai quasi completamente inutili: Cerca e Mi sento Fortunato. Già … perchè per impostazione quasi universalmente predefinita basta iniziare a digitare una ricerca nella casella di testo perchè la pagina cambi e inizino subito ad apparire i risultati (Google Instant Search). Perchè mantenerli li allora ? Forse quelli di Google pensano che la pagina possa risultare troppo minimalista senza nemmeno un bottone. C’è da giurare però che il “Mi sento fortunato” (quando funziona) faccia perdere parecchi soldi in mancati ads emessi. Che sparisca presto ? ….

0 Commenti

Bottone Google Plus e rinvio analisi Javascript

10 nov 2011

Inserito da: Andrea Lanfranchi in: Internet, Seo

Dopo aver corretto il codice html del mio blog per farlo risultare valido alle verifiche w3c, mi sono messo ad analizzare un altro problema che nasce da quella tecnica: le performance di caricamento della pagina. Google è molto attenta alle performance offerte dai siti che indicizza e mette a disposizione diversi strumenti per ottimizzare l’output di ogni pagina affinchè risulti essere il più rapido possibile da visualizzare e, quindi, da fruire per i vostri visitatori. Non è da sottovalutare un altro fatto: quanto più il sito sarà rapido, tanto più alto sarà il numero di pagine che Googlebot (il crawler che vi indicizza) riuscirà ad ottenere in pasto nel tempo che BigG dedica alla scansione.

Tra i vari suggerimenti offerti dallo strumento di analisi PageSpeed risulta critica l’azione di Rimandare l’analisi del codice Javascript: in pratica si tratta di rinviare tutta l’esecuzione del codice javascript non necessario al rendering della pagina a dopo che il documento è stato caricato e quindi a dopo che i contenuti siano visibili.

Analizzando ora quello che avevo illustrato nell’articolo su come convalidare il bottone GooglePlus, vediamo che durante il caricamento della pagina vengono eseguite le istruzioni di rendering (in java) dei bottoni. Infatti ad ogni articolo emesso dallo script index.php genero il codice che riporto di seguito:

<div id="plusone-div<?php the_ID() ?>" class="plusone"></div>
<script type="text/javascript">
      gapi.plusone.render('plusone-div<?php the_ID() ?>',{"size": "medium", "count": "true", "href": "<?php the_permalink() ?>"});
</script>

Questa impostazione è sconsigliata perchè interrompe il normale rendering della pagina e impone l’esecuzione del codice javascript per poi riprendere di nuovo ad elaborare la restante parte del codice html. Come fare allora per rinviare a dopo il caricamento del documento il rendering dei bottoni Google Plus. E’ piuttosto semplice: emettiamo per ogni articolo un normale <div> formattato come il precedente ma questa volta aggiungiamo all’attributo title il valore dell’url di riferimento a cui agganciare il bottone stesso.

1	<div id="plusone-div<?php the_ID() ?>" class="plusone" title="<?php the_permalink() ?>"></div>

Dobbiamo ora inserire nel file header.php (lo script che genera l’intestazione di ogni pagina) un nuovo script javascript all’interno della sezione <head>. Ecco il codice:

<script type="text/javascript">
function renderPlusOnes() {
var plusOnes = document.getElementsByClassName('plusone');
for (var i=0, plusOne; plusOne = plusOnes[i++];) {
if (plusOne.title) {
  gapi.plusone.render(plusOne.id,{"size": "medium", "count": "true", "href": plusOne.title});
  }
}
}
}
</script>

Questa funzione ricerca tutti i div di classe plusone all’interno del documento e per ognuno di essi invoca la funzione di Google che esegue il render del bottone al loro interno. Noterete che l’attributo title viene utilizzato come segnaposto per l’url di destinazione. Ora non resta che modificare il tag <body> per fargli eseguire la funzione al caricamento.

1	<body onload="javascript:renderPlusOnes(); return true;">

Altri tre punti guadagnati nell’indice di performance di Google (ora 88/100) e tutto come sempre nel rispetto della convalida W3c.

0 Commenti

Bottone Facebook Mi Piace e la convalida HTML W3C

08 nov 2011

Inserito da: Andrea Lanfranchi in: Internet, Programmazione, Seo

Come in un precedente articolo nel quale mi sono occupato della convalida W3c del sito dopo che si è inserita l’implementazione del bottone +1 di Google, anche per il bottone Mi Piace di Facebook è necessario procedere a qualche aggiustamento per poter ottenere una convalida del proprio sito. Queste brevi indicazioni prescindono dall’ottenimento di un codice Applicazione che dovrete comunque richiedere nella sezione Developer di Facebook.

Dunque … cominciamo con lo script principale che Facebook vi chiede di inserire nella pagina. Quello che vi rilasciano inizia così :

1	<script>(function(d, s, id) {

Tuttavia questa impostazione non è convalidabile perchè manca l’attributo type. Dovrete quindi modificare la riga in questo modo :

1	<script type="text/javascript">(function(d, s, id) {

Per ottimizzare poi l’esecuzione dello script, in modo che non blocchi il render della pagina durante il caricamento, è consigliabile attivare la modalità asincrona aggiungendo una sola riga di codice:

1 2	js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=xxxxxxxxxxxxxx"; js.async = true; /* Aggiungere questa */

Ora è necessario specificare dove si desidera che vengano emessi i bottoni. A questo proposito Facebook vi fa inserire un elemento div tipo il seguente:

1	<div class="fb-like" data-href="......" data-layout="standard" data-send="true" data-width="450" data-show-faces="false"></div>

Questo elemento, così impostato, non può essere validato perchè attributi come data-href, data-send ecc. non sono validi per l’elemento DIV. Il problema è aggirabile facendo in modo che questi elementi siano iniettati nell’html tramite uno script mediante una normale istruzione document.write. A questo punto però dovremo fare attenzione a racchiudere il contenuto da scrivere all’interno di una sezione CDATA perchè per gli script Java il carattere “< ” indica un reindirizzamento. Al termine il codice deve risultare così.

1
2
3

<script type="text/javascript" language="javascript">
document.write('<div data-href="<?php the_permalink() ?>" data-layout="standard" data-send="true" data-width="450" data-show-faces="false"></div>');
</script>

Al termine, ancora una volta, avrete la vostra convalida.

4 Commenti

Articoli Successivi Articoli Precedenti

Categorie

Internet (23)
Mio Padre (6)
Mondo IT (142)
Programmazione (12)
Senza categoria (20)
Seo (3)

Anlan.com

Google Mi Sento Fortunato : ormai è inutile

Bottone Google Plus e rinvio analisi Javascript

Bottone Facebook Mi Piace e la convalida HTML W3C

Categorie

Archivi