Page HTML SEO : structure au top !

Saviez-vous que la structure de votre code HTML peut être aussi cruciale pour votre positionnement sur Google que le contenu lui-même ? En effet, un site web visuellement attrayant ne suffit plus pour se démarquer dans le paysage numérique actuel. Les moteurs de recherche, en particulier Google, accordent une importance croissante à la manière dont votre contenu est organisé et balisé. En tant qu'Agence Web Axiome, nous constatons quotidiennement l'impact d'une structure HTML optimisée sur le référencement de nos clients.

Le référencement, ou SEO (Search Engine Optimization), est devenu un pilier essentiel pour la visibilité en ligne et le succès de toute entreprise. Une bonne stratégie SEO permet d'attirer un trafic qualifié vers votre site web, d'améliorer votre notoriété et, in fine, d'augmenter vos conversions. Mais le SEO ne se limite pas à la création de contenu de qualité ; il englobe également une optimisation technique rigoureuse de votre site web. L'optimisation du code HTML est une étape fondamentale de cette stratégie.

Nous examinerons les éléments HTML indispensables, les meilleures pratiques à adopter et les erreurs à éviter. En comprenant et en appliquant ces principes, vous serez en mesure d'optimiser votre code HTML et d'améliorer significativement votre positionnement dans les résultats de recherche. Axiome vous guide à travers ce processus d'optimisation.

Les éléments HTML indispensables pour le SEO

Pour un référencement optimal, plusieurs éléments HTML sont cruciaux. Ils aident les moteurs de recherche à comprendre le contenu de votre page, à l'indexer correctement et à la classer pertinemment par rapport aux requêtes des utilisateurs. Ignorer ces éléments peut nuire considérablement à votre visibilité en ligne. Une structure HTML optimisée est donc un atout majeur pour tout site web.

