share Generador de Open Graph y Twitter Card star

Cómo Funciona

El protocolo Open Graph fue introducido por Facebook en 2010 para que cualquier página web pudiera describirse a sí misma como un objeto social enriquecido — qué título, descripción, imagen y nombre de sitio deberían aparecer cuando alguien pega el enlace en un feed o en un chat. Esta herramienta genera las cuatro etiquetas fundamentales (og:title, og:description, og:image, og:url) más el conjunto twitter: equivalente, y muestra una vista previa en vivo de la tarjeta resultante para que veas lo que Facebook, LinkedIn, WhatsApp o X mostrarán realmente antes de publicar nada.

El campo og:type (website, article, product...) no es cosmético — algunas plataformas cambian el comportamiento de la tarjeta según su valor: un tipo article puede mostrar una línea de autor/fecha, un tipo product puede activar la visualización de precio en plataformas que soportan las extensiones de comercio de Open Graph. Ejemplo concreto: una página de receta con og:type=article y un og:image de 1200×630 obtiene una tarjeta con foto a ancho completo en X (mediante twitter:card=summary_large_image) y una vista previa equivalente en WhatsApp — si se configura mal o se omite og:image, la mayoría de las plataformas recurre a adivinar, normalmente eligiendo la primera imagen de la página o ninguna en absoluto.

Más allá de las cuatro etiquetas principales, algunos campos opcionales afinan el resultado: og:site_name muestra tu marca junto al título en algunas plataformas, og:locale fija el idioma/región (en_US, es_ES) para que los sitios multilingües rendericen la variante correcta, y twitter:site atribuye la tarjeta a una cuenta de X. El propio valor twitter:card tiene una tercera opción más allá de summary y summary_large_image — player — para incrustar vídeo o audio directamente en la línea de tiempo, aunque necesita marcado adicional específico de player que este generador no cubre. La duración de la caché también varía según la plataforma: algunos depuradores se refrescan en un día tras un rastreo nuevo, mientras que otras plataformas pueden mantener una vista previa desactualizada durante una semana o más porque cachean por enlace en lugar de por rastreo, por lo que forzar un nuevo rastreo con el depurador suele ser la única solución rápida.

Cosas que Debes Saber

• 1200×630px (una proporción 1,91:1) es el tamaño de imagen universal seguro entre plataformas; mantén el archivo por debajo de aproximadamente 1MB para que cargue de forma fiable, y usa siempre una URL absoluta (https://...) — las rutas relativas fallan silenciosamente.
• La caché es la queja más común: una vez que una plataforma ha rastreado una URL, puede seguir mostrando el título o la imagen antiguos durante días incluso después de corregir las etiquetas. El Sharing Debugger de Facebook, el Post Inspector de LinkedIn y herramientas similares fuerzan un nuevo rastreo.
• X mayormente recurre a los valores de Open Graph para título, descripción e imagen, pero twitter:card es su propia configuración (summary frente al summary_large_image de ancho completo) y no se infiere — configúralo explícitamente.
• No tener ninguna etiqueta no significa que no haya vista previa — la plataforma adivina a partir de lo que encuentre en la página, y esa suposición rara vez favorece.
• og:url debe apuntar a la versión canónica de la página — apuntarlo a una URL con parámetros de seguimiento o a un destino de redirección divide la señal de compartición entre dos direcciones distintas en lugar de consolidarla en una.
• Prueba en más de una plataforma antes de publicar: Facebook, LinkedIn y X analizan Open Graph de forma ligeramente distinta, y una tarjeta que se ve bien en una puede recortar la imagen o descartar la descripción en otra.