En resumen: para comprobar Open Graph en línea, pega la dirección de la página en el depurador gratuito Open Graph PromoPilot. Este leerá todas las etiquetas og:* y Twitter Card, comprobará la presencia y el tamaño de la imagen, evaluará la integridad del marcado y mostrará previsualizaciones de enlaces para Facebook, X (Twitter) y LinkedIn, además de recomendaciones sobre qué añadir. No es necesario registrarse. A continuación, encontrarás las etiquetas necesarias, el tamaño de og:image requerido y cómo actualizar una previsualización bloqueada.
Llevo 12 años creando sitios web y escucho con más frecuencia la pregunta "¿Por qué Telegram no tiene imagen?" que preguntas sobre posicionamiento web. Normalmente, se soluciona en cinco minutos, si sabes dónde buscar.
¿Qué comprueba el depurador de Open Graph?
Al insertar un enlace en una publicación o mensaje, la plataforma accede a la página y busca etiquetas Open Graph. Si encuentra una, muestra una tarjeta. Si no, utiliza la que encuentre o muestra una URL sin formato. La herramienta solo verifica qué contenido leerán las redes sociales.
| ¿Qué comprueba? | ¿Qué está mirando? | ¿Por qué las empresas necesitan esto? |
|---|---|---|
| Todas las etiquetas og:* | og:título, og:descripción, og:imagen, og:url, og:tipo, og:nombre_sitio, og:locale | A partir de estos datos, los sitios web recopilan el título, la descripción y la imagen de la tarjeta. |
| Tarjeta de Twitter | twitter:tarjeta, twitter:título, twitter:descripción, twitter:imagen | X (Twitter) lee sus etiquetas y, si no están presentes, parcialmente |
| Imagen OG | ¿Hay alguna foto y de qué tamaño es? | La pequeña imagen convierte la tarjeta en un pequeño icono en el lateral. |
| Evaluación de la exhaustividad | ¿Cuántas etiquetas recomendadas están completas? | Guía rápida: ¿Está todo en su sitio? |
| Avances de la red | Tarjetas para Facebook, X y LinkedIn | Puedes ver cómo quedará la publicación antes de su publicación. |
| Recomendaciones | ¿Qué debo añadir o corregir? | Una lista de tareas predefinida para un desarrollador o para ti. |
¿Cómo comprobar las páginas Open Graph en línea?
- Abra el depurador de Open Graph.
- Introduce la URL de la página que deseas compartir: un artículo, un producto o una página publicitaria. Haz clic en "Comprobar".
- Revisa la lista de etiquetas: cuáles están definidas, cuáles están vacías y si hay una dirección extranjera o de prueba en og:url.
- Comprueba la vista previa de cada red: ¿aparece cortado el título?, ¿es visible la imagen?, ¿hay algún texto importante alrededor de los bordes?
- Por favor, añade las etiquetas que faltan según lo recomendado y vuelve a comprobar la página.
Página de herramientas: campo de dirección, botón "Comprobar", lista de comprobaciones y preguntas frecuentes.
La herramienta es ligera: un límite diario es suficiente para que un usuario revise todas las plantillas del sitio: la página de inicio, la categoría, el producto y el artículo. Tras registrarse gratuitamente, el límite se triplica.
¿Cuáles son los errores más comunes en Open Graph?
Esto es lo que encuentro en casi todos los demás sitios web, y en qué orden solucionarlo.
- No hay etiqueta og:image o se especifica como una URL relativa. Las redes sociales no entenderán
content="/img/cover.jpg"—se requiere la URL completa que comienza conhttps://. Sin una imagen, el alcance de la publicación disminuye significativamente. - La imagen es demasiado pequeña. El logotipo de 200x200 convierte la tarjeta en un pequeño cuadrado en un lateral. Se necesita una imagen de 1200x630.
- Una sola imagen para todo el sitio. Todos los artículos y productos en redes sociales deben tener el mismo aspecto, incluyendo el logotipo. Para el blog y el catálogo, la imagen debe tomarse de la foto principal de la página.
- og:url lleva a otra dirección: la página de inicio, un dominio de prueba o la versión
http://. La plataforma puede consolidar todos los enlaces en una sola página. - No existe twitter:card. Sin él, X suele mostrar una tarjeta pequeña. Para una imagen más grande, necesitas
summary_large_image. - og:title duplica el título con la palabra "comprar" y la marca. En un feed de redes sociales, esto parece un anuncio; un titular atractivo, como el de una publicación, es mejor.
El conjunto mínimo correcto tiene este aspecto:
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">¿Cómo preparar una imagen para og:image?
La imagen es la parte más visible de la tarjeta, y es donde la gente suele escatimar. Aquí les comparto algunas reglas que sigo:
- El tamaño es de 1200 × 630 y la orientación es horizontal. La red social recortará la parte superior e inferior de la foto cuadrada del producto, lo que puede provocar que falte la cabeza o la suela.
- Lo importante está en el centro. Las distintas plataformas recortan los bordes de forma diferente, y en la versión móvil, la tarjeta es aún más pequeña. Mantén el texto grande y alejado de los bordes.
- Texto mínimo. El título ya aparece debajo de la imagen; basta con 3-6 palabras o ningún pie de foto en la propia imagen.
- Archivo ligero. Un archivo JPG o PNG de tamaño razonable se cargará rápidamente y la plataforma no experimentará un tiempo de espera agotado.
- Una imagen específica para cada página clave. Para artículos y productos, es conveniente crear una automáticamente: la portada del artículo o la foto principal del producto.
Una buena prueba consiste en abrir la vista previa en el depurador de tu teléfono. Si el enlace no se ve con claridad sin hacer zoom, la imagen necesita ser modificada.
¿Cómo actualizo una vista previa antigua después de una corrección?
Un escenario común: has corregido las etiquetas, pero la red social sigue mostrando la imagen antigua. La razón es la caché: la plataforma conserva la vista previa de la primera vez que se compartió. En Facebook volver a recopilar los datos con el Depurador de comparticiones ayuda; en LinkedIn, con el Inspector de publicaciones; y en Telegram, con el bot @WebpageBot, al que envías el enlace. Si todo lo demás falla, añade un parámetro inofensivo a la dirección, como ?v=2: para la plataforma, esto es un enlace nuevo.
Comparación: Depurador de gráficos abiertos y alternativas
| Herramienta | ¿Qué es gratis? | Restricciones | ¿Para quién es adecuado? |
|---|---|---|---|
| PromoPilot - Depurador de Open Graph | Todas las etiquetas de og y Twitter, tamaño de imagen de og, vistas previas para Facebook, X y LinkedIn, recomendaciones | No borra la caché de las redes sociales | Revisa tu página inmediatamente antes de publicarla en cualquier red social. |
| Depurador compartido (Meta) | Vista previa Facebook y recopilación de datos | Solo Facebook, se requiere iniciar sesión en la cuenta. | Restablecer vista previa anterior en Facebook |
| Inspector de publicaciones de LinkedIn | Actualización de la vista previa y la caché de LinkedIn | Solo para LinkedIn, se requiere iniciar sesión. | Para aquellos que se promocionan en LinkedIn |
| @WebpageBot en Telegram | Actualizando la vista previa del enlace en Telegram | Solo Telegram no analiza las etiquetas | Para los propietarios de canales Telegram |
Conclusión: se necesitan depuradores oficiales de la plataforma para borrar la caché, pero cada plataforma solo muestra su propia red. Para ver todas las vistas previas y una lista de las etiquetas faltantes de una sola vez, un depurador universal resulta más conveniente.
Por cierto, PromoPilot tiene 87 herramientas SEO gratuitas. Si aún no has escrito etiquetas, tenemos un artículo en nuestra serie sobre un generador de metaetiquetas que creará un bloque Open Graph con una vista previa.
¿En qué se diferencia el depurador de Open Graph del análisis de metaetiquetas?
El análisis de metaetiquetas examina una página desde la perspectiva de un motor de búsqueda: título, descripción, etiqueta canónica, hreflang y Open Graph son solo algunos ejemplos. El depurador se centra en las redes sociales: crea tarjetas para diferentes plataformas, verifica el tamaño de las imágenes y ofrece recomendaciones específicas basadas en las vistas previas. Si los enlaces a tu sitio se comparten activamente en redes sociales y aplicaciones de mensajería, el depurador resulta aún más útil.
Ambos métodos tienen una limitación: leen el HTML que devuelve el servidor. Si las etiquetas se insertan mediante un script del navegador, muchas redes sociales no las detectarán; esto debe corregirse en el sitio web. Otro detalle: el depurador comprueba las etiquetas, pero no la acción de compartir en sí. Si la página está protegida con contraseña, tiene restricciones geográficas o está protegida contra bots, es posible que la red social no pueda acceder a ella aunque todas las etiquetas estén presentes.
¿Cuándo una herramienta gratuita no es suficiente?
Un depurador mostrará que la página no tiene og:image. Pero si hay miles de páginas, insertar imágenes manualmente no es posible. Se necesita un especialista cuando:
- Cada producto o artículo debe tener su propia imagen de vista previa, recopilada automáticamente;
- El sitio devuelve las etiquetas mediante un script, y las redes sociales no las ven;
- Lanzas anuncios y correos electrónicos donde cada vista previa afecta el costo por clic;
- Necesitamos una combinación de "sitio web + canal Telegram + publicación automática" con las tarjetas adecuadas.
¿Qué puedo hacer por su sitio web?
Soy Valeriy Danyuk, desarrollador y especialista en SEO con 12 años de experiencia y más de 200 clientes. Una vista previa de enlace atractiva es un alcance gratuito, y la personalizo para cada proyecto.
SEO y promoción
- Auditoría SEO integral para sitios web: reviso todas las etiquetas de la plantilla, configuro la vista previa automática de imágenes y corrijo el código.
Sitios web y tiendas en línea
- Traslada tu tienda de Instagram a tu sitio web: productos con vistas previas adecuadas para compartirlos fácilmente.
- Una página de destino para un nuevo producto creada en una sola noche: un caso de estudio de NordHarvest con una tarjeta prediseñada para redes sociales.
- Sitio web de una clínica de cirugía plástica con inteligencia artificial y aplicaciones a través de Telegram.
- Sitio web en 1001site: las vistas previas para redes sociales y la publicación automática en Telegram se configuran automáticamente.
Bots y automatización
- Bot Telegram con IA para una tienda de salsas online.
- QuestFlow es una plataforma SaaS Telegram con inteligencia artificial.
- Agentes de comercio electrónico en lugar de chatbots.
Envíame un enlace que se vea mal en un mensajero de Telegram y te diré qué etiqueta falta.
Resultado
- Un comprobador de Open Graph en línea muestra cómo se ve un enlace en Facebook, X y LinkedIn, y qué etiquetas faltan.
- El mínimo requerido es og:title, og:type, og:image (1200×630, dirección completa) y og:url, además de twitter:card.
- Después de solucionar el problema, restablezca la caché de los sitios: Compartir depurador, Inspector de publicaciones, @WebpageBot.
- Para el catálogo y el blog, las imágenes de vista previa deberían recopilarse automáticamente, como en 1001site.
Comprueba la página que vas a compartir con el depurador gratuito de Open Graph antes de que tus seguidores vean la publicación.
Fuentes
- Página de la herramienta Open Graph Debugger de PromoPilot: lista de comprobaciones y preguntas frecuentes.
- Protocolo Open Graph (ogp.me): propiedades obligatorias y opcionales.
- El depurador de compartición de Meta y el inspector de publicaciones de LinkedIn son las herramientas oficiales de las plataformas.
