Tout le monde (ou presque) connait les attributs noindex qui placés dans une balise meta robots de piloter l’indexation d’une page entière dans l’index de Google.
Mais il est possible de piloter cela au niveau d’une section d’une page HTML grâce à la balise « data-nosnippet » introduite en 2019.
L’objectif de cette balise à l’époque était de bloquer la réutilisation de certaines zones de la page dans les résultats (dans les descriptions affichées dans les SERPs). Mais il s’avère que cette balise fonctionne aussi pour les fonctionnalités à base d’IA génératives de Google, notamment les AI Overviews et le mode IA.
Et dans le contexte actuel, savoir utiliser cette balise peut s’avérer très utile.
A quoi cela sert ?
Le principal intérêt est d’empêcher l’affichage dans la page de résultats de Google d’une information dont vous avez l’exclusivité (un numéro de téléphone, une adresse, un chiffre…). Cela maximise les chances que l’utilisateur visite votre page depuis Google pour obtenir ces informations.
Dans le cas contraire, c’est Google qui donnera l’information à votre place et gardera le trafic pour lui (encore une visite « zéro click » de plus..
Comment utiliser cette balise ?
L’attribut data-nosnippet peut être placé dans la balise ouvrante des balises HTML <div> <span> et <section>. Cela ne fonctionne pas avec d’autres balises (notamment les balises <p>).
Voici quelques exemples d’utilisations :
<p>This text can be shown in a snippet
<span data-nosnippet>and this part would not be shown</span>.</p>
<div data-nosnippet>not in snippet</div>
<div data-nosnippet="true">also not in snippet</div>
<div data-nosnippet="false">also not in snippet</div>
<!-- all values are ignored -->
<div data-nosnippet>some text</html>
<!-- unclosed "div" will include all content afterwards -->
<mytag data-nosnippet>some text</mytag>
<!-- NOT VALID: not a span, div, or section -->
<p>This text can be shown in a snippet.</p>
<div data-nosnippet>
<p>However, this is not in snippet.</p>
<ul>
<li>Stuff not in snippet</li>
<li>More stuff not in snippet</li>
</ul>
</div>Cet exemple montre la bonne façon d’utiliser l’attribut, mais aussi les erreurs à éviter.
Erreur numéro 1 : donner une valeur à l’attribut. Dans data-nosnippet= »true », la valeur true ne sert à rien (mais l’attribut est pris en compte). Par contre data-nosnippet= »false » est erroné, car le false est ignoré, et le data-nosnippet est pris en compte
Erreur numéro 2 : si vous ne fermez pas correctement votre balise <div> <section> ou <span>, tout ce qui suit sera exclu du snippet et des réponses IA.
Erreur numéro 3 : l’attribut data-nosnippet ne fonctionne qu’avec les balises <div> <section> ou <span>, et en HTML 5 (pas 3 ou 4)
Erreur numéro 4 : attention à bien choisir l’emplacement du data-nosnippet dans le code. Tout ce qui est avant ou après les sections délimitées par <div> … </div> <section> … </section> ou <span>… </span> peut être réutilisé dans un snippet. Le risque est fort de se tromper en particulier de se tromper sur l’emplacement de la balise fermante </div> dans une zone de div imbriquées.
Le contenu bloqué reste indexable
L’attribut data-nosnippet, comme son nom le laisse supposer, impacte les snippets, et seulement les snippets. Donc cela bloque l’affichage de passages dans les résumés de contenu qui apparaissent dans les pages de résultats.
Mais le contenu de ces passages reste indexable et indexé. Donc l’utilisation de ces attributs n’est pas pénalisant pour le SEO (au contraire, il permet en principe de générer plus de trafic SEO).
Un attribut supporté à présent par Bing
Cette balise n’a longtemps été prise en compte que par Google. Mais depuis peu, Bing supporte cette fonctionnalité également.
Pour en savoir plus
La page de support de Google :