Generador de etiquetas Open Graph

¿Por qué tu enlace aparece sin imagen en WhatsApp?

Compartes la dirección de tu artículo en WhatsApp, Facebook o LinkedIn y solo aparece una línea apagada sin imagen, o un logotipo pequeño que no tiene nada que ver con el tema. Las aplicaciones crean la tarjeta de vista previa a partir de las etiquetas Open Graph de la cabecera de tu página, y si no las encuentran, eligen algo por su cuenta. El generador de etiquetas Open Graph de Jood escribe esas etiquetas para que controles el título, la descripción y la imagen.

Cómo se usa

1. Escribe el «Título de la página», el único campo obligatorio, y elige el «Tipo»: sitio web o artículo.
2. Añade la «URL», la «Descripción», el «Nombre del sitio» y la «URL de la imagen», y elige el «Idioma (locale)».
3. Pulsa «Empezar ahora», copia el código con «Copiar resultado» y pégalo dentro de la etiqueta head de la página.

La herramienta te avisa si el título pasa de 70 caracteres, si la descripción pasa de 200 o si te olvidaste de la imagen o de la URL canónica.

La imagen, la mitad del éxito al compartir

• El tamaño recomendado es de 1200 por 630 píxeles, que se ve bien en la mayoría de las aplicaciones.
• Escribe la dirección completa de la imagen, empezando por https://, no una ruta como /img/foto.jpg.
• Elige una imagen ligera que se entienda incluso en pequeño, sin mucho texto encima.
• A cada página, su imagen: la foto del artículo es mejor que el logotipo de la web en todas partes.
• Comprueba que la imagen es accesible para todos: si está detrás de un inicio de sesión o su acceso está bloqueado, las aplicaciones no podrán mostrarla.

¿Has cambiado las etiquetas y la vista previa sigue igual?

Facebook, LinkedIn y WhatsApp guardan la vista previa después de la primera vez que se comparte. En Facebook, abre la herramienta Sharing Debugger y pide que vuelva a obtener la página; en LinkedIn, usa Post Inspector. WhatsApp no tiene herramienta, pero añadir algo al final de la dirección, como ?v=2, hace que vuelva a obtener la vista previa.

Nota: la lista «Idioma (locale)» ofrece árabe, árabe marroquí, inglés, francés, español (es_ES) y turco (tr_TR). Para cualquier otro idioma, cambia a mano el valor og:locale del código.

Para las tarjetas de X, usa el generador de tarjetas de Twitter / X, y para el título y la descripción en los resultados de búsqueda, el generador de metaetiquetas.

Preguntas frecuentes