Estas son buenas prácticas generales para escribir el marcado Open Graph a mano o en tu CMS. OG Preview en sí es un visor: representa cómo se verán tus etiquetas y, en el modo Obtener URL, informa de qué etiquetas expone ya una página.
Usa etiquetas únicas para cada tipo de página
Las distintas páginas merecen vistas previas distintas. Las entradas de blog funcionan mejor con og:type configurado como article, las páginas de producto se benefician de un título y una imagen descriptivos, y tu página de inicio debería enfatizar la identidad de marca. Reutilizar una única vista previa genérica en todas partes reduce la tasa de clics.
Optimiza la imagen para la velocidad
Evita los PNG de varios megabytes. Comprime a un tamaño razonable, mantén las dimensiones de 1200×630px (1.91:1) que funcionan en todas las plataformas y asegúrate de que el archivo se cargue rápido para los rastreadores.
Configura siempre og:site_name
Esto mantiene visible el nombre de tu marca en las vistas previas incluso cuando el título se trunca:
Prueba en todas las plataformas: no des nada por sentado
Facebook, LinkedIn y X (Twitter) manejan las etiquetas meta de forma un poco diferente cada uno. Previsualiza aquí primero y luego verifica en las plataformas reales con sus herramientas oficiales:
Usa og:type para contenido más rico
Para blogs usa article; para productos usa product. El tipo correcto puede desbloquear una representación más rica, como nombres de autor o fechas de publicación en algunas plataformas.
Establece una URL de imagen absoluta
Los rastreadores sociales no resuelven las rutas relativas. Usa siempre una URL completa: https://yoursite.com/img/og.jpg, no /img/og.jpg.
Invalidación de caché para imágenes actualizadas
Cuando reemplazas una imagen OG, las plataformas pueden seguir sirviendo la antigua. Cambia el nombre del archivo (por ejemplo og-v2.jpg) o añade un parámetro de versión como ?v=2, y luego vuelve a ejecutar el depurador de la plataforma para actualizar la caché.
Combina las etiquetas OG con JSON-LD
Los datos estructurados mediante <script type="application/ld+json"> ayudan a los motores de búsqueda, mientras que las etiquetas OG se encargan de compartir en redes sociales. Se complementan entre sí: conserva ambos.