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

Cada plataforma principal 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. Actualizar las etiquetas no invalida ese caché por sí solo. con respecto a -rasgue la URL en el depurador de plataformas, el depurador de intercambio de Facebook, el inspector de publicaciones de LinkedIn o al volver a compartir en Slack, para forzar una nueva búsqueda. Agregar una cadena de consulta inofensiva a la URL también genera una vista previa sin caché para las pruebas.

¿Necesito etiquetas OG: y Twitter:?

No siempre, pero es más seguro incluir ambos. X retrocede a las etiquetas de gráficos abiertas cuando faltan los equivalentes de Twitter: por lo que una página con solo og:title, og:description y og:imagen seguirán generando una tarjeta. Lo que no puedes expresar en Open Graph es el estilo de la tarjeta: Twitter:Card decide entre el gran banner y el diseño de resumen compacto, y Twitter:Sitio y Twitter:Creator atribuyen la tarjeta a tus cuentas. Agregue esos tres y deje que las etiquetas OG: las etiquetas cubran el resto.

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

Mantenga og:title en o por debajo de unos 60 caracteres: la mayoría de las tarjetas truncan más allá de eso y las tarjetas móviles estrechan se recortan antes. Para OG:Description, 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 más estricto, su descripción se lee completamente en todas partes. Cualquier cosa pasada que no se pierda, solo está escondida detrás de una elipsis, así que carga por adelantado las palabras importantes.

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

Las causas habituales son una OG:imagen que es una ruta relativa en lugar de una URL absoluta, una imagen que se sirve en HTTP simple, etiquetas colocadas fuera de , etiquetas inyectadas por JavaScript del lado del cliente que el raspador nunca se ejecuta, o la página que devuelve un estado que no es 200 o una redirección de inicio de sesión al raspador. Compruebe que las etiquetas aparezcan en el HTML sin procesar que devuelve su servidor: ver la fuente en lugar del inspector del navegador, ya que el inspector muestra el DOM después de que se ha 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 usar una herramienta como esta en lugar de un depurador de plataforma. Los depuradores oficiales deben buscar su URL en vivo, por lo que son inútiles para una página que no se implementa. Aquí simplemente pega las etiquetas que pretende enviar, desde su plantilla, su objeto de metadatos de framework o una compilación local, y las vistas previas se renderizan de inmediato, no se requiere implementación.

¿Qué pasa si dejo una etiqueta?

Los raspadores retroceden y los respaldos son impredecibles. Sin og:title suelen usar la etiqueta , y sin og:description pueden usar la metadescripción o raspar el texto del cuerpo. Sin OG:imagen La mayoría de las plataformas muestran una tarjeta de solo texto, aunque algunas tomará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 sus recuentos de acciones. Establecer las etiquetas explícitamente es la única forma de controlar el resultado.

¿Abrir el marcado de gráficos abiertos ayuda a mis clasificaciones de búsqueda?

no directamente. Las etiquetas de gráficos abiertos son leídas por las plataformas sociales y de chat, no utilizadas como factor de clasificación por los motores de búsqueda. Lo que sí influyen es la tasa de clics en cada parte de su enlace, 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 una palanca de clasificación SEO.

¿La herramienta de vista previa de gráficos abiertos 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.

Abrir vista previa del gráfico

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