11527 sujets

JavaScript, DOM et API Web HTML5

Menu chargé en JS fait planter les générateurs de sitemap

Salut,

Comme je code tout à la main (marre des CMS), j'ai développé une technique personnelle pour faire des petits sites en un tournemain. J'ai mon système de chargement de partials en Javascript, et donc je charge le menu du site grâce à ça. Ca me permet de mettre à jour le menu d'un seul coup pour toutes les pages au lieu d'aller toutes les éditer.

Problème : je viens de constater que la génération d'un sitemap sur un site comme https://www.seoptimer.com/fr/sitemap-generator ne me sort qu'une URL. J'ai réalisé que c'était probablement dû à ce que le crawler n'attend pas la construction du DOM en entier ni du JS qui passe juste après.

Mais le coup de froid dans le dos, c'est : est-ce que les robots Google vont avoir le même problème ? Question donc : est-ce que je dois abandonner cette méthode, ou est-ce que le sitemap (précisément) que je vais devoir faire à la main leur servira de béquille ?

NB : pourquoi du JS plutot que du PHP pour charger des partials ? Parce que ça permet de ne prendre qu'un hébergement basique qui coûte moins cher.
Modérateur
Salut,

Comment tu t'y prends avec ton JS ? Injectes tu du html dans la page ? Utilises-tu une librairie spécifique ?
Modifié par niuxe (28 Aug 2024 - 17:54)
function includeHtml(selector, file, position) {
	fetch(file)
		.then(response => {
			return response.text()
		})
		.then(data => {
			document.querySelector(selector).insertAdjacentHTML(position, data);
		});
}


Bon après j'utilise divers fichiers JS qui appellent des trucs, mais en gros en bas du DOM je met un :
<script>
	window.onload = function(){
		start_JS_scripts();
	};
</script>

Ce qui appelle une fonction qui réunit tous les trucs que je suis sensé lancer une fois le DOM chargé, dont l'inclusion de partials.
Modifié par CSS-boy (28 Aug 2024 - 18:02)
Ah oui, j'ai oublié de dire : mon <head> est aussi construit grâce à de l'injection JS. Smiley sweatdrop
Ca m'évite d'avoir un header lourd et peu maintenable.

J'utilise un système similaire : 
	
<head>
    ...
    <script src="/_engine/scripts/frontend/normal/_load.js"></script>
	</head>


Puis _load.js : 

function includeScriptsInHead(filePath) {
	const scriptTag = document.createElement("script");
	scriptTag.src = filePath;
	document.head.appendChild(scriptTag);
}
	includeScriptsInHead(js_location+"frontend/normal/includeAllPartials.js"); 
        ...
	includeScriptsInHead(js_location+"frontend/normal/_start.js");


_start.js :
async function start_JS_scripts() {
	await includeAllPartials(); // We import the HTML partials.
        ...
}


J'utilise une fonction async pour notamment utiliser des await pause(1000) normalement inutilisables.
Modérateur
Ton problème est normal et c'est bien ce que je me doutais. Tu injectes du html après le chargement de la page. Ton fichier html n'est qu'une coquille vide dans ce cas. Tu fais ce que l'on appelle du CSR. Or, il faudrait que tu fasses du SSR.

Si tu veux faire du SSR, utlises des outils comme :
- Sveltekit (mais faut savoir utiliser Svelte)
- NuxtJS (mais faut savoir utiliser VueJS)
- NextJS (mais faut savoir utiliser React)

