Como migrar um site WordPress para Gatsby sem perder a qualidade de SEO

Migrar um site WordPress para um provedor diferente pode parecer um punhado, mas cada vez mais blogs estão se afastando do que costumava ser o sistema de gerenciamento de conteúdo online mais popular. À medida que a nova tecnologia começa a crescer, as opções também aumentam e, nos últimos anos, o WordPress enfrentou seu quinhão de concorrentes, sendo o mais promissor o Gatsby.

Embora opere de maneira relativamente semelhante, existem várias razões pelas quais muitos proprietários de sites preferem o Gatsby ao WordPress.

Da funcionalidade e serviço à qualidade do desempenho e vantagens disponíveis, aqui está uma visão mais detalhada do WordPress e do Gatsby, seguido de um guia detalhado sobre como migrar com segurança um site baseado em WordPress para a estrutura do Gatsby sem perder a qualidade de SEO no processo .

Definindo o WordPress

Por décadas, o WordPress representou o sistema de gerenciamento de conteúdo número um. Como um modelo de código aberto, o WordPress continuou a oferecer um serviço de qualidade para milhares de blogs e sites ao longo dos anos, oferecendo uma infinidade de conteúdo gratuito e ferramentas de gerenciamento de SEO, como plugins e extensões.

As estatísticas observam que cerca de 29% dos proprietários de sites ainda usam o WordPress, o que torna a plataforma uma primeira escolha óbvia. As razões pelas quais o WordPress é preferido por muitos usuários é devido ao carregamento de conteúdo simplificado e à precisão na modificação de todos os aspectos do conteúdo e de seu SEO. O WordPress possui uma galeria generosa de plugins, gratuitos e pagos, mas a maioria dos usuários considera o último uma opção muito mais funcional.

Dito isso, as desvantagens de usar o WordPress também são óbvias. Por um lado, o sistema é baseado em PHP e vem com extenso código legado, o que complica o processo de otimização. Devido aos seus vários casos de uso, o WordPress faz um site simples de configurar, mas não rápido e, como você sabe, quanto mais lento um site, menos tráfego ele gera. Não apenas isso, mas o principal critério de classificação do Google, além do conteúdo de qualidade, é a velocidade de carregamento de um site.

Algumas das outras razões pelas quais os usuários evitaram o uso do WordPress incluem:

Gerenciador de conteúdo problemático

O WordPress levou algum tempo para reformular seu editor de conteúdo e, mesmo assim, não conseguiu se destacar. O novo gerenciador de conteúdo (Gutenberg) separa o conteúdo por blocos, o que muitos usuários acharam desafiador, pois a experiência do usuário não é a ideal. Bem, eu não sei - eu acho muito bom - quando você se acostuma.

A maioria dos usuários está instalando o plugin do editor clássico para permanecer com o que eles sabem.

Escrevendo PHP

Para modificar um site WordPress, as modificações precisam ser escritas em PHP. Embora existam modificações personalizadas no WordPress, muitos usuários as consideram excessivamente exigentes e demoradas. E como o PHP não é a linguagem mais popular, exceto para sites WordPress, lidar com isso parece redundante.

Alguns usuários preferem usar construtores de páginas que ajudam a personalizar e modificar facilmente o design de um site sem o uso de código. Mas ainda assim, com o WordPress, você não pode realmente ter TODOS os recursos do mundo ou construir um site dos sonhos com tantos recursos quanto quiser. Um site mais complexo provavelmente achará difícil usar o WordPress como front-end.

Definindo GatsbyJS

Muitos consideram o WordPress uma tecnologia ultrapassada, mas à medida que os concorrentes aumentaram, o GatsbyJS tornou-se uma das alternativas mais adequadas. A maioria dos criadores de sites e usuários recorrem a sites usando linguagens como JavaScript e React.js, que é exatamente o que Gatsby traz para a mesa. Ao contrário da natureza de código aberto do WordPress, o GatsbyJS é um gerador de site estático, construído principalmente em React.

Quando os usuários visitam um site baseado em Gatsby, a plataforma não renderiza páginas. Em vez disso, o GatsbyJS gera páginas na compilação e as move todas online. O sistema não requer servidores ou a manutenção dos mesmos e é compatível com arquivos estáticos como JS, HTML e CSS. Finalmente, Gatsby não usa PHP, o que é um grande alívio para ex-usuários do WordPress.

A plataforma não deixa de ter suas desvantagens, uma das quais é a incapacidade de ver diretamente o resultado de qualquer alteração no site que você fizer, como no Gatsby, tudo precisa ser compilado primeiro. Para ajudar com o problema, no entanto, muitos confiam nos pipelines de CI/CD do Gitlab para compilar um site primeiro e colocá-lo online em seguida. O Gatsby permite que os usuários criem modelos de postagem de blog e escrevam todo o conteúdo em markdown.

