Skip to content

Todo para WordPress, el desarrollo web — y mucho más

🖼 La diferencia entre una imagen de portada y una imagen destacada en WordPress

🖼 La diferencia entre una imagen de portada y una imagen destacada en WordPress

Usted abre el editor de WordPress para escribir una entrada. Hace clic en «Añadir bloque» y ve decenas de opciones. Entre ellas está «Portada». En la barra lateral, al final, se esconde «Imagen destacada». Ambas implican imágenes. Ambas afectan al aspecto de la entrada. Pero hacen cosas completamente distintas.

La confusión entre la portada y la imagen destacada es una de esas cosas que las guías para principiantes nunca mencionan. Y deberían. La elección equivocada rompe el diseño de la página de inicio, estropea las vistas previas en redes sociales y deja el artículo sin un gancho visual dentro del cuerpo de la entrada. En cambio, una vez que entiende la diferencia, ambas funciones trabajan como un sistema unificado.

A continuación, un desglose sin rodeos: qué hace cada una, dónde reside, cómo añadirla y cuándo usar ambas.

💡 Resumen rápido:

  • Entender qué es una portada y dónde se muestra
  • Aprender cómo funciona la imagen destacada y dónde aparece
  • Comparar las diferencias clave en una tabla con ocho criterios
  • Añadir una portada mediante el editor de bloques paso a paso
  • Configurar una imagen destacada y rellenar el texto alternativo
  • Configurar ambos formatos para la máxima visibilidad de la entrada

Qué es una portada en WordPress

Bloque de portada en WordPress

Una portada es un bloque del editor Gutenberg que inserta una imagen de fondo de ancho completo directamente en el cuerpo de la entrada. Técnicamente, es el bloque Cover que apareció con el editor de bloques en WordPress 5.0. Se sitúa dentro de su contenido; usted decide exactamente en qué lugar del artículo colocarlo.

La característica principal de la portada es la superposición de texto. Escribe un titular o una frase sobre la imagen, cambia los colores del texto y del fondo y ajusta la opacidad de la superposición. El resultado se asemeja a un reclamo de revista: una imagen grande más un mensaje encima. Funciona especialmente bien en artículos largos, ya que rompe el texto, da un descanso a la vista y destaca la transición a un nuevo tema.

Qué más puede hacer el bloque Portada:

  • Fondo fijo. Se activa mediante un interruptor en los ajustes del bloque. La imagen permanece fija mientras se desplaza, un efecto de paralaje ligero sin plugins.
  • Vídeo en lugar de una imagen. Puede subir un archivo de vídeo y se reproducirá como fondo de la portada.
  • Superposición con degradado. Además de un color sólido, está disponible un degradado, de transparente a opaco en cualquier dirección.
  • Ajuste de altura. La altura mínima del bloque se puede establecer en píxeles, vh u otras unidades.

La portada solo es visible dentro de la entrada. En la página de inicio del blog, en los feeds de categorías y en los resultados de búsqueda, no aparece. Es un elemento de diseño interno, no un metadato.

Qué es una imagen destacada

Imagen destacada en WordPress

Una imagen destacada es un campo meta de la entrada que existe en WordPress desde la versión 2.9. No se inserta en el cuerpo del artículo (aunque el tema puede mostrarla automáticamente al inicio de la entrada). Su función es representar la entrada externamente.

Dónde aparece la imagen destacada:

  • Página de inicio del blog. El tema muestra una cuadrícula de entradas y cada una enseña una miniatura; esa miniatura es la imagen destacada escalada al tamaño requerido.
  • Redes sociales. Cuando una entrada se comparte en VK, Telegram, X o Facebook, la red social obtiene la imagen destacada a través del marcado Open Graph. Sin ella, solo obtiene un enlace de texto que los usuarios pasarán por alto.
  • Google Discover y búsqueda. Google puede mostrar una miniatura junto al resultado, y la fuente es de nuevo la imagen destacada.
  • Bloques internos. El bloque «Últimas entradas» y otros similares obtienen la imagen de aquí.

