Bloques de contenido relacionado: reglas de enlazado interno

Un bloque de contenido relacionado es un conjunto breve de enlaces seleccionados manualmente que se coloca al final del cuerpo principal. Lleva al lector a la página siguiente más útil y transmite autoridad interna a través del mismo enlace. Cada destino debe tener una razón editorial para existir; las etiquetas compartidas por sí solas no son suficientes.

El ejemplo renderizado es deliberadamente modesto. Su encabezado explica la elección, cada ancla predice el destino y cada razón le dice al lector por qué esa página es la siguiente. El bloque no compite con el artículo que concluye.

Por qué es importante este elemento

Terminar una página útil crea un punto de decisión. El lector puede entender el tema inmediato pero aún necesita aplicarlo, comparar opciones, aprender un prerrequisito o avanzar hacia un producto. Un bloque de contenido relacionado reduce el esfuerzo de encontrar ese siguiente paso. Ofrece un pequeño conjunto de rutas con propósito en el momento en que el lector está listo para elegir, en lugar de pedirle que regrese a la navegación global o que busque de nuevo.

La segunda función es arquitectónica. La autoridad interna es la importancia y relevancia contextual que los enlaces ayudan a distribuir entre las páginas de un mismo sitio. Un enlace crea un borde entre dos documentos. Su posición, ancla y explicación indican a los sistemas de recuperación qué representa ese borde: qué página es la autoridad amplia, cuál cubre un subtema y cuál responde a una necesidad adyacente.

La extraíbilidad automática significa que un sistema automatizado puede recuperar esas relaciones del HTML sin tener que adivinarlas a partir del diseño visual. Una región de navegación semántica, un encabezado visible, enlaces rastreables ordinarios, anclas descriptivas y un elemento por destino exponen un conjunto limpio de declaraciones de origen–relación–destino. Los carruseles solo con JavaScript, las tarjetas solo con imágenes y las anclas genéricas ocultan esas declaraciones, incluso cuando se ven pulidas.

Ambas funciones deben sobrevivir a la revisión. Un bloque que genera clics pero envía autoridad a páginas no relacionadas daña el modelo de contenido; un mapa de clúster correcto con enlaces irrelevantes desperdicia el punto de decisión del lector.

Cuándo usarlo

Usa este elemento cuando la página tenga de dos a cinco destinos siguientes creíbles y la relación se pueda expresar en una línea. Pertenece a contenido educativo perenne, explicativos comerciales, comparaciones, páginas de producto y de categoría, páginas de caso de uso y casos de estudio cuando otra página realmente avanza la misma tarea o decisión.

No lo añadas simplemente porque una plantilla tiene espacio vacío. Una página de conversión de propósito único con una acción necesaria puede necesitar solo su llamado a la acción de cierre. Un aviso legal, una pantalla de cuenta, un incidente de soporte o una página utilitaria corta pueden no tener una continuación editorial sensata. Un índice cuyo cuerpo principal ya consiste en tarjetas de navegación no necesita una segunda lista que las repita.

Los casos cercanos incorrectos más comunes incluyen:

• Un feed de etiquetas responde a «¿qué comparte esta etiqueta?», no a «¿qué debería hacer este lector a continuación?». Dos artículos etiquetados como «analítica» pueden servir a audiencias y etapas diferentes.
• Publicaciones recientes recompensan la fecha de publicación en lugar de la relevancia. La actualidad es útil para el descubrimiento de noticias, pero no es un modelo de relación.
• Publicaciones populares optimizan para el tráfico agregado, no para la pregunta actual.
• Un mapa del sitio en el pie de página favorece el descubrimiento amplio, no una ruta editorial breve y seleccionada.
• Un control anterior/siguiente refleja el orden de publicación. Solo cuenta cuando ese orden es en sí mismo un curso o secuencia deliberada.
• Enlaces contextuales en línea explican términos o respaldan afirmaciones en el punto de necesidad. Complementan este bloque pero no reemplazan su función de decisión al final de la página.

