Meteor e SEO

Publicação: | Tags: Meteor

Meteor e SEO

Problema do Meteor em relação ao SEO

Se você trabalha ou já trabalhou desenvolvendo aplicações com o incrível framework Meteor, com certeza você já deve ter questionado sobre como posso tornar minha aplicação compatível com SEO. Afinal o Meteor renderiza templates de HTML no client-side, pelo qual apenas dados são trafegado via server-side. Atualmente os crawlers não indexam conteúdos de dinâmico vindos do protocolo DDP. Uma aplicação compatível com SEO precisa renderizar do server-side uma página HTML completa, para que os crawlers analisem o conteúdo dos HTMLs.

A solução

Como solução, existe um package nativo do Meteor que força a renderização dos templates via server-side apenas para os crawlers, ou seja, sua aplicação vai renderizar templates no client-side para um usuário e via server-side um HTML será processado e renderizado quando um robot dos crawlers acessarem sua aplicação. Tecnicamente falando, esse package utiliza o PhantomJS (que é um browser headless) para renderizar o conteúdo dinâmico e em seguida retornar um HTML final para os crawlers indexarem-os. Tudo isso é possível usando o package spiderable.

Hands on code!

Para mostrar na prática, primeiro vamos criar uma simples aplicação Meteor que terá algumas metatags e conteúdo mínimo a ser indexado pelos crawlers. Para criar uma aplicação Meteor execute os comandos:

 meteor create myblog
 cd myblog

Em seguida, vamos editar o myblog.html para ter algum conteúdo e metatags relevantes para SEO:

 <head>
   <title>MyBlog</title>
   <meta name="description" content="Este é um blog criado em Meteor">
   <meta name="author" content="Caio Ribeiro Pereira">
   <meta name="viewport" content="initial-scale=1.0">
   <meta property="og:type" content="website">
   <meta property="og:title" content="MyBlog">
   <meta property="og:description" content="Este é um blog criado em Meteor">
   <meta property="og:site_name" content="MyBlog">
   <meta property="og:url" content="http://localhost:3000">
 </head>
 <body>
   <h1>Welcome to MyBlog!</h1>
   {{> article}}
 </body>
 <template name="article">
   {{#each posts}}
     <article>
       <h1>{{title}}</h1>
       <p>{{content}}</p>
     </article>
   {{else}}
     <p>Nenhum post publicado.</p>
   {{/each}}
 </template>

Repare que o conteúdo e metatags foram incluídas dinamicamente pelo server-side, ou seja, apenas os dados serão enviados do server para o client processar e renderizar os templates. Esses dados dinâmicos vamos incluir no myblog.js através de um json estático que servirá para o nosso exemplo:

 if (Meteor.isClient) {
   Template.article.helpers({
     posts: function () {
       return [
         {
           title: "Meu primeiro post",
           content: "Neste post vou falar pela primeira do meu primeiro post."
         },
         {
           title: "Último post do blog",
           content: "Infelizmente o blog acabou e este é meu último post."
         }
       ]
     }
   });
 }

De fato estamos apenas usando um JSON estático no servidor que também pode ser uma collection do MongoDB ou um JSON de um sistema externo, para o nosso exemplo, não importa de onde virão os dados, o que importa é eles sejam repassados do servidor para o cliente. Esse é um procedimento nativo do Meteor que também é uma característica muito comum em frameworks SPA (Single-Page Application).

Se você rodar o comando meteor e em seguida acessar o endereço http://localhost:3000, com certeza, você usuário vai visualizar os templates corretamente, exceto os crawlers...

...como dito antes, o package spiderable resolve esse problema de indexação de conteúdo para uma aplicação Meteor. Antes de instalar o spiderable é necessário instalar antes o PhantomJS, e para isso recomendo que acesse esse link http://phantomjs.org/download.html para instalar uma versão compatível com seu sistema operacional. Depois basta rodar o comando:

 meteor add spiderable

E pronto! Você não precisa fazer nenhuma implementação de código adicional, este package se encarrega de fazer o resto. Para verificar se ele esta funcionando basta acessar o endereço: http://localhost:3000/?_escapedfragment=1 e veja se a mesma página foi renderizada em seu browser.

Fontes:

Compartilhe este post