Mettre en place Nonli sur votre site

Q: Mettre en place Nonli sur votre site

Mise en place technique pour les éditeurs : whitelister nos IPs de crawl, configurer le sous-domaine du SDK, installer le SDK et exposer les bonnes métadonnées Open Graph et schema.org.

Ce guide s'adresse à l'équipe technique qui intègre Nonli sur le site d'un éditeur. Nonli vous fournit aussi une page de configuration personnalisée avec les valeurs propres à votre domaine.

1. Whitelister nos adresses IP#

Pour éviter que nos crawlers soient bloqués, autorisez les adresses IP suivantes sur vos serveurs, votre pare-feu ou votre WAF.

OVH	Google	Hetzner
51.77.188.71	130.211.76.244	167.235.24.250
51.83.116.244	104.155.62.41	167.235.65.20
51.255.141.214	34.77.85.234	116.203.102.173
51.68.75.27		77.42.68.147
51.38.196.174		89.167.4.248
54.36.13.238		89.167.13.146
54.36.18.68		46.224.230.139

Vous pouvez aussi récupérer la liste à jour automatiquement : www.nonli.com/crawler-ips.json (structuré) ou www.nonli.com/crawler-ips.txt (texte brut).

2. Choisir le domaine du SDK#

Pour des raisons de sécurité et de RGPD, le SDK doit tourner sur un sous-domaine de votre domaine principal. Créez un enregistrement CNAME :

l.votredomaine.com → CNAME → tls.non.li

Important : n'activez pas le proxy Cloudflare (nuage orange) sur cet enregistrement. Il entrerait en conflit avec notre propre proxy Cloudflare, laissez-le donc en DNS only (nuage gris).

Nonli documente une configuration du SDK pouvant relever de l'exemption de consentement décrite par la CNIL. Depuis le 22 janvier 2025, notre SDK ne dépose plus aucun cookie et notre raccourcisseur de liens ne dépose aucun cookie applicatif Nonli ; aucun des deux ne crée d'identifiant visiteur. Les compteurs SDK et shortlinks sont agrégés par contenu, lien ou domaine ; les traitements techniques d'infrastructure, comme le TLS, la sécurité ou les journaux d'exception, restent séparés de la mesure d'audience.

3. Installer le SDK#

Ajoutez ce script juste avant la balise fermante </body> sur toutes vos pages d'articles, et sur toute page susceptible d'être partagée sur les réseaux sociaux. Renseignez votre sous-domaine SDK ci-dessous et copiez le snippet généré.

Votre sous-domaine SDK

Vous pouvez aussi le pré-remplir via l'URL avec ?domain=l.votredomaine.com.

html

1<script type="text/javascript">
2window._nli=window._nli||[],function(){var n,e,i=window._nli||(window._nli=[]);i.loaded||((n=document.createElement("script")).defer=!0,n.src="https://l.votredomaine.com/sdk.js",(e=document.getElementsByTagName("script")[0]).parentNode.insertBefore(n,e),i.loaded=!0)}();
3</script>

4. Ajouter les métas Open Graph#

Les balises Open Graph nous permettent de lire correctement vos articles. Ce sont les dates qui comptent le plus.

4.1. Balises principales de l'article#

html

1<meta property="og:title" content="Titre de l'article">
2<meta property="og:url" content="https://www.monsite.com/url-canonique-de-l-article.html">
3<meta property="og:description" content="Description de l'article">
4
5<!-- Ces 3 balises sont particulièrement importantes : -->
6<meta property="og:type" content="article">
7<meta property="article:published_time" content="2022-06-06T11:54:30Z">
8<meta property="article:modified_time" content="2022-06-06T12:21:12Z">

4.2. Balises image#

html

1<!-- Utilisez de grandes images non recadrées > 1000px -->
2<meta property="og:image" content="https://www.monsite.com/monimage.jpg">
3<meta property="og:image:alt" content="Description de l'image">

Pour les images, utilisez de grands visuels non recadrés, au-dessus de 1000 px. Les formats JPG et PNG sont les plus sûrs pour les parseurs de métadonnées, et l'image doit rester sous 8 Mo.

