{"id":67274,"date":"2024-03-08T05:21:41","date_gmt":"2024-03-08T08:21:41","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=67274&preview=true&preview_id=67274"},"modified":"2024-03-12T06:02:51","modified_gmt":"2024-03-12T09:02:51","slug":"seo-wordpress-headless","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/seo-wordpress-headless\/","title":{"rendered":"Estrat\u00e9gias Avan\u00e7adas de SEO para Sites WordPress Headless"},"content":{"rendered":"

Optar por um site WordPress headless<\/a> em vez de uma arquitetura de site tradicional muda bastante o jogo do SEO. Essa abordagem separa o frontend e o backend do site, aumentando a flexibilidade e a velocidade. Mas tamb\u00e9m traz novos desafios de SEO.<\/p>\n

O caso \u00e9 o seguinte: a visibilidade do seu site e a forma como as pessoas encontram voc\u00ea por meio dos mecanismos de pesquisa dependem das suas t\u00e1ticas de SEO. \u00c9 por isso que hoje abordaremos algumas estrat\u00e9gias avan\u00e7adas de SEO criadas especialmente para configura\u00e7\u00f5es de sites WordPress headless.<\/p>\n

Falaremos sobre como garantir que os mecanismos de pesquisa possam rastrear adequadamente o seu site, como ajustar as meta tags, e muito mais. Independentemente de estar codificando o site ou elaborando estrat\u00e9gias de marketing, voc\u00ea receber\u00e1 dicas pr\u00e1ticas para aprimorar suas habilidades de SEO.<\/p>\n

Vamos focar nisso agora.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Como tornar rastre\u00e1veis os sites WordPress headless<\/h2>\n

Tornar os sites WordPress headless rastre\u00e1veis apresenta alguns desafios \u00edmpares, que configura\u00e7\u00f5es tradicionais de sites n\u00e3o encontram. O principal obst\u00e1culo decorre do fato de que o conte\u00fado em sites headless \u00e9 renderizado no lado do cliente usando JavaScript<\/a>, o que historicamente coloca dificuldades para os bots dos mecanismos de pesquisa rastrearem e indexarem.<\/p>\n

No entanto, t\u00e9cnicas modernas, como renderiza\u00e7\u00e3o din\u00e2mica e renderiza\u00e7\u00e3o no lado do servidor, tornaram muito mais f\u00e1cil resolver esses problemas.<\/p>\n

Renderiza\u00e7\u00e3o din\u00e2mica<\/h3>\n

A renderiza\u00e7\u00e3o din\u00e2mica<\/a> serve como ponte entre o conte\u00fado muito carregado com JavaScript e os rastreadores dos mecanismos de pesquisa. Ela envolve a apresenta\u00e7\u00e3o de um instant\u00e2neo HTML est\u00e1tico<\/a> e pr\u00e9-renderizado do conte\u00fado do seu site para os mecanismos de pesquisa, enquanto os usu\u00e1rios continuam a experimentar a vers\u00e3o din\u00e2mica e interativa.<\/p>\n

Isso garante que os rastreadores possam indexar o conte\u00fado do seu site sem precisar executar JavaScript<\/a>, o que melhora imediatamente a visibilidade e o desempenho de SEO.<\/p>\n

Para implementar a renderiza\u00e7\u00e3o din\u00e2mica em um ambiente WordPress headless, voc\u00ea normalmente usaria uma solu\u00e7\u00e3o como o prerender.io<\/a> ou criaria seu pr\u00f3prio mecanismo de renderiza\u00e7\u00e3o no lado do servidor, possivelmente com o Node.js<\/a>.<\/p>\n

\"Prerender.\"
Prerender.<\/figcaption><\/figure>\n

Observe esta an\u00e1lise conceitual:<\/p>\n

1. Detec\u00e7\u00e3o de agentes de usu\u00e1rio<\/h4>\n

Voc\u00ea precisa diferenciar entre solicita\u00e7\u00f5es feitas por usu\u00e1rios (navegadores) e aquelas feitas por rastreadores (como o Googlebot). Isso pode ser feito verificando o agente do usu\u00e1rio nos headers HTTP das solicita\u00e7\u00f5es recebidas.<\/p>\n

2. Fornecimento de conte\u00fado est\u00e1tico para bots<\/h4>\n

Quando um rastreador \u00e9 detectado, em vez de servir o conte\u00fado pesado usual com JavaScript, seu servidor redireciona a solicita\u00e7\u00e3o para uma vers\u00e3o HTML est\u00e1tica e pr\u00e9-renderizada da p\u00e1gina solicitada. Para isso, voc\u00ea pode usar um servi\u00e7o de pr\u00e9-renderiza\u00e7\u00e3o ou ter uma configura\u00e7\u00e3o de pr\u00e9-renderiza\u00e7\u00e3o em seu servidor que gere p\u00e1ginas HTML est\u00e1ticas do seu conte\u00fado em tempo real ou a partir de um cache.<\/p>\n

3. Como realizar essa configura\u00e7\u00e3o com o WordPress<\/h4>\n

Servi\u00e7os como o prerender.io oferecem middleware que pode ser integrado ao seu servidor. Esse middleware intercepta as solicita\u00e7\u00f5es que chegam, verifica se s\u00e3o de rastreadores e, em caso afirmativo, serve uma p\u00e1gina pr\u00e9-renderizada do cache do prerender.io ou aciona uma nova renderiza\u00e7\u00e3o de p\u00e1gina se n\u00e3o houver cache.<\/p>\n

Se estiver criando uma solu\u00e7\u00e3o personalizada, voc\u00ea tipicamente usar\u00e1 o Puppeteer<\/a> em um ambiente Node.js para pr\u00e9-renderizar p\u00e1ginas. Quando a API do WordPress fornece conte\u00fado ao servidor Node.js, ela verifica o agente do usu\u00e1rio. Se for um rastreador, o Puppeteer renderiza a p\u00e1gina, salva o HTML est\u00e1tico e fornece essa vers\u00e3o.<\/p>\n

Esse processo pode ser otimizado armazenando em cache as p\u00e1ginas est\u00e1ticas para evitar renderiz\u00e1-las a cada solicita\u00e7\u00e3o de rastreador.<\/p>\n

Renderiza\u00e7\u00e3o no lado do servidor<\/h3>\n

A renderiza\u00e7\u00e3o no lado do servidor<\/a>, por outro lado, envolve renderizar o conte\u00fado da p\u00e1gina no servidor antes que chegue ao cliente. Isso significa que, quando um bot do mecanismo de pesquisa solicita uma p\u00e1gina, ele recebe uma p\u00e1gina HTML totalmente renderizada, tornando-a imediatamente index\u00e1vel.<\/p>\n

Voc\u00ea pode implementar a renderiza\u00e7\u00e3o no lado do servidor usando v\u00e1rios frameworks e bibliotecas JavaScript, como React<\/a> e Node.js<\/a>, para renderizar o conte\u00fado diretamente no servidor. Essa abordagem n\u00e3o s\u00f3 ajuda a tornar o conte\u00fado mais acess\u00edvel aos mecanismos de pesquisa, mas tamb\u00e9m melhora a experi\u00eancia geral do usu\u00e1rio, acelerando o tempo de carregamento da p\u00e1gina.<\/p>\n

Para a renderiza\u00e7\u00e3o no lado do servidor, o uso de frameworks como Next.js<\/a> em combina\u00e7\u00e3o com a API REST do WordPress<\/a> ou GraphQL<\/a> pode simplificar o processo.<\/p>\n

Uma configura\u00e7\u00e3o t\u00edpica pode envolver a busca de dados com o GraphQL e a renderiza\u00e7\u00e3o de p\u00e1ginas no servidor usando o Next.js, preenchendo previamente o conte\u00fado antes de ser servido.<\/p>\n

Configura\u00e7\u00e3o de URLs can\u00f4nicas<\/h2>\n

A configura\u00e7\u00e3o de URLs can\u00f4nicas para um site WordPress headless \u00e9 outra maneira de manter a integridade de SEO, especialmente quando o conte\u00fado \u00e9 fornecido por meio de um frontend desacoplado, como o Gatsby<\/a> ou o Next.js.<\/p>\n

As URLs can\u00f4nicas<\/a> ajudam a evitar problemas de conte\u00fado duplicado, sinalizando aos mecanismos de pesquisa qual vers\u00e3o de uma p\u00e1gina de conte\u00fado \u00e9 a principal ou “can\u00f4nica”. Isso \u00e9 necess\u00e1rio em um ambiente headless em que o conte\u00fado pode ser acessado por meio de v\u00e1rias rotas ou endpoints.<\/p>\n

Por que as URLs can\u00f4nicas s\u00e3o importantes<\/h3>\n

No WordPress headless, o risco de duplica\u00e7\u00e3o de conte\u00fado aumenta devido \u00e0 separa\u00e7\u00e3o do frontend e o backend do WordPress. As URLs can\u00f4nicas atenuam esse risco, orientando os mecanismos de pesquisa a indexar a URL<\/a> preferencial. Isso garante que o valor de SEO seja consolidado na p\u00e1gina can\u00f4nica em vez de ser dilu\u00eddo em v\u00e1rias vers\u00f5es do mesmo conte\u00fado.<\/p>\n

Ao reservar um tempo para definir URLs can\u00f4nicas, voc\u00ea tamb\u00e9m esclarece qual vers\u00e3o do conte\u00fado deve ser classificada nos resultados de pesquisa.<\/p>\n

Como configurar URLs can\u00f4nicas<\/h3>\n

A implementa\u00e7\u00e3o de URLs can\u00f4nicas em um ambiente WordPress headless pode ser gerenciada com efici\u00eancia com a ajuda do plugin Yoast SEO, juntamente com o WPGraphQL, para conectar os dados do Yoast SEO \u00e0 sua configura\u00e7\u00e3o headless.<\/p>\n

Aqui voc\u00ea encontra uma vis\u00e3o geral de alto n\u00edvel de um processo que o desenvolvedor web Andrew Kepson<\/a> detalha muito bem e que envolve alguns plugins populares:<\/p>\n