Tactiques de croissance des éditeurs pour la saison électorale | SÉMINAIRE EN LIGNE
Tactiques de croissance des éditeurs pour la saison électorale | SÉMINAIRE EN LIGNE
Après avoir parcouru ce guide, vous devriez être en mesure de comprendre comment les articles d'actualités existants sont modifiés et créés à l'aide de conceptions de mise 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épondez au questionnaire
Prenez le quiz sur le module actuel
Matériaux
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. Ceci est important car Google est finalement guidé par une philosophie axée sur l'utilisateur. Les pages Web qui satisfont d'abord les besoins de l'utilisateur, le plus rapidement et de la manière la plus simple possible sont récompensées par des classements SERP plus élevés.
La conception et la mise en page de votre site déterminent également la facilité avec laquelle les robots d'exploration, tels que Google bot, l'explorent et l'indexent. Une conception et une mise en page simples et optimisées signifient une exploration rapide et facile, ce qui se traduit à son tour par de meilleurs classements.
Alors, qu'est-ce qui empêche les éditeurs de mettre en œuvre les meilleures pratiques de conception et de mise en page ? Le plus souvent, les éditeurs sont confrontés à ces points douloureux :
Pour répondre à cette question, nous avons effectué une simple recherche sur Google en entrant les mots-clés « Charlie Puth News » dans la barre de recherche.
Voici ce que les résultats de la recherche ont révélé :
Au deuxième rang du classement SERP Top Stories, juste au-dessus d'un article de NME, se trouve l'article du Daily Illini sur la dernière version de Charlie Puth.
Le fait que le Daily Illini, un journal étudiant universitaire, devance le plus grand site Web de musique autonome au monde soulève des questions importantes.
Comment un journal étudiant d'une ville de quelque 40 000 habitants du Midwest américain peut-il surpasser le plus grand site d'information musicale au monde ? Intrigués, nous décidons de creuser un peu plus.
Nous avons d’abord consulté la page de NME sur Charlie Puth.
Dès le départ, la première chose que nous remarquons est la vidéo pop-up essayant de charger dans le coin inférieur droit de l'écran. Il ne fait évidemment pas un très bon travail de chargement. La vidéo tampon cache également une partie du titre des nouvelles et de son corps.
Ensuite, nous remarquons que la fenêtre initiale est occupée principalement par des choses qui ne sont pas pertinentes pour l'histoire. Il y a une grande bannière publicitaire couvrant environ la moitié de la page, et bien sûr, il y a la vidéo.
En fait, en faisant défiler la page, nous rencontrons plus de vidéos, plus de grandes images riches, plus de publicités pop-up et beaucoup d'hyperliens. Compte tenu de la façon dont la page est riche en médias, il a pris sans surprise un certain temps à charger.
Nous avons ensuite inspecté le quotidien Illini et voici ce que nous avons trouvé.
La page est soignée, propre et épurée. Il a sa part d'annonces et un gros bouton de don en haut, mais il n'y a pas de vidéos ou de fenêtres contextuelles couvrant la fenêtre ou obstruant le titre des nouvelles. Nous pouvons voir le titre immédiatement, et il est très probable que la même chose s'applique au robot Web de Google.
Dans l'ensemble, la page est légère, minimaliste et rapide à charger.
Nous avons décidé de jeter un coup d'œil sous le capot un peu plus au code sous-jacent. En cliquant avec le bouton droit sur la page et en sélectionnant Afficher la source (tout en utilisant Chrome), nous pouvons voir le code de la page.
C'est ce que nous avons vu pour la page NME:
Deux choses ont attiré notre attention ici:
Ce n'est pas la meilleure chose pour une page pour deux raisons:
Lorsque nous avons regardé le code de la page quotidienne Illini, nous avons vu ceci:
Il s'agit du code HTML très simple. De plus, il n'y a pas de scripts qui s'exécutent dans le<head> section.
Comment tout cela s'ajoute-t-il au Daily Illini Overner NME?
Il y a probablement un certain nombre de facteurs à l'œuvre ici, et l'un d'entre eux est le design et la mise en page. La page Daily Illini déploie certaines techniques de conception et de mise en page que même les petits éditeurs peuvent facilement reproduire pour augmenter leur stratégie de référencement globale.
Il s'agit notamment de l'utilisation du code HTML propre et simple, d'éviter les scripts dans la section d'en-tête, de garder la page légère et rapide à charger, et ne pas compter trop sur les fenêtres contextuelles et les publicités interstitielles.
Le guide ci-dessous creuse dans chacun d'eux en détail, tout en expliquant plusieurs autres techniques que vous pouvez mettre en œuvre pour améliorer considérablement vos classements SERP.
La sémantique se rapporte au sens des mots. Les balises HTML sémantiques sont celles qui définissent clairement leur signification à la fois au lecteur et à un robot 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 la rubrique la plus importante de l'article.
En revanche, lorsque nous utilisons une balise comme<div> , sa signification n'est pas immédiatement apparente. En html<div> signifie Division, et tout ce que cela implique, c'est qu'une nouvelle section de code a commencé, sans nécessairement révéler aucune information sur le contenu de cette section.
Des robots de web comme Googlebot sont construits à l'aide d'algorithmes d'intelligence artificielle et d'apprentissage automatique qui tentent de simuler le fonctionnement du cerveau humain. Cela signifie qu'ils donnent un sens au texte de la même manière que le cerveau humain.
Le code HTML qui est facile à comprendre pour les humains devrait également être facile à comprendre pour le robot Web de Google.
À titre d'exemple, considérez les deux pièces du code HTML ci-dessous:
Source: https://www.pluralsight.com/guides/semantic-html
Cette page utilise le<div> Tag pour tout, de l'en-tête au contenu principal au pied de page. Ce n'est pas immédiatement évident en lisant les balises quel est son contenu.
En revanche, la page ci-dessous utilise le balisage sémantique. L'en-tête est placé dans le<header> tag, le pied de page dans le<footer> tag, et le corps principal de l'article va dans le<main> étiqueter.
Source: https://www.pluralsight.com/guides/semantic-html
Comme cela est facile à lire et à comprendre pour Googlebot, cette page a de meilleures chances de se classer plus haut que la précédente, toutes les autres choses étant égales par ailleurs.
Pour voir si votre page utilise le balisage sémantique, cliquez simplement avec le bouton droit sur la page si vous utilisez Google Chrome, puis cliquez sur Inspecter. Vous pourrez voir le code source HTML de la page. Les éléments sémantiques communs comprennent<author> ,<video> ,<article> ,<form> ,<header> , etc.
Nous savons maintenant ce qu'est le balisage sémantique et pourquoi c'est important. Mais comment l'utiliser pour améliorer le référencement?
C'est simple - utilisez toujours un balisage sémantique pour marquer des informations importantes sur la conception et la mise en page de votre article. Cela comprend les informations de l'article suivant:
Assurez-vous que la disposition de votre page est bien commandée pour améliorer la rampe
Vous concevez votre site à lire par les humains et les robots Web et, en tant que tel, votre conception et votre disposition devraient refléter ce fait.
Voici quelques conseils pour vous aider à atteindre des résultats mesurables pour votre site Web.
Vous pouvez utiliser HTML, CSS, JavaScript ou tout autre langage frontal pour créer des pages riches et interactives. Cependant, n'oubliez pas que plus la langue est avancée, plus sa complexité est grande et que plus les chances sont importantes qu'un robot Web puisse avoir du mal à lire, interpréter et compiler.
Tout ce qui est codé dans HTML n'est peut-être pas le plus joli à regarder, mais il se chargera à la fois plus rapidement et sera plus optimisé pour les moteurs de recherche pour la raison simple que les moteurs de recherche peuvent lire et le comprendre plus rapidement.
Considérez le HTML ordinaire comme le squelette Bare Bones de votre page Web. Vous pouvez ajouter CSS et JavaScript pour l'étoffer et le rendre esthétiquement agréable et dynamique, mais il serait préférable de garder le contenu le plus important dans le squelette plutôt que de le placer dans la chair.
Alors, comment implémenter un HTML ordinaire? Un moyen simple de le faire est de placer le corps principal de votre contenu à l'intérieur<article> Tags HTML.
De cette façon, lorsque les robots Web rencontrent le<article> Tag, ils savent immédiatement que ce qui suit est le contenu le plus important de votre page - l'article de presse. Cela aide le moteur de recherche à comprendre que le contenu enveloppé dans cette balise doit se voir attribuer un poids plus important.
Html ordinaire<article> Tag est un marqueur sémantique qui ressemble à ceci:
Source: https://en.wikipedia.org/wiki/article_element
La prochaine question évidente? Si j'utilise un CMS comme WordPress, où puis-je insérer ces balises?
Comment procéder: Si vous créez un site Web personnalisé à l'aide de HTML, vous pouvez vérifier le code source pour vous assurer qu'il utilise un HTML ordinaire, en particulier dans les zones critiques. Nous vous conseillons de parler plus en détail avec un développeur pour vous assurer de ne pas les fonctionnalités par accident.
Si vous utilisez WordPress, reportez-vous à ce guide . Vous pouvez également trouver ce guide sur la façon d'insérer HTML dans les publications et pages une source de référence utile.
Ces instructions sont pour WordPress car WordPress reste le CMS le plus populaire pour les éditeurs. Si vous utilisez un CMS différent tel que WIX, veuillez consulter la page d'assistance ou de documentation pour votre CMS.
Si vous avez accès à une équipe de développeurs Web, il est préférable de les faire le faire car l'édition de code HTML peut prendre du temps.
Testez pour vous assurer que votre contenu apparaît correctement dans tous les navigateurs, appareils et tailles. Celui-ci est plus évident mais souvent négligé. Si votre contenu n'apparaît pas comme vous le souhaitez sur tous les navigateurs et appareils, cela affectera l'expérience utilisateur et, à long terme, votre classement SERP.
Comment procéder: pour tester le contenu sur les plates-formes, vous devez ouvrir votre page dans différents appareils et dans différents navigateurs pour voir comment il est rendu.
Au minimum, vous devez tester ce qui suit:
Les balisages HTML aident à mettre en évidence les différents éléments de votre page. Les données structurées aident les moteurs de recherche à lire ce qu'il y a dans les différents éléments de votre page et à mieux comprendre son contenu.
Les données structurées sont simplement une série d'instructions écrites dans une langue simple, comme JSON-LD, qui peut être insérée dans le code HTML existant de votre page Web. Pensez-y comme une méta description, mais pour des éléments de contenu individuels sur votre page.
Dans l'exemple ci-dessous, les données structurées aident Google à identifier cinq attributs sur une page DBpedia sur John Lennon:
Source: https://json-ld.org/
Comme vous pouvez le voir, le code est dans un langage simple qui est facile pour un lecteur humain et un robot Web à comprendre.
Voici un autre exemple qui montre comment les données structurées peuvent s'adapter directement au code HTML existant de votre page Web. Les instructions de données structurées sont mises en évidence 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 sur le gâteau de café, quelqu'un appelé Mary Stone.
L'utilisation de données structurées dans la disposition de votre site Web offre des résultats mesurables. Par exemple, l'utilisation de données structurées peut augmenter le taux de clics d'un site Web (CTR) jusqu'à 30%.
L'utilisation de données structurées aide également votre classement à mieux sur les carrousels de Google, les extraits en vedette, les vidéos et les fonctionnalités du panneau de connaissances.
Pour Google News SEO, il est important d'inclure les éléments suivants lors de la création de données structurées pour fournir une valeur supplémentaire:
Comment faire cela: vous pouvez ajouter des données / schéma structurés à votre contenu manuellement ou en utilisant un plugin pour votre CMS particulier.
Tous les éléments de votre article de presse doivent être organisés dans un ordre spécifique pour permettre plus rapidement et plus facile. La commande est la suivante:
L'expérience de la page est une mesure de la façon dont les utilisateurs vivent votre page. Google a un ensemble de paramètres pour quantifier l'expérience de la page. Nous avons consacré un module entier à des facteurs d'expérience de page , nous ne ferons donc que brièvement chacun ici.
Comment faire ceci: vous pouvez tester la page d'expérience manuellement et en utilisant des plugins ou des applications tierces. Par exemple, Page Speed Insights est un outil pratique qui vous aide à analyser les performances de votre site en fonction de CWV et d'autres paramètres et attribue un score en fonction de son analyse. Il teste également la réactivité mobile et de bureau.
Les éditeurs de nouvelles ne devraient pas publier plusieurs articles de presse sous la même URL. Cela empêchera Google de les indexer. Chaque article de presse devrait avoir sa propre URL unique.
De plus, ces URL devraient être permanentes. Ce qui signifie que la même nouvelle devrait être affichée sur une URL particulière. Si la nouvelle associée à une URL particulière change fréquemment, Google ne pourra pas le ramper et l'indexer. Les éditeurs devraient cependant mettre à jour le reportage aussi souvent que nécessaire.
Si les redirectes doivent être utilisés pour les articles de presse, ils doivent être mis en œuvre en fonction des meilleures pratiques suivantes:
Bien que les éléments d'action répertoriés dans cette section ne soient pas aussi importants que ceux ci-dessus, nous recommandons toujours de mettre en œuvre autant que possible une fois que les points critiques de la mission énumérés ci-dessus ont été traités.
Le<head> L'élément d'une page contient des informations importantes sur la page qui n'est pas réellement affichée sur la page. Ce qu'il comprend, ce sont des métadonnées qui aident Googlebot à identifier le contenu de la page et à le classer.
En règle générale, le<head> L'élément ne doit inclure que les balises les plus importantes et rien d'autre, donc un message peut être rampé et rendu correctement. Ceux-ci incluent:
Tout ce qui est contenu dans le<head> L'élément est susceptible de confondre les robots Web.
Par exemple, il est courant que les novices confondent la balise titre avec<h1> et placez ce dernier dans le<head> é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> devraient contenir essentiellement les mêmes informations, les premières sont des métadonnées destinées aux robots d'exploration Web et à être affichées dans les résultats SERP et l'onglet du navigateur, tandis que les secondes sont des informations à afficher sur la page.
Le code ci-dessous montre comment placer le titre dans le<head> élément.
Source: développeur.mozilla.org
L'utilisation d'éléments de page qui facilitent la numérisation du contenu et font de la navigation une expérience sans friction pour l'utilisateur a également un impact sur le référencement.
Une page facile à naviguer contiendra ces éléments:
À moins que vous ne soyez un développeur Web chevronné, il est préférable de consulter un expert sur la meilleure façon de mettre en œuvre une UX conviviale.
Google veut que les éditeurs affichent des annonces sans perturber l'expérience de l'utilisateur. Pour cette raison, il peut pénaliser les sites Web qui affichent trop de publicités intrusives. Bien que l'expérience utilisateur soit une métrique subjective, Google a certaines directives et meilleures pratiques en matière d'annonces.
Certains d'entre eux se rapportent à:
Pour en savoir plus sur les publicités et les popups, reportez-vous à notre module détaillé .
JavaScript est idéal pour créer du contenu dynamique et interactif, mais les robots Web peuvent éprouver des difficultés à le rendre.
C'est parce que:
Avec les articles de presse, il est bon à éviter les interruptions telles que les carrousels d'articles connexes ou les galeries d'images.
De nombreux éditeurs qui se préoccupent bien lors de la relance / refonte de leur site, car il oblige Google à recrraquer le site. Suivez ces meilleures pratiques pour assurer une transition en douceur vers la normale après la refonte / relance:
Gardez vos pages d'article aussi légères que possible. Nous avons déjà cherché à éviter JavaScript dans des articles, mais il est également une bonne pratique d'éviter d'utiliser un contenu HTML lourd.
En effet, lorsque Googlebot rampe votre page, il ne peut télécharger qu'un maximum de 15 Mo de données de page lors de la première rampe. Pour la plupart des pages, ce n'est pas un problème majeur car les éléments de poids lourds tels que les vidéos et les images sont référencés séparément dans le code que Googlebot indexe plus ultérieurement, et dépasse donc le champ de la limite de cette limite de 15 Mo.
Cependant, cela indique à nouveau le fait que plus votre page est légère, plus il sera facile pour Googlebot de le ramper et de l'indexer.
Astuce: Si vous souhaitez vérifier la taille de votre page, accédez à la page des outils de développeur de votre navigateur, passez à l'onglet réseau, puis rechargez la page. Cela affiche toutes les demandes faites de votre navigateur pour rendre pleinement la page. La première demande de cette liste affiche la taille de votre page dans la colonne de taille. Pour la plupart des pages sur Internet, ce chiffre est généralement en kilobytes.
Les extraits d'articles donnent aux lecteurs un aperçu du contenu de la page avant de cliquer dessus. Google détermine l'extrait pour accompagner chaque article en rampant le texte dans le corps principal de l'article juste en dessous du titre.
Pour éviter la possibilité de Googlebot, y compris des extraits incorrects, assurez-vous que:
Parfois, Googlebot peut échouer à indexer votre image ou indexer une image différente de celle que vous aviez l'intention de figurer avec votre article. Pour éviter cela, suivez ces meilleures pratiques:
Googlebot utilise le titre de votre article pour l'identifier et l'indexer correctement. Utilisez ces meilleures pratiques suivantes pour vous assurer qu'elle lit avec précision votre titre:
Examinons deux études de cas sur les sites qui ont déjà mis en œuvre les étapes discutées dans cet article.
Les sites de nouvelles modernes sont complexes et riches, et il serait irréaliste de s'attendre à ce qu'ils adhèrent rigoureusement à ces directives. Cependant, dans cette section, nous essayons de démontrer comment suivre les directives peut entraîner des résultats prévisibles et mesurables.
Le Manly Observer est un site Web de nouvelles hyperlocal s'adressant au public dans une banlieue populaire sur la plage de Sydney, en Australie. Vous trouverez ci-dessous à quoi ressemble un article de presse typique sur le site:
Nous voyons les éléments de conception suivants clairs et présents à première vue:
En regardant ensuite le code HTML de la page, nous pouvons voir l'utilisation du balisage sémantique.
C'est un code facilement lisible par un humain. Il est sûr de présumer qu'un robot Web pourra lire et interpréter ce code avec une facilité égale.
Le site Web utilise le schéma https: // et n'a pas de publicités pop-up ni de chargement interstitiels dans la fenêtre initiale.
L'entrepreneur est un magazine populaire pour les entrepreneurs et les entreprises. C'est ainsi que sa page d'accueil apparaît.
Le site Web est rapide à charger et il n'y a pas de publicités ou de vidéos pop-up sur la page d'accueil elle-même. La majeure partie du placement d'annonces se produit sur les articles de presse individuels.
Lorsque nous cliquons pour «voir la source», nous voyons le code HTML suivant:
En un coup d'œil, nous pouvons distinguer ce qui suit de ce code:
Lorsque nous faisons défiler vers le bas, nous voyons l'élément de code suivant:
Nous avions discuté de l'utilisation de Schema.org et OpenGraph (OG) pour les images. Pour récapituler, Schema.org et OG sont des types de données structurées qui aident les robots Web à identifier plus facilement des éléments spécifiques du code. Nous voyons Schema.org et OG mis en œuvre ici.
Plus loin, nous voyons également des balises de données structurées comme indiqué ci-dessous:
Comme pour notre exemple précédent, Entrepreneur.com utilise également le schéma https: // dans son lien, n'a pas de perturbations ou de fenêtres contextuelles perturbatrices et est rapide à charger. Les articles de presse suivent un format défini de titre, de l'image, de l'attribution de l'auteur, de la date et du corps principal du contenu. Il en résulte une meilleure expérience de page et donc une amélioration du référencement technique.
Après avoir travaillé cette leçon, vous devriez être en mesure de revoir et de mettre à jour les pages d'actualités existantes pour optimiser leur conception et leur disposition pour respecter les meilleures pratiques techniques SEO.
Actif maintenant
Voir plus
