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

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

Progressive Enhancement with Ajax

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

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

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

Server side

Ricevo la richiesta

Identifico la richiesta come Ajax

Render del contenuto senza layout

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);});

});});

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

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

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);});

pushState + Ajax

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

pushStatepushState

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

e.preventDefault();$.ajax({

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

});});

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?...

… o reagire?… o reagire?

Parallax scrolling

MELA PERA KIWIHOME

FRUTTA

SCROLLING

Parallax scrolling

MELA PERA KIWIHOME

FRUTTA

Base HTML(senza javascript)

/ /mela/ /pera/ /kiwi/

URLs menu

Parallax scrolling

MELA PERA KIWIHOME

FRUTTA

… Caricamento tramite Ajax ...

Con javascript

Esempi

www.andrea-cardinale.it/convegnogt2013/

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

AJAX in ASP.NET MVC AJAX, Partial Page Rendering, jQuery AJAX, MVC AJAX Helpers SoftUni Team Technical Trainers Software University

Woodline Solution - Soluzioni alle porte!

Green Business - Michael Page · Da 40 anni il gruppo offre ai clienti soluzioni innovative e personalizzate per il recruitment dei migliori talenti sul mercato, sia per incarichi

Soluzioni statistica sheldon M. Ross

Le Migliori strutturedel Litorale Pontino

Automata - Soluzioni

Ajax Basics The XMLHttpRequest Object. Ajax is…. Ajax is not…. Ajax is not a programming language. Ajax is not a programming language. Ajax is a methodology

3 le soluzioni

M. Migliori – 13 Marzo 2008 Rheological modelling of food production: Cereal goods Massimo Migliori Laboratory of Rheology and Food Engineering

Le migliori fotografie di UFO passate al vaglio delle ... migliori fotografie di... · Le migliori fotografie di UFO 3 1947 The Rhodes Photo, July 7, 1947, Phoenix, Arizona The Pontiac

Towards TB elimination - Giovanni Battista Migliori

CComplete Ajax Tutorialomplete Ajax Tutorial

IT GRC, Soluzioni Risk Management

Giochi linguistici e soluzioni

Introduce What is ASP.NET AJAX Architecture of ASP.NET AJAX Goal of ASP.NET AJAX Scenarios ASP.NET AJAX Extensions Microsoft AJAX Library ASP.NET AJAX

Ajax World 08 Asp Net Ajax

INFO Informatics Division Deputy Director Ing. Silvio Migliori ( migliori@enea.it ) (12-2003)

Soluzioni Software per l’Ingegneria

Soluzioni a portata di click

Ajax Toolkit Framework Ajax World 2