4.3. Balises rubrique et mots-clés#

html

1<!-- article:section classe le contenu par rubrique (catégorie) -->
2<meta property="article:section" content="Sport" />
3
4<!-- article:tag classe le contenu par mots-clés, répartis sur plusieurs balises -->
5<meta property="article:tag" content="mot-clé 1" />
6<meta property="article:tag" content="mot-clé 2" />
7<meta property="article:tag" content="mot-clé 3" />

Utilisez une balise article:section pour la rubrique principale et répétez article:tag une fois par mot-clé.

5. Ajouter les données structurées schema.org#

Ajoutez le JSON-LD dans le <head> de la page.

5.1. NewsArticle#

NewsArticle est l'objet principal des données structurées. articleSection nous donne les rubriques de l'article et keywords nous donne les tags. Les auteurs sont en général déjà bien renseignés, mais l'objet doit quand même contenir au moins un auteur.

json

1{
2  "@context": "https://schema.org",
3  "@type": "NewsArticle",
4  "mainEntityOfPage": {
5    "@type": "WebPage",
6    "@id": "https://www.example.com/rubrique/mon-article.php"
7  },
8  // Un identifiant unique pour éviter rapidement le duplicate content
9  "identifier": "123456",
10  "headline": "Titre principal de l'article",
11  "alternativeHeadline": "Titre alternatif ou chapô de l'article",
12  "description": "Description complète de l'article pour le SEO",
13  "keywords": ["mot-clé1", "mot-clé2", "mot-clé3"],
14  // Il peut être intéressant d'ajouter articleSection pour apparaître dans les rubriques :
15  "articleSection": ["Rubrique principale", "Rubrique secondaire"],
16  "author": [
17    {
18      "url": "https://www.example.com/auteur",
19      "@type": "Person",
20      "name": "Prénom Nom",
21      "jobTitle": "Journaliste",
22      "address": "Ville"
23    }
24  ],
25  "datePublished": "2025-09-29T10:00:00Z",
26  "dateModified": "2025-09-29T15:30:00Z",
27  "isAccessibleForFree": true
28}

Utilisez isAccessibleForFree: false si l'article est derrière un paywall.

5.2. ImageObject#

Si l'article a une image principale, ajoutez-la via le champ image de NewsArticle.

json

1{
2  "@type": "ImageObject",
3  "url": "https://www.example.com/images/hero.jpg",
4  "width": 1200,
5  "height": 630,
6  "caption": "Description de l'image"
7}

5.3. VideoObject#

Si un article contient une vidéo, ajoutez un bloc JSON-LD VideoObject séparé.

json

1{
2  "@context": "https://schema.org",
3  "@type": "VideoObject",
4  "name": "Titre de la vidéo",
5  "description": "Description de la vidéo",
6  "thumbnailUrl": [
7    "https://www.example.com/video-thumbnail.jpg"
8  ],
9  "uploadDate": "2025-09-29T08:00:00+00:00",
10  "duration": "PT1M54S",
11  "contentUrl": "https://www.example.com/video/123/file.mp4",
12  "embedUrl": "https://www.example.com/embed/123",
13  "interactionStatistic": {
14    "@type": "InteractionCounter",
15    "interactionType": { "@type": "WatchAction" },
16    "userInteractionCount": 5647018
17  },
18  "regionsAllowed": "FR"
19}

6. Checklist finale#

NewsArticle : inclure identifier, datePublished, dateModified et au moins un author.
Dates : utiliser le format ISO 8601, soit en UTC (Z), soit avec un fuseau horaire.
Open Graph : ajouter og:type=article, les dates de publication et de modification, une balise article:section et une balise article:tag par mot-clé.
JSON-LD : exposer les catégories avec articleSection et les tags avec le tableau keywords.
Images : utiliser une grande og:image non recadrée, ajouter og:image:alt et inclure les dimensions dans le JSON-LD si possible.
Vidéos : ajouter VideoObject uniquement quand l'article embarque une vidéo.

Pour une présentation guidée de l'intégration, demandez une démo.

Cet article vous a-t-il été utile ?