Um guia para iniciantes no Headless CMS
Publicados: 2022-02-01Headless CMS (Content Management Systems) remove o link direto entre o back-end do seu banco de dados de conteúdo e a forma como o conteúdo é servido aos usuários quando eles visitam seu site ou aplicativo.
Isso se compara ao CMS 'acoplado' tradicional, onde tanto o banco de dados quanto a renderização do conteúdo são controlados pelo mesmo CMS.
Embora um CMS acoplado tenha suas vantagens – como uma interface única para editar seu banco de dados e a maneira como ele aparece na tela – o CMS headless é mais poderoso e flexível.
Isso é particularmente verdadeiro para sites maiores, bancos de dados complexos ou quando várias pessoas precisam trabalhar em diferentes aspectos do seu conteúdo, site/aplicativo e SEO no site.
O que é CMS sem cabeça?
Em um CMS tradicional, o banco de dados de conteúdo de back-end e o design do site de front-end podem ser editados no mesmo painel do CMS, razão pela qual esses sistemas são chamados de 'acoplados'.
Um sistema CMS headless usa sistemas separados para banco de dados e entrega, com uma API (Application Programming Interface) atuando como uma ponte entre os dois.
Alguns dos CMS headless mais usados incluem Ghost, Prismic, Netlify e Contentful e, como o CMS acoplado, eles foram projetados para funcionar com eficiência, oferecer funcionalidade flexível e escalar rapidamente quando seu banco de dados começa a crescer.
O CMS sem cabeça pode ser mais caro, devido à maior complexidade, mas oferece recursos que um sistema acoplado não pode oferecer, como a capacidade de fornecer conteúdo de uma maneira completamente diferente aos visitantes que acessam seu site de diferentes dispositivos.
Isso, por sua vez, tem algumas implicações positivas para as técnicas de Search Engine Optimization (SEO), como design de site responsivo, pois seu conteúdo pode ser veiculado de uma maneira muito mais responsiva, dependente de plataforma e verdadeiramente amigável para dispositivos móveis.
Mais benefícios do CMS headless
Vejamos alguns dos benefícios específicos do CMS headless, que estão ajudando a impulsionar a enorme popularidade e a rápida aceitação dessa abordagem em sites de todo o mundo:
Conteúdo personalizado
Um controle mais próximo sobre seu conteúdo e a maneira como ele é exibido significa que você pode personalizar suas páginas em uma extensão muito maior. Independentemente de você fazer isso para grupos de usuários específicos ou para seu público como um todo, isso oferece ainda mais maneiras de se destacar entre seus concorrentes.
Carregamento mais rápido
O uso de uma API e front-end apropriados para o dispositivo otimiza as velocidades de carregamento em diferentes dispositivos, incluindo aqueles que acessam seu site por meio de uma conexão de dados móveis. Isso também suporta qualquer ação que você esteja realizando em campanhas de SEO para melhorar o desempenho do seu Core Web Vitals.
Flexibilidade à prova de futuro
A capacidade de instalar APIs adicionais significa que seu banco de dados pode ser conectado a novos front-ends no futuro. Isso pode permitir que você diversifique, por exemplo, um site para visitantes de desktop e dispositivos móveis, para também exibir telas de informações na loja e tecnologia vestível.
Em resumo, um CMS headless é ideal quando você tem necessidades complexas de front-end, mas deseja simplificar a edição e manutenção do seu conteúdo real – com edições e atualizações refletidas em todas as suas diferentes plataformas imediatamente.
Como planejar o CMS headless
A modelagem de conteúdo é o estágio crucial de planejamento antes de implementar um novo CMS headless. É semelhante à maneira como você planeja a hierarquia de pastas de um site, a estrutura de URL e o mapa do site, exceto que, neste caso, você trabalhará com tipos de conteúdo, em vez de páginas individuais.
O que são tipos de conteúdo?
Os vários tipos de conteúdo que você define contêm campos que extraem informações do seu banco de dados. Isso pode ser metadados de SEO – e se você usa um CMS tradicional acoplado com um plugin de SEO como o Yoast, é provável que você já tenha visto e preenchido campos de metadados no passado.
Em suas páginas de conteúdo principal, você pode ter campos para o slug de URL, bem como uma ou mais seções de conteúdo visível a serem renderizadas na página.
Você também pode definir tipos de conteúdo para ativos de mídia, dando aos seus arquivos um nome, uma descrição que só pode ser vista internamente e um local onde o arquivo pode ser acessado.
Como funcionam os tipos de conteúdo?
Depois de definir todos os tipos de conteúdo necessários, você criou um método modular de 'blocos de construção' pelo qual as APIs podem extrair informações do seu banco de dados e juntá-las para diferentes plataformas.
As APIs podem solicitar dados de diferentes tipos de conteúdo e construí-los de maneiras completamente exclusivas para renderizar páginas de uma maneira específica da plataforma.
Se você precisar fazer alterações no futuro, como adicionar uma nova metatag de SEO, poderá atualizar o tipo de conteúdo para criar o campo necessário em todos os itens relevantes em seu banco de dados.
Como definir os requisitos de SEO
É uma boa prática definir os requisitos de SEO para CMS headless antes de se aprofundar muito no desenvolvimento, para que seus desenvolvedores saibam o que precisam implementar.
Alguns elementos a serem considerados incluem:
- Slug de URL (que pode ser palavra-chave por página)
- Metadados (por exemplo, tags 'título', 'descrição' e 'palavras-chave')
- Tag canônica (para evitar penalidades de conteúdo duplicado)
- Meta robots tag (para evitar o rastreamento indesejado de páginas)
Você também pode criar campos para alguns dos métodos mais modernos e verificações específicas de serviços que ajudam a dar suporte ao seu SEO:
- Microdados, microformatos e marcação Schema.org
- Tags de verificação para Google Analytics, Search Console e Bing Webmaster Tools
- Marcação para visualizações de mídia social (por exemplo, cartões do Twitter)
Mais uma vez, tudo isso influencia como seu conteúdo é encontrado e como ele é exibido em diferentes plataformas – neste caso, sites e aplicativos de terceiros – portanto, incluir esses campos ajuda você a manter o controle de como as pessoas veem seu conteúdo, não importa onde o encontrem. isto.
De quantos tipos de conteúdo eu preciso?
Decidir quantos tipos de conteúdo usar é uma das grandes questões de mudar para o CMS headless, e a resposta é que depende do que você está tentando alcançar.
Para o melhor desempenho de SEO, você deve definir campos que cobrem cada parâmetro individual. Por exemplo, você pode ter um campo para a metatag robots follow/nofollow e um campo separado para robots index/noindex.
Limites e requisitos
Headless CMS como Contentful também permite que você coloque limites de contagem de caracteres em campos, para que você possa manter tags de título e outros metadados dentro de um certo número de caracteres.
Por fim, você pode tornar os campos obrigatórios e únicos – portanto, se os metadados forem replicados de outra página ou estiverem completamente ausentes, o editor receberá uma mensagem de erro e poderá fazer as correções necessárias.
Se você faz isso usando vários campos em um único tipo de conteúdo ou usa tipos de conteúdo separados para uma flexibilidade ainda maior no lado da renderização, depende em parte de quais recursos você precisa que seus dados suportem e, em parte, de preferência pessoal.
Juntar as peças
Você pode pensar nisso como sendo como construir um poço dos desejos. Quanto maiores os tijolos, mais rápida e fácil será a construção. Mas quanto menores os tijolos, mais perfeita será a forma circular.
O 'número certo' de tipos de conteúdo deve ser um meio-termo que funcione melhor para você, para que você possa construir o site que deseja, sem sentir que está editando cada parágrafo, cabeçalho e metatag individualmente.
E o frontend?
Assim como existem vários back-ends de CMS headless comuns em uso popular, também existem alguns ótimos frameworks de front-end para escolher.
Dois dos melhores são React e Vue, e esses frameworks modernos, mais uma vez, foram projetados para funcionar de forma eficiente, carregar conteúdo rapidamente e oferecer a melhor experiência de usuário aos visitantes do seu site.
Lembre-se de levar em consideração as considerações técnicas. Por exemplo, pré-renderizar seu conteúdo pode garantir que ele seja totalmente visível para os rastreadores do mecanismo de pesquisa, que podem não conseguir 'ver' o conteúdo se ele for renderizado no lado do cliente usando JavaScript.
Considerações finais
Depois que seu CMS headless for implementado, certifique-se de que ele seja devidamente auditado por desenvolvedores da Web respeitáveis e especialmente por especialistas em SEO, para garantir que você não tenha perdido um detalhe técnico que possa afetar seus rankings de pesquisa.
Um exemplo disso que é bastante comum com APIs é a proliferação de URLs dinâmicos para coisas como categorias de comércio eletrônico, diferentes tamanhos e cores de um produto e paginação de resultados.
Ao tornar todos esses URLs visíveis para robôs de mecanismos de pesquisa, você corre o risco de consumir seu orçamento de rastreamento antes que eles encontrem o conteúdo de URL estático mais valioso em seu site.
[Estudo de caso] Gerenciando o rastreamento de bot do Google
Leia o estudo de casoIncentive seus desenvolvedores a implementar URLs estáticos sempre que possível e use as metatags robots implementadas em seu CMS headless para bloquear o acesso do rastreador a páginas dinâmicas indesejadas.
Olhando para frente
Ao levar em conta todos os itens acima, você pode criar bancos de dados de sites complexos e abrangentes que podem servir sites de desktop, sites e aplicativos móveis, alto-falantes inteligentes, bots de bate-papo de IA, telas de informações na loja e muitos outros tipos de dispositivos por meio do Internet das Coisas.
O trabalho de desenvolvimento futuro pode gerar atualizações instantâneas em muitos dispositivos e plataformas diferentes para os quais você publica dados, permitindo um retorno mais rápido e positivo do investimento de suas campanhas de SEO e conteúdo.
E muito parecido com a separação de conteúdo e design que veio com Cascading Style Sheets (CSS) no início dos anos 2000, o CMS headless oferece uma maneira mais granular de definir, editar e renderizar seu conteúdo - ajudando você a atingir suas metas de SEO e comércio eletrônico em uma maneira mais gerenciada à medida que você constrói seu banco de dados nos próximos meses e anos.