Como o novo mapa de site dinâmico do HackerNoon melhora a distribuição de histórias

SEO significa Search Engine Optimization e ajuda seu site a se tornar mais detectável para o público, tornando-o mais alto nos mecanismos de pesquisa, como o Google. Você pode adicionar SEO ao seu site, de forma dinâmica ou estática, mas ambos irão definir o nível do seu site. Esta é a história de como adicionei um novo tipo de sitemap dinâmico à plataforma de publicação do HackerNoon para melhor indexar nossas centenas de milhares de páginas do site: https://hackernoon.com/sitemap.xml

Então, como os Sitemaps dinâmicos impulsionam o desempenho de SEO?

Para começar a indexar um site nos mecanismos de busca, tudo o que você precisa é de um arquivo sitemap.xml no diretório /public do código-fonte do seu site. O mapa do site indicará as diferentes páginas do seu site e o enviará aos mecanismos de pesquisa para validar os urls. Na verdade, existem muitos outros sites que podem gerar mapas de sites gratuitamente e tudo o que você precisa fazer é copiar e colar esse arquivo no diretório /public e, em seguida, implantar o site. Isso é chamado de sitemaps estáticos, pois nenhuma nova página está sendo criada.

No HackerNoon , costumávamos ter o que chamamos de sitemap dinâmico por implantação . Usando esse método, um script é criado na origem do aplicativo. Este script irá gerar um arquivo .xml com todas as páginas correspondentes que serão atualizadas quando o aplicativo terminar o processo de implantação. Este método é bom quando você não tem muitas novas páginas sendo criadas (as demandas não são atendidas) e faz muitas alterações no código. Este método pode, no entanto, aumentar o tempo de implantação, pois um script adicional será executado onde todos os dados precisam ser buscados para produzir o novo arquivo .xml.

Infelizmente (ou felizmente - depende de como você olha para isso), as demandas do HackerNoon para distribuição de artigos eram um pouco altas demais para o Dynamic Sitemap Per Deployment lidar, já que novas páginas estão sendo criadas o tempo todo em alto volume. Assim, uma nova iteração foi necessária para corrigir o problema.

Pesquisei muito sobre como indexar uma página no momento em que ela é criada, mas todos os recursos sugeriram o “método do script”. Foi quando, depois de algum tempo, me ocorreu ter roteamento dinâmico com mapa do site dinâmico. Isso aconteceu para ser a solução, mas há um pouco mais do que isso…

Deixe-me explicar:

Este método é muito semelhante ao anterior, mas tem uma implementação mais complexa devido à integração de um banco de dados e roteamento dinâmico. Ele basicamente permitirá que você crie diferentes páginas de sitemaps de maneira dinâmica e permita que você distribua cada página no momento em que é criada.

Em primeiro lugar, usei um banco de dados para armazenar todas as páginas do HackerNoon usando ganchos. Basicamente, quando um novo artigo, perfil, página sobre, página marcada ou página da empresa é criado, um gancho é executado no servidor onde vários códigos são atualizados, incluindo a atualização do banco de dados do mapa do site. Ele encontra um mapa do site disponível e, em seguida, gera o URL e o adiciona ao banco de dados. Os dados são divididos em diferentes rotas/slugs, o que permite que sejam dinâmicos.

Em segundo lugar, graças ao NextJs e sua abordagem com serverSiteProps e StaticProps, consegui criar uma nova rota /sitemaps e adicionar roteamento dinâmico com slugs /sitemaps/[slug]. O slug é criado no banco de dados e depois buscado usando serverSideProps que buscará os dados correspondentes indicados pelo slug da rota. O NextJS tem um pacote (next-sitemap) que permite renderizar conteúdo xml em qualquer rota, então usei isso para criar uma nova página com o conteúdo do sitemap. Depois que o conteúdo do sitemap for renderizado, ele será selecionado pelos mecanismos de pesquisa.

Aqui está um codeblock da implementação no cliente:

 export async function getServerSideProps(ctx) { const {slug} = ctx.params; //get the slug of the route //make the api call to get the data, we are using firebase const sitemapPages = await db.collection("collection").where("slug", "==", slug).get(); let fields = []; if (!sitemapPages.empty) { sitemapPages.docs.forEach(doc => { // loop through each document gathered const {pages} = doc.data(); //get the pages of a document if (pages.length > 0) { fields = [...fields, ...JSON.parse(pages)]; //add the pages to fields } }); return getServerSideSitemap(ctx, fields); //fields is rendered in xml format } }

O desafio:

O principal desafio com esta implementação foi a configuração do banco de dados. Eu nem sabia se minha abordagem iria funcionar, mas valia a pena tentar, pois havia muitos tickets/suporte técnico sobre isso. Exigiu que eu desenhasse alguns bancos de dados à mão e basicamente experimentasse cada um para ver qual iria funcionar. Acabei usando um método inteligente que é basicamente dividir os URLs em um conjunto de 5.000 por documento e dar a ele um slug exclusivo até que eles somem cerca de 35 ou 40.000 URLs. Ter uma carga útil maior pode travar a solicitação do cliente, o que não permitirá que os URLs sejam indexados. Além disso, o Google Search Engine tem uma limitação de 50.000 urls por sitemap, então acho que 40.000 urls serão bons para o HackerNoon.

Graças a esta implementação, temos 7 mapas de site diferentes com cerca de 40.000 páginas cada, e adicionamos novos automaticamente todos os dias: https://hackernoon.com/sitemap.xml

Conclusão do mapa do site dinâmico:

Quando comecei a trabalhar na Hackernoon, SEO era um assunto que precisava de algumas melhorias, e como temos muitas páginas, consegui implementar o Sitemap Dinâmico com NextJS e Firebase. Cada página criada no HackerNoon agora é indexada pelos mecanismos de pesquisa sem muito trabalho. Meu objetivo era minimizar o trabalho manual (sitemaps por implantação) e implementar um método que funcionasse sozinho. Confira nosso mapa do site dinâmico: https://hackernoon.com/sitemap.xml