Javascript Frameworks & SEO

Breve explicação sobre problemas de SEO causados pelo uso de Frameworks JS e como contorná-los.

Transcript

1. Javascript Frameworks & @lpelos
2. Introdução O que é SEO? A sigla, em inglês, significa Search Engine Optimization. Basicamente, são práticas e cuidados a serem tomados a fim de melhorar o raking de websites em mecanismos de busca, como Google, Bing e Yahoo, ou até evitar seu banimento dos mesmos.
3. Introdução Exemplos de cuidados com SEO • Uso de meta tags (ex. title, description, rel) • Markup semântico • Sitemap.xml • Robots.txt
4. Introdução Web Crawlers São programas que navegam pela internet de forma metódica e automática. Mecanismos de busca utilizam web crawlers para fazer o indexação de websites. Spammers utilizam web crawlsers, por exemplo, para submeter formulários automaticamente com mensagens de spam.
5. Problema Conteúdo dinâmico Websites construídos com frameworks client-side, como AngularJS, BackboneJS e KnockoutJS, frequentemente têm parte essencial do seu conteúdo carregado dinamicamente, por exemplo, a partir de algum json local ou via uma API por Ajax.
6. Problema Web crawlers e Javascript • Muitos não compreendem JS; • Os que compreendem JS, não têm como saber quando ou quanto esperar para o carregamento completo da página; • Indexam apenas o que encontram prontamente na página.
7. Exemplo Acesse o link: http://jsfiddle.net/lpelos/y3eJ3/1/ No caso do exemplo do link acima, o Web Crawler, ao visitar a página, indexaria os títulos (h1 e h2) e o parágrafo de explicação da página, mas não os nomes dos tipos de sorvetes e os sabores disponíveis a cada um.
8. Solução Para contornar a situação e garantir que web crawlers, como Googlebot, tenham acesso e consigam indexar todo o conteúdo relevante da página, é preciso seguir dois passos: • Sinalizar que a página tem conteúdo dinâmico carregado por javascript; • Fornecer um snapshot da mesma página com todo o conteúdo pré-carregado.
9. Sinalizando Hash bang! O padrão hashbang foi inventado originalmente para resolver o mesmo problema de SEO em páginas que carregassem conteúdo por ajax. Consiste em inserir os símbolos #! na URL de páginas que contenham conteúdo carregado por JS. Ex.: http://example.com/#!/page/with/ajax/content
10. Sinalizando Escaped Fragment Quando web crawlers, como Google e Bing, encontram um hashbang, automaticamente, buscam por um snapshot da mesma página na seguinte rota: http://example.com/?_escaped_fragment_=page/with/ajax/content
11. Spanshots São versões pré geradas de páginas que contém ajax com seus respectivos conteúdos pré-carregados apenas para fim de oferta aos web crawlers de mecanismos de busca para indexação. Exemplos: Original <ul> <li ng-repeat=”toy in toys”> {{toy.name}} </li> </ul> Snapshot <ul> <li ng-repeat=”toy in toys”>Carrinho</li> <li ng-repeat=”toy in toys”>Peão</li> <li ng-repeat=”toy in toys”>Pipa</li> </ul>
12. Spanshots Cuidado Mantenha seus snapshots atualizados, de preferência de forma automatizada. Caso contrário, o web crawler pode interpretar as páginas original e o snapshot como páginas diferentes, o que é uma má prática passível de punição, prejudicando o ranking da página no mecanismo de busca.
13. Fontes Veja também como gerar snapshots com phantomJS: http://www.yearofmoo.com/2012/11/angularjs-and-seo.html Mais informações sobre indexação de Apps Ajax: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started