Tarjetas de Producto: Bloques de Comercio Controlados por Fuente

Una tarjeta de producto convierte una mención de producto en una unidad comercial completa y accionable: una imagen del producto, nombre oficial, precio actual y un llamado a la acción (CTA), es decir, el enlace o botón que impulsa el recorrido de compra. Su regla más importante es invisible para el lector: el escritor coloca la tarjeta mediante una unidad de mantenimiento de existencias (SKU), el identificador de catálogo de un producto o variante vendible, mientras que la fuente del producto proporciona los valores.

El ejemplo muestra la relación, no una oferta creada manualmente. En producción, cada valor visible después del SKU proviene de la fuente de producto aprobada. Una actualización del catálogo cambia cada tarjeta que referencia ese SKU sin pedir a los escritores que busquen y editen artículos antiguos.

Por qué este elemento es importante

Los lectores que evalúan productos necesitan responder cuatro preguntas rápidamente: ¿Qué es? ¿Cómo se ve? ¿Cuánto cuesta? ¿Qué puedo hacer después? Un nombre de producto enterrado en prosa les obliga a reconstruir esas respuestas a lo largo de una página. Una tarjeta delimitada reduce ese esfuerzo mientras mantiene la interrupción comercial proporcional a la recomendación.

La tarjeta también establece confianza mediante la consistencia. Cuando un artículo dice «USD 149» pero la página del producto dice «USD 169», la discrepancia no es un pequeño defecto editorial; hace que el lector cuestione la recomendación, la promoción y el proceso de pago. Una tarjeta controlada por fuente evita que el artículo se convierta en una base de datos de precios independiente. También puede reflejar el estado de inventario, la identidad de la variante y los cambios de destino a medida que el catálogo se actualiza.

La extractabilidad automática significa que un rastreador, agente de compras, feed o herramienta de migración de contenido puede preservar qué imagen, nombre, precio, estado de disponibilidad y acción pertenecen a cada producto. La proximidad por sí sola es débil. Si tres imágenes están sobre tres precios en columnas visualmente alineadas, una máquina aún podría asociarlos incorrectamente. Una tarjeta debe exponer una única entidad de producto identificada por SKU, con sus datos dentro de un contenedor semántico y su destino vinculado sin ambigüedad.

El elemento no es meramente un enlace de afiliado estilizado. Las reglas de redacción de elementos tienen prioridad: elige el componente por su propósito. Cuando un bloque presenta un producto comprable con identidad, precio y acción, usa una tarjeta de producto incluso si un diseñador pudiera imitarlo con una imagen, un encabezado y un botón. Un componente tipificado proporciona vinculación a fuente, validación, comportamiento de accesibilidad y enlaces de datos estructurados que el marcado suelto no puede garantizar.

Cuándo usarlo

Usa una tarjeta de producto cuando el lector tenga suficiente contexto para evaluar un producto específico y una acción directa sobre el producto sea útil. Los casos comunes incluyen un artículo recomendado en una guía de compra, productos en una introducción de categoría, un accesorio en una página de producto, o cada opción preseleccionada después de que se hayan explicado los criterios de comparación.

El producto debe ser identificable por un SKU válido en la fuente aprobada. Si el nombre se refiere a una familia con varias variantes con precios independientes, resuelve la recomendación del artículo a una variante específica o usa un tratamiento de familia de productos cuyo CTA pida al lector elegir una variante. No muestres silenciosamente la variante más barata como si fuera el precio de todas las configuraciones.

Los casos cercanos son fáciles de detectar una vez que el propósito es explícito:

• Una oración que nombra un producto como ejemplo no necesita una tarjeta a menos que el precio y la acción ayuden al lector en ese momento.
• Una colección de planes con diferentes condiciones de facturación necesita una tabla de precios, no una fila de tarjetas de producto.
• Una lista clasificada aún necesita razonamiento editorial alrededor de cada elemento. Las tarjetas no pueden reemplazar los criterios de selección, la evidencia, las compensaciones o la explicación de a quién se adapta cada producto.
• Una promoción con condiciones de elegibilidad, vencimiento y cupones necesita un tratamiento de oferta dedicado. La tarjeta puede mostrar el precio activo controlado por fuente, pero no debe contener una minipágina de términos.
• Una comparación de especificaciones pertenece a una tabla de comparación o especificaciones. Repetir tarjetas completas en cada celda de comparación crea ruido visual y debilita las relaciones.
• Un servicio sin SKU ni registro en el catálogo no es una tarjeta de producto solo porque tiene un precio y un botón.

