Mettre un texte en bas du site en le gardant en haut dans le code source

Je n’avais pas prévu de faire cette publication mais suite à une question de @Darkmoule sur le forum Scripts-SEO je me suis dit que cela pouvait être utile à d’autres.

La question de @Darkmoule était la suivante :

Savez-vous comment charger la balise H1 et du texte SEO en premier dans le code source mais avec affichage en bas de page pour les visiteurs grâce à l’utilisation du flex CSS ?

@Darkmoule membre du forum Scripts SEO

Il est vrai que pour ranker il nous faut du contenu et idéalement dans les premières lignes du <body>. Mais nous n’avons pas toujours l’envie ou la possibilité de coller un texte de 1500 mots dès le début.

L’astuce consiste donc à utilise les Flexbox pour laisser le texte SEO dans le haut du code source, mais en le positionnant en bas du site.

<div class="parent">
<div class="text-seo">
    <h1>Title H1</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia ex quisquam voluptatem molestiae, laboriosam repudiandae blanditiis inventore sed corrupti,...<p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia ex quisquam voluptatem molestiae, laboriosam repudiandae blanditiis inventore sed corrupti,...<p>
</div>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis reiciendis excepturi sed officiis molestias explicabo nobis aperiam, deleniti voluptas magni asperiores numquam vero porro neque ea dolorum. Quaerat, excepturi fugiat!</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis reiciendis excepturi sed officiis molestias explicabo nobis aperiam, deleniti voluptas magni asperiores numquam vero porro neque ea dolorum. Quaerat, excepturi fugiat!</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis reiciendis excepturi sed officiis molestias explicabo nobis aperiam, deleniti voluptas magni asperiores numquam vero porro neque ea dolorum. Quaerat, excepturi fugiat!</p>

J’ai créé une div ayant la classe text-seo. C’est le contenu que nous souhaitons laisser en haut du code source. Mais dont la visibilité aux yeux de tous sera en bas du site.

Dans votre feuille de style ajoutez ceci :

.parent{display:flex}
.text-seo{order :1 }
 

Par défaut order est à 0. Donc si vous n’attribuez pas d’autres order vous pouvez le laisser à 1. Si toutefois, vous ajouter d’autres order, mettez la valeur la plus haute pour mettre .text-seo en dernier.

Mettre un texte en bas de page en JavaScript

Même problème, autre solution. Si pour quelque raison que ce soit vous n’utilisez pas les Flexbox sur votre site, il pourra être utile d’utiliser JavaScript comme alternative.

const myParent = document.querySelector('.parent')
const textSeo = document.querySelector('.text-seo')

if(textSeo == myParent.firstElementChild){
    myParent.appendChild(textSeo)
}

Explication rapide : je déclare mes deux constantes, le parent (myParent) et l’enfant (textSeo).

J’utilise une condition dans laquelle je vérifie si textSeo est le premier enfant de myParent. Si oui, alors positionne le à la fin.

Si vous avez d’autres techniques, je suis preneur 🙂

3 personnes a recommandé cet article

Laisser un commentaire