Ir al contenido

Generador de Etiquetas Open Graph

Asegúrate de que tus enlaces luzcan perfectos en Facebook, Twitter y LinkedIn. Genera las etiquetas HTML necesarias al instante.

0 / 60
0 / 110

Vista Previa (Facebook / LinkedIn)

Código HTML a insertar en el <head>

Live Preview

Visualiza exactamente cómo se verá tu enlace en los feeds de las principales redes sociales antes de publicarlo.

Twitter Cards

Genera simultáneamente las etiquetas necesarias para Twitter (X), asegurando la visualización con "Imagen Grande".

Código Limpio

HTML estructurado y validado, listo para copiar y pegar en la sección <head> de cualquier CMS.

¿Qué son las Etiquetas Open Graph (OG)?

El protocolo Open Graph (introducido originalmente por Facebook en 2010) es un conjunto de metaetiquetas HTML que permite a cualquier página web convertirse en un objeto enriquecido en las redes sociales. En lugar de compartir un enlace "desnudo" y que la red social intente adivinar qué imagen o texto mostrar, las etiquetas OG le dicen exactamente qué título, qué resumen y qué fotografía destacar.

Impacto del Open Graph en el CTR

Cuando un usuario ve un enlace en Twitter, LinkedIn o Facebook, la imagen y el título son el principal gancho visual. Un enlace con las etiquetas Open Graph y Twitter Cards correctamente configuradas ocupa mucho más espacio en el feed de noticias (especialmente si usas summary_large_image). Esto incrementa exponencialmente el Click-Through Rate (CTR) y el tráfico hacia tu sitio web.

Diferencias entre OG y Twitter Cards

Aunque Twitter (ahora X) es capaz de leer las etiquetas Open Graph genéricas si no encuentra las suyas propias, siempre es recomendable incluir ambas. Las etiquetas twitter:card, twitter:title y twitter:image aseguran que la plataforma muestre tu contenido con la mejor resolución y formato posible.

Preguntas Frecuentes sobre Open Graph

¿Qué tamaño debe tener la imagen (og:image)?
Para que la imagen se vea perfecta en todas las plataformas y no se recorte de forma extraña, el tamaño estándar recomendado es de 1200 x 630 píxeles. Mantén siempre el contenido importante en el centro de la imagen.
He actualizado las etiquetas, pero Facebook sigue mostrando la información vieja. ¿Qué hago?
Las redes sociales guardan una copia en caché de tu enlace la primera vez que alguien lo comparte. Para forzar a Facebook a leer las nuevas etiquetas que has generado, debes introducir tu URL en la herramienta oficial llamada "Facebook Sharing Debugger" y hacer clic en "Volver a extraer".
¿Es obligatorio rellenar todos los campos?
Los campos estrictamente obligatorios para que el protocolo funcione son el og:title, og:type, og:image y og:url. Sin embargo, te recomendamos encarecidamente rellenar la descripción para dar contexto a los usuarios y mejorar la tasa de clics.