¿Por qué la vista previa de mi enlace muestra la imagen anterior después de actualizar las etiquetas?

Cada plataforma importante almacena en caché el resultado de raspar su página, a menudo durante una semana o más, por lo que un enlace que compartió antes de la solución sigue mostrando la tarjeta obsoleta. La actualización de las etiquetas no invalida ese caché por sí sola. Vuelva a raspar la URL en el depurador de la plataforma (el depurador de intercambio de Facebook, el inspector de publicaciones de LinkedIn o volviendo a compartir en Slack) para forzar una nueva búsqueda. Agregar una cadena de consulta inofensiva a la URL también produce una vista previa sin caché para realizar pruebas.

¿Necesito etiquetas OG: y Twitter:?

No siempre, pero es más seguro incluir ambos. X vuelve a las etiquetas Open Graph cuando faltan los equivalentes de Twitter:, por lo que una página con solo og:title, og:description y og:image seguirá produciendo una tarjeta. Lo que no puedes expresar en Open Graph es el estilo de la tarjeta: twitter:card decide entre el banner grande y el diseño de resumen compacto, y twitter:site y twitter:creator atribuyen la tarjeta a tus cuentas. Agregue esos tres y deje que las etiquetas og: cubran el resto.

¿Cuánto tiempo debe ser mi OG:Title y OG:Description?

Mantenga og:title en o menos de 60 caracteres; la mayoría de las tarjetas se truncan más allá de eso y las tarjetas móviles estrechas se recortan antes. Para og:descripción los límites divergen: X muestra aproximadamente 110 caracteres, Facebook y LinkedIn muestran más cerca de 155 a 200. Si escribe en el límite X más estricto, su descripción se lee completamente en todas partes. Cualquier cosa que pase y no se pierda, simplemente se esconde detrás de una elipsis, así que cargue las palabras importantes.

¿Por qué mi vista previa está en blanco o solo muestra la URL?

Las causas habituales son una imagen og: que es una ruta relativa en lugar de una URL absoluta, una imagen servida a través de http simple, etiquetas colocadas fuera de , etiquetas inyectadas por JavaScript del lado del cliente que el raspador nunca ejecuta, o la página que devuelve un estado que no es 200 o una redirección de inicio de sesión al raspador. Verifique que las etiquetas aparezcan en el HTML sin formato que devuelve su servidor: vea la fuente en lugar del inspector del navegador, ya que el inspector muestra el DOM después de que se haya ejecutado JavaScript.

¿Esta herramienta obtiene mi URL para verificar las etiquetas?

prohibido . No hace ninguna solicitud de red. Funciona desde las etiquetas que escribe en el formulario o pega como HTML, y todo se analiza y se renderiza en su navegador. Esa es una elección de diseño deliberada: los navegadores no pueden obtener páginas de terceros arbitrarias debido a CORS, y un buscador del lado del servidor significaría enviar sus URL inéditas a otra persona. Debido a que no se recupera nada, puede validar páginas en localhost, staging o detrás de un inicio de sesión.

¿Puedo obtener una vista previa de una página que aún no está publicada?

Sí, y es la razón principal para utilizar una herramienta como esta en lugar de un depurador de plataforma. Los depuradores oficiales deben recuperar su URL activa, por lo que son inútiles para una página que no está implementada. Aquí simplemente pega las etiquetas que desea enviar (desde su plantilla, su objeto de metadatos de marco o una compilación local) y las vistas previas se representan de inmediato, sin necesidad de implementación.

¿Qué pasa si dejo una etiqueta?

Los raspadores retroceden y los retrocesos son impredecibles. Sin og:title, normalmente usan la etiqueta , y sin og:description pueden usar la meta descripción o raspar el texto del cuerpo. Sin og:imagen, la mayoría de las plataformas muestran una tarjeta de solo texto, aunque algunas captarán una imagen arbitraria de la página, a menudo un logotipo o un píxel de seguimiento. Sin og:url, la dirección compartida se utiliza tal cual, lo que significa que los parámetros de seguimiento pueden fragmentar el recuento de acciones. Establecer las etiquetas explícitamente es la única forma de controlar el resultado.

¿el marcado Open Graph ayuda a mis clasificaciones de búsqueda?

No directamente. Las etiquetas Open Graph son leídas por plataformas sociales y de chat, y los motores de búsqueda no las utilizan como factor de clasificación. Lo que sí influyen es la tasa de clics en cada parte de su enlace, lo que impulsa el tráfico y, con el tiempo, las señales que sí importan. Trátelos como optimización de conversión para enlaces compartidos en lugar de como palanca de clasificación SEO.

¿la herramienta Open Graph Preview es gratuita y privada?

Sí. Es completamente gratuito sin registro, y cada análisis, validación y vista previa ocurre en JavaScript dentro de su navegador. Los títulos, las URL y los enlaces de imágenes que ingresa nunca se envían a un servidor, y la herramienta sigue funcionando sin conexión una vez que se ha cargado la página.

Open Graph Vista previa

Previsualiza cómo se verá tu enlace en Facebook, X, LinkedIn, Slack y Discord, valida tus etiquetas de OG: y copia un metabloque correcto

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook