Schema.org NewsArticle : comment bien baliser vos articles pour le SEO ? (JSON et HTML)

Google invite depuis plusieurs années les webmasters à correctement baliser leurs contenus et pages avec Schema.org. Que vous optiez pour un balisage html ou JSON-LD (préféré par Google), voici concrètement ce que vous ne devez savoir pour bien baliser vos articles Google News et autres.

Google l’a encore confirmé récemment par l’intermédiaire de John Mueller, présenter les dates des articles aux internautes dans les résultats de recherche est quelque chose qu’ils estiment important pour l’expérience utilisateur.

Il s’agit donc d’un élément qui peut avoir un impact (positif comme négatif) sur le positionnement des articles dans les résultats de recherche naturels du moteur de recherche numéro 1 en France.

Si vous souhaitez afficher la date de vos articles et contenus dans les résultats de recherche, iil vous faut pour cela communiquer les informations dans les bons formats à Google au travers du code source de vos pages.

Voici comment ça marche concrètement.

Comment et pourquoi baliser correctement ses articles avec schema.org ?

Pour baliser correctement vos articles avec la section NewsArticle, BlogPosting ou Article de Schema.org pour suivre les bonnes pratiques recommandées par Google et ainsi maximiser vos chances :

• D’apparaitre dans Google News / Actualités (si vous en avez fait la demande et que votre fréquence et type d’articles le permettent)
• D’apparaitre dans les PAA (People Also Ask) et les featured snippets sur Google (position 0)
• D’afficher dans Google la date de publication de votre article (peut avoir un impact positif comme négatif sur le CTR (taux de clic))

Pour se faire, deux options principales de balisage s’offrent à vous :

• Baliser vos articles via leur code HTML avec les microdatas et les itemprop : cette méthode simple implique que toutes les données à baliser soient dans le code HTML (on peut ajouter un display:none sur certains éléments que l’on souhaiterait baliser mais pas montrer aux internautes mais ce n’est pas recommandé).
• Baliser vos articles avec JSON-LD : cette méthode est recommandée / préférée par Google mais recquiert un tout petit plus de compétences (le code est légèrement plus complexe). Cette méthode a l’avantage de permettre de baliser de nombreuses choses, même si elles ne sont pas présentes « en dur » dans le code HTML de la page.

Outre les éléments présentés ici, cela ne fera en réalité aucune différence pour Google si vous optez pour telle ou telle option.

Quels éléments baliser en priorité sur vos articles pour optimiser leur référencement sur Google ?

Quel que soit le type d’article (actualité, tutoriel détaillé, guide, …), voici les éléments (issus de Schema.org) que Google vous recommande vivement de baliser au minimum sur tous vos articles :

• headline : le titre de l’article
• datePublished : date de publication de l’article : format ISO8061 : ex : 2019-08-21
• dateModified : date de modification de l’article : format ISO8061
• image : image principale de l’article

Si vous souhaitez aller plus loin dans votre balisage, vous pouvez aller jusqu’à baliser les auteurs, toutes les images de votre article, les vidéos intégrées, …

Pour obtenir la liste complète des éléments que vous pouvez baliser, il vous suffit de vous rendre sur le site Schema.org dans la section NewsArticle ou BlogPosting.

2 exemples de balisages Schema.org correctements configurés (microdata et JSON-LD)

Voici un exemple de balisage d’un article réalisé avec la méthode Microdatas :

<div itemid="http://techcrunch.com/2015/03/08/apple-watch-event-live-blog" itemscope itemtype="http://schema.org/LiveBlogPosting">
<div itemprop="about" itemscope itemtype="http://schema.org/Event">
<span itemprop="startDate" content="2015-03-09T13:00:00-07:00">March 9, 2015 1:17 PM</span>
<meta itemprop="name" content="Apple Spring Forward Event" />
</div>
<meta itemprop="coverageStartTime" content="2015-03-09T11:30:00-07:00" />
<meta itemprop="coverageEndTime" content="2015-03-09T16:00:00-07:00" />
<h1 itemprop="headline">Apple Spring Forward Event Live Blog</h1>
<p itemprop="description">Welcome to live coverage of the Apple Spring Forward …</p>
<div itemprop="liveBlogUpdate" itemscope itemtype="http://schema.org/BlogPosting">
<h2 itemprop="headline">See the new flagship Apple Retail Store in West Lake, China.</h2>
<p><span itemprop="datePublished" content="2015-03-09T13:17:00-07:00">March 9, 2015 1:17 PM</span></p>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<img itemprop="thumbnail" src="http://images.apple.com/live/2015-mar-event/images/908d2e_large_2x.jpg" />
</div>
</div>
<div itemprop="liveBlogUpdate" itemscope itemtype="http://schema.org/BlogPosting">
<h2 itemprop="headline">iPhone is growing at nearly twice the rate of the rest of the smartphone market.</h2>
<p><span itemprop="datePublished" content="2015-03-09T13:13:00-07:00">March 9, 2015 1:13 PM</span></p>
<img itemprop="image" src="http://images.apple.com/live/2015-mar-event/images/573cb_xlarge_2x.jpg"/>
</div>
<div itemprop="liveBlogUpdate" itemscope itemtype="http://schema.org/BlogPosting">
<h2 itemprop="headline">Coming this April, HBO NOW will be available exclusively in the U.S. on Apple TV and the App Store.</h2>
<p><span itemprop="datePublished" content="2015-03-09T13:08:00-07:00">March 9, 2015 1:08PM</span></p>
<p itemprop="articleBody">It's $14.99 a month.<br> And for a limited time, …</p>
</div>
</div>

Voici un exemple de balisage correct effectué avec la méthode JSON-LD sur un article du site LeMonde :

<script type="application/ld+json"> 
{"@context":"https://schema.org","@type":"NewsArticle","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.lemonde.fr/economie/article/2019/08/20/les-dividendes-verses-dans-le-monde-atteignent-un-montant-record_5500919_3234.html"},"headline":"Les dividendes vers\u00e9s dans le monde atteignent un montant record","dateCreated":"2019-08-20T09:11:48+02:00","datePublished":"2019-08-20T09:11:48+02:00","dateModified":"2019-08-21T08:37:59+02:00","publisher":{"@type":"Organization","name":"Le Monde","logo":{"@type":"ImageObject","url":"https://s1.lemde.fr/medias/web/1.2.705/img/elements_lm/logo_lm_print.png","width":"240","height":"42"}},"description":"En Europe, les entreprises fran\u00e7aises font partie des soci\u00e9t\u00e9s les plus g\u00e9n\u00e9reuses envers leurs actionnaires, selon l\u2019\u00e9tude de l\u2019observatoire de la soci\u00e9t\u00e9 de gestion Janus Henderson.","author":[{"@type":"Person","name":"Philippe Jacqué"
}
]
,"image":{"@type":"ImageObject","url":"https://img.lemde.fr/2019/08/20/234/0/4853/2426/696/348/60/0/2c6b1cd_ZfHzp2R4juEN-INhGNK7gdAA.jpg","width":"696","height":"348"}
} </script> 

Comment contrôler le bon balisage SEO de ses articles pour Google ?

Une fois le balisage correctement configuré dans le code en optant pour la méthode microdata ou JSON-LD, il faudra vous assurer grâce à l’outil gratuit de test de données structurées de Google que tout est correctement paramétré et que vous n’avez pas omis ou mal balisés des éléments indispensables (Google vous les affichera en rouge le cas échéant lors du test de votre URL ou du code source).

Les avertissements en orange ne sont que des recommandations, charge à vous de les appliquer ou non (mais je vous recommande de les appliquer).

Si vous n’avez pas d’avertissements et de recommandations et que tout est bien visible dans la section droite de vos résultats de test, tout sera désormais bon pour passage en prod 😉 !