El tema controla los tamaños; registra un conjunto de dimensiones de miniatura (miniatura, mediano, grande, además de las personalizadas) y WordPress genera copias en cada tamaño durante la subida. La original permanece en la biblioteca multimedia.

Un matiz importante: la imagen destacada no tiene por qué aparecer en el cuerpo de la entrada. Puede subir una imagen solo en el campo meta y no se mostrará en ninguna parte del artículo, solo en las representaciones externas. A la inversa, una imagen dentro del contenido no se convierte automáticamente en la imagen destacada.

Tabla de diferencias

Criterio

Portada

Imagen destacada

Ubicación

Dentro del cuerpo de la entrada (bloque Gutenberg)

En la barra lateral del editor (campo meta)

Visibilidad

Solo al abrir la entrada

Página de inicio, categorías, redes sociales, búsqueda

Impacto SEO

Indirecto (retención del lector)

Directo (Open Graph, miniatura en resultados de búsqueda)

Superposición de texto

Sí, personalizable

No, es simplemente una imagen

Fondo de paralaje / vídeo

No

Introducido en la versión

WordPress 5.0 (2018)

WordPress 2.9 (2009)

Obligatorio

No, opcional

No, pero muy recomendable

Cantidad por entrada

Tantos como desee

Exactamente uno

Cómo añadir una portada en el editor de bloques

Abra una entrada existente o cree una nueva. En el editor Gutenberg, haga clic en el botón «+» (añadir bloque) en el punto del texto donde desee la portada. En la barra de búsqueda de bloques, escriba «Portada»; aparecerá el icono del bloque Portada. Haga clic en él.

El bloque se insertará en el contenido con un botón «Elegir imagen». Haga clic en él y se abrirá la biblioteca multimedia. Seleccione una imagen o arrastre una nueva desde su ordenador. Tras la subida, la imagen se estirará al ancho del contenido.

Ahora configure el bloque mediante el panel derecho:

  • Superposición. En el panel del bloque, verá el ajuste «Superposición», una capa de color entre la imagen y el texto. Por defecto, es gris al 50% de opacidad (consulte la documentación del bloque Portada). Puede cambiar el color, reducir la opacidad a cero (la superposición desaparece) o sustituirla por un degradado.
  • Texto. Haga clic directamente sobre el bloque y escriba un titular o párrafo. La fuente, el tamaño y el color se ajustan con las herramientas estándar.
  • Fondo fijo. El interruptor «Fondo fijo» en la barra lateral activa el efecto de paralaje.
  • Altura mínima. En los ajustes del bloque, introduzca un valor en píxeles, por ejemplo, 400px para escritorio.

Un método alternativo: el bloque Portada no tiene por qué ser independiente. En el editor, puede convertir cualquier grupo de bloques en una portada seleccionándolos y haciendo clic en «Agrupar» → «Portada».

Cómo configurar una imagen destacada

Abra el editor de entradas. En la barra lateral derecha, busque la pestaña «Entrada» (el primer icono de la fila superior). Desplácese hacia abajo hasta la sección «Imagen destacada». Si no la ve, expanda la pestaña mediante «Ajustes» (los puntos suspensivos verticales en la esquina superior derecha → «Ajustes» → «Entrada»).

Haga clic en «Establecer imagen destacada». Se abrirá la biblioteca multimedia. Seleccione una imagen. Después de seleccionarla, asegúrese de rellenar dos campos:

  • Texto alternativo. Una descripción breve pero informativa de lo que aparece en la imagen. Necesaria para la accesibilidad (lectores de pantalla) y el SEO. No duplique el título de la entrada; describa el contenido de la imagen en sí.
  • Leyenda. Se muestra debajo de la imagen si el tema lo admite. Puede dejarse vacío.

El botón «Listo» guarda su selección. La imagen aparecerá en la sección «Imagen destacada» con una vista previa. Para reemplazarla, haga clic en la vista previa y elija otra.

Importante: no confunda alt y título. Alt es para el software; título es una sugerencia al pasar el ratón. Para una imagen destacada, el alt tiene prioridad porque es lo que leen los motores de búsqueda en Open Graph.