No añadas una tarjeta simplemente para monetizar una mención informativa. Si el lector no ha encontrado una necesidad, criterio o recomendación que explique por qué el producto pertenece, la tarjeta se sentirá como una interrupción y una máquina recibirá una entidad sin contexto útil.

Dónde colocarla

La posición existe para conectar el producto con el razonamiento que lo seleccionó. Coloca la tarjeta inmediatamente después del párrafo, subtítulo o veredicto que identifica el producto y explica su idoneidad. Un lector debe encontrar la razón antes que la acción, no un control de ventas antes que la evidencia.

Cuando una sección incluye tanto productos como soluciones no comerciales, los productos van antes que los remedios caseros, métodos de bricolaje y otras alternativas. Este orden mantiene los artículos comerciales en un grupo predecible, da a sus datos de catálogo un límite limpio y evita que un método doméstico parezca otro SKU. Presenta los criterios, muestra la tarjeta o tarjetas de producto relevantes, luego abre una sección de alternativas claramente etiquetada.

Reglas exactas de colocación:

No coloques una tarjeta antes de la respuesta directa de la página, dentro de un párrafo, entre una afirmación y su evidencia, o dentro de una instrucción numerada. No la sitúes junto a un precio conflictivo, un segundo CTA para el mismo destino, un temporizador de cuenta regresiva, un testimonio que parezca respaldar ese SKU exacto sin evidencia, o un recuadro de remedio casero. Evita tarjetas duplicadas adyacentes para el mismo SKU; enlaza referencias posteriores a la colocación canónica.

Anatomía

La anatomía tiene cuatro regiones visibles requeridas y una clave de fuente:

1. Imagen del producto: la imagen principal del catálogo para el SKU referenciado, con texto alternativo gestionado por la fuente que identifica el producto y la variante visible relevante.
2. Nombre del producto: el nombre oficial orientado al cliente, enlazado o emparejado con el destino canónico del producto.
3. Precio: el monto actual y el código de moneda ISO, o un estado de fuente veraz como «Precio no disponible». Un precio de oferta mantiene su relación con el precio regular.
4. CTA: una acción específica como «Ver bota North Ridge» o «Agregar bota North Ridge al carrito», seleccionada de las acciones permitidas para ese producto y canal.
5. SKU: la clave de búsqueda estable. Puede permanecer visualmente discreta u oculta para los compradores, pero debe existir en los datos del componente y en el diagnóstico.

La disponibilidad es condicional visualmente pero requerida en los datos de fuente. Muestra «Agotado», «Preventa» u otro estado significativo cuando cambia lo que el CTA puede hacer. Las insignias, calificaciones, notas de envío y variantes son extensiones opcionales; ninguna puede desplazar a las cuatro regiones requeridas ni ser redactada como afirmaciones no verificables.

Ejemplos de diseño

Cada variante usa el mismo contrato de fuente. Las variantes cambian la disposición y el énfasis, nunca la propiedad de los datos del producto.

Tarjeta vertical estándar: la opción predeterminada para uno a cuatro productos. Funciona en columnas de artículos y se apila de forma predecible en pantallas estrechas.

Tarjeta horizontal compacta: úsala en listas largas donde el reconocimiento de imagen importa pero el espacio vertical es limitado. El CTA sigue al precio en orden de lectura incluso cuando CSS lo coloca en el borde.

Recomendación destacada: úsala una vez cuando el razonamiento editorial ha identificado un ajuste claro. «Mejor para senderos mojados» es contexto redactado fuera del nombre del producto controlado por fuente; «mejor en general» requiere criterios y evidencia declarados.

Estado no disponible: preserva la identidad cuando la falta de disponibilidad temporal es útil para el lector, pero reemplaza la acción de compra con el siguiente paso aprobado por la fuente. Un producto descontinuado normalmente debe reemplazarse editorialmente en lugar de promocionarse como una tarjeta vacía.

Parámetros

La interfaz deliberadamente da poco control a los autores. Limitar las entradas redactadas evita que el texto anule el catálogo. «Fuente» a continuación identifica de dónde obtiene cada valor el renderizador.

El cuerpo está vacío excepto por un primer encabezado opcional que se convierte en contexto editorial, como «Mejor para senderos mojados». Nunca debe contener un segundo nombre, precio escrito a mano, URL de imagen de reemplazo, afirmación de disponibilidad o destino. Si el registro de fuente está incompleto, corrige la fuente o bloquea la publicación.

