Acerca de esta herramienta
Las etiquetas Open Graph (OG) controlan cómo aparece una página cuando se comparte en plataformas sociales. Facebook, LinkedIn, Slack, Discord y muchos otros leen etiquetas OG para crear tarjetas de vista previa. Sin las etiquetas OG adecuadas, los enlaces compartidos parecen rotos: favicons genéricos, imágenes faltantes, títulos truncados. Con ellos, las acciones se ven pulidas y las tasas de clics mejoran significativamente.
Las etiquetas OG estándar: og:title (el título que se muestra en la vista previa), og:description (el fragmento de texto), og:image (la imagen de vista previa, idealmente 1200×630), og:url (URL canónica), og:type (normalmente 'sitio web' o 'artículo'). Capa de etiquetas de tarjetas de Twitter en la parte superior: twitter:tarjeta, twitter:título, twitter:descripción, twitter:imagen. La mayoría de las herramientas recurren a OG cuando no hay etiquetas específicas de Twitter.
Este generador produce un conjunto completo de etiquetas de OG y Twitter Card a partir de su entrada. Pegue el HTML resultante en el <head> de la página. El resultado es una vista previa correcta en todas las principales plataformas sociales.
Por qué utilizar un generador de etiquetas OG
Las páginas sin etiquetas OG se ven mal cuando se comparten. Imagen vacía, título genérico, descripción faltante: la vista previa compite mal con las páginas etiquetadas correctamente en los feeds. Para el marketing de contenidos y el uso compartido de enlaces, esto afecta directamente la tasa de clics.
Escribir etiquetas OG a mano es repetitivo. Cada página necesita su propio conjunto. Un generador que produce etiquetas correctas a partir de unas pocas entradas evita los errores tipográficos y las propiedades omitidas que interrumpen las vistas previas sociales.
Detalles técnicos
Las etiquetas OG utilizan el atributo de metapropiedad (no el nombre): <meta property="og:title" content="..." />. El atributo de propiedad es obligatorio para OG; Algunos analizadores aceptan el nombre como alternativa, pero la propiedad es correcta.
Requisitos de imagen: 1200×630 píxeles para renderizado retina, relación de aspecto 1,91:1. Las etiquetas og:image:width y og:image:height ayudan a las plataformas a almacenar en caché las imágenes correctamente. og:image:alt proporciona texto de accesibilidad.
Las etiquetas de Twitter Card utilizan el atributo de nombre: <meta name="twitter:title" content="..." />. Twitter recurre a las etiquetas OG cuando no hay etiquetas específicas de Twitter, por lo que a menudo es suficiente un OG bien configurado. Agregar twitter:card elige explícitamente el tipo de tarjeta (summary_large_image es el más común).
Preguntas frecuentes
- ¿Puedo personalizar la salida generada?
- Sí. La herramienta proporciona varias opciones de personalización para adaptar el resultado a sus necesidades específicas. Ajuste la configuración antes de generar o regenerar con diferentes opciones.
- ¿El contenido generado es de uso gratuito?
- Sí. Todo lo que genere con esta herramienta es suyo para utilizarlo con fines personales, educativos o comerciales sin restricciones ni requisitos de atribución.
- ¿Esto requiere una cuenta?
- No. La herramienta está lista para usarse inmediatamente sin necesidad de registrarse, enviar correo electrónico ni registrarse. Simplemente abre la página y comienza a generar.
- ¿Mis datos de entrada se mantienen privados?
- Sí. Todo el procesamiento ocurre en su navegador. Sus datos de entrada y salida generada nunca se envían a ningún servidor externo.
- ¿Puedo usar la misma imagen OG para cada página?
- Posible pero subóptimo. Las imágenes específicas de una página superan a las imágenes genéricas de todo el sitio en términos de clics. Utilice un valor predeterminado como respaldo, pero produzca imágenes por página para contenido importante.
- ¿Se necesita una declaración de dimensiones de la imagen?
- Útil pero no estrictamente necesario. og:image:width y og:image:height permiten que las plataformas almacenen imágenes en caché sin volver a buscarlas para determinar las dimensiones. Acelera las acciones posteriores.
- ¿Se cargan mis datos?
- No. La generación ocurre en su navegador.
- ¿Cómo pruebo las etiquetas OG?
- El depurador de uso compartido de Facebook, el validador de tarjetas de Twitter y el inspector de publicaciones de LinkedIn obtienen y validan. Úsalos después de implementar nuevas etiquetas OG.