Comment configurer le canonical tag dynamiquement dans Webflow CMS ?
Apprenez à implémenter des balises canonical dynamiques dans Webflow CMS pour éviter le contenu dupliqué et consolider l'autorité SEO sur vos pages templates.
La balise canonical indique à Google quelle est la version de référence d'une page quand plusieurs URLs pointent vers un contenu similaire. Dans Webflow CMS, elle doit être dynamique : chaque article doit pointer vers sa propre URL canonique. Sandro, cofondateur de l'agence Webflow Gemeos, vous montre comment l'implémenter proprement.
Pourquoi le canonical est crucial dans Webflow CMS
Webflow génère parfois plusieurs URLs accessibles pour un même contenu CMS : avec et sans slash final, avec des paramètres de filtres ou de pagination, ou via des pages de prévisualisation. Sans canonical explicite, Google peut indexer des doublons et diluer votre autorité SEO.
- URL avec slash final : gemeos.wf/blog/article/ vs gemeos.wf/blog/article
- URLs avec paramètres : gemeos.wf/blog?filter=seo
- Pages de prévisualisation Webflow Editor accessibles publiquement
1. Vérifiez si Webflow génère déjà un canonical
Webflow génère automatiquement une balise canonical sur toutes les pages publiées depuis la version 2023. Inspectez le code source d'une de vos pages (clic droit > Afficher le code source) et cherchez la balise <link rel="canonical"> dans le <head>. Si elle est présente et correcte, vous n'avez rien à faire.
2. Forcez un canonical personnalisé via un embed CMS
Si vous avez besoin d'un canonical custom (par exemple pour un contenu syndiqué ou une page CMS qui doit pointer vers une URL externe), utilisez un élément HTML Embed dans votre template CMS.
Dans le template CMS, ajoutez un élément "HTML Embed" hors du Rich Text. Collez le code suivant et liez le champ href à votre champ CMS "URL canonique" :
<link rel="canonical" href="{{URL Canonique}}">Dans le Designer, sélectionnez la valeur entre guillemets et utilisez "Add Field" pour la remplacer par le champ CMS correspondant. Webflow injectera l'URL dynamiquement sur chaque article.
3. Créez le champ CMS "URL Canonique"
Dans votre collection CMS, ajoutez un champ de type "Plain Text" nommé "URL Canonique". Laissez-le vide par défaut : il ne sera renseigné que pour les articles dont le canonical doit pointer ailleurs que vers leur propre URL.
4. Gérez les canonical pour les pages paginées
Si vous utilisez la pagination sur vos collections CMS, chaque page de pagination (/blog?page=2) doit avoir un canonical qui pointe vers la première page (/blog). Ajoutez ce script dans le Head Code global du projet :
<script>
var canonical = document.querySelector('link[rel="canonical"]');
if (canonical) {
var url = new URL(canonical.href);
url.search = '';
canonical.href = url.toString();
}
script>| Situation | Canonical recommandé | Méthode |
|---|---|---|
| Article CMS standard | URL de l'article lui-même | Canonical automatique Webflow |
| Contenu syndiqué (republié ailleurs) | URL de la source originale | Champ CMS + embed |
| Pages de pagination | Première page de la liste | Script JS de nettoyage des params |
| Pages avec filtres URL | URL sans paramètres de filtre | Script JS de nettoyage des params |
Conclusion
Le canonical dans Webflow CMS est géré automatiquement dans la majorité des cas. L'intervention manuelle n'est nécessaire que pour les cas spécifiques : contenu syndiqué, pagination, ou URLs avec paramètres dynamiques.
- Cas d'usage 1 : blog qui republie des articles originellement publiés sur LinkedIn ou Medium
- Cas d'usage 2 : site avec filtres CMS Finsweet qui génèrent des URLs avec paramètres
- Cas d'usage 3 : site multilingue où la version FR est la référence canonique des versions traduites
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