Sintaxis de tarjeta de producto y ejemplos de código

Los tres formatos llevan la misma instrucción redactada: coloca aquí el producto identificado por este SKU. No serializan los valores actuales del producto en el artículo.

Directiva Markdown portátil

:::product-card{sku="TRAIL-BOOT-042" placement=featured}
### Best for wet trails
:::

Shortcode de Hugo

{{< product-card sku="TRAIL-BOOT-042" placement="featured" >}}
Best for wet trails
{{< /product-card >}}

La notación de Hugo documenta el contrato del adaptador de destino. Debe resolver el SKU a través de la capa de datos de producto aprobada del sitio en lugar de aceptar valores de producto como parámetros del shortcode.

WordPress

[product_card sku="TRAIL-BOOT-042" placement="featured"]
Best for wet trails
[/product_card]

Una implementación en WordPress debería usar un bloque dinámico renderizado en servidor o un shortcode registrado respaldado por la misma fuente de producto. Guardar una copia estática del nombre y precio del producto en el contenido de la publicación invalida el contrato.

Ejemplos buenos y malos

Bueno: la ubicación lleva la recomendación; la fuente lleva la oferta

Para rutas empinadas y mojadas, prioriza una membrana impermeable, una suela diseñada para barro y un agarre seguro del talón. El modelo North Ridge cumple esos criterios declarados sin ser la opción más ligera.

:::product-card{sku="TRAIL-BOOT-042" placement=featured}

Esto funciona porque la prosa explica el ajuste y la compensación antes de la acción del producto. La directiva identifica un SKU, por lo que el renderizador puede recuperar una imagen actual, nombre oficial, precio de mercado, disponibilidad y URL como una sola entidad de producto.

Malo: los valores comerciales se copian en el artículo

Mejor bota impermeable — North Ridge, ¡solo $129!
Imagen: /uploads/north-ridge-final-v2.jpg
Comprar ahora

Esto falla porque el precio, la imagen, el tratamiento del nombre y la URL están escritos a mano. El monto puede estar desactualizado o usar el mercado incorrecto; «solo» añade un juicio de valor no respaldado; la URL de fragmento no puede alcanzar un producto; y la imagen está desconectada de los metadatos del catálogo. No hay SKU, estado de disponibilidad, código de moneda ni agrupación estable para máquinas. La solución no es completar la tarjeta en prosa. Reemplázala con una directiva vinculada a fuente y conserva solo la explicación de ajuste editorial fuera de ella.

Marcado de esquema y accesibilidad

Una tarjeta resuelta puede alimentar datos estructurados de Product y Offer cuando la página, el producto y los datos visibles califican bajo la política de esquema del sitio. El SKU puede mapearse a sku; el nombre oficial y la imagen pueden mapearse a name e image; una oferta genuina puede proporcionar price, priceCurrency, availability y url. El servidor debe generar contenido visible y salida estructurada a partir del mismo registro resuelto para que no puedan discrepar.

No emitas un Offer con un precio adivinado, uses cero para un monto no disponible, ni marques un artículo como en existencia porque el CTA dice «Ver producto». Si varias tarjetas describen el mismo SKU, el esquema no debe crear entidades duplicadas contradictorias. Conéctalas o desduplícalas mediante una identidad de producto estable.

La accesibilidad comienza con las relaciones del documento. Envuelve cada tarjeta en un article o grupo etiquetado equivalente, convierte el nombre del producto en un encabezado lógico y asocia el nombre accesible del CTA con ese producto. «Ver producto» repetido seis veces es ambiguo en una lista de enlaces; «Ver North Ridge Waterproof Hiking Boot» sigue siendo útil sin contexto visual.

El texto alternativo debe describir el producto y la variante visible significativa, no repetir el precio ni escribir «imagen de». Las imágenes secundarias decorativas usan texto alternativo vacío. No comuniques disponibilidad, estado de oferta o recomendación solo mediante color, tachado, forma de insignia o icono. El foco del teclado debe seguir el orden de lectura, y la tarjeta completa no debe convertirse en un enlace gigante cuando también contiene un botón distinto o un control de variante.

Reglas de redacción

La tarjeta se mantiene concisa porque su función es identidad y acción, no persuasión. Cada regla protege la integridad de la fuente o la comprensión del lector:

• Un SKU evita identidades mezcladas. Cada tarjeta resuelve exactamente un SKU. No combines una imagen de una variante con el precio de otra.
• La propiedad de la fuente evita afirmaciones comerciales desactualizadas. Los escritores proporcionan la ubicación y, opcionalmente, una etiqueta de contexto de dos a seis palabras. Nunca escriben el nombre, la ruta de la imagen, el precio, la moneda, la disponibilidad, la URL o el CTA dentro de la tarjeta.
• El contexto editorial explica el ajuste. Una etiqueta destacada puede indicar un caso de uso defendible como «Mejor para cocinas pequeñas». Mantenla en 50 caracteres y respáldala en la prosa cercana.
• El precio actual necesita contexto completo. El renderizador muestra un código de moneda ISO y maneja el precio regular versus oferta desde la fuente del producto. Nunca añadas «barato», «solo» o lenguaje de ahorro a menos que una afirmación verificada separada lo respalde.
• Una acción reduce la ambigüedad. Usa un CTA principal, mapeado a la disponibilidad. No añadas captura de boletín, ingreso de cupón, controles para compartir ni enlaces de minoristas competidores dentro de la tarjeta canónica.
• Los límites compactos ayudan a la extracción. La tarjeta visible contiene una imagen, un nombre oficial, un estado de precio, un estado de disponibilidad cuando sea relevante y un CTA. Las descripciones largas, resultados de pruebas, pros y contras, y términos legales permanecen en elementos adyacentes.
• Los productos preceden a los no productos. Cuando los remedios caseros u otras alternativas no comerciales comparten una sección, muestra primero las tarjetas de producto relevantes, luego comienza una subsección de alternativas separada.

El tono es objetivo y tranquilo. La prosa circundante puede recomendar, comparar o advertir, pero los campos controlados por fuente permanecen neutrales. Nunca coloques un testimonio, superlativo no respaldado, cuenta regresiva, divulgación de afiliado oculta, prescripción, instrucción de dosificación, interpretación de garantía o resumen de política de devolución dentro de la tarjeta. Esas afirmaciones requieren su propia evidencia, propiedad y comportamiento de actualización.

Tipos de página que lo usan

El array postTypes en el frontmatter es la relación canónica. La tabla explica el papel de la tarjeta en cada especificación listada.

Lista de verificación de control de calidad

• ¿El propósito del bloque coincide con una tarjeta de producto según la regla de precedencia?
• ¿La directiva contiene un SKU válido y ningún valor de producto redactado?
• ¿El SKU resuelto identifica el mercado previsto y la variante exacta?
• ¿La imagen, nombre, precio, moneda, disponibilidad, URL y CTA provienen de fuentes aprobadas?
• ¿El precio visible coincide con el destino y cualquier dato estructurado en el momento de renderizado?
• ¿Un estado de oferta incluye una relación válida de precio regular y un período activo controlado por fuente?
• ¿Un producto no disponible está etiquetado verazmente con una acción de no compra adecuada?
• ¿La prosa cercana explica por qué el producto se ajusta antes de que la tarjeta solicite una acción?
• ¿Los productos están colocados antes que los remedios caseros, métodos de bricolaje y alternativas no comerciales?
• ¿La tarjeta está separada de precios conflictivos, cuentas regresivas, testimonios y CTA duplicados?
• ¿El nombre del producto crea un encabezado claro o una etiqueta accesible para la tarjeta?
• ¿El nombre accesible del CTA identifica su producto cuando los enlaces se leen fuera de contexto?
• ¿El texto alternativo describe el producto significativo y la variante sin duplicar el texto cercano?
• ¿La recomendación, precio, estado de disponibilidad y estado de oferta se expresan en texto en lugar de solo con color?
• ¿El orden del teclado sigue lógicamente imagen, nombre, precio, disponibilidad y acción?
• ¿El esquema se emite solo para un producto resuelto elegible, sin valores de oferta adivinados o contradictorios?
• ¿Un SKU faltante o descontinuado falla de forma segura según la política del catálogo en lugar de renderizar una tarjeta en blanco o inventada?
• ¿La página ha evitado tarjetas duplicadas para el mismo SKU y ha mantenido las afirmaciones editoriales fuera de los campos controlados por fuente?

Una tarjeta de producto está lista solo cuando un lector y una máquina pueden identificar el mismo producto, estado comercial actual y siguiente acción. Si un autor debe mantener alguno de esos datos en la prosa del artículo, el contrato de fuente se ha roto.