Ajax SEO Friendly con CakePHP

ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Molti siti presentano un template fisso per tutte le pagine e i cambiamenti durante la navigazione interessano solo una parte dell'intera struttura. Per diminuire i tempi di caricamento e lo spreco di banda si ricorre in questi casi all’utilizzo delle tecnologie ajax per modificare solamente la parte variabile. Il problema si riscontra però nell'indicizzazione dei contenuti da parte dei motori di ricerca i quali non vanno molto d'accordo con il linguaggio javascript. Per ovviare a questo è possibile utilizzare un semplice script non intrusivo appoggiato da un sistema lato server che si adatti nel modo appropriato sia nel caso di visualizzazione da parte di un utente sia da parte di un crawler (o di un utente che utilizza un browser con javascript disabilitato). Per la realizzazione ho scelto di utilizzare il framework cakePHP ,che si adatta bene allo scopo supportando nativamente il sistema dei template, e il framework javascript mootools per la gestione delle pagine. Come esempio ci basiamo sullo sviluppo di un ipotetico sito costituito da tre pagine: index, prodotti, contatti. Impostiamo dunque il controller sito_controller.php:


<?php
/*
 /app/controllers/sito_controller.php

 gestione delle pagine del sito
*/
class SitoController extends AppController {

 var $name = 'Sito';

 //valori default
 var $layout='sito';
 var $pageTitle = 'titolo del sito';

 var $uses = array();
 var $helpers = array();
 var $components = array();

 function index()
{
//...
 }

 function prodotti()
{
//...
 }

 function contatti()
{
//...
 }
}
?>

A questo punto dobbiamo creare un template nel quale poter inserire i contenuti. Includiamo nell’head la libreria mootools completa e uno script chiamato seo_ajax.js che possiamo posizionere ad esempio nella cartella webroot/js/sito/ . All’interno del body inseriamo questa parte:


<div id="menu">
 <a rel="seo_ajax" href="sito/index">Home</a>
 <a rel="seo_ajax" href="sito/prodotti">Prodotti</a>
 <a rel="seo_ajax" href="sito/contatti">Contatti</a>
</div>
<div id="header">contenuto dell'header</div>
<div id="content">
 < ? php echo $content_for_layout; ? >
</div>
<div id="footer">contenuto del footer</div>

Oltre a questo creiamo un template vuoto e lo salviamo come ajax_sito.ctp. Nella cartella views/sito posizioniamo poi i contenuti delle pagine creando i files index.ctp, prodotti.ctp e contatti.ctp. Ora il sito è già pronto per l’uso e visualizzerà i contenuti delle pagine nello spazio che gli abbiamo riservato nel layout, ovvero quello all’interno del div con id=”content”. A questo punto possiamo implementare il codice per la gestione delle pagine tramite ajax. Apriamo i file seo_ajax.js e inseriamo il seguente codice:


window.addEvent("domready", function() {
 //seleziona tutti i link del menu con rel="seo_ajax"
 link_pagina = $("menu").getElements("a[rel=seo_ajax");

 link_pagina.each(function(pulsante, index){//per ogni link
 //quando viene cliccato
 pulsante.addEvent("click", function(event) {
 //disabilita l"azione di default del browser
 if($type(event)) event.preventDefault();
 //ricava il link attuale
 var href=this.get("href");

 //richiama il contenuto con una chiamata ajax
 var ajax_call = new Request({
 method: "get",
 url: href,
 onComplete:function(responseText, responseXML){
 //inserisce il contenuto ricevuto nel contenitore con id=content
 $("content")[removed] = responseText;
 }
 });
 ajax_call.send();

 });
 });
});

Infine "istruiamo" il controller a gestire correttamente le richieste ajax tramite il callback beforeFilter(), funzione che viene richiamata prima di tutte le altre, e il componente RequestHandler, per intercettare la richiesta da javascript. Il codice del controller sarà quindi:


<?php
/*
/app/controllers/sito_controller.php

gestione delle pagine del sito
*/
class SitoController extends AppController {

var $name = 'Sito';

//valori default
var $layout='sito';
var $pageTitle = 'titolo del sito';

var $uses = array();
var $helpers = array();
//carica il componente RequestHandler
var $components = array('RequestHandler');

function beforeFilter()
{
//se la richiesta è di tipo ajax
if ($this->RequestHandler->isAjax()) {
//utilizza il template vuoto
$this->layout="ajax_sito";
}
}

function index()
{
//...
}

function prodotti(){
//...
}

function contatti(){
//...
}
}
?>

Condividi questo post


Commenti