<section> <h3>Balise <title> : le titre de la page (le bijou du SEO)</h3> <p> La balise <title> est sans doute l'un des éléments HTML les plus importants pour le SEO. Elle définit le titre de votre page web, qui apparaît dans la barre de titre du navigateur, dans les résultats de recherche (SERP) et sur les réseaux sociaux lors du partage de la page. Un titre bien optimisé peut considérablement augmenter votre taux de clics (CTR). Selon une étude, les pages avec des balises title optimisées peuvent générer jusqu'à 20% de trafic organique en plus. </p> <p> Pour une balise <title> efficace, il est essentiel de respecter certaines bonnes pratiques. La longueur idéale se situe entre 50 et 60 caractères. Il faut intégrer des mots-clés pertinents, placés stratégiquement au début du titre. L'unicité est primordiale : chaque page doit avoir un titre unique, reflétant son contenu spécifique. L'Agence Web Axiome recommande de toujours vérifier l'unicité des balises title via des outils SEO. </p> <p> L'objectif est de rédiger un titre accrocheur, incitant les utilisateurs à cliquer sur votre résultat de recherche plutôt que sur ceux de vos concurrents. Un titre pertinent et attrayant peut faire la différence entre un visiteur et un client potentiel. Évitez les titres dupliqués, trop longs, trop courts ou bourrés de mots-clés (keyword stuffing). L'équilibre est la clé. Une analyse de mots clés est primordiale. </p> <ul> <li> Longueur idéale : 50-60 caractères </li> <li> Utilisation de mots-clés pertinents (au début) </li> <li> Unicité du titre pour chaque page </li> <li> Rendre le titre accrocheur (CTR) </li> </ul> <p> Par exemple, comparons ces deux titres : </p> <ul> <li> <strong> Mauvais exemple : </strong> "Page d'accueil" (trop vague et non optimisé) </li> <li> <strong> Bon exemple : </strong> "Agence Web Axiome - Marketing HTML et Référencement SEO | Experts à Paris" (clair, précis et incluant des mots-clés) </li> </ul> <p> Le second exemple est bien plus susceptible d'attirer l'attention des utilisateurs et d'améliorer votre positionnement sur Google. Le placement stratégique des mots clés comme "Marketing HTML" et "Référencement SEO" améliore sa pertinence aux yeux des moteurs de recherche. L'Agence Web Axiome utilise cette technique pour l'ensemble de ses clients. </p> </section>  <section> <h3>Balises <meta> : les méta-descriptions et les autres (plus que vous ne le pensez)</h3> <p> Les balises <meta> fournissent des informations sur votre page web aux moteurs de recherche et aux navigateurs. Parmi les plus importantes, on retrouve la méta-description, les balises robots et la balise viewport. Chaque balise a un rôle spécifique à jouer dans l'optimisation de votre site web. L'optimisation des balises meta est une spécialité de l'Agence Web Axiome. </p> <section> <h4>Meta description</h4> <p> La méta-description est un court résumé du contenu de votre page, qui apparaît sous le titre dans les résultats de recherche. Bien qu'elle n'influence pas directement le classement, elle joue un rôle crucial dans l'amélioration du CTR. Une méta-description bien rédigée incite les utilisateurs à cliquer sur votre lien plutôt que sur les autres. L'impact de la méta-description sur le CTR peut atteindre 15% selon certaines analyses. </p> <p> La longueur idéale d'une méta-description se situe entre 150 et 160 caractères. Elle doit résumer le contenu de la page de manière claire et concise, inclure un appel à l'action (CTA) et incorporer des mots-clés pertinents. Évitez les méta-descriptions dupliquées, trop longues, trop courtes ou l'absence de méta-description. Les experts d'Axiome recommandent d'utiliser des verbes d'action pour encourager le clic. </p> <p> Considérez ces exemples : </p> <ul> <li> <strong> Mauvais exemple : </strong> "Bienvenue sur notre site web." (trop générique et non informatif) </li> <li> <strong> Bon exemple : </strong> "Agence Web Axiome à Paris : Boostez votre visibilité en ligne avec nos experts SEO, SEA et Social Ads. Obtenez un audit SEO gratuit !" (précis, incluant un CTA et des mots-clés) </li> </ul> <p> Dans le second exemple, la méta description est engageante, elle suscite l'intérêt des visiteurs potentiels en mettant en avant les services proposés par l'agence. Le CTA clair ("Obtenez un audit SEO gratuit!") invite les utilisateurs à interagir et la pertinence des mots clés inclus garantit une meilleure adéquation avec les requêtes des utilisateurs. L'Agence Web Axiome a constaté une augmentation significative du nombre de demandes d'audit suite à l'optimisation de ses méta descriptions. </p> </section> <section> <h4>Meta robots</h4> <p> Les balises meta robots permettent de contrôler l'indexation et le suivi de votre page par les moteurs de recherche. Les attributs les plus couramment utilisés sont "noindex" (empêcher l'indexation) et "" (empêcher le suivi des liens). Ces balises sont particulièrement utiles pour les pages que vous ne souhaitez pas voir apparaître dans les résultats de recherche, telles que les pages de remerciement ou les pages en construction. L'utilisation judicieuse des meta robots peut améliorer l'efficacité de votre crawl budget. </p> <p> Par exemple, vous pourriez utiliser <code> <meta name="robots" content="noindex, "> </code> pour empêcher l'indexation d'une page de remerciement après une inscription à une newsletter. Cela évite de saturer les résultats de recherche avec des pages à faible valeur ajoutée pour les utilisateurs. Axiome recommande de bien réfléchir à l'utilisation de ces balises pour ne pas bloquer l'indexation de pages importantes. </p> </section> <section> <h4>Meta viewport</h4> <p> La balise meta viewport est essentielle pour l'affichage correct de votre site web sur les appareils mobiles. Elle permet de contrôler la façon dont la page est mise à l'échelle et affichée sur différents écrans. L'utilisation de <code> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </code> est fortement recommandée pour garantir une expérience utilisateur optimale sur mobile et s'aligner sur le mobile-first indexing de Google. 54.25% du trafic web mondial est généré par les appareils mobiles, selon Statista (Janvier 2024). </p> </section> </section>  <section> <h3>Balises d'en-tête : <h1> à <h6> (la hiérarchie du contenu)</h3> <p> Les balises d'en-tête (<h1> à <h6>) jouent un rôle essentiel dans la structuration de votre contenu et son optimisation pour les moteurs de recherche. Elles permettent de définir une hiérarchie claire, facilitant la compréhension du contenu par les utilisateurs et les robots d'indexation. Une utilisation appropriée de ces balises contribue à améliorer la lisibilité et le référencement de votre page. Une étude de Moz a révélé que l'optimisation des balises d'en-tête peut améliorer le positionnement d'une page de 10 à 20%. </p> <p> Il est important de respecter certaines règles. N'utilisez qu'une seule balise <h1> par page, contenant le titre principal et le mot-clé principal. Organisez le contenu de manière hiérarchique avec les balises <h2>, <h3> et suivantes, pour les sous-titres et les sections. Intégrez des mots-clés pertinents dans les en-têtes, de manière naturelle et non excessive. Axiome recommande d'utiliser des outils d'analyse de mots clés pour identifier les termes les plus pertinents. </p> <ul> <li> Une seule balise <h1> par page (titre principal) </li> <li> Organisation hiérarchique avec <h2>, <h3>, etc. </li> <li> Mots-clés pertinents dans les en-têtes </li> </ul> <p> Imaginez deux versions d'une même page : </p> <ul> <li> <strong> Version A (sans hiérarchie) : </strong> Tout le texte est formaté avec des balises <p>, sans en-têtes. Les moteurs de recherche ont du mal à identifier les sections principales et les sujets abordés. </li> <li> <strong> Version B (avec hiérarchie) : </strong> Le titre principal est en <h1>, les sous-titres principaux en <h2>, et les sous-sections en <h3>. La structure est claire et facile à comprendre pour les moteurs de recherche, améliorant ainsi le référencement. </li> </ul> <p> Dans la Version B, l'utilisation judicieuse des balises d'en-tête permet aux moteurs de recherche de mieux comprendre le contenu de la page, en identifiant les sujets principaux et les relations entre les différentes sections. Cela favorise un meilleur positionnement dans les résultats de recherche. Axiome utilise cette technique systématiquement pour ses clients. </p> </section>  <section> <h3>Balises de texte : <p>, <strong>, <em>, <ul>, <ol>, <li> (la lisibilité et l'accessibilité)</h3> <p> La structuration du texte à l'aide des balises HTML appropriées est essentielle pour la lisibilité et l'accessibilité de votre site web. Des paragraphes bien définis, une mise en évidence des mots-clés importants et l'utilisation de listes ordonnées ou non ordonnées facilitent la compréhension du contenu par les utilisateurs et les moteurs de recherche. Indirectement, ceci contribue aussi au SEO. Les sites web avec un bon score de lisibilité ont tendance à mieux se positionner sur Google. </p> <p> Adoptez les bonnes pratiques en utilisant des paragraphes courts et aérés pour faciliter la lecture. Mettez en évidence les mots-clés importants avec <strong> (important) et <em> (emphase), mais de manière modérée. Utilisez des listes ordonnées (<ol>) et non ordonnées (<ul>) pour structurer l'information de manière claire et concise. La lisibilité est un critère essentiel pour l'Agence Web Axiome. </p> <ul> <li> Paragraphes courts et aérés </li> <li> Mise en évidence des mots-clés importants (<strong>, <em>) </li> <li> Listes ordonnées (<ol>) et non ordonnées (<ul>) </li> </ul> <p> Si nous analysons deux exemples de contenu textuel : </p> <ul> <li> <strong> Exemple A (texte non structuré) : </strong> Un long bloc de texte sans paragraphes, sans mise en évidence et sans listes. Difficile à lire et à comprendre. </li> <li> <strong> Exemple B (texte structuré) : </strong> Des paragraphes courts, des mots-clés mis en évidence avec <strong>, et des listes à puces pour organiser les informations. Facile à lire et à comprendre. </li> </ul> <p> L'exemple B offre une meilleure expérience utilisateur grâce à une structure claire et une mise en forme soignée. Les moteurs de recherche apprécient également cette clarté, ce qui peut se traduire par un meilleur positionnement. Axiome utilise des outils d'analyse de lisibilité pour optimiser le contenu de ses clients. </p> </section>  <section> <h3>Balises d'images : <img> et l'attribut `alt` (l'optimisation visuelle)</h3> <p> L'intégration d'images pertinentes dans votre contenu améliore l'expérience utilisateur et contribue à l'attrait visuel de votre site web. Cependant, il est essentiel d'optimiser les images pour le SEO, en particulier en utilisant l'attribut `alt` de la balise <img>. Cet attribut permet de décrire le contenu de l'image aux moteurs de recherche et aux utilisateurs malvoyants. L'optimisation des images peut améliorer la vitesse de chargement de votre page de 15 à 25%. </p> <p> Pour optimiser vos images, décrivez précisément le contenu de l'image dans l'attribut `alt`. Utilisez des mots-clés pertinents, mais de manière naturelle et contextuelle. Optimisez la taille et le format des images pour une meilleure performance du site web. Les images trop volumineuses peuvent ralentir le chargement de la page, ce qui nuit à l'expérience utilisateur et au référencement. Axiome utilise des outils de compression d'image pour réduire la taille des fichiers sans perte de qualité. </p> <ul> <li> Description précise du contenu de l'image dans l'attribut `alt` </li> <li> Utilisation de mots-clés pertinents dans l'attribut `alt` </li> <li> Optimisation de la taille et du format des images </li> </ul> <p> Imaginons deux scénarios : </p> <ul> <li> <strong> Scénario A : </strong> Une image d'un paysage avec l'attribut `alt` vide ou contenant des mots-clés sans rapport avec l'image. </li> <li> <strong> Scénario B : </strong> La même image avec l'attribut `alt="Paysage de montagne avec lac turquoise et forêt de pins"`. </li> </ul> <p> Dans le scénario B, l'attribut `alt` décrit précisément le contenu de l'image, ce qui permet aux moteurs de recherche de mieux comprendre le contexte et de l'indexer correctement. De plus, si un utilisateur effectue une recherche d'images avec des mots-clés similaires, l'image a plus de chances d'apparaître dans les résultats de recherche, générant ainsi du trafic vers votre site web. L'attribut `alt` sert de description alternative dans le cas où l'image ne peut être chargée. L'Agence Web Axiome intègre systématiquement un attribut alt pertinent pour chaque image. </p> </section>  <section> <h3>Balises de liens : <a> (le maillage interne et externe)</h3> <p> Les liens, internes et externes, sont des éléments essentiels de la structure de votre site web et jouent un rôle important dans le SEO. Les liens internes aident les moteurs de recherche à explorer et à comprendre la structure de votre site, tandis que les liens externes vers des sources de qualité peuvent améliorer la crédibilité de votre site. Un bon maillage interne peut augmenter le temps passé sur site de 20%. </p> <p> Pour un maillage interne efficace, créez des liens cohérents et pertinents entre les différentes pages de votre site web. Utilisez des textes d'ancrage (anchor text) descriptifs et pertinents. Évitez les liens brisés, qui nuisent à l'expérience utilisateur et au référencement. En ce qui concerne les liens externes, liez vers des sources fiables et pertinentes, en utilisant l'attribut `rel=""` et/ou `rel=""` pour des raisons de sécurité. Évitez d'acheter des liens, car cette pratique est pénalisée par les moteurs de recherche. Axiome suit les guidelines de Google en matière de liens. </p> <ul> <li> Maillage interne cohérent et pertinent </li> <li> Textes d'ancrage descriptifs et pertinents </li> <li> Liens vers des sources fiables et pertinentes (attributs `rel=""` et/ou `rel=""`) </li> </ul> <p> Prenons l'exemple d'un site web traitant de marketing digital : </p> <ul> <li> <strong> Mauvais maillage : </strong> Peu de liens internes, des liens externes vers des sites de faible qualité, des textes d'ancrage génériques ("cliquez ici"). </li> <li> <strong> Bon maillage : </strong> De nombreux liens internes entre les articles de blog, les pages de services et la page d'accueil. Des liens externes vers des sites de référence en marketing digital (blogs reconnus, articles de presse spécialisés). Des textes d'ancrage descriptifs ("Comment optimiser votre SEO", "Nos services de publicité en ligne"). </li> </ul> <p> Un bon maillage interne et externe facilite la navigation pour les utilisateurs et permet aux moteurs de recherche de mieux comprendre le contenu et la structure de votre site web, ce qui se traduit par un meilleur référencement. L'Agence Web Axiome met en place des stratégies de maillage interne et externe pour tous ses clients. </p> </section> </section>  <section> <h2>Structure globale du code HTML : plus qu'une balise, une architecture</h2> <p> Au-delà des balises individuelles, la structure globale du code HTML joue un rôle déterminant dans le référencement. Un code propre, valide et bien organisé facilite l'indexation par les moteurs de recherche et améliore l'accessibilité pour les utilisateurs. Il est donc essentiel de considérer la structure HTML comme une véritable architecture. Axiome insiste sur l'importance de la qualité du code HTML pour un SEO performant. </p> <section> <h3>Balises <head> et <body> : le squelette de la page</h3> <p> Les balises <head> et <body> constituent le squelette de toute page HTML. La balise <head> contient les métadonnées, les liens vers les feuilles de style et les scripts, ainsi que le titre de la page. La balise <body> contient le contenu visible de la page, tel que le texte, les images et les vidéos. Le temps de chargement d'une page est affecté par la qualité du code. </p> <p> Un code propre et valide est essentiel pour faciliter l'indexation par les moteurs de recherche. Les erreurs de syntaxe et les balises mal fermées peuvent perturber l'analyse du contenu et nuire au référencement. Il est donc recommandé d'utiliser un validateur HTML pour vérifier la conformité de votre code aux standards du web. L'Agence Web Axiome utilise des outils de validation HTML pour garantir la qualité du code de ses clients. </p> <p> Un code bien organisé et respectant les normes de validation HTML est un gage de qualité aux yeux des moteurs de recherche, ce qui peut se traduire par un meilleur positionnement dans les résultats de recherche. Un code valide est aussi un code plus facile à maintenir et à faire évoluer. La maintenance du code est un service proposé par Axiome. </p> </section> <section> <h3>Utilisation de schémas de balisage (schema.org)</h3> <p> Les schémas de balisage (Schema.org) sont un ensemble de vocabulaires standardisés qui permettent de structurer les données de votre site web de manière à ce qu'elles soient facilement interprétables par les moteurs de recherche. En utilisant ces schémas, vous pouvez fournir des informations précises sur vos produits, vos services, vos articles, vos événements, etc. L'utilisation des schémas de balisage peut améliorer le CTR de votre site de 10 à 15%. </p> <p> Par exemple, vous pouvez baliser un article de blog avec le schéma "Article" pour indiquer son titre, son auteur, sa date de publication, etc. De même, vous pouvez baliser un produit avec le schéma "Product" pour indiquer son nom, sa description, son prix, sa disponibilité, etc. </p> <p> L'utilisation de schémas de balisage permet aux moteurs de recherche d'afficher des résultats de recherche enrichis (rich snippets), qui sont plus attrayants et informatifs pour les utilisateurs. Cela peut considérablement améliorer votre CTR et attirer un trafic plus qualifié vers votre site web. Ces "Rich snippets" améliorent la visibilité du site web. L'Agence Web Axiome recommande d'utiliser les schémas de balisage pour tous les types de contenu. </p> </section> <section> <h3>Importance de l'ordre des éléments : contenu principal en premier</h3> <p> L'ordre dans lequel les éléments apparaissent dans votre code HTML a également une importance pour le SEO. Il est recommandé de placer le contenu principal de votre page avant les éléments secondaires, tels que la navigation ou la sidebar. Cela permet aux moteurs de recherche d'identifier rapidement le sujet principal de la page et d'indexer le contenu pertinent en priorité. Google accorde plus de poids au contenu situé en haut de la page. </p> <p> La balise <main> permet de délimiter clairement le contenu principal de votre page. En plaçant tout le contenu pertinent à l'intérieur de cette balise, vous facilitez la tâche des moteurs de recherche et améliorez l'accessibilité pour les utilisateurs. L'Agence Web Axiome utilise la balise `main` systématiquement pour ses clients. </p> </section> <section> <h3>Accessibilité web : un SEO inclusif</h3> <p> L'accessibilité web consiste à rendre votre site web utilisable par tous, y compris les personnes handicapées. Cela implique de respecter les normes d'accessibilité, telles que les WCAG (Web Content Accessibility Guidelines), et d'utiliser des techniques d'accessibilité, telles que les attributs ARIA (Accessible Rich Internet Applications). Un site accessible est un site qui respecte les droits fondamentaux des personnes handicapées. </p> <p> L'accessibilité web n'est pas seulement une question d'éthique, c'est aussi un facteur important pour le SEO. Les moteurs de recherche favorisent les sites web accessibles, car ils offrent une meilleure expérience utilisateur à tous les visiteurs. De plus, un site web accessible est souvent mieux structuré et plus facile à indexer, ce qui se traduit par un meilleur positionnement dans les résultats de recherche. L'accessibilité web est une priorité pour l'Agence Web Axiome. </p> <p> Pour améliorer l'accessibilité de votre site web, vous pouvez notamment ajouter des alternatives textuelles aux images, utiliser des contrastes de couleurs suffisants, structurer votre contenu avec des balises HTML sémantiques, et rendre votre site web navigable au clavier. En investissant dans l'accessibilité, vous améliorez non seulement l'expérience utilisateur pour tous les visiteurs, mais vous optimisez également votre site web pour le SEO. 75% des personnes handicapées quittent un site web inaccessible, selon une étude récente. </p> </section> </section>  <section> <h2>Outils pour vérifier et optimiser la structure HTML pour le SEO</h2> <p> De nombreux outils sont disponibles pour vous aider à vérifier et à optimiser la structure HTML de votre site web pour le SEO. Ces outils vous permettent d'identifier les erreurs de syntaxe, les problèmes d'accessibilité, les balises manquantes et les autres éléments qui peuvent nuire à votre référencement. Il est essentiel d'utiliser ces outils de manière régulière pour maintenir un site web performant. </p> <ul> <li> <strong> Validateurs HTML : </strong> W3C Markup Validation Service, etc. </li> <li> <strong> Analyseurs SEO : </strong> Google Search Console, Lighthouse, outils d'analyse de mots-clés, etc. </li> <li> <strong> Chrome DevTools : </strong> Pour inspecter et déboguer le code HTML. </li> <li> <strong> Outils d'accessibilité : </strong> WAVE, Axe, etc. </li> </ul> <p> En utilisant ces outils de manière régulière, vous pouvez vous assurer que votre code HTML est propre, valide et optimisé pour le SEO, ce qui vous permettra d'améliorer votre visibilité en ligne et d'attirer un trafic plus qualifié vers votre site web. L'Agence Web Axiome utilise une combinaison de ces outils pour garantir la qualité du code de ses clients. </p> </section> </main> <div class="row nav-post-cat"><div class="col-6"><a href="https://www.formation-referencement.org/guide-complet-pour-l-achat-d-un-nom-de-domaine-adapte-a-votre-activite/"><i class="fa fa-arrow-left" aria-hidden="true"></i>Guide complet pour l’achat d’un nom de domaine adapté à votre activité</a></div><div class="col-6"><a href="https://www.formation-referencement.org/assurer-la-typography-consistency-a-travers-votre-site-web/"><i class="fa fa-arrow-left" aria-hidden="true"></i>Assurer la typography consistency à travers votre site web</a></div></div> </div> </div> <div class="col-md-3 col-xs-12 col-lg-3"> <div class="sidebar"> <div class="widget-area"> <div class="widget_sidebar"><div class="so-widget-sow-headline so-widget-sow-headline-default-a4c3326087be" ><div class="sow-headline-container "> <p class="sow-headline"> Stratégie référencement </p> <p class="sow-sub-headline"> Pour optimiser votre stratégie de référencement, vous pouvez respecter plusieurs étapes : définir vos objectifs, identifiez vos cibles, choisir les bons mots-clés, mesurer les résultats, produire du contenu pertinent… </p> </div> </div></div><div class="widget_sidebar"><div class="so-widget-sow-headline so-widget-sow-headline-default-a4c3326087be" ><div class="sow-headline-container "> <p class="sow-headline"> Outils & logiciels SEO </p> <p class="sow-sub-headline"> Améliorez votre référencement organique en ayant recours à des outils capables de trouver les bons mots-clés pour vos sites. Les logiciels SEO permettent aussi d’auditer vos concurrents ou votre site. </p> </div> </div></div><div class="widget_sidebar"><div class="so-widget-sow-headline so-widget-sow-headline-default-a4c3326087be" ><div class="sow-headline-container "> <p class="sow-headline"> Création de contenus </p> <p class="sow-sub-headline"> Utilisez un outil de création de contenus pour vous aider à vous démarquer de la concurrence et à booster votre trafic. Certains programmes sont conçus pour concevoir des contenus visuels et les embellir. </p> </div> </div></div> <style> .nav-post-cat .col-6 i{ display: inline-block; position: absolute; } .nav-post-cat .col-6 a{ position: relative; } .nav-post-cat .col-6:nth-child(1) a{ padding-left: 18px; float: left; } .nav-post-cat .col-6:nth-child(1) i{ left: 0; } .nav-post-cat .col-6:nth-child(2) a{ padding-right: 18px; float: right; } .nav-post-cat .col-6:nth-child(2) i{ transform: rotate(180deg); right: 0; } .nav-post-cat .col-6:nth-child(2){ text-align: right; } </style> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $( ".blog-post-content img" ).on( "click", function() { var url_img = $(this).attr('src'); $('.img-fullscreen').html("<div><img src='"+url_img+"'></div>"); $('.img-fullscreen').fadeIn(); }); $('.img-fullscreen').on( "click", function() { $(this).empty(); $('.img-fullscreen').hide(); }); }); </script> </div> </div> </div> <footer style="background-color:#131313"> <div class="container widgets"> <div class="row"> <div class="col-md-3 col-xs-12"> <div class="widget_footer"> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="170" height="60" src="https://www.formation-referencement.org/wp-content/uploads/2023/03/formation-referencement2.png" alt="" class="wp-image-210"/></figure> </div><div class="widget_footer"><div class="so-widget-sow-headline so-widget-sow-headline-default-071adb2da207" ><div class="sow-headline-container "> <p class="sow-sub-headline"> La stratégie SEO s’occupe du trafic de recherche, des positions de l’attraction du public cible. Pour développer une stratégie SEO, vous devez déterminer des objectifs principaux. </p> </div> </div></div></div> <div class="col-md-3 col-xs-12"> <div class="widget_footer"><div class="so-widget-sow-headline so-widget-sow-headline-default-4a5d00d287e0" ><div class="sow-headline-container "> <p class="sow-headline"> Formation </p> </div> </div></div><div class="widget_footer"><ul class="menu-deux"> <li>Référencement payant </li> <li>Référencement organique</li> <li>Trafic organique </li> <li>Offre de formation</li> <li>Performance digitale </li> </ul></div></div> <div class="col-md-3 col-xs-12"> <div class="widget_footer"><div class="so-widget-sow-headline so-widget-sow-headline-default-4a5d00d287e0" ><div class="sow-headline-container "> <p class="sow-headline"> Stratégie digitale </p> </div> </div></div><div class="widget_footer"><ul class="menu-deux"> <li>Définir votre budget </li> <li>Définir vos objectifs</li> <li>Audit de la concurrence </li> <li>Audit du marché</li> <li>Stratégie de communication </li> </ul></div></div> <div class="col-md-3 col-xs-12"> <div class="widget_footer"><div class="so-widget-sow-headline so-widget-sow-headline-default-6f4dacd4cb6d" ><div class="sow-headline-container "> <p class="sow-headline"> SEO & référencement </p> <p class="sow-sub-headline"> Le référencement organique est l’ensemble des actions permettant de rendre visible un site Internet dans les résultats des SERP. </p> </div> </div></div></div> </div> </div> <div class='copyright'> <div class='container'> <div class='row'><div class='col-12'> Gestion de contenu. </div> </div> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/factory-templates-3\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <p class="text-center" style="margin-bottom: 0px"><a href="/plan-du-site/">Plan du site</a></p><script type="text/javascript" src="https://www.formation-referencement.org/wp-content/themes/factory-templates-3/js/bootstrap.min.js" id="bootstrap4-js"></script> <script type="text/javascript" src="https://www.formation-referencement.org/wp-content/themes/factory-templates-3/js/aos.js" id="aos-js"></script> <script type="text/javascript" src="https://www.formation-referencement.org/wp-content/themes/factory-templates-3/js/rellax.min.js" id="rellax-js"></script> <script type="text/javascript" src="https://www.formation-referencement.org/wp-content/themes/factory-templates-3/js/default_script.js" id="default_script-js"></script> <script type="text/javascript"> jQuery('.remove-margin-bottom').parent(".so-panel").css("margin-bottom","0px"); let calcScrollValue = () => { let scrollProgress = document.getElementById("progress"); let progressValue = document.getElementById("back_to_top"); let pos = document.documentElement.scrollTop; let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrollValue = Math.round((pos * 100) / calcHeight); if (pos > 500) { progressValue.style.display = "grid"; } else { progressValue.style.display = "none"; } scrollProgress.addEventListener("click", () => { document.documentElement.scrollTop = 0; }); scrollProgress.style.background = `conic-gradient( ${scrollValue}%, #fff ${scrollValue}%)`; }; window.onscroll = calcScrollValue; window.onload = calcScrollValue; </script> <script type="text/javascript"> var nav = jQuery('.main-menu:not(.creative-menu-open)'); var menu_height = jQuery(".main-menu").height(); jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 125) { nav.addClass("fixed-menu"); jQuery(".main-menu").addClass("scrolling-down"); jQuery("#before-menu").css("height",menu_height); setTimeout(function(){ jQuery('.fixed-menu').css("top", "0"); },600) } else { jQuery(".main-menu").removeClass("scrolling-down"); nav.removeClass("fixed-menu"); jQuery("#before-menu").css("height","0px"); jQuery('.fixed-menu').css("top", "-200px"); nav.attr('style', ''); } }); </script> <script type="text/javascript"> AOS.init({ once: true, }); </script> <div class="img-fullscreen"></div> </body> </html>

Structure d’une page html : éléments clés pour le référencement

Les éléments HTML indispensables pour le SEO