Guia completa de etiquetas Open Graph - og:title, imagen y Twitter Cards (2026)

Cuando alguien pega tu URL en Facebook, LinkedIn, Slack, Discord o iMessage, esas apps no adivinan a partir de la pagina visible. Buscan etiquetas Open Graph en el head HTML: titulo, descripcion, imagen, tipo y URL canonica. Si estan bien, la tarjeta parece un preview disenado. Si faltan, sale una imagen aleatoria, un titulo cortado o ninguna tarjeta. Esta guia recorre el protocolo, las etiquetas que importan, como se diferencian del title HTML y la meta description, y los errores que rompen la vista previa. Cuando quieras markup para pegar, usa el Generador de etiquetas Open Graph - corre en el navegador y no sube los campos.

Que son las etiquetas Open Graph

Open Graph es un vocabulario pequeno de meta tags. Cada etiqueta es un par nombre/valor en el head del documento. El nombre usa el prefijo og:. Los crawlers de las apps sociales piden la URL publica, leen esas etiquetas y montan una tarjeta: imagen arriba o al lado, titulo, descripcion y a menudo el nombre del sitio. El protocolo nacio en Facebook. Hoy es el formato de share por defecto en casi toda la web.

• Facebook e Instagram leen og:* primero en las vistas previas de enlaces.
• LinkedIn, Slack, Discord, Telegram e iMessage reutilizan las mismas etiquetas.
• X (Twitter) puede caer a Open Graph, pero twitter:* gana cuando existen las dos.
• Los buscadores siguen usando el title HTML y la meta description para la SERP. OG es para shares, no para el enlace azul en Google.

Una etiqueta se ve asi: meta property="og:title" content="Tu titulo para compartir". El property es la clave. El content es el valor. Los caracteres especiales del valor hay que escaparlos para que el HTML sea valido. El generador hace ese escape por ti.

Las cuatro etiquetas que toda pagina necesita

El objeto basico de Facebook pide cuatro properties. Si falta alguna o esta vacia, muchos crawlers inventan un fallback - o muestran una tarjeta rota.

• og:title - el titular de la tarjeta. Corto y concreto. Puede diferir del title HTML que quieres en Google.
• og:type - que tipo de objeto es. website es el default para home o landing. article encaja en un post de blog.
• og:image - una URL https absoluta a la imagen. Las rutas relativas (/images/og.png) fallan porque el crawler no tiene contexto de pagina.
• og:url - la URL canonica de este objeto. Debe coincidir con la URL publica que se comparte, con https y el host preferido (www o apex).

Esas cuatro son el minimo. Una tarjeta solo con titulo y sin imagen parece inacabada. Una tarjeta con imagen y un titulo vago tira el clic.

Extras recomendados

• og:description - una o dos frases bajo el titulo. Unos 70 a 200 caracteres. No tiene que ser la misma cadena que tu meta description.
• og:site_name - tu marca. LinkedIn y Slack suelen mostrarla bajo el titulo para que se vea la fuente.
• og:locale - idioma y region con guion bajo, por ejemplo en_US, es_ES o pt_BR. Usalo cuando la pagina no este en ingles.

Mas adelante puedes anadir campos ricos del tipo (article:author, product:price:amount). Empieza por el set basico. Un objeto basico completo gana a un objeto product a medias.

Valores de og:type que de verdad usaras

El type dice al crawler como tratar la URL. Un type equivocado rara vez rompe la tarjeta, pero cambia que extras tienen sentido y como algunas apps agrupan el objeto.

• website - homes, indices de categoria y landings genericas.
• article - posts, noticias y guias how-to. Combinarlo con una URL con fecha y una imagen unica.
• product - una ficha de producto o una pagina de precios. Titulo claro e imagen hero.
• profile - pagina de persona o autor.

Si dudas, website es seguro. No inventes types custom. Los crawlers ignoran nombres que no conocen.

Reglas de og:image

La imagen es lo primero que se ve. Una imagen floja o ausente es la causa mas habitual de un share barato.

• Usa 1200 x 630 pixeles para una tarjeta apaisada. Ese ratio (unos 1.91:1) es el que esperan Facebook y LinkedIn.
• Quedate por encima de 600 x 315 para que el crawler no caiga a una miniatura minuscula.
• La URL debe ser absoluta y https. Aloja el archivo en un CDN publico o en tu origen. Muros de login y bloqueos de robots.txt esconden la imagen.
• Manten el archivo razonable (muy por debajo de 8 MB). PNG o JPEG valen. Evita WebP si todavia necesitas caches viejos de Facebook.
• Pon el sujeto en el centro. Algunas apps recortan los lados en movil.

Twitter Cards frente a Open Graph

X puede leer og:title, og:description y og:image. Tambien tiene sus propias etiquetas twitter:*. Si estan las dos, twitter:* gana en X y og:* sigue ganando en el resto. Por eso la mayoria de paginas emiten ambas.

• twitter:card - summary_large_image cuando tienes una imagen ancha, o summary cuando no.
• twitter:title, twitter:description, twitter:image - suelen ser los mismos valores que los og:* equivalentes.
• No hace falta un handle de Twitter para una tarjeta large-image basica.

