SEO para CMS sem cabeça: coisas para prestar atenção

Publicados: 2020-11-30

Índice

Fundamentalmente, o SEO para um CMS headless ainda segue as mesmas regras de um CMS tradicional. Portanto, rastreabilidade, velocidade e qualidade do conteúdo continuam sendo os objetivos quando você deseja entrar nele. Mas embora tenhamos objetivos semelhantes para atingir, os meios para atingir esses objetivos são diferentes em um CMS headless.

Como o SEO é diferente em um CMS headless

Em um CMS headless, a maior parte do trabalho de SEO precisa ser feito manualmente, pois normalmente não há plug-ins ou complementos para facilitar todo o processo - e isso significa mais trabalho para você e mais coisas para aprender no processo, em vez de contando com ferramentas de terceiros. Além disso, como a maioria dos frameworks front-end e CMS headless atualmente são baseados em JavaScript, o SEO para esses ambientes pode ficar complicado devido à natureza dos rastreadores que não conseguem renderizar JavaScript facilmente.

Embora o Googlebot possa renderizar JavaScript, não queremos confiar nisso.

Martin Splitt, sobre a implementação de renderização dinâmica

 Leitura recomendada: CMS sem cabeça vs CMS tradicional

Coisas a serem observadas em um CMS headless

Textos alternativos

Os textos alternativos ajudam a tornar o conteúdo da sua imagem legível pelos bots do Google. Semelhante aos metadados personalizados, o texto alternativo para imagens não é um recurso pronto para uso na maioria dos CMS headless, e isso significa que terá que ser implementado pelo seu provedor de CMS.

Para um CMS headless que não possui um recurso Alt Text integrado, podemos adicionar manualmente o texto alternativo por imagem sem muito esforço, pois você só precisa adicionar um atributo <alt> às suas imagens.

 <img src="imagem.png" alt="nosso texto alternativo">

Metadados

As tags de metadados são tags especiais que a Pesquisa Google entende. Essas tags descrevem o conteúdo do seu site e ajudam a controlar como suas páginas aparecem na Pesquisa Google. E, ao contrário de um CMS tradicional, um CMS headless geralmente não vem com a capacidade de editar tags de metadados em tempo real, o que significa que o título, as descrições e outras metatags da sua página precisam ser adicionados manualmente aos seus modelos de conteúdo.

Por exemplo, para um site headless que possui um frontend baseado em React, mas sem suporte para metadados personalizados, usamos o react-helmet para adicionar metadados convenientemente ao nosso <head> .

Para um CMS headless que oferece suporte a metadados personalizados, normalmente você precisará adicionar campos contendo tags de metadados personalizadas em seu modelo de conteúdo ou criar um modelo de SEO personalizado que contenha todas as metatags necessárias. O modelo de SEO criado deve ser configurado para ter relações com todas as páginas que precisam dele.

Um modelo de SEO no GraphCMS — Um *modelo de SEO no* *GraphCMS*

Fragmentos de dados estruturados

Os snippets de dados estruturados ajudam a Pesquisa do Google a entender melhor sua página e todo o conteúdo dela. Ao fornecer snippets de dados estruturados válidos, seu site está qualificado para pesquisas aprimoradas.

Para criar um snippet de dados estruturados, usamos uma matriz JSON-LD que é armazenada no <head> do seu site. E ao contrário do CMS tradicional onde todo o processo é automatizado com um plugin (por exemplo, Yoast SEO), em um CMS headless, você terá que:

Escolha os tipos de dados estruturados corretos para suas páginas
Adicionar código JavaScript personalizado que ajuda a gerar todos os dados estruturados necessários ou adicionar mais informações aos dados estruturados renderizados do lado do servidor

 fetch('https://api.example.com/recipes/123')
.then(resposta => resposta.text())
.then(structuredDataText => {
  script const = document.createElement('script');
  script.setAttribute('tipo', 'aplicativo/ld+json');
  script.textContent = estruturadoDataText;
  document.head.appendChild(script);
});

Teste sua implementação usando o teste de pesquisa aprimorada

Problemas de rastreamento de exibição de página

Se você já tentou implementar o Google Analytics em um site headless, provavelmente notou que apenas a primeira visualização de página do seu site é rastreada. Isso se deve em grande parte ao fato de que o frontend de um CMS headless é um aplicativo de página única por natureza, o que significa que a página carrega apenas uma vez e apenas um evento pageView é acionado por sessão. Para contornar esse problema, implementamos a API de histórico para permitir visualizações de página virtuais que podem ser rastreadas usando o acionador de alteração de histórico no Gerenciador de tags do Google.

O acionador de alteração de histórico rastreia alterações no fragmento de URL ou no objeto de estado do histórico. Quando ocorre uma mudança entre esses dois, temos as seguintes variáveis:

Fragmento de URL antigo do histórico: o que o fragmento de URL costumava ser.
Histórico novo fragmento de URL: o que é o fragmento de URL agora.
Estado antigo do histórico: O objeto de estado do histórico antigo, controlado pelas chamadas do site para pushState.
Novo estado do histórico: o novo objeto de estado do histórico, controlado pelas chamadas do site para pushState.

Para criar um acionador de alteração de histórico, basta acessar o Gerenciador de tags do Google e:

Escolha Acionadores > Novo
Escolha Configuração do acionador > Alteração do histórico

Depois disso, precisaremos criar uma nova tag de configuração do Google Analytics para acionar o acionador de alteração de histórico que acabamos de criar, assim:

Etiqueta de configuração do Google Analytics

E é isso. Agora você deve ser capaz de rastrear visualizações de página em seu site headless.

Problemas de auditoria de SEO

Como seu site headless é feito principalmente de JavaScript do lado do cliente, a auditoria de SEO pode ser um problema, pois os rastreadores usados na maioria das ferramentas de auditoria de SEO gratuitas não vêm com a capacidade de renderizar JavaScript.

A renderização de JavaScript não é um recurso gratuito na maioria das ferramentas de auditoria de SEO — *A renderização de JavaScript* ***não*** é *um recurso gratuito na maioria das ferramentas de auditoria de SEO*

Espera-se que esse problema seja resolvido pagando mais, pois você pode atualizar para o próximo plano premium para habilitar o suporte para esse recurso. Você também deve observar que a renderização de JavaScript não é habilitada por padrão na maioria das ferramentas de auditoria de SEO, o que significa que você terá que habilitá-la manualmente para rastrear seu site headless.

*Habilitando renderização JavaScript no ScreamingFrog*

Divisão de código

Como um CMS headless típico é fortemente baseado em JavaScript, a quantidade de código JavaScript usado em seu site – especialmente quando você usa um grande número de bibliotecas de terceiros – pode chegar ao ponto de sobrecarregar.

Tempo de inicialização do JavaScript muito alto — Fonte: Reduza as cargas úteis do JavaScript com divisão de código

E como todos sabemos, a velocidade da página afeta o SEO, então não podemos manter nosso código JavaScript assim, e é por isso que a divisão de código é feita para contornar esse problema. Com a divisão de código, você pode dividir seu código JS em pacotes menores que podem ser carregados dinamicamente em tempo de execução. Este recurso é atualmente suportado por bundlers como Webpack e Browserify via pacote de fator.

 import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Roteador>
    <Suspense fallback={<div>Carregando...</div>}>
      <Alternar>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

Renderização dinâmica

Como a maioria dos sites sem cabeça são JavaScript por natureza, eles enfrentam o mesmo grande desafio de SEO que é a renderização de JavaScript.

[…], é difícil processar JavaScript e nem todos os rastreadores de mecanismos de pesquisa conseguem processá-lo com sucesso ou imediatamente.
Implementando renderização dinâmica, Google

Os rastreadores não podem renderizar JavaScript de maneira eficaz, por isso o próprio Google sugere a renderização dinâmica como uma solução alternativa nesse meio tempo . Introduzida no Google I/O '18, a renderização dinâmica é uma solução ideal para sites baseados em JavaScript que desejam uma maneira fácil de resolver os desafios de SEO, mantendo todos os benefícios da renderização do lado do cliente. Com esse novo método de renderização, seu servidor da Web envia conteúdo normal, renderizado pelo cliente para os usuários, enquanto os rastreadores de mecanismos de pesquisa obtêm conteúdo HTML estático e totalmente renderizado pelo servidor.

*Como funciona a renderização dinâmica (simplificada)*

O que tudo isso significa é que você obtém o melhor dos dois mundos com a renderização dinâmica — a facilidade de rastreamento da renderização do lado do servidor e a renderização rápida subsequente da renderização do lado do cliente.

Para implementar a renderização dinâmica, teremos que contar com renderizadores dinâmicos como Rendertron ou Puppeteer para encurtar todo o processo. Essas renderizações converterão o conteúdo do seu site em HTML estático compreensível pelos rastreadores.

Depois de instalar e configurar seu renderizador dinâmico, siga as etapas adicionais no documento oficial do Google para configurar os comportamentos dos agentes do usuário.

Conclusão

SEO para um CMS headless não é a maneira mais direta e exigirá um pouco de trabalho de seus desenvolvedores para fazer tudo certo. Mas uma vez que você pega o jeito, um CMS headless pode ser tão eficaz quanto um CMS tradicional quando se trata de SEO. Além disso, você obtém muito mais liberdade e flexibilidade para criar conteúdo da maneira que desejar.