La selección es manual por defecto. Para cada enlace propuesto, el editor registra una razón como «aplica el método», «define el prerrequisito», «compara las dos opciones introducidas aquí» o «muestra evidencia en la práctica». Si la razón es meramente «misma etiqueta», elimina el elemento.

La selección automática es aceptable en archivos de noticias, colecciones generadas por usuarios o inventarios demasiado grandes y volátiles para una curación elemento por elemento. Incluso así, exige un conjunto candidato controlado, exclusiones para la URL actual y páginas caducadas, actualidad cuando el tiempo importa, relevancia más allá de una etiqueta, un desempate estable y una anulación editorial.

Dónde colocarlo

Coloca el bloque después del cuerpo principal completo y después del bloque de fuentes, pero antes del llamado a la acción de cierre. La razón es secuencial: las fuentes cierran la obligación de evidencia de la página actual; el contenido relacionado ofrece la siguiente ruta de aprendizaje o evaluación; el llamado a la acción final ofrece la ruta comercial o de producto. Cuando una página no tiene bloque de fuentes, el contenido relacionado va después de la sección sustantiva final.

No coloques un segundo bloque de contenido relacionado en otra parte de la página. No lo sitúes junto a una navegación anterior/siguiente duplicada, una nube densa de etiquetas u otra colección titulada «También te puede gustar». Una región de recomendación clara es suficiente.

Anatomía

Leyenda renderizada:

1. Encabezado de sección: nombra la relación, como «Aplica lo que aprendiste» o «Compara las siguientes opciones». El genérico «Relacionado» es aceptable solo cuando los destinos realmente abarcan diferentes acciones.
2. Título del elemento: proporciona el ancla descriptiva y predice el valor principal del destino.
3. URL de destino: se resuelve en una URL interna canónica y rastreable sin cadena de redireccionamiento.
4. Miniatura: opcionalmente distingue un destino cuando las imágenes contienen información identificativa real.
5. Razón en una línea: opcionalmente explica por qué esta página es el siguiente paso lógico; se recomienda encarecidamente cuando la relación no es obvia a partir del título.
6. Límite del bloque: agrupa los enlaces como navegación sin convertir toda la tarjeta en un destino de clic ambiguo.

La leyenda pertenece a la página, no dentro de la imagen, para que siga siendo seleccionable, traducible y accesible para la tecnología de asistencia.

Ejemplos de diseño

Las variantes cambian la densidad de información, no la lógica editorial.

Solo texto: el valor predeterminado cuando los títulos de destino hacen clara la relación.

Con razones: el valor predeterminado para diferentes etapas del recorrido. La razón añade la relación en lugar de repetir el título.

Con miniaturas: reservado para casos donde las imágenes originales ayudan al reconocimiento. Las imágenes necesitan dimensiones y texto alternativo útil, o un texto alternativo vacío cuando el título ya nombra el destino.

Transversal: hace explícitas las relaciones entre tipos de publicación, elementos y aplicaciones de negocio. Se genera a partir del frontmatter revisado, no de etiquetas.

Parámetros

Se permiten solo dos elementos cuando la página tiene una bifurcación estrecha y creíble. De tres a cinco es la banda normal: elección suficiente para servir diferentes necesidades siguientes, pero lo bastante pocos para que cada enlace siga siendo visible e intencional. Seis es una excepción estricta para un pilar que debe exponer un clúster pequeño completo. Más de seis se convierte en un directorio, debilita la señal editorial de cada borde y encarece el escaneo en móvil.

Un atributo de título omitido puede derivarse del primer encabezado del cuerpo del elemento. No proporciones ambos con texto diferente. Una razón puede vivir en el atributo para una frase simple o en el cuerpo cuando necesita énfasis en línea; no debe aparecer dos veces.

Sintaxis y ejemplos de código

El nombre canónico del componente es related-content. La forma anidada ::item{} mantiene juntos los campos de cada destino y evita que los arreglos paralelos se desalineen.

Directiva Markdown portátil

