Generador de Open Graph - Vista Previa en Redes Sociales
Genera meta etiquetas Open Graph para compartir en redes sociales. Previsualiza cómo aparecerá tu página en Facebook, LinkedIn y más.
Cómo Usar
- Completa og:title con el título que quieres mostrar cuando se comparte en redes sociales.
- Escribe una og:description que llame la atención — aparece como el extracto bajo el título en las vistas previas sociales.
- Agrega una URL de og:image que apunte a una imagen de al menos 1200×630 píxeles para mejor calidad.
- Ingresa la og:url canónica para esta página (usa la URL completa incluyendo https://).
- Haz clic en 'Generar Etiquetas OG' para crear el código, verifica la vista previa, luego cópialo en tu <head> HTML.
Acerca del Protocolo Open Graph
¿Qué es Open Graph?
Open Graph (OG) es un protocolo creado por Facebook en 2010 que permite que cualquier página web se convierta en un objeto rico en un gráfico social. Al agregar meta etiquetas OG, controlas cómo aparece tu contenido cuando se comparte en Facebook, LinkedIn, Slack, Discord, WhatsApp y muchas otras plataformas. Sin etiquetas OG, estas plataformas extraen contenido arbitrario de tu página, a menudo con malos resultados.
Mejores Prácticas para og:image
La etiqueta og:image especifica la imagen que se muestra en la tarjeta de vista previa de compartir social. Mejores prácticas: usa al menos 1200×630 píxeles para pantallas de alta resolución, mantén el tamaño del archivo por debajo de 8MB, usa formato JPG o PNG, evita imágenes con mucho texto ya que se recortan en móvil. Facebook almacena imágenes en caché con fuerza — usa una URL única al actualizar una imagen.
Valores de og:type
La etiqueta og:type describe el tipo de contenido. Los valores comunes incluyen: 'website' (predeterminado, para páginas web generales), 'article' (para blogs y noticias), 'product' (para comercio electrónico), 'video.movie' o 'video.episode' (para contenido de video), y 'music.song' o 'music.album' (para música). Algunas plataformas renderizan vistas previas más ricas para tipos de contenido específicos.
og:locale y Multilingüe
La etiqueta og:locale especifica el idioma y territorio de tu contenido usando etiquetas de idioma IETF (p. ej., 'en_US', 'zh_CN', 'es_ES'). Para sitios multilingües, puedes usar og:locale:alternate para listar versiones en idiomas alternativos. Esto ayuda a las plataformas sociales a servir la versión correcta del idioma y mejora la experiencia de compartir para audiencias internacionales.
Características Principales
- Genera todas las etiquetas OG esenciales: título, descripción, imagen, url, tipo, nombre del sitio, locale
- Tarjeta de vista previa de redes sociales en tiempo real mostrando cómo aparecerá el contenido al compartirse
- Copia con un clic del código HTML completo generado
- Soporta todos los valores de og:type con un selector desplegable
Aplicaciones Comunes
- Optimizar cómo aparecen las publicaciones de blog cuando se comparten en redes sociales
- Crear vistas previas de compartir personalizadas para páginas de productos en comercio electrónico
- Asegurar la consistencia de marca en todo el compartir en redes sociales
- Depurar por qué la vista previa de compartir de una página muestra contenido incorrecto