Aqui estão mais benefícios importantes de usar o Gatsby:

• Zero recargas

Como um aplicativo de página única ou SPA, o Gatsby não requer uma página de site clicada para carregar um novo recurso.

• Refinamento de imagem

Todas as imagens usadas na plataforma são filtradas automaticamente de rastreamentos externos, como metadados, e são imediatamente redimensionadas, compactadas, otimizadas e carregadas lentamente.

• Recursos de pré-busca

O Gatsby tem a capacidade de identificar todos os links disponíveis em uma determinada página e carregar os dados no cache do site.

• Alternações de código

Com o Gatsby, o código usado é simplificado, empacotado, reduzido e, infelizmente, servido.

Migrando dados do WordPress para Gatsby Framework

Quando você está pensando em mover todo o seu conteúdo do WordPress para o Gatsby, o aspecto mais importante a ser considerado é não perder seu valor de SEO existente.

Felizmente, Gatsby facilita bastante a recepção do conteúdo de outras plataformas.

A primeira coisa que você precisará para transferir seu conteúdo é um plugin de origem. Um plug-in de origem ajudará o Gatsby a preencher sua loja Graphql de maneira transparente e automática, enquanto concede acesso a todas as informações de entrada. O plug-in de origem pode ser modificado para atender às suas necessidades e até tornar sua plataforma de código aberto em vez de estática.

O Graphql apresenta uma solução refinada na aquisição de dados de API e difere significativamente de seu antecessor, a API REST. O Graphql é um ativo complementar à plataforma Gatsby, destinado a ser usado como parte do próprio sistema. Ignorar completamente o Graphql é possível, mas altamente desconsiderado como uma opção, pois não concede acesso a vários recursos importantes.

O próximo passo é facilitar o processo de escrita e mover tudo para o Markdown. Arquivos Markdown, ou .md, permitem que os usuários escrevam texto simples e simples que pode ser convertido em HTML mais facilmente. Ainda mais, o Markdown entregará todos os arquivos .md junto com o código Github do site e fará com que a versão do processo seja controlada. Alguns usuários podem achar o Gatsby Advanced Started (GAS) útil também, pois este projeto permite a criação de sites Gatsby orientados para SEO.

Como transferir postagens do WordPress para Markdown

Antes de mais nada, você precisará exportar todos os artigos viáveis ​​do WordPress. Feito isso, você precisará convertê-los em texto simples ou Markdown. Existe uma ferramenta que faz isso e se chama WordPress Export to Markdown. Com esta ferramenta, você pode extrair todo o conteúdo do WordPress, suas tags, categorias e aspectos essenciais de SEO. A ferramenta dá um passo extra para converter não apenas o conteúdo do artigo, mas também postar imagens.

Uma vez obtidos, os arquivos estão prontos para pousar na pasta de conteúdo do projeto. Na próxima vez que você executar o Gatsby, você notará apenas um vislumbre de artigos, mas uma vez que você construir o site, todo o conteúdo será representado como adquirido.

Como criar posts e páginas com Gatsby

O desempenho de Gatsby é semelhante ao PHP usado no WordPress. No entanto, como o Gatsby usa o React em sua totalidade, ele coloca os compostos de idioma nas pastas das páginas, transformando-os automaticamente em páginas do site. Esse recurso é ideal para conteúdo de página unidimensional, como 'Índice' e 'Sobre mim'.

Em termos de conteúdo dinâmico, como categorias ou postagens de blog, os usuários podem confiar nos modelos prontos para uso do Gatsby para criar páginas específicas. Quem vai usar o GAS já terá os templates de postagem em mãos, junto com suas tags e categorias. Sinta-se à vontade para estimar novamente seu conteúdo e torná-lo mais dinâmico e, portanto, mais compatível com o Gatsby. Todas as alterações que você fizer serão exibidas em seu navegador de uma só vez, o que torna o Gatsby bastante amigável para iteração imediata.

Lembre-se, a essência do Gatsby está em seu arquivo gatsby-node.js. Aqui, você pode estimar os comportamentos do modelo e da página, bem como o slug e os elementos e dados extras a serem usados. O arquivo também é prejudicial a ser considerado, pois ajuda a preencher os nós, ou seja, os dados são armazenados em seu GraphQL.

Como estilizar um site Gatsby

Em termos de escrita de estilos de sites, o Gatsby oferece muitas opções viáveis, como arquivos .css, Sass, CSS-in-JS e muito mais. Aqui estão algumas dicas sobre como projetar seu site Gatsby:

