📇 Social & Compartir SEO

Abrir generador de tarjetas de gráficos y Twitter

Rellene los detalles de su página y vea una representación real de tarjetas Facebook, LinkedIn y X en vivo mientras escribe. Obtenga un conjunto validado de etiquetas de copia-pegadura de Open Graph y Twitter Card — las plataformas de marcado exactas leídas para crear la vista previa de su enlace.

✓ Vista previa de la tarjeta en vivo Ejecuta en su navegador No hay registro
Apunta a unos 60 caracteres para que no se trunque.
Alrededor de 110 personajes se muestran en su totalidad en la mayoría de las tarjetas sociales.
URL absoluta https, 1200×630 recomendado.
Vista previa de Facebook / LinkedIn
No hay imagen — añadir un URL de og:imagen
example.com
X (Twitter) vista previa
No hay imagen — añadir un URL de og:imagen
example.com
Metaetiquetas generadas

Cómo generar etiquetas de Open Graph y Twitter Card

Cuatro pasos de los detalles de la página a una vista previa social de copia-pega validada.

1

Introduzca la URL, el título y la descripción de su página

Pegue la URL absoluta de la página que está compartiendo, luego escriba el título y la descripción que desea mostrar en las tarjetas sociales.

2

Añadir una imagen compartida y establecer los tipos

Proporciona un https absoluto og:image (idealmente 1200x630), elige tu og:type y el tipo de tarjeta de Twitter, y añade tu @handle.

3

Compruebe las vistas previas en vivo de Facebook y X

Vea la representación de tarjetas Facebook/LinkedIn y X mientras escribe y resuelve cualquier advertencia de validación de longitud o imagen que se muestra a continuación.

4

Copiar las etiquetas en el cabezal de la página

Copia las etiquetas generadas Open Graph y Twitter meta y pegalas dentro de la <head> de su página, luego vuelva a raspar con el depurador de la plataforma.

Abrir preguntas de la tarjeta de gráfico y Twitter

Open Graph (g:) es el protocolo compartido Facebook, LinkedIn, Slack, WhatsApp, Pinterest y la mayoría de las plataformas leídas para crear una vista previa de enlaces. Twitter Card (twitter:) es el vocabulario propio de X que controla el diseño de la tarjeta, por ejemplo, resumen vs resumen_large_image. Se superponen fuertemente: título, descripción e imagen pueden venir de og: etiquetas. Las etiquetas específicas de Twitter solo añaden lo que og: no pueden expresar, como el estilo de la tarjeta y el mango @site.
Utilice 1200x630 píxeles (una proporción de 1.91:1) para la tarjeta grande que Facebook, LinkedIn y X resumen_large_image todos utilizan — que llena el marco sin recortar. Mantenga el archivo por debajo de 5 MB y servirlo sobre una URL absoluta de https, porque las plataformas no obtendrán una imagen relativa o http de manera fiable. El mínimo Facebook acepta 200x200, pero las imágenes pequeñas se representan como una miniatura pequeña en lugar de una tarjeta de héroe.
Cada plataforma guarda la primera versión de su tarjeta raspada, a veces durante semanas, por lo que los títulos antiguos y las imágenes persisten después de que usted arregla las etiquetas. Forzar un nuevo rasguño: pegar la URL en el depurador de compartir Facebook y haga clic en Raspar de nuevo, utilice el LinkedIn Post Inspector, y compartir el enlace una vez en X para actualizar su caché. Confirmar las etiquetas están en realidad en el HTML de la cabeza y no inyectada más tarde por JavaScript, que la mayoría de los rasguños no ejecutan.
Cuando falta una etiqueta de Twitter, X vuelve a la etiqueta de Open Graph que coincide — og:title, og:descripción y og:image cubren la mayor parte de la tarjeta. Así que el mínimo práctico es un conjunto completo de og: etiquetas más simplemente twitter:tarjeta para elegir el diseño y twitter:sitio para la atribución. Agregar og: etiquetas también significa que la misma vista previa funciona en Facebook, LinkedIn, Slack y en cualquier otro lugar, así que lleva con og: y añade sólo el puñado de twitter: etiquetas que og: no puede expresar.

¿Necesita etiquetas sociales generadas a escala?

Esta herramienta se ejecuta por completo en su navegador — no hay nada que llamar y nada sale de la página. Para los plugins CMS, páginas CI y a granel, una API de gráfico abierto programático está disponible en los planes de pago.

✓ Herramienta gratuita: 100% cliente-lado Abrir la API de gráficos: planes de pago

Genera bloques de Open Graph y Twitter Card validados por página desde un único punto final y encaminalos directamente a tu construcción. Consulta planes y cuotas en la página de precios.

Ver planes API →