Cuándo usar ambas

El escenario óptimo para un blog es usar ambos formatos simultáneamente pero con imágenes diferentes.

Deje que la imagen destacada sea informativa: una captura de pantalla de una interfaz, un diagrama, una foto del resultado. Esta imagen aparecerá en redes sociales y en búsquedas; debe vender el clic. Nada de clipart ni fotos de archivo de «persona con portátil».

Coloque una portada en uno o dos puntos dentro de un artículo largo como separador visual entre secciones lógicas. La imagen puede ser atmosférica o abstracta, con una superposición de texto que cite el artículo. No necesita tener peso informativo; su función es mantener al lector interesado.

Cuándo una portada es innecesaria: noticias cortas de dos o tres párrafos. Cuándo una imagen destacada es innecesaria: casi nunca. Una entrada sin imagen destacada pierde capacidad de clic en redes sociales y parece inacabada en el feed del blog.

Una nota técnica: algunos temas muestran automáticamente la imagen destacada al inicio de la entrada. Si usa un diseño así, coloque la portada no al principio, sino después del primer o segundo párrafo para evitar dos imágenes grandes seguidas.

Vídeo: portada frente a imagen destacada

El canal de YouTube WebTutorials demuestra visualmente el proceso de añadir ambos tipos de imágenes en un editor de WordPress real, desde la búsqueda del bloque hasta la publicación.

⁉️🤔 Preguntas frecuentes

¿Puedo usar la misma imagen para la portada y la imagen destacada?

Técnicamente, sí. Pero el resultado rara vez se ve bien. La imagen destacada es escalada por el tema a proporciones específicas (a menudo 16:9 o 4:3), mientras que la portada se estira al ancho completo del contenido con una superposición. La misma imagen se recortará en un lugar y perderá su composición en otro. Es mejor elegir dos imágenes diferentes.

¿Qué importa más para el SEO: la portada o la imagen destacada?

La imagen destacada. Va al marcado Open Graph, se muestra en Google Discover y puede aparecer junto al fragmento en la búsqueda. La portada no afecta directamente al SEO, pero ayuda indirectamente al reducir la tasa de rebote; una entrada bien diseñada mantiene a los lectores interesados durante más tiempo.

¿Por qué la imagen destacada no se muestra en las redes sociales después de publicar?

Las redes sociales almacenan en caché los datos de Open Graph. Si primero publicó la entrada sin imagen y luego añadió una, Facebook y X mostrarán la versión antigua. Solución: pase la URL por un validador de Open Graph (Facebook Sharing Debugger, Twitter Card Validator) o simplemente espere de 24 a 48 horas.

¿Puedo añadir una portada a entradas creadas antes de Gutenberg?

Sí. El Editor Clásico no mostraba el bloque Portada, pero tras cambiar a bloques, puede abrir cualquier entrada antigua y se convertirá a un formato compatible. Inserte la portada como cualquier bloque normal.

¿Cómo acelero la carga de la página al usar muchas portadas?

No coloque más de dos portadas por entrada. Para cada imagen, use un formato moderno (WebP o AVIF). Optimice los tamaños: el ancho del área de contenido rara vez supera los 1200 px, así que no tiene sentido cargar una imagen de 4000 px de ancho. Plugins gratuitos como ShortPixel o EWWW Image Optimizer comprimen las imágenes automáticamente al subirlas. Para más información sobre optimización, consulte nuestra guía de imágenes en WordPress.

Portada o destacada: qué usar en su entrada

La respuesta corta es ambas. La imagen destacada promociona la entrada externamente: página de inicio, redes sociales, búsqueda. La portada mantiene al lector interesado internamente: un divisor visual, una superposición con una cita, un fondo de paralaje. Las funciones no se solapan; se complementan.

Si debe elegir solo una, elija siempre la imagen destacada. Una entrada sin ella es invisible para el mundo exterior. La portada es una opción para quienes desean sacar el máximo partido al contenido de formato largo.

No escatime en imágenes. Dos imágenes significativas por entrada no es un lujo; es el estándar mínimo para un blog de WordPress visualmente competente.