Vista Previa de Tarjetas Open Graph Gratis – Ve tu Tarjeta Social

Usa el Vista Previa de Tarjetas Open Graph gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.

Por Qué Tu Enlace Se Ve Aburrido al Compartirlo

Pegas un enlace en un chat o en una publicación, y en vez de una tarjeta rica con imagen, título y descripción, obtienes una URL desnuda. O peor, obtienes una tarjeta con la imagen equivocada, un título viejo o una descripción cortada a mitad de frase. La causa casi siempre es la misma: las etiquetas Open Graph de la página faltan, están mal o nunca se probaron. Open Graph es el conjunto de metaetiquetas que le dice a las plataformas sociales qué mostrar cuando se comparte tu página, y nadie ve tus etiquetas hasta que alguien comparte el enlace.

Esta herramienta te permite revisar la tarjeta antes de que alguien la comparta. Pegas el título, la descripción, la URL de imagen y el nombre del sitio, y la herramienta muestra una tarjeta de ejemplo con esas piezas juntas. También marca los problemas habituales: un título faltante, una descripción faltante, un título tan largo que se cortará, o ninguna imagen. Corregir esas cuatro cosas resuelve la mayoría de los problemas de enlaces feos.

Qué Hace Cada Etiqueta

La etiqueta og:title es el titular de la tarjeta. Debe leerse como un titular real, no como un nombre de archivo o una lista de palabras clave. Mantenla por debajo de unos 90 caracteres, porque las plataformas cortan los títulos más largos con puntos suspensivos. La etiqueta og:description es el resumen de una o dos frases bajo el título. Apunta a menos de 200 caracteres y pon la idea más importante primero, porque el final es lo primero que se corta.

La etiqueta og:image apunta a la foto de la tarjeta, y la foto hace la mayor parte del trabajo. Una tarjeta con una imagen fuerte recibe mucha más atención que una tarjeta solo de texto, por eso una imagen faltante es el error Open Graph más dañino. El tamaño recomendado es 1200 por 630 píxeles, un rectángulo ancho que encaja en la mayoría de las plataformas sin recortes incómodos. La etiqueta og:site_name muestra el nombre de la publicación sobre el título en algunas plataformas, lo que ayuda a los lectores a reconocer tu sitio de un vistazo.

Un Límite Honesto de Esta Vista Previa

Esta vista previa es una simulación creada solo con el texto que pegas. Deliberadamente nunca descarga, carga ni contacta con ningún otro sitio, así que la zona de imagen es un cuadro marcador en vez de la foto real. Esa es una decisión de privacidad y seguridad: una herramienta de vista previa que descargara URLs arbitrarias podría usarse para sondear servidores privados o filtrar tu navegación. El coste es que debes revisar la imagen por separado. Abre la URL de imagen en tu propio navegador y confirma que carga, que es la foto correcta y que mide al menos 1200 píxeles de ancho.

La simulación igual detecta los problemas que más importan. Muestra si tu título se envuelve de forma incómoda, si tu descripción es demasiado larga y si algún campo está vacío.

Errores Open Graph Comunes

El error más común es no tener ninguna etiqueta Open Graph, lo que deja a las plataformas adivinando a partir del título de tu página y su primer párrafo. El segundo es una URL de imagen relativa, como /images/card.jpg en vez de la dirección https:// completa. Las plataformas sociales descargan la imagen desde sus propios servidores, y una URL relativa no significa nada para ellas, así que la tarjeta llega sin imagen. Usa siempre URLs absolutas para og:image y og:url.

El tercer error es la caché. Después de corregir tus etiquetas, la primera plataforma que comparta el enlace puede seguir mostrando la tarjeta vieja, porque guardó la versión anterior. Usa la herramienta depuradora de la plataforma tras cada corrección, y comparte el enlace solo cuando muestre la tarjeta nueva. El cuarto error son las etiquetas duplicadas: dos og:title en una página, a menudo porque un plugin y un tema añaden ambas, dejan a las plataformas adivinando cuál usar.

Cómo Añadir Etiquetas Open Graph a Tu Sitio

La mayoría de los sistemas de contenido añaden etiquetas Open Graph mediante un plugin de SEO o un ajuste de compartido social. Rellena los campos de título social, descripción social e imagen social de cada página importante, en vez de depender de valores por defecto. La página de inicio y tus artículos más compartidos merecen imágenes y descripciones personalizadas; las páginas de archivo y etiquetas pueden usar valores por defecto razonables. Después de publicar, prueba el enlace en una herramienta depuradora antes de anunciarlo en ningún sitio, porque una tarjeta rota el día del lanzamiento es difícil de olvidar.

Preguntas Frecuentes

¿Por qué la vista previa no muestra mi imagen real? Por diseño. Esta herramienta nunca descarga otros sitios. Revisa la URL de imagen por separado en tu navegador.

¿Por qué mi tarjeta sigue viéndose vieja tras corregir las etiquetas? La plataforma guardó la versión anterior. Usa su herramienta depuradora para forzar una actualización.

¿Necesito también etiquetas Twitter Card? La mayoría de las plataformas usan las etiquetas Open Graph cuando faltan las de Twitter, pero añadir una etiqueta twitter:card con el valor summary_large_image te da control sobre el diseño de imagen grande.

Escribe las cuatro etiquetas, revisa la simulación, comprueba la imagen tú mismo, y tus enlaces llegarán viéndose como querías.

Herramientas Relacionadas

También disponible en inglés: Open Graph Card Preview – Preview Social Share Cards Free Online.

Más herramientas gratis: Crear Comandos cURL Gratis – Arma tu Comando cURL, Generar Código de Peticiones API Gratis – Snippets Fetch y Python, Editar Parámetros de URL Gratis – Modifica la Query de tu Enlace, Buscar Tipo MIME Gratis – Qué MIME Tiene cada Extensión, Ordenar Claves JSON Gratis – Ordena tu JSON Alfabéticamente, Generar Configuración SSH Gratis – Crea tu Archivo config, Generar Configuración Nginx Gratis – Crea tu Server Block, Generar Archivo .env Gratis – Crea Variables de Entorno, Eliminar Líneas Duplicadas Online Gratis – Borra Líneas Repetidas al Instante.