So legen Sie eine kanonische URL pro Artikel in Webflow CMS fest

Nick Wade

October 9, 2025

Und jetzt zu etwas anderem. Wenn Sie viele Inhalte veröffentlichen mit Webflow, Sie sind wahrscheinlich irgendwann auf einen häufigen SEO-Haken bei kanonischen Links gestoßen. Die globalen Website-Einstellungen von Webflow machen es einfach, allen Seiten Ihrer Website ein einziges kanonisches Tag hinzuzufügen. Das ist sehr hilfreich. Aber was passiert, wenn ein bestimmtes CMS-Objekt, beispielsweise ein Blogbeitrag, der von einer anderen Domain syndiziert wurde, einen eigenen kanonischen Link benötigt? Standardmäßig bietet Webflow keine Kontrolle über kanonische Inhalte pro Artikel auf CMS-Elementebene. Und wenn du benutzerdefinierten Code verwendest, um einen hinzuzufügen, kannst du schnell globale und seitenspezifische Tags mischen, sodass du Duplikate oder leere kanonische HREF-Tags hast, die Suchmaschinen verwirren und deine Suchmaschinenoptimierung bestrafen.

Wir verwenden Webflow hier bei Opus Guard und es gefällt uns sehr gut. Aber gelegentlich müssen wir das Verhalten anpassen, um das richtige Ergebnis zu erzielen. In diesem Beitrag erkläre ich das kanonische Problem, mit dem wir bei syndizierten Blogbeiträgen aus einer anderen Originalquelle konfrontiert sind. Und ich werde zwei robuste Skripte vorstellen, die Sie in Ihrer Vorlage für Blogbeiträge (im <head>Bereich für benutzerdefinierten Code) verwenden können, um dieses Problem für jeden einzelnen Blogbeitrag zu lösen. und das alles, während die globale Canonical-Tag-Einstellung aktiviert bleibt in Webflow für Ihre Website.

Das Problem: globale kanonische Anforderungen im Vergleich zu gelegentlichen Anforderungen pro Artikel

Mit dem Designer von Webflow können Sie einen globalen kanonischen Link definieren, aber kanonische Tags sind eigensinnig: Jede Seite sollte höchstens einen kanonischen Link rel= „canonical“ haben, der auf die endgültige URL dieses Inhalts verweist. Wenn sie mehr haben, sind die Suchmaschinen verwirrt und die Suchmaschinenoptimierung leidet in der Regel darunter.
Für CMS-Sammlungen, insbesondere Blogbeiträge, benötigen Sie manchmal ein kanonisches Dokument pro Element. Zum Beispiel, wenn ein Beitrag ursprünglich an anderer Stelle veröffentlicht wurde und Sie ihn erneut teilen möchten (mit Genehmigung!) oder wenn eine ältere URL-Struktur für einen einzelnen Artikel berücksichtigt werden muss.
<head>Webflow CMS-Sammlungen können beliebig viele Felder hinzufügen. Sie können also ein Linktyp-Feld mit einem Namen wie „Canonical Link“ hinzufügen und dieses mithilfe eines einfachen benutzerdefinierten Codes in den Bereich eines Blogbeitrags einfügen. Hinweis: Sie sollten dies in der Seitenvorlage und nicht im Code in einer HTML-Einbettung in den Artikel tun, damit die meisten Crawler das gerenderte Tag richtig sehen können.
Wenn du das ohne sorgfältigere Behandlung tust, erhältst du am Ende mehrere kanonische Tags: eines aus den globalen Einstellungen von Webflow und ein weiteres, das über deinen benutzerdefinierten Code eingefügt wurde (oder noch schlimmer, ein leerer/ungültiger kanonischer Link). Suchmaschinen ignorieren möglicherweise beide Duplikate oder wählen das falsche aus, aber in beiden Fällen wird Ihre Suchmaschinenoptimierung in der Regel darunter leiden.

Überblick über die Lösung

Die Lösung ist einfach: Fügen Sie Ihr benutzerdefiniertes Canonical hinzu und entfernen Sie das andere. In der Praxis habe ich festgestellt, dass <head>für solche Artikel zwei benutzerdefinierte JavaScript-Codes im Tag der CMS-Seitenvorlage erforderlich sind. Die Skripte machen ein paar Dinge in der folgenden Reihenfolge:

Wähle einen benutzerdefinierten kanonischen Link wenn es wird optional für deinen Artikel im CMS gesetzt
Entferne andere Duplikate, die aus deinen globalen Seiteneinstellungen stammen, und stelle so sicher, dass nur ein kanonischer Link für deinen Beitrag existiert
Lege den benutzerdefinierten Link <head>als kanonischen Link für deinen veröffentlichten Beitrag fest

Schritte und Skripte

Bearbeiten Sie zunächst Ihre CMS-Sammlung und fügen Sie ein neues Linkfeld hinzu. Wir haben unseren benannt Kanonischer Link aber du kannst es nennen, wie du willst.

Neues Feld vom Typ = Link benannt **Kanonischer Link,** hinzugefügt zum **Blogbeitrag** Sammlung

Dann macht der Code, den ich verwende, ein paar Dinge:

überprüfen Sie, ob der CMS-Artikel einen Wert in der Kanonischer Link Feld
wenn ja dann
- alle vorhandenen kanonischen Links entfernen und
- erstelle die href mit dem Typ rel= „canonical“ unter Verwendung dieses Werts
sonst nichts tun
‍