:::related-content{heading="Continúa con el manual" variant="reason"}
::item{title="Escribe una guía práctica fiable" url="/seo-playbook/post-types/how-to-guide/" reason="Convierte las reglas del elemento en una página instructiva completa."}
::item{title="Estructura una guía definitiva" url="/seo-playbook/post-types/ultimate-guide/" reason="Conecta este elemento con un pilar amplio y sus radios de apoyo."}
::item{title="Construye una página de caso de uso" url="/seo-playbook/post-types/use-case-page/" reason="Lleva la intención educativa a una audiencia y un resultado específicos."}
:::

Shortcode de Hugo

{{< related-content heading="Continúa con el manual" variant="reason" >}}
  {{< item title="Escribe una guía práctica fiable" url="/seo-playbook/post-types/how-to-guide/" reason="Convierte las reglas del elemento en una página instructiva completa." />}}
  {{< item title="Estructura una guía definitiva" url="/seo-playbook/post-types/ultimate-guide/" reason="Conecta este elemento con un pilar amplio y sus radios de apoyo." />}}
  {{< item title="Construye una página de caso de uso" url="/seo-playbook/post-types/use-case-page/" reason="Lleva la intención educativa a una audiencia y un resultado específicos." />}}
{{< /related-content >}}

Este es el contrato de destino portátil, no una afirmación de que este repositorio registra el shortcode. El ejemplo en vivo usa HTML semántico y no añade dependencia de maquetación.

Bloque o shortcode de WordPress

<!-- wp:amicited/related-content {"heading":"Continúa con el manual","variant":"reason"} -->
[related_item title="Escribe una guía práctica fiable" url="/seo-playbook/post-types/how-to-guide/" reason="Convierte las reglas del elemento en una página instructiva completa."]
[related_item title="Estructura una guía definitiva" url="/seo-playbook/post-types/ultimate-guide/" reason="Conecta este elemento con un pilar amplio y sus radios de apoyo."]
[related_item title="Construye una página de caso de uso" url="/seo-playbook/post-types/use-case-page/" reason="Lleva la intención educativa a una audiencia y un resultado específicos."]
<!-- /wp:amicited/related-content -->

WordPress debe usar un bloque dinámico registrado con controles de elementos anidados. La forma de shortcode es para sistemas que no pueden almacenar bloques anidados y debe registrarse antes de la publicación.

Ejemplos

Bueno: cada enlace responde a una necesidad siguiente diferente

:::related-content{heading="Pon el método en práctica" variant="reason"}
::item{title="Ejecuta la lista de verificación de QA previa a la publicación" url="/seo-playbook/process/checklists/pre-publish-qa/" reason="Verifica enlaces, evidencia, accesibilidad y estructura de la página antes del lanzamiento."}
::item{title="Construye una guía práctica" url="/seo-playbook/post-types/how-to-guide/" reason="Aplica el elemento dentro de un formato instructivo completo."}
::item{title="Adapta el manual para SaaS" url="/seo-playbook/business-types/saas/" reason="Traduce las reglas compartidas a un recorrido de contenido orientado al producto."}
:::

Esto funciona porque los destinos son distintos pero están conectados: verificación, implementación y adaptación comercial. Los anclas indican lo que ofrece cada página, y las razones explican la relación con la página actual.

Malo: el widget de etiquetas se hace pasar por selección editorial

:::related-content{heading="También te puede gustar"}
::item{title="Leer más" url="/blog/new-office/"}
::item{title="Haz clic aquí" url="/features/ai-visibility/"}
::item{title="Última publicación" url="/blog/quarterly-roundup/"}
::item{title="SEO" url="/seo-playbook/"}
::item{title="Más SEO" url="/blog/old-seo-notes/"}
::item{title="Otro artículo" url="/academy/how-to-export-prompt-data/"}
::item{title="Recomendado" url="/case-studies/hz-containers/"}
:::

El ejemplo falla incluso si cada URL se resuelve. Siete opciones superan la banda. Los anclas no predicen el destino. Los destinos mezclan noticias de la empresa, producto, archivo, academia y caso de estudio sin razones indicadas. «Última» es una regla de fecha, «SEO» es demasiado amplio y nada demuestra que los enlaces sirvan a la siguiente tarea de este lector.

