¿Por qué Facebook sigue mostrando mi imagen antigua?

Porque muestra la copia que guardó la última vez que leyó tu página, no las etiquetas que hay ahora. Facebook ofrece el Sharing Debugger para esto: escribe la dirección y pídele que la cargue otra vez. LinkedIn funciona igual con el Post Inspector. Nada de lo que cambies en tu propio sitio obliga a ninguno de los dos a mirar de nuevo.

¿De qué tamaño debe ser la imagen?

1200 por 630 es el tamaño que usa casi todo el mundo. El número que importa más es el límite inferior: por debajo de unos 600px de ancho, la mayoría de las plataformas renuncian a la imagen grande y muestran una miniatura pequeña. Mantén los detalles importantes lejos de los bordes, porque el recorte se hace desde el centro.

¿Necesito las etiquetas X si ya tengo Open Graph?

No. X recurre a las etiquetas Open Graph cuando faltan las suyas, así que una página con solo Open Graph igualmente obtiene tarjeta. Añade las etiquetas X cuando quieras algo distinto allí, o cuando quieras la tarjeta con imagen grande en lugar de la pequeña.

¿Por qué no aparece mi imagen?

Hay tres causas. No existe la etiqueta de imagen, o la dirección que hay en ella no se puede cargar, o la imagen es lo bastante pequeña como para que la plataforma la descarte. La vista previa de aquí carga la imagen igual, así que si aparece vacía aquí, también lo estará allí.

¿Algo de esto cambia mi posicionamiento?

No. Estas etiquetas le dicen a una plataforma cómo dibujar una tarjeta, y Google no las usa para posicionar nada. Lo que cambian es si quien ve el enlace hace clic. Para ver cómo queda la misma página en los resultados de búsqueda, usa Vista previa SERP.

¿Se guarda en algún sitio la dirección que escribo?

Se envía a sona.to, que carga la página y devuelve las etiquetas que encontró. La página en sí no se devuelve ni se conserva. La misma dirección escrita dos veces en cinco minutos se carga una sola vez. Escribir las etiquetas a mano no envía nada a ninguna parte.

¿Dónde pongo estas etiquetas?

En el head de la página, junto a la etiqueta title. La mayoría de los creadores de sitios y gestores de contenido tienen un campo para la imagen de compartir y la descripción, y las escriben por ti. Para escribir el juego completo a mano, usa Generador de etiquetas meta.

Inicio / Herramientas gratuitas / Social Share Preview

Mira cómo se ve tu página cuando alguien comparte el enlace

Mira la tarjeta que construyen seis plataformas cuando alguien comparte un enlace a tu página.

Cuando se comparte un enlace, la plataforma no muestra simplemente la dirección. Va a buscar la página, lee unas cuantas etiquetas del head y construye una tarjeta: una imagen, un titular, una línea de texto. Qué etiquetas lee depende de dónde se publicó el enlace. X busca primero las suyas y solo después recurre a las de Open Graph, mientras que Facebook y LinkedIn leen únicamente Open Graph. Si falta una etiqueta no queda un hueco; la plataforma toma otra cosa de la página, y suele ser el primer texto que encuentra. Escribe una dirección abajo para leer las etiquetas de una página, o escríbelas tú, y la tarjeta se dibuja tal como la construye cada una de las seis plataformas.

Dirección de la página opcional

Titular Descripción Dirección de la imagen

Aquí no se guarda nada. Al escribir una dirección, se envía a sona.to, que lee las etiquetas de esa página y las devuelve. La página en sí no se conserva.

X Primero las etiquetas X

Facebook Solo Open Graph

LinkedIn No muestra descripción

Slack Cualquiera de los dos

Discord Cualquiera de los dos

Qué etiquetas lee cada plataforma

