Caso de Éxito: ¿Canónicas Duplicadas? Solución en Page Builders

El mundo del SEO técnico es algo apasionante de eso no caben dudas!

Aunque a veces negros nubarrones parecen presagiar tormentas que, si no tienes cuidado, y estás observando, y sobre todo, validando constantemente los cambios que implementas, pueden convertir tu trabajo en una verdadera pesadilla.

Esta es una bitácora del Capitán Ahab, y la que les cuento a continuación es la historia de una encarnizada batalla en la que me vi envuelto. contra una gran ballena SEO:

LAS CANÓNICAS DUPLICADAS EN LOS CONSTRUCTORES DE PÁGINAS.

Ante todo, utilizo SITEJET para realizar landing – pages porque es un constructor muy maleable y liviano para el diseño de páginas sencillas. Además de que se trabaja de forma modular muy similar a Elementor, por lo que para el que está habituado a esta herramienta, no encontrará grandes diferencias.

Como estaba diseñando una landing temporal. no quería pasar mucho tiempo trabajándola, así que fui a algo sencillo.

En teoría no debería llevar más de una hora.

Aclaro que no uso código, no porque crea que no sirve, sino porque no lo he aprendido (esa es una asignatura pendiente que resolveré en el futuro próximo).

La línea de trabajo era sencilla, esta landing temporal “redirect.nrcdigitales.com” apuntaría al dominio nrcdigitales.com, por lo que los usuarios que ingresen en esta serían redirigidos a la landing temporal.

¿Cómo lo haría? Creando una redirección 302 desde el sitio original hacia la landing page, para que el público ingrese por la URL principal pero no la vea mientras rediseño. Luego, cuando finalizara este, lo único que tenía que hacer era quitar esta redirección, eliminar la landing, y mi nueva página volvería a estar accesible.

Adicionalmente declararía como URL canónica en la landing a nrcdigitales.com.

Para no convertirme en uno de esos SEO que hablan en chino, me detendré un minuto para explicarles de forma sencilla qué son las redirecciones, qué tipos se utilizan y qué demonios es una URL CANÓNICA (que no, no es el nombre de la web del Vaticano… Aunque… no es mala idea 😂).

REDIRECCIÓN. ¿QUÉ ES Y PARA QUÉ SE USA?

Una redirección es cuando le indicas a Google que tu dirección principal debe llevar a quienes la visiten a otra dirección. Esto es muy común, como les decía, cuando quieres rediseñar una página, pero no quieres que vean un feo y para nada cliqueable “SITE UNDER CONSTRUCTION”, sino que puedan seguir conociéndote y contratándote. Un rediseño no debe dejarte fuera del negocio, ni siquiera por un minuto.

Existen dos tipos de redirecciones;

REDIRECCIÓN 301: Esta es una redirección permanente, es decir que no se puede deshacer. La utilizas generalmente cuando cambias tu nombre de dominio, por ejemplo: de cachorros-mascotas.com, a cachorrosymascotas.com. No sé qué diferencia habría, ambas son bastante ilegibles, pero bueno, ahí tienes el ejemplo, haz con él lo que quieras.

Si todos te conocen por el primer nombre de dominio, (lo que sería por sí misma una proeza 🥵), sería un suicidio de tráfico cambiar directamente de nombre porque ni tus clientes sabrán que eres tú.

Es como si tú que te llamas Juan, de pronto y sin avisar te pusieras de nombre Pedro; nadie te reconocería. Con una 301 lo que haces es decirles a tus clientes, “sí, para tí todavía soy Juan, pero vete acostumbrando a llamarme Pedro”.

REDIRECCIÓN 302: A diferencia de la anterior esta sí se puede deshacer, por lo que resulta muy útil si quieres conservar tu dominio, y rediseñar sin perder tráfico ni aumentar la tasa de rebote por ver un sitio a medio hacer, o con el cartel espantaclientes del que te hablaba antes, durante el tiempo que te lleve esta tarea.

Siguiendo el ejemplo de los nombres, con esta redirección le estarías diciendo a tus visitantes: “Me sigo llamando Pedro, pero por un tiempo no me busques en casa porque la están remodelando. Me encuentras en esta dirección”.

