Español
English
Português
Manual: Configuración de Open Graph (OG) OpenCart + TMD Advance Blog
Qué es, para qué sirve y cómo configurarlo en productos, categorías, páginas de información, landings (Blog) y el resto del sitio.
¿Qué es OG y para qué sirve?
Open Graph (OG) es un conjunto de metadatos (etiquetas <meta property="og:*">) que indica a redes sociales y apps de mensajería cómo previsualizar una URL cuando se comparte: título, descripción, imagen y tipo de recurso.
¿Por qué importa? Mejora el CTR de los enlaces compartidos: vistas más atractivas en WhatsApp, Facebook, Instagram, etc., y evita títulos/imágenes incorrectas.
Etiquetas clave: og:title, og:description, og:image, og:url, og:type, og:site_name.
1) OG para Productos y Categorías
Basado en el instructivo PDF (productos/categorías toman contenido automáticamente).
Cómo funciona
Para producto y categoría, el módulo OG genera automáticamente:
• og:title ← del nombre del producto/categoría.
• og:description ← del resumen/Descripción del producto/categoría.
• og:image ← de una imagen del producto/categoría (elige una de las fotos).
Para ajustar lo que se comparte
1) En el admin, edita el producto o la categoría correspondiente.
2) Ajusta Nombre (título) y Descripción (primeras líneas claras y persuasivas).
3) Asegúrate de que haya una imagen destacada adecuada (ideal ≥1200×630 px).
4) Guarda. Recuerda: estos cambios impactan en la ficha pública, no solo en OG.
2) OG en Páginas de Información
Ruta: Catálogo → Información → elige la página → General.
Título de la Información = og:title.
Descripción (primeros párrafos) = og:description.
Imagen OG: se toma la primera imagen insertada en el campo Descripción. Colócala al inicio para asegurar que WhatsApp/Facebook la usen.
Tip: completa también Meta Tag Title / Meta Tag Description para SEO (no OG) y mantén consistencia con el título/primer párrafo.
3) OG en Blog / Landing Page (TMD Advance Blog)
Ruta: Blog Dashboard → Blogs → agregar/editar.
Pestaña General
Blog Name = og:title.
Description (primer bloque) = og:description.
Imagen OG: utiliza la primera imagen dentro del campo Description para que aparezca en WhatsApp/Facebook.
Completa también Meta Tag Title y Meta Tag Description (útiles para SEO y snippet). El módulo OG prioriza el título/primer párrafo y la primera imagen del contenido para la vista previa.
4) OG para el resto de las páginas
Para la portada y páginas no cubiertas por las ediciones anteriores, usa el módulo:
Extensiones → Extensiones → Módulos → OpenGraph Tags → Editar.
Configura los campos (sitio, título, descripción, imagen por defecto) siguiendo el instructivo y guarda. Luego re-extrae en el depurador. :contentReference[oaicite:4]{index=4}
Recomendado
• og:type: website (portada) / product (productos) / article (blog e información).
• Imagen por defecto ≥ 1200×630 px, formato JPG/WEBP liviano (< 300 KB).
• Mantén coherencia entre título/primer párrafo y lo que se verá en la vista previa.
Cómo probar (Facebook Sharing Debugger)
1) Abre: developers.facebook.com/tools/debug/.
2) Pega la URL de tu página y haz clic en Volver a extraer (Scrape Again).
Si no aparece la imagen correcta, limpia cachés, confirma que la imagen sea accesible públicamente y que sea la primera dentro del contenido.
Cerrar ✕ Cerrar ✕ Cerrar ✕ Cerrar ✕ 