Stratégies de croissance pour les éditeurs en période électorale | WEBINAIRE
Stratégies de croissance pour les éditeurs en période électorale | WEBINAIRE
Après avoir consulté ce guide, vous devriez être en mesure de comprendre comment les articles de presse existants sont modifiés et créés à l'aide de mises en page qui améliorent la capacité de Google à explorer et à comprendre le contenu de la page.
Durée de la vidéo
15:35
Répondre au quiz
Répondez au questionnaire du module actuel
Matériels
Modèles prêts à l'emploi
Ressources
Rapports et ressources
2.1.1 Qu'est-ce que la conception et la mise en page ?
La conception et la mise en page de votre site déterminent son apparence pour l'utilisateur final. C'est important car Google privilégie avant tout l'expérience utilisateur. Les pages web qui répondent aux besoins de l'utilisateur de manière simple, rapide et efficace sont mieux classées dans les résultats de recherche.
La conception et la mise en page de votre site déterminent également la facilité avec laquelle les robots d'exploration, comme celui de Google, peuvent l'explorer et l'indexer. Une conception et une mise en page simples et optimisées garantissent une exploration rapide et aisée, ce qui se traduit par un meilleur référencement.
Qu’est-ce qui empêche donc les éditeurs d’appliquer les meilleures pratiques de conception et de mise en page ? Le plus souvent, ils se heurtent aux difficultés suivantes :
Pour répondre à cette question, nous avons effectué une simple recherche Google en saisissant les mots-clés « Charlie Puth News » dans la barre de recherche.
Voici les résultats de la recherche :
En deuxième position du classement des articles les plus consultés (SERP), juste au-dessus d'un article de NME, se trouve l'article du Daily Illini sur la dernière sortie de Charlie Puth.
Le fait que le Daily Illini, un journal étudiant universitaire, soit mieux classé que le plus grand site web musical indépendant au monde soulève d'importantes questions
Comment un journal étudiant d'une petite ville du Midwest américain d'environ 40 000 habitants peut-il surpasser le plus grand site d'actualités musicales au monde ? Intrigués, nous décidons d'enquêter un peu plus.
Nous avons d'abord consulté la page du NME consacrée à Charlie Puth.
Dès le premier coup d'œil, on remarque la vidéo qui tente de se charger en bas à droite de l'écran. Le chargement est visiblement très lent. La vidéo en cours de chargement masque également une partie du titre et du texte de l'article.
Ensuite, on remarque que la zone d'affichage initiale est principalement occupée par des éléments sans rapport avec l'article. Une grande bannière publicitaire couvre environ la moitié de la page, et bien sûr, il y a la vidéo.
En effet, en faisant défiler la page, on découvre davantage de vidéos, d'images de grande taille et de haute qualité, de publicités contextuelles et de nombreux liens hypertextes. Compte tenu de la richesse multimédia de la page, il n'est pas surprenant qu'elle ait mis un certain temps à se charger.
Nous avons ensuite examiné le Daily Illini et voici ce que nous avons trouvé.
La page est claire, nette et épurée. Elle contient quelques publicités et un bouton « Faire un don » bien visible en haut, mais aucune vidéo ni fenêtre contextuelle ne masque l'écran ni le titre de l'article. Ce dernier est immédiatement visible, et il est fort probable que le robot d'exploration de Google l'affiche également.
Dans l'ensemble, la page est légère, minimaliste et se charge à la vitesse de l'éclair.
Nous avons décidé d'examiner de plus près le code source. En cliquant avec le bouton droit sur la page et en sélectionnant « Afficher la source » (sous Chrome), nous pouvons voir le code de la page.
Voici ce que nous avons vu sur la page NME :
Deux choses ont retenu notre attention :
Ce n'est pas la meilleure chose à mettre en page pour deux raisons :
En revanche, en examinant le code de la page Daily Illini, nous avons constaté ceci :
Il s'agit d'un code HTML très simple. De plus, aucun script n'est exécuté à l'intérieur.<head> section.
Comment tout cela explique-t-il que le Daily Illini soit mieux classé que le NME ?
Plusieurs facteurs entrent probablement en jeu, notamment le design et la mise en page. La page Daily Illini utilise certaines techniques de design et de mise en page que même les petits éditeurs peuvent facilement reproduire pour optimiser leur stratégie SEO globale.
Cela inclut l'utilisation d'un code HTML propre et simple, l'absence de scripts dans l'en-tête, le maintien d'une page légère et rapide à charger, et une utilisation modérée des pop-ups et des publicités interstitielles.
Le guide ci-dessous examine chacun de ces points en détail, tout en expliquant plusieurs autres techniques que vous pouvez mettre en œuvre pour améliorer significativement votre positionnement dans les SERP.
La sémantique concerne le sens des mots. Les balises HTML sémantiques sont celles qui définissent clairement leur signification, tant pour le lecteur que pour un robot d'exploration du Web.
Par exemple, lorsque nous utilisons une balise comme<header> , nous savons ce qu'il contient — des informations sur l'en-tête.
De la même manière<h1> est une balise sémantique qui indique à Googlebot que ce qui suit est le titre le plus important de l'article.
En revanche, lorsque nous utilisons une balise comme<div> Sa signification n'est pas immédiatement évidente. En HTML<div> Le symbole « division » indique simplement le début d'une nouvelle section de code, sans pour autant révéler d'informations sur son contenu.
Les robots d'exploration du Web, comme Googlebot, sont conçus à l'aide d'intelligence artificielle et d'algorithmes d'apprentissage automatique qui tentent de simuler le fonctionnement du cerveau humain. Autrement dit, ils interprètent les textes de manière très similaire au cerveau humain.
Un code HTML facile à comprendre pour les humains doit également être facile à comprendre pour le robot d'exploration Web de Google.
Prenons comme exemple les deux extraits de code HTML ci-dessous :
Source : https://www.pluralsight.com/guides/semantic-html
Cette page utilise<div> Chaque élément, de l'en-tête au pied de page en passant par le contenu principal, utilise une balise <a>. Le contenu de ces balises n'est pas immédiatement évident à première vue.
En revanche, la page ci-dessous utilise un balisage sémantique. L'en-tête est placé à l'intérieur du<header> balise, le pied de page à l'intérieur de<footer> balise, et le corps principal de l'article se trouve à l'intérieur de<main> étiqueter.
Source : https://www.pluralsight.com/guides/semantic-html
Comme cette page est facile à lire et à comprendre pour Googlebot, elle a plus de chances d'être mieux classée que la précédente, toutes choses égales par ailleurs.
Pour vérifier si votre page utilise un balisage sémantique, faites un clic droit dessus si vous utilisez Google Chrome, puis cliquez sur « Inspecter ». Vous pourrez alors consulter le code source HTML de la page. Parmi les éléments sémantiques courants, on trouve :<author> ,<video> ,<article> ,<form> ,<header> , etc.
Nous savons maintenant ce qu'est le balisage sémantique et pourquoi il est important. Mais comment l'utiliser pour améliorer le référencement ?
C'est simple : utilisez toujours le balisage sémantique pour mettre en évidence les informations importantes concernant la conception et la mise en page de votre article. Cela inclut les informations suivantes :
Assurez-vous que la mise en page de votre page est bien organisée pour améliorer l'exploration par les moteurs de recherche
Vous concevez votre site pour qu'il soit lu à la fois par des humains et par des robots d'exploration du Web et, par conséquent, sa conception et sa mise en page doivent refléter ce fait.
Vous trouverez ci-dessous quelques conseils pour vous aider à obtenir des résultats mesurables pour votre site web.
Vous pouvez utiliser HTML, CSS, JavaScript ou tout autre langage front-end pour créer des pages riches et interactives. Toutefois, n'oubliez pas que plus le langage est avancé, plus il est complexe et plus il risque d'être difficile à lire, à interpréter et à compiler pour les robots d'exploration web.
Tout code HTML n'est peut-être pas le plus esthétique, mais il se chargera plus rapidement et sera mieux optimisé pour les moteurs de recherche, tout simplement parce que ces derniers peuvent le lire et le comprendre plus vite.
Considérez le HTML brut comme la structure de base de votre page web. Vous pouvez y ajouter du CSS et du JavaScript pour l'étoffer et la rendre plus esthétique et dynamique, mais il est préférable de conserver le contenu le plus important dans cette structure plutôt que de l'intégrer directement dans le code.
Alors, comment implémenter du HTML simple ? Une méthode simple consiste à placer le corps principal de votre contenu dans…<article> Balises HTML.
Ainsi, lorsque les robots d'exploration Web rencontrent le<article> Grâce à cette balise, les moteurs de recherche savent immédiatement que le contenu qui suit est le plus important de votre page : l’article. Cela leur permet de comprendre que le contenu inclus dans cette balise mérite une attention particulière.
HTML simple<article> Une étiquette est un marqueur sémantique qui ressemble à ceci :
Source : https://en.wikipedia.org/wiki/Article_element
La question suivante s'impose : si j'utilise un CMS comme WordPress, où dois-je insérer ces balises ?
Comment procéder : Si vous créez un site web personnalisé en HTML, vous pouvez vérifier le code source pour vous assurer qu’il utilise du HTML simple, notamment dans les zones critiques. Nous vous conseillons d’en discuter plus en détail avec un développeur afin d’éviter toute altération accidentelle des fonctionnalités.
Si vous utilisez WordPress, consultez ce guide . Ce guide sur l'insertion de code HTML dans les articles et les pages pourrait également vous être utile.
Ces instructions concernent WordPress, car WordPress reste le CMS le plus populaire auprès des éditeurs. Si vous utilisez un autre CMS comme Wix, veuillez consulter la page d'assistance ou la documentation de votre CMS.
Si vous avez accès à une équipe de développeurs web, il est préférable de leur confier cette tâche, car la modification du code HTML peut prendre beaucoup de temps.
Vérifiez que votre contenu s'affiche correctement sur tous les navigateurs, appareils et tailles d'écran. Ce point, bien qu'évident, est souvent négligé. Un contenu qui ne s'affiche pas correctement sur tous les navigateurs et appareils aura un impact négatif sur l'expérience utilisateur et, à terme, sur votre positionnement dans les résultats de recherche.
Comment procéder : Pour tester le contenu sur différentes plateformes, vous devez ouvrir votre page sur différents appareils et dans différents navigateurs afin de voir comment elle s’affiche.
Vous devriez au minimum vérifier les points suivants :
Le balisage HTML permet de mettre en évidence les différents éléments de votre page. Les données structurées aident les moteurs de recherche à lire le contenu de ces éléments et à mieux comprendre sa structure.
Les données structurées sont simplement une série d'instructions écrites dans un langage simple, comme JSON-LD, qui peuvent être insérées dans le code HTML existant de votre page web. On peut les comparer à une méta-description, mais pour chaque élément de contenu de votre page.
Dans l'exemple ci-dessous, les données structurées aident Google à identifier cinq attributs concernant une page dbpedia sur John Lennon :
Source : https://json-ld.org/
Comme vous pouvez le constater, le code est rédigé dans un langage simple, facile à comprendre aussi bien pour un lecteur humain que pour un robot d'exploration du Web.
Voici un autre exemple montrant comment les données structurées s'intègrent parfaitement au code HTML existant de votre page web. Les instructions relatives aux données structurées sont surlignées en vert.
Source : developers.google.com
Dans cet exemple, les données structurées indiquent à Googlebot qu'il s'agit d'une page de recette de gâteau au café d'une certaine Mary Stone.
L'utilisation de données structurées dans la mise en page de votre site web produit des résultats mesurables. Par exemple, elle peut augmenter le taux de clics (CTR) d'un site web jusqu'à 30 %.
L'utilisation de données structurées contribue également à un meilleur classement de votre page dans les carrousels, les extraits optimisés, les vidéos et les panneaux de connaissances de Google.
Pour le référencement Google Actualités, il est important d'inclure les éléments suivants lors de la création de données structurées afin d'apporter une valeur ajoutée :
Comment procéder : Vous pouvez ajouter des données structurées/un schéma à votre contenu, soit manuellement, soit à l’aide d’un plugin pour votre CMS.
Tous les éléments de votre article doivent être agencés dans un ordre précis afin de faciliter et d'accélérer son indexation par les moteurs de recherche. Cet ordre est le suivant :
L'expérience utilisateur sur une page web mesure la façon dont les utilisateurs la perçoivent. Google utilise un ensemble de paramètres pour la quantifier. Nous avons consacré un module entier aux facteurs d'expérience utilisateur , nous ne les aborderons donc que brièvement ici.
Comment procéder : Vous pouvez tester l’expérience utilisateur de votre page manuellement ou à l’aide d’extensions ou d’applications tierces. Par exemple, PageSpeed Insights est un outil pratique qui vous aide à analyser les performances de votre site en fonction du CWV et d’autres paramètres, et attribue un score selon son analyse. Il teste également la compatibilité avec les appareils mobiles et les ordinateurs.
Les éditeurs de presse ne doivent pas publier plusieurs articles sous la même URL. Cela empêchera Google de les indexer. Chaque article doit avoir sa propre URL unique.
De plus, ces URL doivent être permanentes. Autrement dit, le même article doit être affiché à une URL donnée. Si l'article associé à une URL change fréquemment, Google ne pourra pas l'explorer ni l'indexer. Les éditeurs doivent donc mettre à jour l'article aussi souvent que nécessaire.
Si des redirections doivent être utilisées pour les articles d'actualité, elles doivent être mises en œuvre conformément aux bonnes pratiques suivantes :
Bien que les actions énumérées dans cette section ne soient pas aussi importantes que celles mentionnées ci-dessus, nous recommandons tout de même d'en mettre en œuvre autant que possible une fois que les points critiques de la mission énumérés ci-dessus auront été traités.
Le<head> L'élément <meta> d'une page contient des informations importantes qui ne sont pas affichées directement. Il s'agit de métadonnées qui aident Googlebot à identifier le contenu de la page et à la classer.
En règle générale,<head> L'élément doit contenir uniquement les balises les plus importantes, afin qu'un article puisse être indexé et affiché correctement. Ces balises incluent :
Tout autre élément contenu dans le<head> Cet élément est susceptible de perturber les robots d'exploration du Web.
Par exemple, il est fréquent que les novices confondent la balise titre avec<h1> et placer ce dernier à l'intérieur du<head> l'élément. Comme expliqué précédemment, le<head> L'élément ne peut contenir que des métadonnées qui ne sont pas affichées sur la page.
Même si le titre et<h1> Elles devraient contenir essentiellement les mêmes informations ; les premières sont des métadonnées destinées aux robots d’exploration du Web et à être affichées dans les résultats de la SERP et dans l’onglet du navigateur, tandis que les secondes sont des informations à afficher sur la page.
Le code ci-dessous montre comment placer le titre à l'intérieur du<head> élément.
Source : developer.mozilla.org
L'utilisation d'éléments de page qui facilitent la lecture du contenu et offrent une navigation fluide à l'utilisateur a également un impact sur le référencement naturel.
Une page facile à naviguer contiendra les éléments suivants :
À moins d'être un développeur web chevronné, il est préférable de consulter un expert sur la meilleure façon de mettre en œuvre une expérience utilisateur conviviale.
Google souhaite que les éditeurs diffusent des publicités sans perturber l'expérience utilisateur. C'est pourquoi il peut pénaliser les sites web qui affichent trop de publicités intrusives. Bien que l'expérience utilisateur soit subjective, Google a établi des recommandations et des bonnes pratiques en matière de publicité.
Certains d'entre eux concernent :
Pour en savoir plus sur les publicités et les fenêtres contextuelles, consultez notre module détaillé .
JavaScript est idéal pour créer du contenu dynamique et interactif, mais les robots d'exploration du Web peuvent avoir des difficultés à l'afficher.
C'est parce que :
Dans les articles d'actualité, il est recommandé d'éviter les interruptions telles que les carrousels d'articles connexes ou les galeries d'images.
De nombreux éditeurs performants s'inquiètent lors de la refonte de leur site, car cela oblige Google à le réindexer. Suivez ces bonnes pratiques pour assurer une transition en douceur après la refonte :
Veillez à ce que vos pages d'articles soient aussi légères que possible. Nous avons déjà évoqué l'importance d'éviter le JavaScript dans les articles, mais il est également recommandé d'éviter un contenu HTML trop lourd.
En effet, lors de sa première exploration d'une page, Googlebot ne peut télécharger que 15 Mo de données. Pour la plupart des pages, cela ne pose pas de problème majeur, car les éléments volumineux tels que les vidéos et les images sont référencés séparément dans le code que Googlebot indexe ultérieurement, et ne sont donc pas concernés par cette limite de 15 Mo.
Cependant, cela confirme une fois de plus que plus votre page est légère, plus il sera facile pour Googlebot de l'explorer et de l'indexer.
Astuce : Pour vérifier la taille de votre page, accédez aux outils de développement de votre navigateur, puis à l’onglet Réseau et rechargez la page. Vous verrez alors toutes les requêtes effectuées par votre navigateur pour afficher la page. La première requête de cette liste indique la taille de votre page dans la colonne Taille. Pour la plupart des pages web, cette valeur est généralement exprimée en kilo-octets.
Les extraits d'articles permettent aux lecteurs d'avoir un aperçu du contenu de la page avant même de cliquer dessus. Google détermine l'extrait correspondant à chaque article en analysant le texte situé juste en dessous du titre, dans le corps principal de l'article.
Pour éviter que Googlebot n'inclue des extraits incorrects, assurez-vous que :
Il arrive parfois que Googlebot ne parvienne pas à indexer votre image ou qu'il indexe une image différente de celle que vous souhaitiez utiliser dans votre article. Pour éviter cela, suivez ces bonnes pratiques :
Googlebot utilise le titre de votre article pour l'identifier et l'indexer correctement. Suivez ces bonnes pratiques pour vous assurer qu'il lise correctement votre titre :
Examinons deux études de cas de sites ayant déjà mis en œuvre les étapes décrites dans cet article.
Les sites d'information modernes sont complexes et riches en contenu, et il serait illusoire d'attendre d'eux qu'ils respectent scrupuleusement ces directives. Toutefois, dans cette section, nous nous efforçons de démontrer comment leur application peut aboutir à des résultats prévisibles et mesurables.
Le Manly Observer est un site d'information hyperlocale destiné aux habitants d'une banlieue balnéaire populaire de Sydney, en Australie. Voici à quoi ressemble un article type publié sur le site :
Au premier coup d'œil, les éléments de conception suivants apparaissent clairement :
En examinant ensuite le code HTML de la page, on peut constater l'utilisation du balisage sémantique.
Ce code est facilement lisible par un humain. On peut donc raisonnablement supposer qu'un robot d'exploration Web sera tout aussi capable de le lire et de l'interpréter.
Le site web utilise le protocole https:// et ne comporte aucune publicité pop-up ni interstitiel se chargeant dans la fenêtre d'affichage initiale.
Entrepreneur est un magazine populaire auprès des entrepreneurs et des entreprises. Voici à quoi ressemble sa page d'accueil.
Le site web se charge à la vitesse de l'éclair et la page d'accueil ne contient aucune publicité intempestive ni vidéo. La plupart des publicités sont intégrées aux articles d'actualité.
Lorsque nous cliquons sur « afficher la source », nous voyons le code HTML suivant :
Au premier coup d'œil, ce code nous permet de déduire ce qui suit :
En faisant défiler vers le bas, nous voyons l'élément de code suivant :
Nous avons évoqué l'utilisation de schema.org et d'Open Graph (OG) pour les images. Pour rappel, schema.org et OG sont des types de données structurées qui facilitent l'identification d'éléments spécifiques du code par les robots d'exploration du Web. On observe ici l'implémentation de schema.org et d'OG.
Plus bas, nous voyons également des balises de données structurées, comme indiqué ci-dessous :
Comme dans notre exemple précédent, entrepreneur.com utilise également le protocole https:// dans ses liens, ne comporte aucune publicité intrusive (interstitiels ou pop-ups) et se charge rapidement. Les articles d'actualité suivent un format précis : titre, image, auteur, date et corps du texte. Il en résulte une meilleure expérience utilisateur et, par conséquent, un référencement technique optimisé.
Après avoir suivi cette leçon, vous devriez être capable de revoir et de mettre à jour les pages d'actualités existantes afin d'optimiser leur conception et leur mise en page pour qu'elles respectent les meilleures pratiques techniques en matière de référencement (SEO).
Actif maintenant
Voir plus
