Como indexar páginas dinâmicas para o google usando o método pushstate html5?
Eu estou construindo um site totalmente com jquery, então eu estou carregando todas as páginas dinamicamente usando ajax para obter transições extravagantes entre as páginas e maximizar a experiência do usuário. Aqui está o meu código javascript:
$(function() {
var path = _.compact(location.pathname.split("/"));
if(path.length<2){
path = 'home'
}else{
path = path[path.length-1];
}
activepage = path;
$('.nav a').click(function(e) {
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
window.history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
var path = _.compact(location.pathname.split("/"));
if(path.length<2){
path = 'home'
}else{
path = path[path.length-1];
}
loadContent(path);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
var adresa = absurl + "ajax/get_content";
$.ajax({
url: adresa,
contentType: 'application/json',
data: { url: url },
success: function(data) {
switch(url)
{
case "projects": $.projects({ data : data }); $.projects.init();
break;
case "home": $.homePage({ data : data }); $.homePage.init();
break;
default: console.log("nista");
}
}
});
}
A função Ajax retorna todos os dados necessários para construir páginas no formato json, então eu inicializo meu plugin personalizado que constrói a página usando esses dados json.
Tudo isso funciona perfeitamente como você pode ver nesteEXEMPLO AO VIVO, incluindo o histórico do navegador (para trás e para frente). Mas aqui está o meu problema ... Quando a página está totalmente carregada, o recipiente principal permanece vazio quando olho para a fonte da página. Também está vazio quando eu tento buscar a página como google bot e tenho certeza que esses dois estão relacionados.
Como você pode ver noeste exemplo com o mesmo código que eu tenho, a fonte está sendo alterada quando você clica nos links e também muda o conteúdo da página, mas sem recarregar a página. Minha pergunta é, o que estou perdendo aqui e como conseguir o mesmo efeito? Estou faltando algum código php ou o quê? Eu estou lutando com isso nos últimos dias, eu tentei de tudo e não consegui fazer funcionar.
Nota: apenas as ligações para casa e projecto estão a funcionar por agora ...
Muito obrigado por todas as respostas!