Tarjetas sociales: Open Graph y la imagen para compartir

Qué es una vista previa de enlace

Cuando alguien comparte un enlace en una red social o en una aplicación de mensajería, la plataforma lee la página y crea una pequeña tarjeta: una imagen, un título, un texto breve y el dominio. La mayoría de las plataformas leen para ello las etiquetas del protocolo Open Graph, que son elementos meta en el head de la página. X, antes Twitter, también lee sus propias etiquetas, que empiezan por twitter:. Cada plataforma diseña su tarjeta y decide cuánto texto muestra. Tú decides lo que la página les dice a las plataformas.

Las etiquetas básicas

El protocolo Open Graph, publicado en ogp.me, nombra cuatro propiedades que toda página debería tener: og:title, og:type, og:image y og:url. og:url es la dirección canónica de la página. Opcionales, pero útiles, son og:description, og:site_name y og:locale, el idioma y la región de las etiquetas, por ejemplo de_DE.

<meta property="og:title" content="Rebajas de verano: todas las tazas rebajadas">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Seis tazas azules sobre una mesa de madera">
<meta property="og:description" content="Hasta el 31 de agosto: precios más bajos en tazas y platos.">
<meta property="og:site_name" content="Tienda Ejemplo">
<meta name="twitter:card" content="summary_large_image">

Escribe cada dirección completa, con https://. El protocolo define una dirección como una URL que usa http:// o https://, así que una ruta como /img/sale.jpg no es un valor válido. og:url debería coincidir con el enlace canónico de la página. Si una etiqueta aparece dos veces con valores distintos, el protocolo da preferencia a la primera.

La imagen para compartir

La mayoría de las vistas previas muestran la imagen en horizontal. Se suele recomendar una imagen con una proporción de aproximadamente 1,91 : 1, por ejemplo 1200 × 630 píxeles, que encaja en la mayoría de las tarjetas sin recortes. Las imágenes cuadradas a menudo se recortan por arriba y por abajo, así que deja el contenido importante en el centro. Para Google Discover, Google recomienda imágenes de al menos 1200 píxeles de ancho, una vista previa grande permitida con el ajuste max-image-preview:large y una imagen indicada con og:image o con marcado de schema.org. Google también desaconseja imágenes genéricas como el logotipo del sitio.

og:image:width y og:image:height indican el tamaño de la imagen en píxeles. og:image:alt describe lo que hay en la imagen; no es un pie de foto. El protocolo dice que una página con og:image también debería indicar og:image:alt.

Título y descripción

og:title puede ser distinto del elemento title. No necesita el nombre del sitio web, porque ya lo lleva og:site_name. Las plataformas cortan los textos largos a su propia longitud, así que pon primero las palabras importantes. Las etiquetas Open Graph también importan fuera de las redes sociales. Google menciona el contenido de og:title como una de las fuentes de los enlaces de título en los resultados de búsqueda, tiene en cuenta og:site_name para el nombre del sitio y cita og:image como una forma de indicar una imagen preferida.

Etiquetas para X

La etiqueta twitter:card elige el tipo de tarjeta. El valor summary_large_image pide una imagen grande y horizontal; summary, una pequeña. Si tu página ya tiene etiquetas Open Graph, a menudo basta con añadir twitter:card. Las páginas para desarrolladores de X no se pudieron leer para esta guía, así que consulta allí las reglas actuales antes de confiar en un detalle.

Una tarjeta por página

Muchos sitios web ponen el mismo título y la misma imagen en todas las páginas, a menudo a través del tema. Entonces todos los enlaces compartidos se ven iguales. Da a cada página importante su propio og:title, og:description y og:image: a una página de producto, la foto del producto; a un artículo, su imagen principal. Para og:type, el protocolo usa, entre otros tipos, website para una página general y article para un artículo. Un sistema de tienda o de contenidos puede rellenar estas etiquetas automáticamente con el título, el resumen y la imagen principal de cada página. Después de un cambio, revisa una página de cada plantilla.

Por qué no cambia la vista previa

Muchas plataformas guardan una tarjeta una vez creada. Si cambias después la imagen o el título, puede que la gente siga viendo la tarjeta antigua durante un tiempo. Un nombre de archivo nuevo para una imagen nueva ayuda, porque la plataforma ve entonces una dirección nueva. Algunas plataformas ofrecen una herramienta que vuelve a leer la página.

Antes de compartir una página

• ¿Están og:title, og:type, og:image y og:url, y es og:url la dirección canónica?
• ¿Está completa cada dirección, con https://?
• ¿Es la imagen lo bastante ancha, se carga y está el contenido importante en el centro?
• ¿Están definidos og:image:alt, og:image:width y og:image:height?
• ¿Hay una etiqueta twitter:card, y es el título lo bastante corto?

Trabajar con Do4U

La Verificación de tarjeta social muestra cómo se ve una página cuando se comparte su enlace y revisa las etiquetas que hay detrás de la vista previa. Introduces una dirección. Do4U lee la página y el comienzo de su imagen para compartir. El código recoge las etiquetas Open Graph, las etiquetas de tarjeta de Twitter/X y las alternativas, es decir, el título, la meta descripción y la primera imagen, así como el enlace canónico y el idioma. Lee del archivo el formato y el tamaño reales de la imagen y los compara con las etiquetas. Recibes una vista previa neutra, una tabla de todas las etiquetas, hallazgos con un motivo breve y etiquetas sugeridas para copiar. No se ven las etiquetas que una página solo define con JavaScript. No se usa IA, y la comprobación es gratuita, con un límite diario.

Do4U encuentra indicios; tú revisas y decides. La vista previa es un boceto neutro: cómo muestra el enlace una plataforma lo decide la plataforma.