Si solo publicas Open Graph, X a menudo mostrara tarjeta igual. Si solo publicas tags de Twitter, Facebook y LinkedIn no. Open Graph es la base compartida. Las tags de Twitter son la capa extra para X.

OG frente al title HTML y la meta description

Tres cadenas, tres trabajos. Mezclarlas es como tener un snippet SERP bueno y una tarjeta de Slack floja - o al reves.

• Title HTML - el titulo del resultado de busqueda y la pestana del navegador. Aqui van las queries transaccionales o informativas.
• Meta description - el snippet SERP bajo ese titulo. Google puede reescribirlo.
• og:title y og:description - la tarjeta social. Escribe para alguien que ya tiene el enlace, no para una keyword.

Una pagina de herramienta puede guardar un title HTML transaccional (Generador de etiquetas Open Graph gratis) y un og:title mas claro (Genera etiquetas Open Graph para este articulo). Un post puede hacer lo contrario. Revisa el snippet SERP con el Comprobador de meta description y vista previa SERP. Revisa la tarjeta de share con etiquetas OG.

Ejemplo trabajado

Un post sobre Open Graph podria usar estos valores. Cuando los pegas en el head de la URL publica, un crawler deberia ver un objeto completo.

• og:title - Etiquetas Open Graph explicadas
• og:description - Que hacen og:title, og:image, og:url y og:type, mas Twitter Cards y tamano de imagen.
• og:type - article
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - un PNG o JPEG de 1200 x 630 en https
• og:site_name - ToolsMinify
• og:locale - es_ES
• twitter:card - summary_large_image, con el mismo titulo, descripcion e imagen

Comillas y ampersands en un titulo deben pasar a " y & dentro del atributo content. Si escribes las tags a mano y la pagina no parsea, ese escape es el primer sitio que mirar.

Errores habituales

• og:image u og:url relativas. Las dos deben ser absolutas.
• og:url que no coincide con el enlace compartido (http vs https, apex vs www, falta el prefijo de locale).
• Una imagen por debajo de 200 x 200, o un recorte 1:1 que LinkedIn luego enmarca.
• Etiquetas en el body en vez del head. Los crawlers miran el head.
• Bloquear la imagen o la pagina en robots.txt. Los crawlers sociales tambien tienen que pedirlas.
• Cache vieja de Facebook. Tras cambiar tags, vuelve a scrapear la URL en el Sharing Debugger. Otras apps tienen su propia cache.
• og:title duplicadas y en conflicto. Suele ganar la primera, y no te gustara cual.
• Meter secretos o copy de un draft inedito en og:description. Las tags son publicas en cuanto existe la URL.

Preguntas frecuentes

Las etiquetas Open Graph son un factor de ranking de Google?

No de forma directa. Google usa el title HTML, la meta description y el contenido para la busqueda. Las tags OG ayudan a compartir la pagina con una tarjeta limpia. Mejores shares pueden traer enlaces y visitas. Eso es un efecto indirecto, no un interruptor de ranking.

Que etiquetas Open Graph son obligatorias?

Empieza por og:title, og:type, og:image y og:url. Anade og:description, og:site_name y og:locale cuando los tengas. Las tags vacias son peores que omitirlas.

Que tamano debe tener og:image?

1200 x 630 pixeles es el tamano apaisado habitual. Quedate por encima de 600 x 315. Usa una URL https absoluta. Centra el sujeto para que el recorte movil no corte el texto de la imagen.

Necesito Twitter Cards si ya tengo Open Graph?

X puede leer tags OG, pero twitter:card mas titulo, descripcion e imagen te dan control explicito en esa red. Facebook y LinkedIn ignoran twitter:* y siguen necesitando og:*. Emite ambas cuando puedas.

Por que Facebook sigue mostrando la imagen vieja?

Facebook cachea el primer scrape. Cambia la URL de la imagen (o espera) y pasa la URL por el Sharing Debugger de Facebook para pedir un scrape nuevo. LinkedIn y Slack tienen caches parecidas. Cambiar solo los bytes del archivo en la misma URL casi nunca basta.

Donde pongo el HTML?

Dentro del head del documento HTML publico, o en la API de metadata de tu framework para que se pinte en el head. Las tags tienen que ser visibles en la URL exacta que pusiste como og:url. Para el paso a paso del constructor, ve Como usar el Generador de etiquetas Open Graph.

Monta las etiquetas en el navegador

Rellena titulo, descripcion, URL e imagen y copia el HTML en vivo. No se sube nada:

• Generador de etiquetas Open Graph - monta og:* y Twitter Cards opcionales, con vista previa social.
• Como usar el Generador de etiquetas Open Graph - guia paso a paso de la misma herramienta.
• Comprobador de meta description y vista previa SERP - revisa el snippet de busqueda, no la tarjeta de share.
• Generador de slugs - slugs URL limpios para la pagina que vas a compartir.
• Todas las herramientas SEO - el indice completo de la categoria.