X mira primero sus propias etiquetas y recurre a Open Graph cuando faltan. Facebook y LinkedIn leen solo Open Graph, así que una etiqueta X no les sirve de nada. Slack y Discord aceptan cualquiera de las dos. Una misma página puede producir así seis tarjetas que no coinciden entre sí, y un titular que estás seguro de haber puesto puede faltar en la mitad de ellas. Cada vista previa de aquí sigue el orden que esa plataforma usa realmente.

Facebook y LinkedIn recuerdan lo que leyeron

Ambos guardan una copia de lo que encontraron la primera vez que cargaron tu página, y la conservan mucho tiempo. Corriges las etiquetas y la tarjeta no cambia, que es la razón más común por la que un arreglo correcto parece haber fallado. Hay que pedirle a la plataforma que vuelva a leer la página, y las dos ofrecen una herramienta para eso: el Sharing Debugger en Facebook, el Post Inspector en LinkedIn. Ninguna herramienta puede vaciar esas cachés por ti, esta incluida. Lo que ves aquí es lo que dicen las etiquetas ahora, no lo que Facebook sigue mostrando.

Una etiqueta ausente no deja un hueco

Las plataformas sustituyen en lugar de dejar un vacío. Sin etiqueta de descripción toman una línea de la página, normalmente el primer texto que encuentran, y en muchos sitios ese primer texto es una etiqueta de menú o un aviso de cookies. Sin imagen, la tarjeta se reduce a una línea de texto junto a un favicon. Las vistas previas reproducen esas sustituciones.

El tamaño, y dónde cae el recorte

Por debajo de unos 600px de ancho, la mayoría de las plataformas dejan de mostrar la tarjeta con imagen grande y pasan a una miniatura pequeña junto al texto, una tarjeta mucho más débil. 1200 por 630 es el tamaño al que apunta casi todo el mundo. El recorte se hace desde el centro, así que cualquier cosa cerca del borde superior, inferior o lateral puede desaparecer: un número de teléfono al pie de una fotografía, un nombre en la parte alta de un cartel. La imagen se carga y se mide aquí en tu navegador, de modo que el tamaño que ves es el real y no lo que afirme la etiqueta de anchura.

Lo que muestra

Un solo juego de etiquetas, seis tarjetas, porque las plataformas no las leen igual.

Seis plataformas

En el diseño de cada una
En el orden de etiquetas que usa cada una
Una al lado de otra

La imagen

Medida en tu navegador
Píxeles reales, no la etiqueta
Recortada como se recortará

Las palabras

Titular y descripción
Dónde se corta cada uno
De qué etiqueta viene cada uno

Leído de una página en vivo

Las etiquetas que haya
Cada alternativa seguida
Nada guardado

Cómo usarla

Escribe la dirección

Escribe o pega la dirección de la página. Su título, descripción, canonical, favicon y todas las etiquetas Open Graph y X se leen y se rellenan abajo.

O escribe tú las etiquetas

Deja la dirección vacía y escribe un titular, una descripción y la dirección de una imagen. Útil para probar un juego de etiquetas antes de ponerlo en la página.

Lee las seis tarjetas

Fíjate en dónde se cortan el titular y la descripción, y en qué sustituyó cada plataforma por lo que dejaste sin poner.

Cambia las etiquetas y pide una lectura nueva

Las etiquetas van en el head de la página. En Facebook y LinkedIn la tarjeta antigua se queda hasta que les pidas mirar otra vez.

Qué significan estas palabras

Open Graph

Un juego de etiquetas meta en el head de una página, con nombres que empiezan por og, que le dicen a una plataforma qué imagen, qué titular y qué descripción usar. Facebook las introdujo y hoy las leen casi todas las plataformas.

Tarjeta

Lo que una plataforma dibuja en lugar de un enlace pelado: una imagen, un titular, una línea de texto y el nombre del dominio. Su forma y cuánto texto sobrevive cambian según la plataforma.

Caché

La copia de lo que una plataforma leyó de tu página. Facebook y LinkedIn guardan una, y por eso la tarjeta que muestran puede ser más antigua que las etiquetas de la página.

Preguntas