JS Texto Aleatorio con JSON-LD

En este tutorial aprenderás cómo funciona y cómo activar el módulo de texto aleatorio con JSON-LD en la plantilla NichoClean v2.0. Esta función está pensada para mostrar entradas o fragmentos de texto seleccionados al azar desde el feed de tu blog, con un formato visual limpio, responsive y optimizado para SEO.

Si usas NichoClean v2.0, este script ya viene integrado y permite cargar dinámicamente contenido desde una etiqueta específica del blog, generando además datos estructurados JSON-LD para que Google entienda mejor cada artículo mostrado. Es perfecto para secciones de frases inspiradoras, artículos destacados o bloques de contenido dinámico.

🎯 ¿Qué hace este script?

El script de texto aleatorio carga una lista de entradas desde una etiqueta (por ejemplo, “Diseño”, “Consejos” o “Tips”), las mezcla aleatoriamente y muestra solo una cantidad específica. Esto permite que cada vez que alguien visite tu blog, vea contenido diferente, haciendo tu sitio más dinámico y manteniendo el interés del lector.

Además, cada bloque genera automáticamente su JSON-LD tipo Article, lo que mejora la visibilidad de tus contenidos en los resultados de búsqueda de Google.

🚀 Ventajas principales

Contenido aleatorio: Cada carga muestra entradas distintas.
Automatización total: No necesitas editar el HTML cada vez.
Datos estructurados: Mejora tu SEO con JSON-LD automático.
Diseño adaptable: Compatible con todos los layouts de NichoClean v2.0.
Configuración sencilla: Solo cambias una etiqueta y un número máximo de entradas.

🧩 Cómo se usa en NichoClean v2.0

Para insertar un bloque de texto aleatorio en cualquier parte de tu blog (post, gadget o página estática), simplemente agrega el siguiente shortcode HTML:

<div class="feed-text" data-variant="grid" data-tag="demo" data-max="6"></div>
<div class="feed-text" data-variant="alternate" data-tag="demo" data-max="6"></div>
<div class="feed-text" data-variant="titles" data-tag="demo" data-max="6"></div>

🔹 Parámetros disponibles

data-tag: nombre de la etiqueta desde la que se tomarán las entradas.
data-max: cantidad máxima de entradas a mostrar (por defecto 6).
data-variant: define el estilo visual. Opciones:
- grid → muestra bloques con título, texto y botón “Leer más”.
- alternate → alterna imagen y texto a izquierda/derecha.
- titles → solo muestra títulos enlazados.

💻 Código JavaScript completo

Este código ya viene incluido en la plantilla NichoClean v2.0. Si estás personalizando tu tema manualmente, puedes insertarlo antes del cierre de </body>.

<!-- 10. Js TEXTO aleatorio con JSON-LD -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.feed-text').forEach(function (block) {
    const tag = block.dataset.tag;
    const max = parseInt(block.dataset.max || 6);
    const variant = block.dataset.variant || "grid";
    const url = `/feeds/posts/default/-/${tag}?alt=json&max-results=50`;

    fetchWithCacheManager(url) // usa la duración del gadget #config-cache
      .then(data => {
        let entries = data.feed.entry || [];

        // Mezclar aleatoriamente
        entries = entries.sort(() => Math.random() - 0.5).slice(0, max);

        let html = '';
        const jsonLD = {
          "@context": "https://schema.org",
          "@graph": []
        };

        entries.forEach((entry, i) => {
          const title = entry.title.$t;
          const link = entry.link.find(l => l.rel === 'alternate').href;
          const content = entry.content?.$t || entry.summary?.$t || '';
          const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
          const img = imgMatch ? imgMatch[1] : '';
          const cleanText = content.replace(/<[^>]+>/g, '').substring(0, 150) + '...';
          const author = entry.author?.[0]?.name?.$t || "Autor desconocido";
          const authorUrl = entry.author?.[0]?.uri?.$t || "";

          // Mantener lógica visual
          if (variant === 'grid') {
            html += `
              <div class="item-text grid">
                <h3><a href="${link}">${title}</a></h3>
                <p>${cleanText}</p>
                <a href="${link}" class="read-more">Leer más</a>
              </div>`;
          } else if (variant === 'alternate') {
            const reversed = i % 2 !== 0;
            html += `
              <div class="item-text alt ${reversed ? 'reverse' : ''}">
                <div class="img"><img src="${img}" loading="lazy" alt="Imagen del artículo: ${title}"></div>
                <div class="text">
                  <h3><a href="${link}">${title}</a></h3>
                  <p>${cleanText}</p>
                  <a href="${link}" class="read-more">Leer más</a>
                </div>
              </div>`;
          } else if (variant === 'titles') {
            html += `
              <div class="item-text title-only">
                <h3><a href="${link}">${title}</a></h3>
              </div>`;
          }

          // Agregar JSON-LD para cada entrada
          jsonLD["@graph"].push({
            "@type": "Article",
            "headline": title,
            "image": img,
            "author": {
              "@type": "Person",
              "name": author,
              "url": authorUrl
            },
            "datePublished": entry.published?.$t || "",
            "dateModified": entry.updated?.$t || "",
            "mainEntityOfPage": link
          });
        });

        block.innerHTML = html;

        // Insertar JSON-LD en el DOM
        const scriptLD = document.createElement('script');
        scriptLD.type = 'application/ld+json';
        scriptLD.textContent = JSON.stringify(jsonLD, null, 2);
        block.appendChild(scriptLD);

      })
      .catch(err => {
        block.innerHTML = "<p>No se pudieron cargar las entradas.</p>";
        console.error("Feed error:", err);
      });
  });
});
//]]>
</script>

⚙️ Recomendaciones de uso

Usa etiquetas con contenido variado para aprovechar mejor la aleatoriedad.
No repitas demasiados bloques .feed-text en la misma página (recomendado máximo 3).
Si modificas el CSS de la plantilla, asegúrate de mantener las clases .item-text para conservar el estilo visual.
Este módulo funciona en conjunto con el fetchWithCacheManager del sistema de caché interno de NichoClean v2.0.

💡 Ejemplo práctico

Para mostrar 3 textos aleatorios de la etiqueta “Motivación” en formato alterno, usa este código:

<div class='feed-text' data-tag='Motivación' data-max='3' data-variant='alternate'></div>

🏁 Conclusión

El módulo Js TEXTO aleatorio con JSON-LD es una de las funciones más dinámicas de NichoClean v2.0. Te permite mantener tu blog fresco, visualmente atractivo y optimizado para buscadores sin esfuerzo. Al usar contenido aleatorio enriquecido con datos estructurados, mejoras la experiencia del usuario y el rendimiento SEO de tu sitio.

Recuerda revisar tus etiquetas activas y combinar este módulo con otros componentes automáticos de la plantilla para potenciar tu estrategia de contenido. 💪