No sé qué tienen que ver Pedro o Juan en todo esto, pero así es la cosa. Cualquier cosa consúltalo con ellos.

AHORA VEAMOS QUÉ ES UNA URL CANÓNICA.

Bien, el primer punto para diferenciarlas de las redirecciones es saber sobre qué elemento del SEO actúan. Les dije que las redirecciones se hacen sobre los dominios (o subdominios como en este caso puntual, ya que la landing page se creó en un subdominio de nrcdigitales.com.

Una canónica se aplica a la URL, y en términos sencillos, le indica a Google qué dirección quieres que tome como la «oficial» de una página. Es la que va a indexar, y la que mostrará cuando un navegante de la Red realice una búsqueda relacionada con nuestros productos o servicios. La que representa tu autoridad como marca. (Por ejemplo https://www.misitio.com).

En código HTML se escribe (o declara) así:

Las canónicas establecen la jerarquía que para Google (o cualquier buscador y ahora la IA) deben tener las URLs. En el ejemplo del rediseño que estaba realizando, le estoy diciendo a los buscadores que mi URL principal es otra diferente a la que estoy creando, y que esta landing-page está subordinada a la principal.

En otras palabras, estoy diciendo: “La página que manda es esta: https://www.misitio.com, y las demás son secundarias”.

¿Y POR QUÉ TENER DOS URLs CANÓNICAS ES UN PROBLEMA?

Cuando Google encuentra dos canónicas en conflicto, puede ignorar ambas y decidir por su cuenta qué URL indexar. En el mejor de los casos, diluye la autoridad entre las dos URLs. En el peor, indexa la que no quieres y puede generar canibalización si ambas URLs compiten por una misma palabra clave. (Otra Ballena Azul para el SEO, la canibalización, de la que no hablaré ahora, porque da para un post entero).

Ok, si no sabías sobre redirecciones y URLs canónicas, ahora ya lo sabes. Entonces, podemos continuar con el caso de marras.

Estaba trabajando en esta landing page cuando de pronto sonó mi alarma de PROBLEMA SEO.¿Qué estaba pasando? Te lo cuento ahora mismo.

TANTO VA EL BUILDER A LA URL QUE AL FINAL LA ROMPE.

Si usas constructores de páginas como Wix, Squarespace, Elementor, Divi, Gutemberg o SiteJet (hay muchos, más y menos confiables, pero te digo los más conocidos para no hacer una lista interminable y porque el tiempo en los blogs, como en la tele es tirano 🤡).

Estos constructores (y hablo de prácticamente todos) generan automáticamente una URL canónica para cada página que creas.

En mi caso, ya te lo había dicho, había configurado una redirección 302 desde mi dominio principal nrcdigitales.com hacia una landing temporal. La intención era clara: que los usuarios aterricen en la landing, pero que Google reconociera nrcdigitales.com como la URL de autoridad.

El problema es que SiteJet hacía esto automáticamente en el HTML:

Y no permitía modificarlo ni borrarlo.

Y yo necesitaba agregar esto:

Resultado: dos etiquetas canónicas en el mismo HTML. Y eso es un problema serio, como te comenté más arriba.

El trabajo que me iba a llevar una hora, a estas alturas estaba lejos de ser este, así que me puse a la tarea de intentar resolver esta cuestión.

Estuve investigando bastante y probando varias posibles soluciones en todas partes, hasta que decidí consultar con la IA (recuerden que yo sé lo que hay que hacer, pero no escribo código, por lo que la solución debía venir de alguien que sí supiera hacerlo).

Y en este sentido CLAUDE, de Anthropics es la mejor opción, y la IA que mejor entiende de código HTML (y muchos otros lenguajes de programación) según la humilde opinión de este escriba.

Total que, entre investigación, prueba y la solución, llevaba más de 3 horas de “Inferno SEO”, y de no ser por Claude, este no parecía querer terminar a la brevedad.

De entre muchas posibles soluciones (varias probadas y con resultados negativos), destaco cuatro de las propuestas por la IA.

Se las detallaré ordenadamente, desde la más simple a la que mejor funciona, y al final de este post les dejo el paso a paso con imágenes, de la que me funcionó a mí, para que puedan lidiar con este problema sin necesidad de perder tiempo (ya lo perdí yo por ustedes, 😂😂😂).

LAS 4 SOLUCIONES QUE ENCONTRÉ (Y CUÁNDO USAR CADA UNA)

SOLUCIÓN 1: NATIVA DEL BUILDER

La solución ideal es que el mismo builder les deje modificar la canónica desde su panel de configuración, sin utilizar código, ni modificar archivos. Algunos lo llaman «SEO Settings», otros «Advanced Meta», pero la idea es la misma.

¿Por qué es la ideal? Porque no dependen de código externo, no tocan el .htaccess y no corren riesgos de “romper platos” por impericia..

Ventajas: sin código, sin riesgo de errores, control total desde el panel.

Desventajas: casi ningún builder lo ofrece. SiteJet tiene reclamos no resueltos desde 2021, y sólo se limita a invitar al usuario a generar un reclamo para que traten en futuras versiones el agregado de algo que posibilite la modificación manual de las canónicas. No sé, estarán esperando que sus clientes empiecen a utilizar otro constructor, para solucionarlo.

SOLUCIÓN 2: SOLUCIÓN SERVER-SIDE VIA .HTACCESS

Ok, nada de “control nativo” entonces (en el continente Americano esto existe desde 1492, y SiteJet no puede desde 2021… 😡, perdón, mal chiste), entonces lo haremos desde el servidor.

La idea es enviar la URL canónica correcta como un HTTP Header en cada respuesta, antes de que el HTML llegue al navegador (o a Google).

Para esto deberás acceder al archivo .htaccess de tu servidor Apache. Si usas Nginx, el equivalente sería en el bloque server de tu configuración.

Una vez que estés en el .htaccess, deberás agregar este código.

Header set Link «<https://www.nrcdigitales.com>; rel=\»canonical\»»

</IfModule>

Tengan cuidado con esta implementación, porque Google puede decidir priorizar la canónica HTML antes que la canónica HTTP inscripta en el .htaccess en caso de conflicto. Debido a esto, no es conveniente implementarla sola, ya que los resultados pueden no ser los esperados.

Ventajas: no depende de JavaScript, actúa antes de la carga del HTML, funciona siempre que el servidor responda.
Desventajas: requiere acceso al servidor, Google puede preferir la canónica HTML en caso de conflicto.

SOLUCIÓN 3: SOLUCIÓN CLIENT-SIDE CON JAVASCRIPT

Si el builder permite inyectar código custom en el head del HTML, (casi todos lo hacen hoy en día, en algún apartado de «Custom Code», «Scripts» o “Meta tags”, como en el caso de SiteJet), pueden usar JavaScript para que, una vez que cargue el DOM, elimine la canónica auto-generada y declare la que le indiquen en el código.

(function() {

const existingCanonicals = document.querySelectorAll(‘link[rel=»canonical»]’);

existingCanonicals.forEach(el => el.remove());

const canonical = document.createElement(‘link’);

canonical.setAttribute(‘rel’, ‘canonical’);

canonical.setAttribute(‘href’, ‘https://www.nrcdigitales.com’);

document.head.appendChild(canonical);

})();

Ventajas: funciona con cualquier builder con Custom Code, control total sobre el DOM, no requiere acceso al servidor.
Desventajas: depende de que JS esté habilitado, pues se ejecuta después de cargar el DOM.

SOLUCIÓN 4: SOLUCIÓN COMBINADA – HTTP HEADERS + JAVASCRIPT (LA QUE YO USÉ)

Esta solución es la más robusta, y la que mejor se adapta a cualquier entorno, tengas JS habilitado, o no, e incluso si tienes conflictos entre URL.

Funciona así: El servidor envía la canónica correcta en el HTTP Header. Y JavaScript, al cargar el DOM, elimina cualquier canónica residual autogenerada y deja la definitiva en el HTML. Con esto tienen una doble protección contra casi cualquier contratiempo que pueda presentarse con las canónicas.

No es necesario que ninguna de las capas (HTTP, HTML) funcionen a la perfección. Si el servidor falla, JS responde desde la cabecera html. Y si JS no carga, (bots no lo permiten, configuraciones restrictivas) el HTTP ya hizo su trabajo. Si el constructor no tiene control nativo, esta es la mejor solución de todas.

Ventajas: doble capa de protección, funciona aunque una capa falle, la más robusta sin control nativo.
Desventajas: requiere acceso al servidor Y custom code, más pasos de implementación.

RESULTADOS VERIFICADOS.

Una sola canónica apuntando a nrcdigitales.com.
Cero errores en Search Console.
Verificado con Google Rich Results Test.
Tiempo de implementación: aproximadamente 30 minutos.
Costo: $0, solo código.

¿LES PASÓ ALGO PARECIDO?

No, no crean que yo soy el único que tuvo mala suerte, ni supongan que es un error que puede pasar una vez cada 1000 Gogolplex, o 100000 trillones de cuatrillones de veces, o sea nunca. Es bastante frecuente y si no les pasó les puede pasar en cualquier momento, si utilizan constructores y quieren realizar configuraciones de dominios personalizadas.

Y lo peor de todo es que no avisa, y no es fácil de detectar si no estamos especialmente atentos a que esto puede pasar; y pasa.

Por eso y para terminar he creado este paso a paso para implementar la solución que me funcionó. Apoyada por capturas de pantalla para que puedas seguir el proceso en cada momento. Este procedimiento puede realizarlo tanto un profesional SEO, como quien no conoce nada de este vastísimo universo. Basta con prestar atención a cada paso y seguir al pie de la letra las indicaciones de cada uno, podrán solucionar el problema de las canónicas duplicadas, y lo que es más interesante: en cualquier constructor que estén utilizando y que permita custom code (imprescindible).

—

PASO A PASO: CÓMO IMPLEMENTAR LA SOLUCIÓN COMBINADA

PASO 1: VERIFICA EL PROBLEMA EN EL NAVEGADOR

Abre tu sitio en el navegador.
Haz clic derecho en cualquier parte de la página y selecciona «Ver código fuente» (o Ctrl+U en Windows, Cmd+U en Mac).
Busca la palabra «canonical» usando Ctrl+F.
Si ves más de una línea con rel=»canonical», ¡Tienes el problema!

PASO 2: AGREGAR EL JAVASCRIPT EN EL BUILDER

Ingresa al panel de administración de SiteJet (o tu builder).
Abre tu página como si fueras a modificarla.
Busca la sección de Custom Code o Scripts, generalmente en Configuración de SEO o SEO Settings.

Acceso al panel de Configuración de SEO en SiteJet.

Selecciona que el código se ejecute en el head. Para esto deberás encontrar la sección en la que puedes insertar código en esta parte. Debajo te muestro dónde lo haces con SiteJet. Si tienes otro constructor, busca la sección donde puedas hacerlo. Es muy importante que puedas insertar el código en el head de la página, porque de lo contrario, no se ejecutará, y tu problema no desaparecerá. (O sí, pero en este caso, porque tienes la doble protección).
Pega el siguiente código, reemplazando la URL destacada por la tuya:

(function() {

const existingCanonicals = document.querySelectorAll(‘link[rel=»canonical»]’);

existingCanonicals.forEach(el => el.remove());

const canonical = document.createElement(‘link’);

canonical.setAttribute(‘rel’, ‘canonical’);

canonical.setAttribute(‘href’, ‘https://nrcdigitales.com‘);

document.head.appendChild(canonical);

})();

Guarda y publica los cambios.

La sección “Etiquetas meta” en SiteJet inserta código HTML en el head de la página. Dentro de “Configuración de SEO”. Código ya insertado correctamente.

PASO 3: ACCEDE AL ARCHIVO .HTACCESS DESDE EL HOSTING

Ingresa al panel de control de tu hosting (en mi caso es CPanel).

En CPanel, dentro de Tools ingresas a la sección Dominios, en el panel central.

La sección Dominios de tu administrador de CPanel.

Navega hasta la carpeta raíz del sitio que quieres editar, generalmente llamada public_html o www. Es sumamente crucial que lo hagas en el subdominio desde el que vas a declarar la canónica, no en otra carpeta. ¡Atención con esto!

En la lista con tus dominios haz clic en el enlace /public_html/, imposible equivocarse pues tiene el ícono de una casita 😁.

Localiza el archivo .htaccess. Si no lo ves, activa la opción «mostrar archivos ocultos» y podrás verlo.

La ventana del administrador de archivos dentro de CPanel, donde puedes ver el .htaccess.

PASO 4: EDITAR EL .HTACCESS

Abre el archivo .htaccess con el editor de texto del hosting. Puedes hacer clic derecho como cualquier carpeta normal, y elegir Editar o Edit (como mi tía, pero ella tiene h. Igual es muda… ¡No mi tía, la h!).

Si haces clic con el botón derecho sobre el archivo .htaccess podrás editar el archivo.

Agrega el siguiente bloque al inicio del archivo, reemplazando la URL destacada por la tuya:

Header set Link «<https:/nrcdigitales.com>; rel=\»canonical\»»

</IfModule>

Guarda los cambios.

En esta imagen puedes ver el código perfectamente agregado al .htaccess

Los siguientes pasos son los de verificación de que todo está correctamente implementado.

PASO 5: VERIFICAR CON GOOGLE RICH RESULTS TEST

Abre Google Rich Results Test en search.google.com/test/rich-results.
Ingresa la URL de tu sitio y haz clic en «Probar URL».
Una vez que cargue, busca en los resultados la sección de metadatos o inspecciona el código renderizado.
Deberías ver una única etiqueta canonical apuntando a tu dominio principal.

Esta es la ventana principal de Google Rich Results Test.

Ingresa la URL que deseas verificar. Para este caso será el subdominio ya que necesitas ver que esté correctamente implementado.

Google está testeando tu URL, en busca de las etiquetas “rel=canonical”, deberías tener una sola apuntando a tu dominio principal.

Si ves una ventana parecida a esta y sin errores (en rojo o amarillo), has hecho el trabajo correctamente.

PASO 6: CONFIRMAR EN GOOGLE SEARCH CONSOLE

Ingresa a Google Search Console en https://search.google.com/search-console?hl=es.
Haz clic en el botón azul “Empezar ahora”

En el menú lateral, busca el apartado “Inspección de URLs”.

Ingresa tu URL principal y pulsa Enter, para comenzar una inspección.

Espera unos segundos a que Google realice la búsqueda

En los resultados, revisa que la URL canónica declarada coincida con la que quieres indexar en Google.

Si alguno de estos ítems te aparece en otro color revisa nuevamente tu implementación y verifica que no te hayas saltado ningún paso. Si realizaste los pasos correctamente deberías ver algo así.

¡FELICIDADES! Has implementado una solución de alto nivel para el problema de tus canónicas duplicadas, y nunca más las verás.

Ahora sí, para finalizar, guarda bien esta información porque nunca sabes cuándo podrás necesitarla.

Nada de esto es excesivamente complicado, si prestan atención a todos los pasos y los siguen al pie de la letra. ¡A mí me funciona de maravillas!

Gracias por leer.

Ricardo Cirelli

Owner at NRC Digitales | Website | + posts

Ricardo Cirelli es un "furioso del Marketing", como dice su gran referente Romuald Fons. Descubre el SEO, viniendo del mundo de la Informática (es, además técnico de computadores), aunque ahora, dice: "Descubrí mi segundo gran amor, luego de mi esposa", el SEO, y ayudar a las empresas a potenciar su presencia en Internet, y acrecentar sus ventas. Escribió 5 e-books, y más de 15 informes (breves documentos sobre tecnología), abarcando una amplia gama temática como aplicaciones, realidad virtual y realidad aumentada, IA, domótica, Exel, VBA, y Metaverso, para RED USERS, prestigiosa publicación digital y en papel sobre tecnología, con presencia en más de 15 países de habla hispana.

Hoy brinda mentorías y auditorías SEO, para pequeños negocios y PyMEs, además de todo tipo de asesorías SEO y Copywriting.

Caso de éxito: ¿canónicas duplicadas? ¿Cómo lidiar con este flagelo cuando el builder no colabora?

LAS CANÓNICAS DUPLICADAS EN LOS CONSTRUCTORES DE PÁGINAS.

REDIRECCIÓN. ¿QUÉ ES Y PARA QUÉ SE USA?

AHORA VEAMOS QUÉ ES UNA URL CANÓNICA.

¿Y POR QUÉ TENER DOS URLs CANÓNICAS ES UN PROBLEMA?