AJAX & SEO: Le migliori soluzioni

Giorgio Taverniti – Founder GT Idea - #convegnogt

Andrea CardinaleFounder Web and Tech

AJAX & SEOLE MIGLIORI SOLUZIONI ATTUALI!

@CardinaleAndrea+AndreaCardinale

Andrea Cardinale

www.andrea-cardinale.it

@CardinaleAndrea

+AndreaCardinale

www.webandtech.it

Andrea Cardinale – Founder Web and Tech - #convegnogt

http://www.andrea-cardinale.it/

https://twitter.com/CardinaleAndrea

https://plus.google.com/+AndreaCardinale/

http://www.webandtech.it/

Un po' di storia

Asynchronous JavaScript and XML

Venne denominata Ajax

per la prima volta

nel 2005 da Jesse Garrett

in un articolo del suo blog

Venne denominata Ajax

per la prima volta

nel 2005 da Jesse Garrett

in un articolo del suo blog


Un po' di preistoria


Cosa consiste

Scambio di dati in backgroundfra browser ed il server

RichiestaAJAX

PAGINA WEBPAGINA WEBSERVERSERVER

Aggiornamentocontenuto


Perché utilizzarlo ?

Asincronismo

Velocità d'interazione

Migliora l'esperienza utente


Perché ne parlo ?


Uno sguardo al web


Ajax vs SEO (Uno sguardo al web)


Terzo incomodo (Uno sguardo al web)


Assassin's Ajax IV (Uno sguardo al web)


Indicizzazione (Uno sguardo al web)

“ Ajax può rendere difficoltosal’indicizzazione del sito

da parte dei motori di ricerca ”


Accessibilità (Uno sguardo al web)

“ Ajax può ostacolare l’accessibilitàdei contenuti e del sito ”


Disorientamento (Uno sguardo al web)

“ Ajax può disorientare l’utente:non interagisce con i bottoniavanti e indietro del browser ”


Le vostre esperienze?


Un mio dogma


"Cominciate col fare ciò che è necessario, poi ciò che è possibile.

E all'improvviso vi sorprenderetea fare l'impossibile"

San Francesco d'Assisi

"Cominciate col fare ciò che è necessario, poi ciò che è possibile.

E all'improvviso vi sorprenderetea fare l'impossibile"

San Francesco d'Assisi

Il problema


Perché nasce?

La colpa

Sviluppatore smanettone


Il problema

<a href=”/buon-vecchio-url/”>Label</a>

<a href=”javascript:SuperFigata();”>Label</a>


Il problema


<a href=”#SuperFigata” onclick=”javascript:SuperFigata();”>Label</a>


Risultato

Il Link non contiene più una URL

I tasti (avanti e indietro) del browser non funzionanocome dovrebbero

Senza javascript non funziona una cippa

Il Crawler... inutile dirlo!


Houston,abbiamo

un problema!


Il concetto

Tecnologie come AJAX

devono rappresentare una miglioria,

non sostituire o eliminare funzioni basilari

Tecnologie come AJAX

devono rappresentare una miglioria,

non sostituire o eliminare funzioni basilari


Soluzioni


Google

Making AJAX Applications Crawlable

https://developers.google.com/webmasters/ajax-crawling/


GoogleAnziché utilizzare #

Si utilizza #!Indichiamo che utilizziamo l' AJAX crawling scheme

Il crawler richiede al server il contenuto del seguente URL

www.example.com/ajax.html#key=value

www.example.com/ajax.html#!key=value

www.example.com/ajax.html?_escaped_fragment_=key=value


Google

Server side

Esempio PHP:

if(isset($_GET['_escaped_fragment_'])){

$escaped = explode("=", $_GET['_escaped_fragment_']);

if(isset($escaped[1]) && in_array($escaped[1], $files)){

include ("./views/".$escaped[1].".php");

}

}

Esempio PHP:

