[SEO] Como criar um site buscável com jQuery Ajax, PHP e HTML
Postado por Luiz Otávio em 13/03/2012 às 22:43:21 na categoria Webmaster
Este é um tutorial muito importante para quem quer aprender a montar um site em Ajax, mas é ainda mais importante por trazer técnicas modernas de SEO para que os buscadores continuem encontrando e indexando o seu site da maneira que você (desenvolvedor) deseja, mesmo utilizando Javascript para fazer o load do conteúdo.
Para detalhar um pouco mais sobre o que vou explicar no vídeo, por convenção, os buscadores transformam o fragmento de uma página que tem requisições em Ajax em um parâmetro, e todos os desenvolvedores podem criar aplicações visíveis para os crawlers de maneira bem simples. No entanto, o fragmento não pode ser apenas um hash (#) como de costume, você deve adicionar um ponto de exclamação após o hash da URL, isso significa que a URL abaixo:
http://www.exemplo.com/#page1
Deverá se transformar em:
http://www.exemplo.com/#!page1
Com isso, sempre que um crawler (robô do buscador) passar pela sua página, ele irá modificar este fragmento #! por este parâmetro ?_escaped_fragment_=, ou seja, a URL anterior:
http://www.exemplo.com/#!page1
Para o crawler será:
http://www.exemplo.com/?_escaped_fragment_=page1
Então se você é um desenvolvedor em PHP ou ASP.NET, você já sabe que você pode obter este parâmetro e fazer o que quiser com ele. Um exemplo disso, é a utilização da opção $_GET['_escaped_fragment_']; que teria o valor page1 no PHP.
Se você ainda tem dúvidas em como utilizar o $_GET no PHP, leia nosso artigo $_POST e $_GET em PHP ou se deseja aprender a trabalhar com jQuery, leia Como instalar e utilizar o jQuery e suas funções.
Abaixo veja como criar um site buscável utilizando jQuery Ajax, PHP e HTML
Arquivo index.php:
<?php
$page = '';
if(isset($_GET['_escaped_fragment_']) || isset($_GET['page']))
{
$page = isset($_GET['_escaped_fragment_']) ? $_GET['_escaped_fragment_'] : $_GET['page'];
if(file_exists('pages/' . $page . '.html'))
{
$content = file_get_contents('pages/' . $page . '.html');
$page = $content;
}
else
{
echo "Not found";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var hash = window.location.hash ? window.location.hash : false;
var lastHash = false;
var url = window.location.href;
if(url.indexOf('page=') != '-1')
{
url = url.replace(/?page=/, "#!");
window.location.href = url;
}
else if(url.indexOf('_escaped_fragment_') != '-1')
{
url = url.replace(/?_escaped_fragment_=/, "#!");
window.location.href = url;
}
if(hash)
{
loadPage(hash);
}
$('a').click(function(){
var obj = $(this);
hash = obj.attr('name');
window.location.hash = hash;
if(hash)
{
loadPage(hash);
}
return false;
});
function loadPage(hash)
{
var theHash = hash.replace(/#!/g, "");
if(lastHash != theHash)
{
$.ajax({
beforeSend: function(){
lastHash = theHash;
},
url: 'getdata.php',
type: 'GET',
data: 'page=' + theHash,
success: function(data){
$("#result").html(data);
}
});
}
}
});
</script>
</head>
<body>
<a href="?page=page1" name="#!page1">Page 1</a> |
<a href="?page=page2" name="#!page2">Page 2</a> |
<a href="?page=page3" name="#!page3">Page 3</a> |
<a href="?page=page4" name="#!page4">Page 4</a> |
<a href="?page=page5" name="#!page5">Page 5</a>
<div id="result" style="margin-top:100px;">
<?php echo $page;?>
</div>
</body>
</html>
Arquivo getdata.php:
<?php
if(file_exists('pages/' . $_GET['page'] . '.html'))
{
$content = file_get_contents('pages/' . $_GET['page'] . '.html');
echo $content;
}
else
{
echo "Not found";
}
?>
Download
Para baixar os arquivos criados no vídeo, utilize o link abaixo:
Lembre-se que você precisa executar os arquivos em um servidor que entenda PHP, veja aqui como fazer.
Mais sobre: SEO Como Criar Site Buscável jQuery Ajax PHP HTML
Comentários
Deixe a sua opinião, recado ou dúvida abaixo:
Comentar usando o facebook
@todoespaco (Luiz Otávio) disse:
Em 14/03/2012 às 12:14:03
Tenta isso:
$("#result").html("");
$("#result").fadeOut(300, function(){
$(this).html(data);
$(this).fadeIn(300);
});
Rafael disse:
Em 22/03/2012 às 10:23:53
Olá.. estou tentando fazer uma transição, nesta forma de carregamento este que me passou ele carrega diretamente.. entou tentando colocar um fadeOut > fadeIn.. desaparece a tela anteriormente carregada e aparece a solicitada... to me quebrando pra tentar fazer isso..rsrs podem me dar umas dicas??
@todoespaco (Luiz Otávio) respondeu:
Em 22/03/2012 às 22:55:31
Ué amigo, achei que falei isso no comentário anterior ao seu... veja e me fala se ajuda...
Rafael respondeu:
Em 22/03/2012 às 23:37:11
sim funciona.. soq ele nao faz a transição.. ele aciona o fadeOut, o codigo carrega direto para o fadeIn..
@todoespaco (Luiz Otávio) respondeu:
Em 22/03/2012 às 23:41:31
Ué, não entendi... num era isso que é para fazer... Faz o fadeOut, carrega o código e depois o FadeIn...
luciano dichel disse:
Em 22/03/2012 às 13:52:42
O script muito bom.
Como colocar a mensagem carregando aguarde... pode me ajudar desde já agradeço.
@todoespaco (Luiz Otávio) respondeu:
Em 22/03/2012 às 22:55:31
Amigo, você pode fazer isso no beforeSend do Ajax, por exemplo, suponhamos que você tenha uma div com id loading e display:none; no css, ficaria assim:
$.ajax({
beforeSend: function(){
lastHash = theHash;
$("#loading").fadeIn(600);
},
... O RESTO DAS OPÇÕES ...
success: function(data){
$("#result").html(data);
$("#loading").fadeOut(600);
}
});
luciano dichel disse:
Em 23/03/2012 às 17:15:17
Muito obrigado....
Nicanor disse:
Em 08/05/2012 às 20:44:06
Olá, primeiramente parabéns pelo ótimo tutorial!
como que eu faria pra adicionar uma `id` no link?
Desde já agradeço!
@todoespaco (Luiz Otávio) respondeu:
Em 08/05/2012 às 22:56:51
Muda o `page` para `id`, tipo, depois você não faz o file_get_contents, usa o `id` do jeito que você está acostumado... :) [Deu pra entender?]
hamilton disse:
Em 01/06/2012 às 14:55:49
boa tarde, primeiramente parabéns pelo post!
minha dúvida é como faço para que o usuário do meu site consiga navegar através das setas padrão dos browsers, por que o código que vc disponibiliza impede que a as setas de voltar e avançar funcionem, pode me ajudar?? grato hamilton
Mário disse:
Em 12/07/2012 às 06:45:16
Olá.
Ótimo tutorial.
Será que você poderia nos ajudar na implementação da navegação pelas setas dos navegadores?
Leandro disse:
Em 19/07/2012 às 21:28:23
Oi.. aonde eu colocaria o jquery.history no codigo?? estou tentando mas nao qr da certo..
Rafael respondeu:
Em 31/07/2012 às 20:15:28
Olá, consegui implementar as setas dos navegadores com esse código antes do loadPage(hash)
window.location.hash = hash;
setInterval(function (){
var check = window.location.hash;
if(hash != check){
hash = check
loadPage(hash);
}
$('.url').html(check);
},0);
Não sei se seria a melhor forma.. mais deu certo
Rafael disse:
Em 23/07/2012 às 13:22:59
Olá, ótimo artigo!!! só uma dúvida.. para os buscadores é necessário utilizar os fragmentos #! ? teria como utilizar url's amigáveis /page1 atribuindo o escaped_fragment?
@todoespaco (Luiz Otávio) respondeu:
Em 23/07/2012 às 18:13:17
Olha, não busquei muita informação sobre isso não, mas pelo que vejo nos outros sites, a maioria utiliza os fragmentos mesmo. Agora com HTML5, tem uma outra maneira de fazer isso, tipo o facebook faz nos albuns quando você muda de uma foto para outra, muda só a URL mas o conteúdo é carregado de forma dinâmica. Da uma lida neste artigo: link
Abraço
Anderson disse:
Em 29/07/2012 às 20:08:17
Exelente vídeo!! so estou com probleminhas em links internos dentro do content onde ira carregar a página, ele carrega so que da um bug no layout e depois direciona.. pode me orientar onde eu posso mecher no codigo?
rglweb respondeu:
Em 23/05/2013 às 14:41:23
coloque no fim da sua pagina que vai ser carregada a função javascript do index.php, entre as tags e menos o link para o jquery.js.
Isto resolve o bug mas torna impossivel o uso de links externos.
Vinicius disse:
Em 18/03/2013 às 15:23:06
Mt bom tutorial, só que no meu caso, a página inicial nao está sendo carregada. Não exibe nada, dae eu clico no Home e abre normal.
Alguma dica?
Comentar usando o TEO
siga o teo »
|
|
|
|
Rafael disse:
Em 14/03/2012 às 09:57:51
Parabéns pelo post!! mto bom!!
So tenho um probleminha.. se eu quiser colocar o efeito fade para a transição das paginas qndo clicada como q eu faço para que ele se aplique antes de logar a pagina?? eu consegui colocar fade qndo ele aparece ´
$("#result").hide(); $("#result").fadeIn(1000).html(data); ´ mas qndo ele desaparece ele load antes do efeito. Grato.
Responder para Rafael | Denunciar