El contrato de clúster

Un clúster temático es un grupo planificado de páginas en torno a un tema. Su pilar es la página amplia que organiza el tema; sus radios son páginas más específicas que responden a partes del mismo. El bloque de contenido relacionado convierte ese plan en enlaces HTML reales:

• Cada radio enlaza hacia arriba a su pilar. Esto le dice al lector dónde pertenece la respuesta específica y evita que el radio se convierta en un punto final aislado.
• El pilar enlaza hacia abajo a cada radio actual. Cuando el clúster tiene más de seis radios, usa secciones organizadas en el cuerpo del pilar en lugar de forzar el conjunto completo en un solo bloque de contenido relacionado.
• Los enlaces laterales conectan un radio con otro solo cuando el lector puede expresar la relación de paso siguiente. Compartir un padre no es suficiente.
• Cada borde es bidireccional cuando ambas direcciones ayudan al lector. El ancla y la razón inversa pueden diferir porque el recorrido es diferente.
• Eliminar, fusionar o redirigir una página desencadena una revisión de cada borde almacenado que apunte a ella.

Dentro de este manual, una página de tipo de publicación enlaza a los elementos que requiere y a los tipos de negocio que la adaptan. Una página de elemento enlaza de vuelta a los tipos de publicación que la usan. Esas relaciones se generan a partir del frontmatter revisado bajo las reglas transversales: el arreglo postTypes de esta página es la fuente de sus enlaces a tipos de publicación, mientras que los metadatos del tipo de publicación correspondiente proporcionan el borde de retorno. La generación maneja la representación; los editores aún deciden si la relación pertenece a los metadatos.

Las reglas de redacción de elementos más amplias rigen cómo esos metadatos se mantienen portátiles. Nunca repares una relación editorial faltante añadiendo una etiqueta y esperando que un widget elija correctamente.

Reglas de texto ancla

El texto ancla es la redacción visible y en la que se puede hacer clic de un enlace. Escríbelo de modo que el lector pueda predecir el destino sin leer la URL. «Construye una guía práctica» es útil; «leer más», «haz clic aquí», «más información» y una URL desnuda no lo son.

Varía los anclas de forma natural mientras preservas el tema del destino. «Crea una guía práctica» y «estructura una guía instructiva» funcionan; los sinónimos de palabras clave no relacionados no lo hacen. Nunca prometas una plantilla, calculadora, precio, estudio o lista de verificación que el destino no tenga.

Dentro del bloque, los anclas de título deben ser únicos. Si dos destinos usaran el mismo título, añade la audiencia, el método o el resultado que los distinga. Mantén la razón opcional fuera del ancla para que el destino del clic siga siendo conciso y las listas de enlaces de la tecnología de asistencia sigan siendo útiles.

Marcado de esquema y accesibilidad

No se requiere ningún tipo especial de JSON-LD. JSON-LD es un formato basado en script para datos estructurados, y Schema.org es el vocabulario compartido que se codifica comúnmente con él. Los enlaces normalmente permanecen como parte del Article, TechArticle, Product o WebPage contenedor. No inventes un tipo de esquema RelatedContent.

Un ItemList puede describir el bloque solo cuando es genuinamente una lista editorial ordenada o con nombre y la política de esquema de todo el sitio lo requiere. Si se usa, itemListElement debe coincidir con el orden visible de los elementos, las URL y los nombres. No añadas destinos ocultos ni valoraciones sintéticas. Un breadcrumb es una relación diferente y no debe absorber estos enlaces.

La accesibilidad comienza con un punto de referencia <nav>, es decir, una región que la tecnología de asistencia puede identificar como navegación. Asígnale un encabezado visible conectado mediante aria-labelledby; ARIA es el conjunto de atributos utilizados para exponer nombres e interfaces de estado cuando el HTML nativo por sí solo necesita ayuda. Usa una <ul> porque el orden normalmente no conlleva clasificación. Preserva el foco de teclado visible, convierte el título en el enlace principal y evita anidar una tarjeta interactiva dentro de otro enlace.

