EJS Canonical Tags con Variables de Entorno y HTTPS Dinámico

JAVASCRIPT / EJS 9 de abril de 2026 67 lecturas

Snippet para implementar etiquetas en EJS, sincronizadas desde Node.js con una URL base de entorno y soporte dinámico para HTTPS.

SEO Técnico: Prevención de Contenido Duplicado con Canonical Tags Dinámicas

En el desarrollo web, lo que el usuario ve no siempre es lo que el motor de búsqueda interpreta. Para Googlebot, las URLs http://andressy.dev, https://andressy.dev, https://www.andressy.dev y https://andressy.dev/ (con barra diagonal al final) son técnicamente cuatro páginas completamente distintas. Si tu servidor renderiza el mismo contenido en todas ellas, los motores de búsqueda te penalizarán drásticamente por "Contenido Duplicado" (Duplicate Content), diluyendo tu autoridad de dominio y bloqueando cualquier intento de monetización.

La solución estándar de la industria para consolidar el tráfico y definir la "URL Maestra" es la etiqueta <link rel="canonical">. Sin embargo, en aplicaciones renderizadas del lado del servidor (SSR) con Node.js y EJS, codificar estas URLs a mano (hardcoding) es un error de arquitectura masivo. Este snippet resuelve el problema mediante la inyección dinámica de variables de entorno.

Arquitectura de Inyección: Del Controlador a la Vista

La magia de esta implementación reside en cómo Express y EJS se comunican de forma síncrona. Analicemos el flujo del lado del servidor:

Gestión de Entornos (process.env.BASE_URL): Un código Senior no debe romperse al pasar de localhost a producción. Al extraer el dominio base del archivo .env, garantizamos que la etiqueta canonical apuntará correctamente a http://localhost:3000 en tu máquina de desarrollo, pero inyectará el protocolo seguro https:// y tu dominio oficial cuando se despliegue en producción.
Sanitización de Cadenas (Regex): Observa la línea baseUrl.replace(/\/+$/, ""). Esta es una expresión regular de limpieza. Asegura que, si alguien configura la variable de entorno con una barra diagonal extra por accidente (ej. https://andressy.dev/), el sistema la mutile. Esto previene la generación de URLs rotas o con doble barra (como https://andressy.dev//articulos).
Mapeo de Rutas (req.originalUrl): Express captura dinámicamente la ruta exacta que el usuario está visitando (por ejemplo, /snippets/ejs-canonical). Pasamos este valor limpio al motor de plantillas a través del objeto local de la vista.

Renderizado Condicional en EJS

En el lado del frontend (tu archivo head.ejs), no podemos simplemente imprimir la etiqueta a ciegas.

Protección contra vistas estáticas: Al utilizar la directiva de control <% if (locals.currentPath) { %>, le indicamos a EJS que evalúe si el controlador de Node.js efectivamente envió esa variable. Si una vista de error (como un 404 o 500) se renderiza sin esta variable, el sistema omitirá la etiqueta canonical, evitando decirle a Google que indexe tus páginas de error, lo cual sería catastrófico para tu Crawl Budget (Presupuesto de Rastreo).

Implementar este patrón de Canonical Tags dinámicas es el puente definitivo entre la Ingeniería Backend y el Marketing Digital. No solo demuestra que sabes programar, sino que entiendes cómo tu código interactúa directamente con los algoritmos de posicionamiento web.

/* =========================================================================
   1. Configuración del Controlador (Node.js - Express)
   ========================================================================= */

// Asegúrate de tener BASE_URL=https://andressy.dev en tu archivo .env

export const getIndex = async (req, res) => {
    try {
        const projects = await Project.find();
        
        // Obtenemos la URL base del entorno
        const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
        
        // Limpiamos la URL base (eliminamos barra diagonal final si existe)
        const cleanBaseUrl = baseUrl.replace(/\/+$/, "");
        
        // Construimos el path actual (ej: /proyectos o /articulos/id)
        const currentPath = req.originalUrl;

        res.render('public/index', {
            projects,
            // Pasamos la variable dinamica currentPath a la vista
            currentPath
        });
        
    } catch (error) {
        console.error('Error cargando index:', error);
        res.status(500).render('500');
    }
};

/* =========================================================================
   2. Implementación en la Vista (EJS - head.ejs)
   ========================================================================= */

/*
<head>
    <% if (locals.currentPath) { %>
        <link rel="canonical" href="<%= process.env.BASE_URL + currentPath %>" />
    <% } %>

    </head>
*/