Cómo configurar una URL canónica por elemento en Webflow CMS

Nick Wade

October 9, 2025

Y ahora, algo diferente. Si publicas mucho contenido usando Flujo web, es probable que en algún momento te hayas topado con un problema de SEO común con los enlaces canónicos. La configuración global del sitio web de Webflow facilita la adición de una sola etiqueta canónica en todas las páginas de tu sitio. Esto es muy útil. Pero, ¿qué ocurre cuando un elemento específico del CMS, por ejemplo, una entrada de blog distribuida desde otro dominio, necesita su propio enlace canónico? De fábrica, Webflow no ofrece un control por elemento para los elementos canónicos a nivel de elemento del CMS. Además, si usas código personalizado para añadir una etiqueta, puedes mezclar rápidamente etiquetas globales con etiquetas por página, lo que te deja con etiquetas de href duplicadas o vacías que confunden a los motores de búsqueda y perjudican tu SEO.

Aquí en Opus Guard utilizamos Webflow y nos gusta mucho. Pero de vez en cuando tenemos que personalizar el comportamiento para obtener el resultado correcto. En esta publicación, explicaré el problema canónico al que nos enfrentamos con las publicaciones de blog distribuidas de otra fuente original. Además, compartiré dos scripts flexibles que puedes usar en tu plantilla de publicaciones de blog (dentro del <head>área de código personalizada) para resolver este problema en cualquier entrada de blog individual, todo mientras se deja habilitada la configuración global de etiquetas canónicas en Webflow para tu sitio.

El problema: las necesidades canónicas globales frente a las necesidades ocasionales por artículo

El diseñador de Webflow te permite definir un enlace canónico global, pero las etiquetas canónicas son obstinadas: cada página debe tener como máximo un enlace canónico rel= «canónico» que apunte a la URL definitiva de ese contenido. Si tienen más, los motores de búsqueda se confunden y el SEO suele verse afectado.
Para las colecciones de CMS, especialmente las publicaciones de blog, a veces necesitas un canónico por elemento. Por ejemplo, cuando una entrada se publicó originalmente en otro sitio y quieres volver a compartirla (¡con permiso!) , o cuando es necesario respetar una estructura de URL antigua para un solo artículo.
<head>Las colecciones de Webflow CMS pueden tener cualquier cantidad de campos agregados, por lo que puedes agregar un campo de tipo enlace con un nombre como «enlace canónico» y, con un simple código personalizado, insertarlo en el área de una publicación de blog. Nota: Debes hacerlo en la plantilla de la página, en lugar de hacerlo en el código de una incrustación HTML del artículo, para que la mayoría de los rastreadores puedan ver correctamente la etiqueta renderizada.
Si lo haces sin un manejo más cuidadoso, terminarás con varias etiquetas canónicas: una de la configuración global de Webflow y otra inyectada a través de tu código personalizado (o, lo que es peor, un enlace canónico vacío/no válido). Es posible que los motores de búsqueda ignoren ambos duplicados o elijan el incorrecto, pero de cualquier forma, tu SEO normalmente se verá afectado.

Descripción general de la solución

La solución es simple: agrega tu canónico personalizado y elimina el otro. En la práctica, he descubierto que se requieren dos fragmentos de código JavaScript personalizados dentro de la <head>etiqueta de la plantilla de página del CMS para dichos artículos. Los scripts hacen algunas cosas en el siguiente orden:

Elige un enlace canónico personalizado si está configurado opcionalmente para su artículo en el CMS
Elimine otros duplicados que provengan de la configuración global de su sitio, asegurándose así de que solo exista un enlace canónico para su publicación
Configura el enlace personalizado <head>como enlace canónico para tu publicación publicada

Pasos y guiones

Primero, edita tu colección de CMS y agrega un nuevo campo de enlace. Le pusimos nombre al nuestro Enlace canónico pero puedes ponerle el nombre que quieras.

Nuevo campo de type=link denominado **Enlace canónico,** añadido a la **Publicación de blog** Colección

Luego, el código que estoy usando hace algunas cosas:

compruebe si el artículo de CMS tiene un valor en Enlace canónico campo
si es así, entonces
- eliminar todos los enlaces canónicos existentes, y
- cree el href con el tipo rel= «canonical» usando ese valor
de lo contrario no hagas nada
‍

La mayoría de las recomendaciones de la comunidad de Webflow sugieren que desactive el canónico predeterminado global en la configuración de su sitio y que lo administre manualmente mediante un código personalizado en cada página estática y en cada plantilla de colección de CMS. No cabe duda de que esto nos permite tener un control preciso en todas partes, pero también supone un trabajo adicional para quienes distribuimos una publicación solo de vez en cuando. Desde eso es nuestro caso de uso, entonces nuestro enfoque del código es simplemente reemplazar siempre todos los artículos canónicos solo en aquellas publicaciones que tengan uno personalizado. Ten en cuenta que el aspecto de este script de «lo contrario no debes hacer nada» es muy importante, ya que es muy fácil establecer accidentalmente un enlace canónico duplicado o incluso tirar a la basura un enlace canónico por completo si el script no comprueba con cuidado antes de actuar.

Este es el script que estamos usando: puedes colocar este bloque dentro del código personalizado de la plantilla de publicaciones de blog dentro del <head>área. Lee el campo de recopilación del CMS y garantiza una etiqueta canónica única y válida. Solo asegúrate de usar tu propia variable [enlace canónico ▽] con el nombre de campo que hayas elegido para tu propia colección de CMS.

<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>

Código personalizado agregado al **Plantilla de página CMS para publicación de blog**, dentro de la <head>zona

¡Y listo! Con estas pocas cosas listas y el sitio publicado de nuevo, mi entrada de blog ahora tiene un enlace canónico correcto y válido establecido cuando lo necesito, mientras que todos los demás simplemente usan la configuración canónica global predeterminada de Webflow.

Resumen: lista de verificación de configuración

Agrega un campo de enlace llamado «enlace canónico» a tu colección CMS de publicaciones de blog.
En la configuración de la plantilla de publicaciones de blog, pega el código personalizado de arriba dentro del <head>(asegúrate de usar tu propio nombre de variable).
<head>Publica el sitio y una entrada de blog con un canónico personalizado, abre la publicación e inspecciona:
- Si el campo Enlace canónico está completo: la etiqueta canónica debe apuntar a tu URL personalizada.
- Si el campo está vacío: deberías ver un canónico que apunta a la página actual, sin duplicados.

Cuándo usar canónicos por artículo

Contenido sindicado publicado originalmente en otros lugares.
Consolidar rutas duplicadas donde solo una debe clasificarse.
URL antiguas que siguen acumulando señales pero que redirigen a una nueva estructura.
Páginas experimentales o variantes A/B en las que solo se debe indexar una como fuente autorizada.

Qué no hacer

No incluyas varios canónicos con la esperanza de que los motores de búsqueda lo averigüen; a menudo no lo hacen.
No utilices URL relativas en las etiquetas canónicas; utiliza siempre URL absolutas y normalizadas.
No dirija los canónicos a contenido completamente diferente; los canónicos son para páginas casi idénticas en las que desea consolidar las señales.

La simplicidad de Webflow es una fortaleza, pero el SEO a menudo necesita un control matizado. Con un poco de código personalizado, puedes mantener la facilidad de uso de la plataforma y, al mismo tiempo, dar a tus elementos de CMS un comportamiento canónico preciso solo cuando sea necesario. El resultado: señales más limpias, menos sorpresas de indexación y un rendimiento más fiable para el contenido sindicado o heredado.

‍