• Explore os recursos de design disponíveis, como Ant, MaterialUI e Materialize.
• Esteja pronto para implantação! Sites estáticos como o Gatsby tornam a implantação de sites superfácil e acessível. Você pode usar várias ferramentas gratuitas e rápidas para fazer isso, como Netlify, AWS Amplify, Now e Surge.
• Otimize, otimize, otimize! Usar o Gatsby significa ter um site mais rápido e você sempre pode usar a plataforma para torná-lo ainda mais rápido, otimizado para SEO e acessível. Uma das melhores ferramentas de otimização é o Lighthouse, pois faz tudo automaticamente: auditoria, métricas, práticas da web, dados detalhados e até links úteis. Você pode executar sua auditoria do Lighthouse via Google, Firefox ou usar a opção Lighthouse CLI.

Como manter seu site Gatsby funcionando rápido

Depois que todo o conteúdo for migrado, você poderá tornar seu site Gatsby mais rápido:

• Processando todos os dados do Gatsby através do GraphQL.
• Evite usar bibliotecas pesadas, como moment.js, pois elas podem tornar o site mais lento.
• Confie em seu servidor para modificar datas, enviar esses dados para suas páginas e realizar outras tarefas pesadas.
• Gerencie menos dados usando o GraphQL. Dessa forma, você acessará apenas os dados necessários e evitará acumular quantidades excessivas de dados por engano.
• Torná-lo acessível. Seus usuários não irão interagir com seu site como você faz, portanto, certifique-se de que o site abranja todas as categorias de usuários, incorporando uma qualidade a11y, que também pode resultar em HTML aprimorado e pontuações otimizadas de SEO. Para corrigir todos os problemas, você pode usar ferramentas relevantes, como o Axe.

Como manter SEO de alta qualidade

Ao entender o básico de como o Google classifica os sites, você poderá colocar seu site Gatsby em um rolo. Para isso, fique atento aos seguintes aspectos:

• Conteúdo estelar e relevante
• Maior acessibilidade aos usuários
• Um site mais rápido
• Criar links ou exibir seu site em outros domínios

Um guia simplificado sobre como migrar do WordPress para o Gatsby

Para resumir e facilitar o processo, aqui está um guia passo a passo para migrar totalmente seu site do WordPress para o GatsbyJS.

• Baixe o XML do WordPress, encontrado em Ferramentas > Exportar.
• Use uma ferramenta para converter o XML para Markdown ou texto simples, que às vezes fará mais da metade do trabalho de conversão de postagens de blog.
• Baixe todas as imagens e conteúdo do servidor. Puxe as imagens dos uploads do WordPress para uma pasta de imagens.
• Corrija listas quebradas e blocos de código de recuo para assimilar o estilo Gatsby.
• Salve as miniaturas e mova-as para uma respectiva pasta para reutilização.
• Conecte-se ao Netlify para configurar a implantação automática. Se escrito em JavaScript, migre-o para typescript para habilitá-lo.
• Altere as opções de estilo para que possam usar CSS-in-JS. Atualize o estilo e o layout.
• Execute atualizações para que o conteúdo do blog caia na categoria '/blog/'.
• Use redirecionamento para todos os URLs.
• Use a API React Context como wrapper para criar um modo noturno.
• Migre comentários do WordPress para o Gatsby usando um importador manual ou automatizado.

Depois que todas essas etapas forem cobertas, você terá que construir as páginas, dominar o GraphQL, fazer as consultas adequadas e limpar pequenas bagunças quando necessário.

Quanto tempo levará o processo de migração?

A migração de todo o conteúdo do WordPress para o Gatsby dependerá do volume de conteúdo que você tem à sua disposição, bem como de seus esforços pessoais. Idealmente, você deve conseguir transferir todo o conteúdo em no máximo duas semanas. No entanto, lembre-se de que, se você é novo no React, precisará de tempo para se ajustar a ele.

Depois de pegar o jeito, você aproveitará as vantagens que vêm com o Gatsby, como menos estragos HTML em seu banco de dados MySQL e arquivos fáceis de acessar, gerenciar, editar, ler, fazer backup e compartilhar com outras pessoas.

Uma última coisa…

Embora o gerenciamento do Gatsby exija um conjunto de habilidades e experiência em CSS, HTML, JavaScript, Node.js, React, ES6 e GraphQL, para citar alguns, comece devagar e aprenda cada tecnologia à medida que ela surgir.

Mesmo que o processo represente um desafio, em última análise, você pode seguir o Gatsby Getting Started Tutorial para obter um guia ainda mais detalhado sobre o processo de migração.

Vamos codificar, certo?