Die meisten Empfehlungen der Webflow-Community empfehlen, die globale Standardeinstellung „Canonical“ in Ihren Website-Einstellungen zu deaktivieren und dies manuell über benutzerdefinierten Code auf jeder statischen Seite und jeder CMS-Sammlungsvorlage zu verwalten. Das gibt sicherlich überall eine gute Kontrolle, aber es bedeutet auch zusätzlichen Aufwand für diejenigen von uns, die einen Beitrag nur ab und zu syndizieren. Seit Das ist unser Anwendungsfall, dann besteht unser Ansatz für den Code darin, einfach immer jedes Canonical nur in den Posts zu ersetzen, für die stattdessen ein benutzerdefiniertes vorhanden ist. Beachten Sie, dass der „sonst nichts tun“ -Aspekt dieses Skripts sehr wichtig ist, da es sehr leicht ist, versehentlich einen doppelten kanonischen Link zu setzen oder Ihren kanonischen Link sogar ganz zu löschen, wenn das Skript bei der Überprüfung vor Aktionen nicht vorsichtig ist.

Hier ist das Skript, das wir verwenden: Sie können diesen Block im benutzerdefinierten Code der Blog-Posts-Vorlage innerhalb des <head>Bereichs platzieren. Es liest das CMS-Erfassungsfeld und garantiert ein einziges, gültiges kanonisches Tag. Stellen Sie nur sicher, dass Sie Ihre eigene [Canonical Link ▽] -Variable mit dem Feldnamen verwenden, den Sie für Ihre eigene CMS-Sammlung gewählt haben.

<script>
    (function () {
        // If you have a canonical you want to remove (e.g., Webflow global root)
        function addCanonical(href) {
            link = document.createElement("link");
            link.href = href;
            link.rel = 'canonical';
            document.getElementsByTagName('head')[0].appendChild(link);
        }

        function removeEl(el) {
            if (el && el.parentNode) el.parentNode.removeChild(el);
        }

        function ensureZeroCanonical() {
            var links = Array.prototype.slice.call(document.querySelectorAll('link[rel="canonical"]'));

            // Remove empty or invalid canonical tags (e.g., href="")
            links.forEach(function (link) {
                var href = link.getAttribute("href") || "";
                removeEl(link);
            });
        }

        function runCleanup() {
            const curl = "[Canonical link ▽]"; // Set your preferred canonical URL here
            if (curl !== "") {
                ensureZeroCanonical();
                addCanonical(curl);
            }
        }

        if (document.readyState === "complete") {
            runCleanup();
        } else {
            window.addEventListener("load", runCleanup);
        }
    })();
</script>

Benutzerdefinierter Code wurde dem hinzugefügt **CMS-Seitenvorlage für Blogbeiträge**, innerhalb der <head>Gegend

Und voila! Nachdem diese wenigen Dinge eingerichtet und die Seite wieder veröffentlicht wurde, enthält mein Blogbeitrag jetzt einen korrekten, gültigen kanonischen Linksatz, so wie ich ihn benötige, während alle anderen einfach die globale kanonische Standardeinstellung von Webflow verwenden.

*Richtig und nur einer* kanonischer Link 🥹

Zusammenfassung — Checkliste für die Einrichtung

Fügen Sie Ihrer CMS-Sammlung für Blogbeiträge ein Link-Feld mit dem Namen „Canonical Link“ hinzu.
Fügen Sie in den Einstellungen für die Vorlage für Blogbeiträge den obigen benutzerdefinierten Code in das ein <head>(achten Sie darauf, Ihren eigenen Variablennamen zu verwenden).
<head>Veröffentlichen Sie die Website und einen Blogbeitrag mit einem benutzerdefinierten Canonical, öffnen Sie den Beitrag und überprüfen Sie Folgendes:
- Wenn das Feld Canonical Link gefüllt ist: Das Canonical-Tag sollte auf Ihre benutzerdefinierte URL verweisen.
- Wenn das Feld leer ist: Du solltest eine kanonische Seite sehen, die auf die aktuelle Seite verweist, ohne Duplikate.

Wann sollten kanonische Werte pro Element verwendet werden

Syndizierter Inhalt, der ursprünglich an anderer Stelle veröffentlicht wurde.
Konsolidierung doppelter Pfade, bei denen nur einer einen Rang haben sollte.
Ältere URLs, die immer noch Signale sammeln, aber zu einer neuen Struktur umleiten.
Experimentelle Seiten oder A/B-Varianten, bei denen nur eine als maßgebliche Quelle indexiert werden sollte.

Was nicht zu tun ist

Fügen Sie nicht mehrere kanonische Wörter hinzu, in der Hoffnung, dass Suchmaschinen es herausfinden; das tun sie oft nicht.
Verwende keine relativen URLs in kanonischen Tags; verwende immer absolute, normalisierte URLs.
Richten Sie kanonische Zeichen nicht auf völlig unterschiedliche Inhalte. Kanonische Zeichen sind für nahezu identische Seiten gedacht, auf denen Sie Signale konsolidieren möchten.

Die Einfachheit von Webflow ist eine Stärke, aber SEO erfordert oft eine differenzierte Kontrolle. Mit etwas benutzerdefiniertem Code können Sie die Benutzerfreundlichkeit der Plattform beibehalten und gleichzeitig Ihren CMS-Elementen ein präzises kanonisches Verhalten verleihen nur bei Bedarf. Das Ergebnis: klarere Signale, weniger Überraschungen bei der Indexierung und eine zuverlässigere Leistung für syndizierte oder ältere Inhalte.

‍