El texto alternativo de las miniaturas no debe duplicar el título del enlace. Usa texto alternativo vacío para una miniatura decorativa. Cuando la imagen aporta información distintiva, describe solo esa información. El bloque debe permanecer completo con imágenes o JavaScript desactivados, y no debe mover el foco del teclado cuando se actualicen las recomendaciones.

Reglas de redacción

Usa de tres a cinco elementos por defecto, dos para una bifurcación estrecha y no más de seis para una necesidad documentada de clúster pequeño. Escribe un encabezado de dos a ocho palabras, anclas de título de tres a doce palabras y razones opcionales de ocho a veintidós palabras. Las razones usan una oración, voz activa y una relación concreta: aplicar, comparar, verificar, definir, diagnosticar o ver evidencia.

Cada elemento necesita una razón editorial distinta en el modelo de contenido incluso cuando la razón no se renderiza. Revisa los títulos después de que cambien los encabezados de destino. Usa URL internas canónicas con barras inclinadas inicial y final. Elimina parámetros de seguimiento, fragmentos que no identifiquen secciones estables, redireccionamientos y enlaces de vuelta a la página actual.

Nunca coloques anuncios, biografías de autor, botones de seguimiento en redes sociales, formularios de boletín, nubes de etiquetas, promociones no relacionadas ni citas de fuentes dentro de este elemento. No mezcles lecturas externas con pasos siguientes internos; la evidencia externa pertenece al bloque de fuentes. No uses insignias como «mejor», «popular» o «recomendado» a menos que la página defina y respalde la base de selección.

El tono debe ser útil y específico, no urgente. Evita «lectura obligada», «no te lo pierdas», escasez artificial y afirmaciones de que el destino es exhaustivo a menos que su alcance respalde esa palabra. El bloque recomienda un camino; no fabrica importancia.

Tipos de publicación que lo usan

El arreglo postTypes del frontmatter es la fuente de verdad para las siguientes relaciones transversales.

No todos los candidatos necesitan renderizarse en cada página. El tipo de publicación define la relación elegible; el editor de la página selecciona los destinos que tienen sentido para el tema y el recorrido reales.

Lista de verificación de QA

• El bloque aparece una vez, después de las fuentes y antes del llamado a la acción de cierre.
• La página contiene de dos a cinco enlaces, o una razón documentada para usar seis.
• Cada elemento tiene una razón editorial registrada más allá de una etiqueta, categoría o fecha de publicación compartida.
• Cada ancla predice lo que el destino realmente ofrece y evita «leer más», «haz clic aquí» y lenguaje genérico similar.
• El conjunto respalda el contrato de clúster: radio hacia arriba, pilar hacia abajo y lateral solo cuando está genuinamente relacionado.
• La URL actual está excluida, los destinos son canónicos y ningún enlace depende de una redirección o parámetro de seguimiento.
• El frontmatter de contenido relacionado coincide con los enlaces transversales renderizados.
• El bloque sigue siendo legible, navegable y completo sin miniaturas ni JavaScript.
• La región de navegación tiene un encabezado visible y un nombre accesible; el foco de teclado es visible.
• Las miniaturas existen, aportan valor identificativo, reservan dimensiones y usan texto alternativo correcto.
• Las razones añaden una relación de paso siguiente en lugar de repetir títulos.
• Las fuentes, anuncios, formularios, enlaces sociales y promociones no relacionadas permanecen fuera del bloque.
• Cualquier dato estructurado ItemList coincide exactamente con los elementos y el orden visibles.
• La representación en móvil muestra cada título y razón sin un carrusel horizontal oculto.

Un revisor debe rechazar los enlaces meramente plausibles. Cada uno debe ser el paso siguiente correcto, expresar un borde arquitectónico real y permanecer claro en HTML.

Preguntas frecuentes

La plantilla de academia renderiza las entradas de preguntas frecuentes desde el frontmatter.