Comment le nouveau plan de site dynamique de HackerNoon améliore la distribution des histoires

SEO signifie Search Engine Optimization et il aide votre site Web à devenir plus visible pour le public en le faisant mieux se classer dans les moteurs de recherche tels que Google. Vous pouvez ajouter du référencement à votre site Web, de manière dynamique ou statique, mais les deux amélioreront définitivement votre site. Voici l'histoire de la façon dont j'ai ajouté un nouveau type de sitemap dynamique à la plateforme de publication de HackerNoon pour mieux indexer nos centaines de milliers de pages de site : https://hackernoon.com/sitemap.xml

Alors, comment les sitemaps dynamiques stimulent-ils les performances SEO ?

Pour commencer à indexer un site dans les moteurs de recherche, tout ce dont vous avez besoin est un fichier sitemap.xml dans le répertoire /public du code source de votre site Web. Le plan du site indiquera les différentes pages de votre site web et l'enverra aux moteurs de recherche pour valider les urls. Il existe en fait de nombreux autres sites Web qui pourraient générer des plans de site gratuitement et tout ce que vous avez à faire est de copier et coller ce fichier dans le répertoire / public, puis de déployer le site. C'est ce qu'on appelle des sitemaps statiques, car aucune nouvelle page n'est créée.

Chez HackerNoon , nous avions l'habitude d'avoir ce qu'on appelle un sitemap dynamique par déploiement . Avec cette méthode, un script est créé dans la source de l'application. Ce script générera un fichier .xml avec toutes les pages correspondantes qui seront ensuite mises à jour lorsque l'application aura terminé le processus de déploiement. Cette méthode convient lorsque vous n'avez pas beaucoup de nouvelles pages en cours de création (les demandes ne sont pas satisfaites) et que vous apportez de nombreuses modifications au code. Cette méthode peut cependant augmenter le temps de déploiement car un script supplémentaire sera exécuté là où toutes les données doivent être récupérées pour produire le nouveau fichier .xml.

Malheureusement (ou heureusement - cela dépend de la façon dont vous le voyez), les demandes de HackerNoon en matière de distribution d'articles étaient un peu trop élevées pour être gérées par Dynamic Sitemap Per Deployment, car de nouvelles pages sont créées tout le temps en grand volume. Ainsi, une nouvelle itération était nécessaire pour régler le problème.

J'ai beaucoup cherché sur la façon d'indexer une page au moment de sa création, mais toutes les ressources ont suggéré la «méthode des scripts». C'est alors qu'après un certain temps, il m'est venu à l'esprit d'avoir un routage dynamique avec un sitemap dynamique. Cela s'est avéré être la solution, mais il y a un peu plus que ça…

Laisse-moi expliquer:

Cette méthode est vraiment similaire à celle ci-dessus mais a une mise en œuvre plus complexe en raison de l'intégration d'une base de données et d'un routage dynamique. Il vous permettra essentiellement de créer différentes pages de plans de site de manière dynamique et vous permettra de distribuer chaque page au moment de sa création.

Tout d'abord, j'ai utilisé une base de données pour stocker toutes les pages de HackerNoon à l'aide de crochets. Fondamentalement, lorsqu'un nouvel article, un profil, une page à propos, une page balisée ou une page d'entreprise est créé, un crochet s'exécute sur le serveur où un tas de code est mis à jour, y compris la mise à jour de la base de données du plan du site. Il trouve un sitemap disponible, puis génère l'URL et l'ajoute à la base de données. Les données sont divisées en différentes routes/slugs, ce qui leur permet d'être dynamiques.

Deuxièmement, grâce à NextJs et son approche avec serverSiteProps et StaticProps, j'ai pu créer une nouvelle route /sitemaps et ajouter un routage dynamique avec des slugs /sitemaps/[slug]. Le slug est créé sur la base de données puis récupéré à l'aide de serverSideProps qui récupérera les données correspondantes indiquées par le slug de la route. NextJS a un package (next-sitemap) qui vous permet de restituer le contenu xml dans n'importe quel itinéraire, et je l'ai donc utilisé pour créer une nouvelle page avec le contenu du sitemap. Une fois le contenu du sitemap rendu, il sera récupéré par les moteurs de recherche.

Voici un bloc de code de l'implémentation sur le client :

 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 } }

Le défi:

Le principal défi de cette implémentation était la configuration de la base de données. Je ne savais même pas si mon approche allait fonctionner, mais cela valait la peine d'essayer car il y avait beaucoup de tickets/support technique à ce sujet. Il m'a fallu dessiner quelques bases de données à la main et essentiellement essayer chacune et voir laquelle allait fonctionner. J'ai fini par utiliser une méthode intelligente qui consiste essentiellement à diviser les URL en un ensemble de 5 000 par document et à lui donner un slug unique jusqu'à ce qu'elles totalisent environ 35 ou 40 000 URL. Avoir une charge utile plus importante pourrait planter la demande du client, ce qui empêcherait l'indexation des URL. De plus, le moteur de recherche Google a une limite de 50 000 URL par sitemap, donc je pense que 40 000 URL seront bonnes pour HackerNoon.

Grâce à cette implémentation, nous avons 7 plans de site différents avec environ 40 000 pages chacun, et en ajoutons de nouveaux automatiquement chaque jour : https://hackernoon.com/sitemap.xml

Conclusion du sitemap dynamique :

Lorsque j'ai commencé à travailler chez Hackernoon, le SEO était un sujet qui nécessitait quelques améliorations, et comme nous avons tellement de pages, j'ai pu implémenter Dynamic Sitemap avec NextJS et Firebase. Chaque page créée sur HackerNoon est désormais indexée par les moteurs de recherche sans effort. Mon objectif était de minimiser le travail manuel (sitemaps par déploiement) et de mettre en œuvre une méthode qui fonctionnera par elle-même. Consultez notre sitemap dynamique : https://hackernoon.com/sitemap.xml