Generador Open Graph

1200x630 píxeles (relación 1.91:1) es el tamaño seguro universal para Facebook, LinkedIn, Twitter summary_large_image y la mayoría de otras plataformas. El tamaño del archivo debe ser inferior a 8 MB (límite de Facebook) — apunta a menos de 1 MB para una carga rápida. Usa PNG para gráficos con transparencia, JPEG para fotos. Cualquier cosa por debajo de 200x200 píxeles puede no mostrarse en absoluto en Facebook. Las imágenes cuadradas (1200x1200) también funcionan bien si tu imagen se ve mejor en formato cuadrado.

og:type indica a las plataformas qué tipo de contenido es tu página. website es el predeterminado y funciona para homepages, landing pages y la mayoría de páginas estáticas. article es para publicaciones de blog y noticias — desbloquea etiquetas adicionales como article:author, article:published_time y article:section. product es para artículos de comercio electrónico. video.movie y music.song existen para contenido multimedia. Usar el tipo correcto puede habilitar vistas previas más ricas en algunas plataformas.

Twitter lee las etiquetas OG como respaldo, por lo que tus enlaces se previsualizarán incluso sin etiquetas Twitter Card explícitas. Sin embargo, Twitter Card te da dos extras importantes: (1) el tipo twitter:card — summary_large_image muestra una imagen de ancho completo sobre el texto del enlace, mucho más llamativa que la pequeña miniatura en una tarjeta resumen básica; (2) twitter:site y twitter:creator — tu @handle aparece debajo de la tarjeta. Para marketing de contenidos, añadir etiquetas Twitter Card vale las dos líneas adicionales de HTML.

Facebook y LinkedIn almacenan en caché los datos OG de forma agresiva. Después de actualizar tu URL de og:image, usa el Facebook Sharing Debugger (developers.facebook.com/tools/debug) para forzar un re-scrape — pega tu URL y haz clic en "Scrape Again". LinkedIn tiene un Post Inspector en linkedin.com/post-inspector. Twitter/X generalmente se actualiza automáticamente en unas pocas horas. Cambiar la URL de la imagen (por ejemplo, añadiendo ?v=2 como rompedor de caché) también obliga a las plataformas a obtener la nueva imagen.

og:locale declara el idioma y territorio de tu contenido, por ejemplo en_US, fr_FR o tr_TR. Es opcional pero útil para sitios multilingües — ayuda a Facebook a mostrar la versión correcta del idioma cuando un usuario hace clic en un enlace compartido. El formato es idioma_TERRITORIO con un guion bajo (no un guion). og:locale:alternate puede enumerar locales adicionales compatibles. Para sitios de un solo idioma, omitirlo está bien; Facebook usa por defecto en_US.

El Facebook Sharing Debugger (developers.facebook.com/tools/debug) es el más completo — muestra exactamente qué etiquetas fueron extraídas, cualquier advertencia y te permite forzar una actualización de caché. El LinkedIn Post Inspector (linkedin.com/post-inspector) prueba las vistas previas de LinkedIn. El Twitter Card Validator (cards-dev.twitter.com/validator) comprueba las tarjetas de Twitter. Estas herramientas muestran los datos reales extraídos, no una simulación, por lo que detectan problemas como URLs de imágenes bloqueadas o etiquetas obligatorias faltantes.

No. Toda la generación de etiquetas OG y el renderizado de la vista previa social ocurren en tu navegador con JavaScript. Los títulos de tus páginas, descripciones, URLs y URLs de imágenes nunca salen de tu máquina.