Índice
Quando desenvolvemos um site, frequentemente usamos JavaScript, pois é ideal para criar sites inovadores com múltiplas funcionalidades do lado do cliente. Uma das tecnologias mais utilizadas é o AJAX.Pela frameworks O que Jquery, Prototype, Mootools e outros, que permitem fazer solicitações ao servidor, receber o resultado e ativar o carregamento de determinado conteúdo na página sem atualizar a web e totalmente transparente para o usuário.
Atualmente, a maioria das páginas da web mostra uma forte dependência de JavaScript para criar funcionalidades e efeitos colaterais do cliente, o que traz riscos bem conhecidos em termos de SEO, problemas ou incompatibilidades de link, falhas técnicas, velocidade de download, etc.
Veremos neste tutorial alguns estratégias para desenvolver sites e aplicativos AJAX evitando ter problemas no ramo de SEO.
Vantagens e desvantagens de usar AJAX
As vantagens em termos de experiência do usuário são claras: páginas rápidas, menos overhead para o servidor que só processa o pedido e devolve o conteúdo necessário ao usuário. Muitas funcionalidades da web de nova geração não são facilmente realizadas sem o uso de JavaScript ou Jquery, pois fornece a necessidade do usuário clicar em um elemento da web e o navegador não atualizar a página inteira, mas apenas um bloco de conteúdo e até exibir informações diferentes para usuários diferentes.
A desvantagem é que o conteúdo retornado pode não ser visível para os mecanismos de pesquisa e o bot frequentemente não analisa o código Jquery ou Ajax. Um problema é que o conteúdo de uma página só é visível para o navegador, mas não no servidor, a forma de rastreamento dos robôs pode fazer com que eles não vejam algum conteúdo ou que alguns links falhem, pois o robô não consegue entender JavaScript que são muito complexos .
O Google desenvolveu continuamente os recursos de rastreamento de Ajax e Javascript de seus robôs, enquanto o Bing e o Yahoo não evoluíram muito.
Mesmo os mecanismos de pesquisa não podem representar com precisão o conteúdo mais relevante para uma consulta de pesquisa, então o uso excessivo dessa tecnologia pode levar a um posicionamento ruim nos resultados da pesquisa.
Exemplos de elementos e blocos html para melhorar o SEO
Se precisarmos criar um bloco, vamos aplicar nomes semânticos às classes, ou seja, com um sentido que descreva o conteúdo:
Exemplo de um bloco que mostra algum conteúdo Seria melhor dar um sentido mais semântico a cada bloco de código html para que os robôs possam entender o conteúdo que mostrarão: A estrutura é clara para ser rastreada mesmo que o conteúdo não tenha sido gerado no HTML. Como a marcação semântica contém palavras-chave, é importante usar tags HTML apropriadas para o conteúdo, em caso de dúvida, podemos consultar o manual W3school Html.
Assim como as listas ordenadas ou não ordenadas, uma das finalidades das listas de definição é exibir a lista de conteúdo direcionado, como no caso acima, pode ser uma notícia ou uma lista de produtos. Isso permite mais densidade de palavras-chave e menos confusão de código.
Um dos aspectos mais importantes é que o conteúdo que o Javascript gera para o usuário é o mesmo conteúdo exatamente igual ao mostrado para os motores de busca ou robôs de busca.
O Google indica como uma solução possível que se nosso site incluir tecnologias que os mecanismos de pesquisa não podem acessar ou interpretar, como JavaScript ou Ajax, devemos usar um texto descritivo ou marcadores para que esses elementos possam mostrar qual conteúdo corresponderia. Serão exibidos e melhorando assim a acessibilidade do site. Muitos usuários usam dispositivos móveis, navegadores fora do padrão, software desatualizado e conexões lentas, portanto, eles podem ter falhas ao visualizar o conteúdo ou usar alguma funcionalidade.
Links e parâmetro por URL
O Google prefere usar o hashbang como parâmetro em uma url, pois assim será mais fácil para você interpretar seus links quando passarmos um hastabang para o site como parâmetro.
Um exemplo amplamente utilizado está no site do Twitter. O Google o usa para reter e solicitar o conteúdo dessa página estática. Para mostrar o que os URLs reescritos contêm, aqui estão alguns exemplos:
Este URL gerado por alguma consulta é SEO melhor e mais semântico
www.miweb.com/#!madrid/productos
Esses dois urls são mais difíceis para os robôs entenderem, mas sem dúvida o último melhora um pouco a semântica.
www, miweb, com /? tmp = madrid / produtos
www.miweb.com/?ciudad=madrid&seccion=productos
Contanto que possamos fazer SEO semântico para conteúdo gerado e mostrar o mesmo conteúdo que um usuário veria nos motores de busca, isso não é um grande problema.
Barras e guias de navegação deslizantes
No caso de ter o conteúdo distribuído em abas, onde o conteúdo muda usando jquery ou outro framework dependendo da aba em que nos posicionamos, deve haver uma url independente para cada aba, quando o usuário clica em uma aba um pedido pode também pode ser feito para o servidor para gerar conteúdo completamente novo. A estrutura de cada link pode ser algo como:
www.miweb.com?tab= vendas
www.miwebe.com/?tab=clientes
www.miweb.com/?tab=productos
O truque com as abas é produzido com CSS e Javascript, o servidor retorna o conteúdo de todas as abas com a primeira solicitação de página. Quando o usuário clica em uma aba, as classes definidas em CSS fazem com que o navegador oculte o conteúdo associado a uma aba e mostre apenas o conteúdo relacionado à aba clicada, enquanto os demais ficam ocultos, mas estão no código deste É permitido , por isso é bom dar um sentido semântico à estrutura.
Também é muito importante não permitir o rastreamento de arquivos Javascript ou CSS no robots.txt do nosso site, pois isso pode prejudicar o posicionamento e a indexação do seu conteúdo e pode resultar em falha nas estatísticas de rastreamento.
Uma das diretrizes de Webmaster do Google Diz especificamente para não permitir que esses arquivos sejam rastreados, mas também não para bloqueá-los ou ocultá-los dos bots.
Ferramentas do Google para webmasters para verificar e analisar o rastreamento
Ferramentas do Google para webmasters dá-nos a oportunidade de informar o Google, verificando a propriedade do nosso site. Faça login com sua conta do Google ou Gmail e então poderemos verificar nosso site.
O robô leva cerca de duas semanas para que os links apareçam corretamente na Pesquisa Google.
Não há uma maneira fácil de ter certeza de que tudo está funcionando, mas existem algumas ferramentas para ajudá-lo a ver o que está acontecendo. O melhor é usar a ferramenta Explorar como Googlebot, que nos mostra exatamente o que o Google vê ao rastrear o site. Você pode acessar as Ferramentas do Google para webmasters em Diagnósticos.
Utilizando as ferramentas Google para Ferramentas para Webmasters podemos verificar os links indexados e corrigir ou eliminar esses links para que o seu site seja otimizado para os motores de busca e tenha links sem perigo de ser penalizado que ajudam a melhorar o seu SEO, entre outras funcionalidades.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