Liens annexes qui peuvent résoudre ton problème de SEO différemment :
- AstroJS (vraiment pas mal)
- AdonisJS (un bon framework JS qui s'inspire de Laravel par certains côtés)
@niuxe Merci pour les réf, mais cependant je n'utilise plus de framework. Ca me demande un temps fou à essayer de comprendre, pour ensuite m'embourber des mois dans des problèmes en cascade car je fais des choses trop compliquées pour les gens normaux. Et déjà que le support est désastreux la plupart du temps, alors en plus les mecs ne pigent pas et me snobent.

Nan mais ok, c'est l'injection évidemment, comme je l'avais dit. Sauf que ma question portait sur le fichier sitemap.
Modifié par CSS-boy (28 Aug 2024 - 18:17)
Modérateur
Alors fais ton application à l'ancienne. Tu peux même utiliser PHP et ensuite, tu te crées un système de génération de pages html statiques. D'ailleurs, tu n'auras pas mieux au niveau des perfs.

Ton système de composants peut être intéressant dans le cas où tu ne souhaites pas qu'il y ait du SEO. Mais attention à l'accessibilité (bien qu'il y ait des progrès depuis JS/Accessiblité).

Même si tu écris dans ton html les liens de ta navbar. Dans le contenu, tu peux ajouter un lien qui ne sera pas répertorié. Donc le sitemap généré sera faux. En plus, tu vas devoir faire les choses plusieurs fois pour arriver à tes fins. Ce qui va être un beau bordel à maintenir et à faire évoluer.

Il ne faut pas oublier qu'avec le client (navigateur), tu es limité

edit: comme je te l'ai indiqué, AstroJS est bien. Il est simple d'utilisation. En outre, il est fait pour les petits et moyens projets.
Modifié par niuxe (28 Aug 2024 - 18:39)
Utiliser PHP en local pour générer les HTML en statique, pas con, je n'y avais pas pensé. C'est effectivement utilisé en distant pour faire du reverse-proxy, si je ne me trompe.

Si je fais un sitemap en XML là de toutes mes pages actuelle avec le JS, ça n'aidera pas les crawlers de Google ? EDIT : Après tout, c'est comme des pages sans liens dedans. Smiley lol
Modifié par CSS-boy (28 Aug 2024 - 18:42)
Modérateur
CSS-boy a écrit :
Utiliser PHP en local pour générer les HTML en statique, pas con,


Mais va falloir te monter un petit moteur pour ça. À ma connaissance, je ne connais pas un tel outil en php. Ce qui n'est pas le cas en python (Django-freeze et Frozen-Flask)

CSS-boy a écrit :
C'est effectivement utilisé en distant pour faire du reverse-proxy,
Tu te trompes. Ça n'a rien à voir. Voici un article parlant du reverse proxy

CSS-boy a écrit :
Si je fais un sitemap en XML là de toutes mes pages actuelle avec le JS, ça n'aidera pas les crawlers de Google ?


Le mieux étant que le sitemap soit généré dynamiquement. Admettons que tu le crées, si ton contenu des pages sont vides, tu n'iras pas bien loin (voir même déclassée puisque tu offres du vide)

Après, tout dépend comment tes pages sont faites. Ce dont je pense, tu veux refaire un moteur de template sans prendre en compte le SEO. Ce qui peut être problématique…

La tendance ReactJS et autres joyeusetés .....
Modifié par niuxe (28 Aug 2024 - 18:55)
Meilleure solution
a écrit :
Admettons que tu le crées, si ton contenu des pages sont vides, tu n'iras pas bien loin (voir même déclassée puisque tu offres du vide)

Ca ne se produira pas. J'ai peu de page sur le projet en question. Je pense donc que je vais essayer le sitemap à la main.

On verra pour plus tard, je mettrai en place un petit moteur PHP comme tu dis.

a écrit :
Ça n'a rien à voir. Voici un article parlant du reverse proxy

Quand j'utilisais le CMS "Grav", il y avait un plugin ("Blackhole" de mémoire) pour pondre les HTML statique. Et il était fait mention de reverse-proxy, comme quoi ça permettait aux reverse-proxy d'avoir des HTML tout préparés pour éviter la surcharge.

Le caching sur reverse-proxy est un truc qui existe. Tu consultes un site => en réalité tu accèdes à la façade qui est le reverse-proxy => et il te donne les HTML statiques mis en cache par le serveur réel derrière lui (qui de temps en temps, si il y a une MAJ des pages par les admins, va regénérer le cache). Ca a été inventé pour améliorer le "temps processeur" et le traffic (dans le sens où les connexions attendent moins le produit final et donc peuvent finir plus vite).

J'espère ne pas dire de grosse connerie. Smiley lol

Merci pour l'échange, je pense que je peux clore le sujet.
Modifié par CSS-boy (28 Aug 2024 - 18:59)
salut,
Ton problème vient du fait que certains crawlers, dont celui de Google, pourraient ne pas exécuter le JavaScript correctement. Pour éviter cela, il est préférable de générer un sitemap statique à la main, garantissant ainsi que toutes tes pages sont bien indexées, malgré ton utilisation de JavaScript.
Prévenir un modérateur
Répondre au sujet
Aller à