Previsualizar y generar etiquetas meta Open Graph para tarjetas de compartir en redes sociales
Características
- Vista previa en tiempo real: Previsualizar instantáneamente cómo aparece la página en redes sociales
- Etiquetas OG Completas: Generar todas las etiquetas meta Open Graph necesarias
- Múltiples Plataformas: Previsualizar simultáneamente en Facebook, Twitter, LinkedIn
- Copiar Etiquetas: Copiar etiquetas meta generadas con un clic
Guía de uso
- Ingresar Metadatos: Rellenar título, descripción, URL imagen y URL página para su contenido
- Configurar Opciones: Establecer tipo Open Graph, nombre del sitio, tipo de tarjeta Twitter e identificadores de redes sociales
- Previsualizar Apariencia: Revisar apariencia contenido en diferentes plataformas medios sociales
- Generar y Copiar Etiquetas: Generar código etiquetas meta y copiar en sección <head> de su sitio web
Detalles técnicos
Protocolo Abrir Graph
Open Graph usa etiquetas meta con prefijo og: en HTML <head> para definir metadatos de página. Las propiedades principales incluyen og:title (título de página), og:type (tipo de contenido como article, website, video), og:image (URL de imagen de vista previa), og:url (URL canónica), y og:description (resumen de contenido). Las propiedades opcionales incluyen og:site_name, og:locale, article:published_time, y video:duration. Estas etiquetas son analizadas por plataformas de medios sociales al compartir URL para crear tarjetas de vista previa ricas.
Twitter Cards
Twitter Cards extienden Open Graph con etiquetas prefijadas twitter: para características específicas de Twitter. Cuatro tipos de tarjetas están disponibles: summary (predeterminado con imagen cuadrada), summary_large_image (gran imagen rectangular), app (promoción de aplicación móvil), y player (reproductor de video/audio). twitter:card especifica el tipo, mientras que twitter:site y twitter:creator referencian identificadores @ de Twitter. Twitter recurre a etiquetas Open Graph si las etiquetas específicas de Twitter están ausentes.
Requisitos Imágenes
Diferentes plataformas tienen requisitos de imagen específicos: Facebook recomienda 1200x630px (proporción 1.91:1), mínimo 200x200px, máximo 8MB; Twitter summary_large_image necesita proporción 2:1 (1200x600px preferido), tarjeta summary proporción 1:1 (144x144px mínimo); LinkedIn soporta 1200x627px (1.91:1); WeChat requiere 300x300px a 1068x455px. Las imágenes deben estar en formato JPG, PNG o WEBP. Usar múltiples etiquetas og:image proporciona respaldos.
Preguntas frecuentes
- ¿Qué son las etiquetas Open Graph?
- Las etiquetas Open Graph son etiquetas meta que controlan cómo se muestran las URL cuando se comparten en plataformas de redes sociales. Definen título, descripción, imagen y otras propiedades para vistas previas de enlaces.
- ¿Qué plataformas usan Open Graph?
- Facebook, LinkedIn, Pinterest y muchas otras plataformas usan Open Graph. Twitter usa etiquetas Twitter Card similares. Ambos pueden coexistir en la misma página.
- ¿Cuál es el tamaño de imagen recomendado?
- Recomendado: 1200x630px para Facebook/LinkedIn. Mínimo: 600x315px. Usar formato PNG o JPG. Mantener tamaño de archivo bajo 8MB.
- ¿Cómo depurar etiquetas Open Graph?
- Usar Facebook Sharing Debugger, Twitter Card Validator o LinkedIn Post Inspector. Estas herramientas muestran cómo aparecerán sus etiquetas e identifican errores.
- ¿Necesito etiquetas diferentes para cada plataforma?
- Las etiquetas Open Graph funcionan para la mayoría de plataformas. Agregar etiquetas Twitter Card (twitter:*) para funciones específicas de Twitter. Usar etiquetas og:* como respaldo para todas las plataformas.
Documentación relacionada
- Protocolo Abrir Graph - Documentación oficial del protocolo Open Graph
- Etiquetas Twitter Card - Guía de etiquetas meta Twitter Card
- Compartir en Facebook - Mejores prácticas para compartir en Facebook
- LinkedIn Post Inspector - Herramienta de vista previa y depuración de posts LinkedIn
- Guía de Etiquetas Meta SEO - Guía completa de etiquetas meta SEO y sociales