if(isset($_GET['_escaped_fragment_'])){

$escaped = explode("=", $_GET['_escaped_fragment_']);

if(isset($escaped[1]) && in_array($escaped[1], $files)){

include ("./views/".$escaped[1].".php");

}

}


Google



Bing




Hijax

Progressive Enhancement with Ajax


Hijax


<a href=”javascript:SuperFigata();”>Label</a>

<a href=”/buon-vecchio-url/” class=”ajax”>Label</a>


Hijax


Client side

Intercetto il click sul link con class=”ajax”

Annullo la richiesta della URL

Effettuo una chiamata ajax al server

Ricevo il contenuto dal server

Effettuo la modifica

Hijax


Server side

Ricevo la richiesta

Identifico la richiesta come Ajax

Render del contenuto senza layout


Hijax


Client side - Esempio

$( document ).ready(function() {$("a.ajax").each(function() {

var a_url = $(this).attr('href');$(this).click(function(e) {

e.preventDefault();$.ajax({

url: a_url, data: 'ajax=1', type: 'GET',}).success(function(data) {

$('#content').html(data);});

});});

});


Hijax


Server side - Esempio

if(isset($_GET['ajax'])) {//includo solo la vistarequire_once('views/'.$view.'.php');

} else {//includo tutto il layoutrequire_once('layouts/'.$layout.'.php');

}

Rimane un problema


User Experience compromessa

URL#


Client side

Modifico l'URL con #URL ( class=”ajax” )

Intercetto il cambio dell'hash

Effettuo una chiamata ajax al server all'URL chesi trova dopo #

Ricevo il contenuto dal server

Effettuo la modifica

URL#




var a_url = $(this).attr('href');$(this).attr('href', '#'+a_url);

});});

$(window).hashchange( function(){var a_url = window.location.hash.substr(1);$.ajax({


$('#content').html(data);});

});

Pjax


pushState + Ajax

history.pushState(data, "Titolo", "/url-new/");

pushStatepushState

Pjax




var a_url = $(this).attr('href');$(this).click(function(e) {

e.preventDefault();$.ajax({


history.pushState('', $(this).attr('title'), a_url);$('#content').html(data);

});});

});});

Pjax

http://caniuse.com/#search=pushstate


Parallax scrolling


(Uno sguardo al web)

“SEO e problemi di ottimizzazione:il parallax riduce il numero di pagine necessarie

per fornire informazioni, ciò non consente quindi diottimizzare il sito con un’ampia varietà di keywords.”

Parallax scrolling


(Uno sguardo al web)


Arrendersi?...Arrendersi?...

http://caniuse.com/#search=pushstate


… o reagire?… o reagire?

Parallax scrolling


MELA PERA KIWIHOME

FRUTTA

MELA

PERA

KIWI

SCROLLING

11

22

33

44

Parallax scrolling


MELA PERA KIWIHOME

FRUTTA

Base HTML(senza javascript)

/ /mela/ /pera/ /kiwi/

URLs menu

Parallax scrolling


MELA PERA KIWIHOME

FRUTTA

MELA

PERA

KIWI

… Caricamento tramite Ajax ...

Con javascript

Esempi


www.andrea-cardinale.it/convegnogt2013/

Links


Making AJAX Applications Crawlablehttps://developers.google.com/webmasters/ajax-crawling/

jQuery hashchange eventhttp://benalman.com/projects/jquery-hashchange-plugin/

jquery-pjaxhttps://github.com/defunkt/jquery-pjax/

Ajax SEOhttps://github.com/laukstein/ajax-seo

Giorgio Taverniti – Founder GT Idea - #convegnogt

Andrea CardinaleFounder Web and Tech

AJAX & SEOLE MIGLIORI SOLUZIONI ATTUALI!

@CardinaleAndrea+AndreaCardinale

AJAX & SEO: Le migliori soluzioni

Documents

Transcript of AJAX & SEO: Le migliori soluzioni