Les deux révisions précédentes Révision précédente | |
procedures:sinp-aura:tutoriels:cms:wp_elementor [2025/07/25 09:12] – dmaillard | procedures:sinp-aura:tutoriels:cms:wp_elementor [2025/07/25 09:22] (Version actuelle) – [Bonnes pratiques pour la construction des contenus : une rigueur obligatoire !] dmaillard |
---|
===== Bonnes pratiques pour la construction des contenus : une rigueur obligatoire ! ===== | ===== Bonnes pratiques pour la construction des contenus : une rigueur obligatoire ! ===== |
| |
=== Référencement et handicap : une même approche === | === Référencement et handicap : des besoins similaires === |
Les outils de référencement et d'accessibilité ont un point commun important pour nous. Techniquement, les deux reposent sur une machine qui analyse le code source de la page (et pas ce qui apparait à l'écran), pour interpréter et restituer des informations clés de la page. | Les outils de référencement et d'accessibilité ont un point commun important pour nous. Techniquement, les deux reposent sur **une machine qui analyse le code source de la page** (et pas ce qui apparait à l'écran), pour interpréter et restituer des informations clés de la page. |
| |
Cela présente un avantage pour nous : en optimisant notre manière de construire les pages, Elementor optimisera le code source, et nos bonnes pratiques amélioreront de concert le référencement du contenu et son accessibilité aux publics invalides. | Cela présente un avantage pour nous : en optimisant notre manière de construire les pages, Elementor optimisera le code source, et nos bonnes pratiques amélioreront de concert le référencement du contenu et son accessibilité aux publics invalides. |
=== Renseigner correctement ses médias === | === Renseigner correctement ses médias === |
Lorsque vous chargez un média, il est nécessaire de **renseigner ses métadonnées : titre et texte alternatif sont obligatoires**. | Lorsque vous chargez un média, il est nécessaire de **renseigner ses métadonnées : titre et texte alternatif sont obligatoires**. |
Ces deux champs sont restitués dans le code source pour aider les machines à comprendre ce que représente l'image affichée. Si ces champs ne sont pas renseignés, les machines savent qu'il y a une image mais n'ont aucune notion de ce qu'elle représente. | Ces deux champs sont restitués dans le code source pour aider les machines à comprendre ce que représente l'image affichée. Sans ces informations, les machines savent qu'il y a une image mais n'ont aucune notion de ce qu'elle représente. |
| |
C'est également un bon moyen d'augmenter les mots-clés qui pourront être trouvées au sein de la page, sans forcément apparaitre textuellement. | C'est également un bon outil pour augmenter les mots-clés présents dans le code source de la page, sans forcément apparaitre textuellement. |
| |
=== Utiliser le bon widget === | === Utiliser le bon widget === |
Dans Elementor (et dans les langages qui codent les sites internet en général), il est possible d'obtenir le même rendu visuel par plusieurs moyens. Par exemple, visuellement, on peut créer du texte qui ressemble à un titre (taille de police, couleur, centré etc.). Mais le rendu visuel ne suffit pas, un code source pertinent est indispensable pour que la page soit correctement chargée, interprétée pour le référencement, et adaptée par les outils d'accessibilité. Or un titre et un texte ne sont pas codés et interprétés de la même manière : pour les machines, un gros texte violet n'est qu'un gros texte violet, pas un titre ! | Dans Elementor (et dans les langages qui codent les sites internet en général), il est possible d'obtenir le même rendu visuel par plusieurs moyens. Par exemple, visuellement, on peut créer un gros texte violet qui ressemble à un titre. Mais pour les machines, |
| |
Même si Elementor nous permet de ne pas coder (il le fait à notre place), l'outil a besoin de disposer des bonnes informations pour coder le plus correctement possible. Ainsi, le widget "Titre" insèrera une balise "titre" au bon endroit et avec différents niveaux de titres possibles (voir ci-dessous), tandis qu'un widget texte créera un simple paragraphe. De la même manière, un widget "éditeur de texte" nous permet d'inclure un média dans le texte, mais le code sera différent si vous procédez de manière optimale,en utilisant un widget texte, un widget image, puis un widget texte (dans ce cas, l'image ne sera pas intégrée d'abord comme un paragraphe, et vous aurez tous les outils nécessaires pour gérer la taille du média, sa position, etc.). | Même si Elementor nous permet de ne pas coder (il le fait à notre place), l'outil a besoin de disposer des bonnes informations pour coder le plus correctement possible. Ainsi, le widget "Titre" insèrera une balise "titre" au bon endroit et avec différents niveaux de titres possibles (voir ci-dessous), tandis qu'un widget texte créera un simple paragraphe. De la même manière, un widget "éditeur de texte" nous permet d'inclure un média dans le texte, mais le code sera différent si vous procédez de manière optimale,en utilisant un widget texte, un widget image, puis un widget texte (dans ce cas, l'image ne sera pas intégrée d'abord comme un paragraphe, et vous aurez tous les outils nécessaires pour gérer la taille du média, sa position, etc.). |