El peor momento para descubrir una vista previa de un enlace roto es después del tweet de lanzamiento. Pasas una semana en una página, escribes el anuncio, presionas enviar y la tarjeta que aparece es un rectángulo gris con un título truncado y sin imagen, porque og:image señalado a /images/og.png en vez de https://yoursite.com/images/og.png. Ya salió el post. La tarjeta ya está en caché. Tienes la oportunidad de arreglarlo y luego pedirles a todos que lo compartan.
una Gráfico abierto la vista previa resuelve eso moviendo el cheque antes. En lugar de publicar y esperar, observa cuál será la tarjeta mientras las etiquetas aún se pueden editar. Esa es la premisa completa del Abrir vista previa del gráfico Herramienta: Ingrese sus etiquetas o pegue las que ya tiene, y vea las tarjetas aproximadas de Facebook, X, LinkedIn, Slack y Discord, con un veredicto de pase/advertencia/fail en cada campo.
La razón por la que una sola vista previa no es suficiente es que cada plataforma lee las mismas etiquetas y las representa de manera diferente. x trunca las descripciones en aproximadamente 110 caracteres; Facebook muestra más cerca de 155. LinkedIn frecuentemente elimina la descripción por completo y muestra solo la imagen, el título y el dominio. Slack colapsa todo en un accesorio compacto con un riel de color. Discord incorpora la descripción de forma prominente pero reduce la imagen. Un título que encaja maravillosamente en una tarjeta de Facebook se puede cortar en la mitad de la palabra en X, y nunca lo notará a menos que mire ambos.
yo construyo Toolz.dev y envío páginas constantemente, y me cansé del bucle publicar-verificar-arreglar. La herramienta se ejecuta completamente en el navegador y no realiza ninguna llamada a la red (nunca recupera su URL), lo que significa que también funciona para páginas que aún no están implementadas, se sientan detrás de un inicio de sesión o viven en un dominio de estadificación al que los depuradores oficiales de la plataforma no pueden acceder.
TL;Dr: Las etiquetas de gráficos abiertas controlan cómo se ve su enlace cuando se comparte. Cada plataforma lee lo mismo
og:Etiquetas pero trunca y las presenta de manera diferente, por lo que la vista previa de una plataforma no le dice nada sobre las demás. los Abrir vista previa del gráfico La herramienta representa cinco tarjetas de plataforma de un conjunto de etiquetas, valida cada campo con los límites actuales de la plataforma, analiza un bloque de etiqueta existente si ya tiene uno y le entrega una copia lista.<meta>bloque: todo del lado del cliente, sin raspado ni carga.
Características clave
Cinco vistas previas de plataforma de un conjunto de etiquetas
La herramienta representa tarjetas aproximadas para Facebook, X en ambos summary_large_image y summary estilos, LinkedIn, Slack y Discord. Todos leen desde los mismos campos, por lo que cuando recortas un título lo ves actualizar en todas partes a la vez. El punto no es la fidelidad perfecta de píxeles (las plataformas rediseñan sus tarjetas sin previo aviso), sino la fidelidad relativa: proporciones correctas, puntos de truncamiento correctos, orden correcto de los campos, para que puedas ver qué plataforma es la que se rompe.
Pegar y analizar para las etiquetas que ya tiene
Si la página existe, rara vez querrás volver a escribir nueve campos. Pegue el HTML sin formato, un todo <head>, un volcado de fuente de vista o un bloque suelto de <meta> líneas: en el cuadro de análisis y el analizador incorporado extrae cada una og: y twitter: Etiqueta que reconoce y los carga en el formulario. El analizador está basado en expresiones regulares en lugar de en DOM, que es lo que permite que el mismo código se ejecute en un navegador, en un nodo y en la compilación de escritorio sin cambios.
Validación por campo con límites reales
Cada campo recibe un estado de pase, advertencia o error. Un título de más de 60 caracteres falla. Advierte una descripción entre 110 y 155 caracteres, porque se lee completamente en Facebook y LinkedIn pero se corta en X. Un familiar og:image la ruta falla por completo: los raspadores no los resuelven. Un og:image Servido sobre simple http Advierte, porque varias plataformas se niegan a renderizar imágenes no https. un twitter:site El valor que no es un identificador válido falla. Los veredictos son lo suficientemente específicos para actuar en lugar de un genérico "se ve bien".
Reglas de imagen que realmente puedes seguir
Las tarjetas de imágenes grandes en todas las plataformas principales asumen una imagen de 1,91:1; 1200x630 píxeles es el tamaño que los satisface a todos a la vez. La herramienta establece que el objetivo es explícito, marca los modos de falla que hacen que las imágenes desaparezcan silenciosamente y, debido a que una tarjeta con una imagen rota es el error Open Graph más común, representa su real og:image URL en cada vista previa, volviendo a un marcador de posición claro si la imagen no puede cargarse.
Un metabloque de MetaBlock, listo para copiar y salir
La salida generada es un bloque de etiquetas completo, no un fragmento. incluye og:image:width y og:image:height, que importa más de lo que la mayoría de la gente cree: sin ellos, algunos raspadores representan una tarjeta de solo texto en la primera búsqueda y solo muestran la imagen después de haberla descargado y medido, que puede ser varias horas después. Los valores se escapan a HTML, por lo que un ampersand o una cita en su descripción no pueden romper el atributo y corromper su marcado.
100% del lado del cliente, sin raspado
La herramienta nunca solicita tu URL. Esto es deliberado y vale la pena entender por qué: un navegador no puede recuperar una página arbitraria de terceros debido a la política del mismo origen, y un buscador del lado del servidor significaría enviar sus URL inéditas a otra persona 's registros. Trabajar desde las etiquetas que proporciona evita ambos problemas y desbloquea el caso en el que los depuradores oficiales no pueden servir, validando una página que aún no está activa. Ver Privacidad de datos en herramientas en línea por el razonamiento más amplio.
Cómo utilizar la herramienta de vista previa de gráficos abiertos
Paso 1: Cargue sus etiquetas
Tienes dos caminos. Si está escribiendo metadatos desde cero, rellene el formulario: og:title, og:description, og:image, og:url, og:site_name, luego elige un og:type y un twitter:card estilo y agregue su twitter:site y twitter:creator asas.
Si la página ya tiene etiquetas, péguelas en su lugar. Abra la página, vea la fuente (no el inspector del navegador; más información sobre esa distinción a continuación), copie el <head>, y colóquelo en el cuadro de análisis. Haga clic en las etiquetas de análisis y todo lo reconocido se carga en el formulario. El analizador también entiende los alias: og:image:secure_url y og:image:url Ambos alimentan el campo de la imagen y twitter:title, twitter:descriptiony twitter:image se utilizan como respaldos cuando sus og: no hay equivalentes, lo que refleja cómo las propias plataformas resuelven las etiquetas.
Paso 2: Lea el panel de validación
La lista de validación se ordena de la forma en que importan los campos. Arreglar los fallos primero: falta un og:image, una ruta de imagen relativa, un título de 20 caracteres por encima del límite. Luego mire las advertencias, que en su mayoría tratan sobre la brecha entre plataformas, una descripción que está bien para Facebook pero que dura mucho tiempo para X, falta og:site_name Eso significa que su tarjeta muestra un nombre de host desnudo en lugar de su marca.
Los contadores en la parte superior del panel le dan una lectura rápida. Cero falla y un par de advertencias es un estado perfectamente enviado; las advertencias son compensaciones, no errores.
Paso 3: Compara las cartas
Este es el paso que la gente omite y es el que detecta los problemas reales. Escanear las seis vistas previas. ¿Se corta el título en la tarjeta de resumen X? ¿La descripción desaparece en LinkedIn (normalmente lo hace, eso es lo esperado)? ¿La imagen se ve correctamente en 1,91:1 o su logotipo está recortado porque diseñó un gráfico cuadrado y la tarjeta lo vuelve ancho?
Recorte y vuelva a verificar hasta que cada tarjeta se lea limpiamente. Una disciplina útil: escribir con la más estricta restricción. Si su descripción se lee completamente en 110 caracteres, se lee completamente en todas partes. Si su título funciona a los 55, sobrevive a cada tarjeta y cada diseño móvil.
Paso 4: Copia el Meta Block y envíalo
Copie el bloque generado en su página <head>. En un marco, Next.js, Nuxt, SvelteKit, Astro, no pegarás crudo <meta> etiquetas, pero el bloque sigue siendo su fuente de verdad para qué campos se rellenan exactamente en la API de metadatos de la estructura.
Luego haga el paso que todos olviden: vuelva a rastrear la URL en el depurador de cada plataforma. Envío La solución no borra la tarjeta en caché. los Generador de metaetique es la herramienta complementaria aquí si también necesita las etiquetas SEO estándar (título, descripción, canónicos, robots) que conviven con las etiquetas sociales.
Cómo funciona realmente el protocolo de gráfico abierto
Open Graph comenzó en Facebook en 2010 como una forma de convertir una página web en un nodo en un gráfico social. La ambición se desvaneció; el vocabulario de etiquetas se quedó, y ahora es el estándar de facto que leyeron Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal y la mayoría de los demás software de desplegamiento de enlaces.
El mecanismo es sencillo. Cuando se comparte un enlace, la plataforma envía un bot a su URL facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot. Ese bot solicita el HTML sin procesar, lee el <head>, extrae el og: y twitter: meta etiquetas y crea una tarjeta. Es un solo HTTP GET y un análisis. El bot no es un navegador: la mayoría de estos rastreadores no ejecutan JavaScript, que es la causa raíz de todo un género de error.
las etiquetas en sí
Se describen cuatro etiquetas como las exige el protocolo: og:title, og:type, og:imagey og:url. en la práctica og:description y og:site_name son igualmente soportantes, porque sin ellos la tarjeta está desnuda o vuelve a caer al texto que el raspador pueda encontrar en la página. Las etiquetas usan el property atributo, no name- <meta property="og:title" content="..." />- lo que hace tropezar a la gente porque las etiquetas de Twitter hacen lo contrario y las usan name. La mayoría de los analizadores están indultando sobre esto, pero las plataformas de validadores propios no siempre lo son, por lo que vale la pena hacerlo bien.
OG: contra Twitter: precedencia
X lee las etiquetas de la tarjeta de Twitter primero y vuelve a caer en un gráfico abierto cuando están ausentes. Eso significa una página con solo og:title, og:descriptiony og:image todavía produce una tarjeta X funcional: el respaldo es por diseño.
Entonces, ¿qué necesita realmente un twitter: etiqueta? tres cosas. twitter:card Decide el diseño y no hay equivalente en gráfico abierto: sin él, X elige un estilo de tarjeta en función de lo que encuentra, que no es una decisión que desea delegar. twitter:site Atribuye la tarjeta a una cuenta de marca. twitter:creator acredita al autor. Todo lo demás puede provenir de forma segura de gráficos abiertos.
La regla práctica: escriba etiquetas de gráficos abiertos completos, luego agregue exactamente esas tres twitter: Etiquetas duplicación twitter:title y twitter:description es inofensivo pero inútil a menos que realmente desee una copia diferente en X que en otros lugares, lo que en ocasiones es una elección legítima, ya que el truncamiento más estricto de X' a veces justifica una descripción más corta y contundente.
Dimensiones de la imagen, relaciones y problema de recorte
La relación de aspecto de 1.91:1 es el número a internalizar. 1200x630 píxeles lo golpean, es lo suficientemente grande para las pantallas de retina, y es lo que Facebook, LinkedIn y X se procesan sin distorsión para tarjetas de imagen grande.
El modo de falla es sutil: las plataformas no suelen rechazar una imagen fuera de relación, la recortan. Cargue un gráfico cuadrado de 1000x1000 y Facebook lo recortará a 1.91:1, lo que rebana aproximadamente un tercio de la parte superior e inferior. Si el texto de su título estaba centrado verticalmente, sobrevive; si pones un logo en la parte superior, no. Mantenga el contenido significativo dentro de un área segura y lejos de los bordes, porque las diferentes superficies se recortan en cantidades ligeramente diferentes.
la x compacta summary la tarjeta es la excepción. Quiere una imagen cuadrada, un mínimo de 144x144, y colocará en el centro un banner de 1,91:1 en un cuadrado, que normalmente lo destruye. Si lo usas deliberadamente summary, proporcione una imagen cuadrada; si proporciona un banner, use summary_large_image.
Mantenga el tamaño del archivo por debajo de aproximadamente 5 MB (Facebook' techo documentado; otras plataformas son más estrictas en la práctica), sirvan como PNG, JPEG o webp, y utilice siempre una URL HTTPS absoluta. Rutas relativas y relativas al protocolo // Las URL son las dos formas más comunes en que una imagen no aparece silenciosamente.
Por qué los rascadores Cache y cómo reventar el caché
Cada plataforma almacena en caché el resultado de raspar su página, normalmente durante unos siete días, a veces más. Esto no es terquedad: un enlace popular se puede compartir miles de veces por hora, y volver a buscar su página para cada acción sería un ataque de denegación de servicio realizado por la plataforma. Así que raspan una vez y reutilizan.
La consecuencia es que arreglar sus etiquetas no arregla la tarjeta. La vista previa anterior persiste para cada acción existente y para las nuevas acciones hasta que caduque el caché. Para forzar una actualización:
- Facebook: El depurador de compartir, usando el botón "Scrapeo nuevamente". Esto también borra el caché utilizado por Instagram y WhatsApp.
- LinkedIn: El inspector de correos. Ingresar la URL desencadena un nuevo raspado.
- X: El validador de tarjetas ha quedado desaprobado y el acceso es inconsistente. En la práctica, publicar el enlace es la única actualización confiable.
- flojo: Desaplique las cachés caducan por su cuenta; agregar un parámetro de consulta inofensivo produce un nuevo desbaste inmediatamente.
- Discord: similar: una cadena de consulta modificada es la solución práctica.
Ese truco de cadena de consulta es la escotilla de escape universal: https://example.com/page?v=2 es, para un raspador, una URL diferente sin entrada en caché. Úselo para probar, no para el enlace canónico que realmente publica, y mantenga og:url Señalando la dirección canónica limpia para que las acciones de las variantes parametrizadas se consoliden correctamente. los Codificador de URL/decodificador Es útil cuando esos parámetros se complican.
¿Qué sucede cuando faltan las etiquetas?
Los raspadores retroceden y las alternativas son peores de lo que esperarías.
prohibido og:title Y usan el <title> etiqueta, que generalmente se escribe para los resultados de búsqueda y a menudo termina en una tubería y en su marca, leyendo torpemente como titular de tarjeta. No og:description Y usan la meta descripción, o el texto del cuerpo raspado, que puede atraer un banner de cookies o una etiqueta de navegación. prohibido og:image Y la mayoría de las plataformas muestran una tarjeta de solo texto, aunque algunos buscan cualquier imagen en la página y pueden encontrar un logotipo, un avatar o un píxel de seguimiento. prohibido og:url Y la dirección compartida se utiliza tal cual, por lo que ?utm_source=twitter Las variantes se tratan como páginas distintas y su fragmento de recuentos compartidos.
Hay una clase de falla más que vale la pena nombrar, porque es invisible en la depuración normal: Etiquetas inyectadas por JavaScript del lado del cliente. Si sus meta etiquetas son configuradas por React después de la hidratación, el inspector del navegador las muestra perfectamente y el raspador no ve nada, porque el raspador nunca ejecutó su JavaScript. Siempre verifique con View-Source o curl, que muestran el HTML sin formato que el servidor realmente devolvió, no el DOM después de que su aplicación haya arrancado. Lo mismo se aplica a las páginas que devuelven un 401, una redirección de inicio de sesión o un 403 con bloqueo de bots a solicitudes no autenticadas: el raspador obtiene la página de error, no su contenido.
Casos de uso comunes
Validación previa al lanzamiento
el caso central. Antes de que una página active, pegue las etiquetas que desea enviar y confirme cada tarjeta. Esto es lo único que los depuradores de plataformas oficiales no pueden hacer, porque deben buscar una URL en vivo. Una verificación previa al lanzamiento cuesta treinta segundos y ahorra la repartición del día de lanzamiento.
Depuración de una tarjeta rota
Un enlace se está desplegando mal y necesitas saber por qué. Pegue las etiquetas actuales de la página, lea el panel de validación y la causa suele ser inmediata: una ruta de imagen relativa, una http imagen, una descripción el doble del límite, una falta twitter:card. Arreglar, volver a raspar en el depurador de la plataforma, listo.
Auditar los metadatos de un sitio a escala
Trabajando a través de un sitio página por página, pegando cada <head> Y leyendo el veredicto, surge la deriva que se acumula en cualquier proyecto multicolaborador: una página tiene etiquetas de Twitter y otra no, una descripción es de 300 caracteres, tres páginas comparten el mismo genérico og:image. La herramienta se convierte en una verificación de coherencia rápida en lugar de una suposición por página.
Diseñando la imagen de compartir
Cuando está eligiendo o encargando un og:image, la vista previa le muestra lo que realmente le hace el recorte en una carta amplia en comparación con una cuadrada. Los diseñadores suelen entregar un hermoso gráfico cuadrado que es destrozado por un cultivo de 1.91:1, ya que antes de que se envíe es más barato que verlo después.
Escribir una copia a la restricción más estricta
Debido a que las vistas previas muestran el truncamiento de X' junto a los de Facebook, convierten un límite de caracteres abstracto en algo visible. Escribir una descripción que lee completamente en 110 caracteres es una disciplina que es mucho más fácil de sostener cuando puedes ver los puntos suspensivos apareciendo mientras escribes. los generador de babosas Cubre el trabajo vecino de producir la URL limpia que og:url debe apuntar a.
Trabajando en la puesta en escena o detrás de un inicio de sesión
Las herramientas internas, el trabajo del cliente en NDA y las páginas detrás de un muro de autenticación son inalcanzables por parte de los depuradores de plataformas. Debido a que la herramienta funciona a partir de etiquetas en lugar de una búsqueda, las maneja de manera idéntica a una página pública.
Comparación de plataformas
Guía más conocida actual. Las plataformas cambian estos números sin previo aviso y los puntos de truncamiento se miden en píxeles en lugar de caracteres: un título lleno de clips de letras anchas antes que uno lleno de letras estrechas. Tratelos como objetivos seguros, no como especificaciones.
| plataforma | Imagen recomendada | proporción | Título mostrado | Descripción mostrada | notas |
|---|---|---|---|---|---|
| 1200x630 | 1.91:1 | ~60 caracteres | ~155 caracteres | Mínimo 200x200; imágenes de proporción de cultivos fuera de la | |
| X / Twitter (Grande) | 1200x628 | ~1.91:1 | ~60 caracteres | ~110 caracteres | se requiere twitter:card=summary_large_image |
| X / Twitter (Resumen) | 800x800 | 1:1 | ~50 caracteres | ~90 caracteres | Mínimo 144x144; imagen cuadrada requerida |
| 1200x627 | ~1.91:1 | ~100 caracteres | A menudo escondido | Descripción Frecuentemente descartado de la tarjeta | |
| estacionario | 1200x630 | 1.91:1 | ~60 caracteres | ~140 caracteres | Accesorio compacto; desplegar caché caduca por sí solo |
| discorde | 1200x630 | 1.91:1 | ~60 caracteres | ~160 caracteres | Renderiza la descripción de manera prominente, imagen más pequeña |
La conclusión de la tabla es el objetivo de diseño: una imagen de 1200x630, un título de 55 a 60 caracteres o menos de 55 a 60 caracteres y una descripción que aterriza bajo 110 te da una tarjeta que se renderiza correctamente en todas partes sin ajustes por plataforma.
preguntasrán el
¿Cuál es el tamaño correcto de la imagen de gráfico abierto?
Utilice 1200x630 píxeles, una proporción de 1,91:1. Eso satisface Facebook, LinkedIn, X, Slack y Discord simultáneamente para tarjetas de imágenes grandes, y es lo suficientemente grande como para mantenerse nítido en pantallas de alta densidad. Mantenga el archivo por debajo de aproximadamente 5 MB, sírvalo a través de HTTPS en una URL absoluta y mantenga el texto importante alejado de los bordes, ya que las superficies se recortan en cantidades ligeramente diferentes. Para una tarjeta de resumen X compacta, proporcione una imagen cuadrada de al menos 144x144.
¿Por qué la vista previa de mi enlace todavía muestra la imagen anterior después de que arreglé las etiquetas?
Porque la plataforma almacenó en caché el resultado de su extracción anterior, generalmente durante aproximadamente una semana. La actualización de las etiquetas no invalida ese caché. Forzar una nueva búsqueda a través del depurador de la plataforma 's - el depurador para compartir Facebook 's Scrape Again, o el inspector de publicaciones de LinkedIn. Para Slack y Discord, agregar un parámetro de consulta a la URL produce una vista previa sin almacenar en caché de inmediato, que es la forma más rápida de verificar una solución.
¿Necesito etiquetas OG: y Twitter:?
X retrocede al gráfico abierto cuando faltan los equivalentes de Twitter, por lo que una página con completa og: Etiquetas produce una tarjeta X de trabajo. Lo que Open Graph no puede expresar es el diseño de la tarjeta, por lo que aún debe agregar twitter:card Para elegir entre el banner grande y el resumen compacto, además twitter:site y twitter:creator para atribuir la tarjeta. Esas tres etiquetas de gráficos abiertos más completos son la combinación eficiente.
¿Cuánto tiempo debe ser OG:Title y Og:Description?
cumplir og:title en o por debajo de unos 60 caracteres. en og:description Las plataformas divergen: X muestra aproximadamente 110 caracteres, Facebook y LinkedIn muestran más cerca de 155 a 200. Escribir al límite X más ajustado significa que la descripción se lee completamente en todas partes. El texto más allá del límite no se pierde, solo se esconde detrás de una elipsis, así que carga por adelantado las palabras que importan.
¿Por qué mi vista previa está en blanco o muestra solo la URL?
Las causas habituales, en orden aproximado de frecuencia: og:image es una ruta relativa en lugar de una URL absoluta; la imagen se sirve a través de http; las etiquetas están fuera de <head>Las etiquetas son inyectadas por JavaScript del lado del cliente que el raspador nunca ejecuta o la página devuelve un estado de no 200 o una redirección de inicio de sesión al bot. Verifique el HTML sin procesar con View-Source o curl en lugar del inspector del navegador, el inspector muestra el DOM después de que se haya ejecutado JavaScript, que no es lo que ve el raspador.
¿Esta herramienta obtiene mi URL para leer las etiquetas?
No. No realiza ninguna solicitud de red. Funciona a partir de las etiquetas que escribe o pega, y todo se analiza y representa en su navegador. Los navegadores no pueden recuperar páginas arbitrarias de terceros debido a CORS, y un buscador del lado del servidor significaría enviar sus URL inéditas a otro lugar. La desventaja es que usted proporciona las etiquetas, y el beneficio es que las páginas en localhost, en puesta en escena o detrás de un inicio de sesión funcionan exactamente como las públicas.
¿Puedo obtener una vista previa de una página que aún no se ha publicado?
Sí, y es la razón principal para utilizar esto en lugar de un depurador de plataforma. Los depuradores oficiales deben recuperar una URL activa, por lo que son inútiles antes de su implementación. Aquí pegas las etiquetas que pretendes enviar (desde tu plantilla, tu objeto de metadatos del marco o una compilación local) y las vistas previas se representan de inmediato.
¿Las etiquetas de gráficos abiertos ayudan a mi ranking de búsqueda?
no directamente. Son leídos por las plataformas sociales y de chat, no utilizados como factor de clasificación por los motores de búsqueda. En lo que influyen es la tasa de clics en cada parte de su enlace, que impulsa el tráfico e, indirectamente, las señales que sí importan. Piense en ellos como una optimización de conversión para enlaces compartidos en lugar de una palanca de SEO. Para las etiquetas que afectan su fragmento de búsqueda, utilice el Generador de metaetique.
