Vista previa de Open Graph y tarjetas sociales
Previsualiza cómo se despliega un enlace como tarjeta social en X, LinkedIn, Slack, Discord y Facebook a partir de un título, una descripción, una URL de imagen y una URL de página.
Vista previa de Open Graph y tarjetas sociales — La Vista previa de Open Graph y tarjetas sociales muestra cómo se verá tu enlace al compartirlo en plataformas sociales. Escribe un título, una descripción, una URL de imagen y una URL de página, y luego alterna entre X, LinkedIn, Slack, Discord y Facebook para ver una maqueta en vivo de la tarjeta de enlace de cada uno. Todo se renderiza en tu navegador: tu texto nunca se sube y la URL de la imagen se carga directamente desde su servidor a la vista previa, no a través de los nuestros.
¿Qué es Vista previa de Open Graph y tarjetas sociales?
Es un previsualizador visual de tarjetas Open Graph (OG) y sociales. Las etiquetas meta de Open Graph y Twitter Card indican a las plataformas qué título, resumen e imagen mostrar cuando alguien comparte tu enlace, y esta herramienta reconstruye esa tarjeta para que la revises antes de publicar. Profesionales del marketing, redactores de contenido y desarrolladores la usan al lanzar una entrada de blog, una página de destino o una página de producto para confirmar que el titular no se corta, la imagen llena el marco y el dominio se lee correctamente. Elige una plataforma con el control segmentado para ver su diseño específico: X, Facebook y LinkedIn muestran una tarjeta con una imagen grande arriba y el título y la descripción debajo, mientras que Slack y Discord muestran una tarjeta compacta con una barra de acento, el dominio y una miniatura pequeña. La línea del dominio se deduce automáticamente de la URL de la página. Solo simula la tarjeta a partir de los valores que introduces: no rastrea tu página en vivo ni lee sus etiquetas meta existentes.
Cómo usar Vista previa de Open Graph y tarjetas sociales
- Introduce el título de la página que debe aparecer como titular de la tarjeta.
- Escribe la descripción (la línea de resumen que se muestra bajo el título).
- Pega una URL de imagen absoluta (idealmente 1200×630) para cargar la imagen de la vista previa.
- Introduce la URL de la página: el dominio que se muestra en la tarjeta se deduce de ella.
- Alterna entre X, LinkedIn, Slack, Discord y Facebook para comparar el diseño de cada plataforma.
- Ajusta el título y la descripción hasta que nada se corte y la tarjeta se vea bien.
Ejemplos
Tarjeta de entrada de blog
El título 'Cómo hacer pan de masa madre', una descripción breve, una imagen og.png y la URL https://blog.example.com/sourdough se renderizan como una tarjeta de banner grande en X con el dominio blog.example.com sobre el titular.
Despliegue en Slack/Discord
Al cambiar a Slack, los mismos valores se muestran como una tarjeta compacta con una barra de acento a la izquierda, el dominio, el título y una pequeña miniatura cuadrada a la derecha.
Imagen ausente
Deja la URL de la imagen en blanco y la vista previa muestra un marco de marcador de posición con la proporción correcta para que aún puedas juzgar el espaciado y el diseño del texto.
Preguntas frecuentes
- ¿Qué plataformas puedo previsualizar?
- Cinco: X (Twitter), LinkedIn, Slack, Discord y Facebook. X, Facebook y LinkedIn se dibujan como tarjetas de banner con imagen grande, mientras que Slack y Discord usan el estilo de despliegue compacto con una barra de acento y una miniatura pequeña. Usa el selector de plataforma para cambiar entre ellas al instante.
- ¿Lee las etiquetas Open Graph de mi página en vivo?
- No. No rastrea ni obtiene tu página ni analiza sus etiquetas meta existentes. Construye la tarjeta únicamente a partir del título, la descripción, la URL de imagen y la URL de página que escribes, así que es un previsualizador de hipótesis, no un validador de una página publicada.
- ¿De dónde sale la imagen de la vista previa?
- La imagen la carga directamente tu navegador desde la URL de imagen que introduces: va del servidor de la propia imagen a tu navegador, no a través de los nuestros. Si la imagen no aparece, comprueba que la URL sea absoluta (empiece por https://) y de acceso público.
- ¿Por qué se corta mi título o descripción en la tarjeta?
- Las plataformas sociales recortan los títulos y descripciones largos, y la vista previa lo imita limitando las líneas. Si el texto se corta aquí, es probable que también se corte al compartirlo, así que acórtalo hasta que quepa.
- ¿Se envían mis datos a un servidor?
- No. El título, la descripción y las URL que escribes permanecen en tu navegador y nunca se suben, registran ni almacenan por nuestra parte. La única solicitud externa es que tu navegador obtenga la imagen de la vista previa desde la URL que indicas, lo cual es comportamiento normal del navegador.
Herramientas relacionadas
Generador de etiquetas hreflang
Genera etiquetas link hreflang para una página multilingüe a partir de una lista de pares de idioma y URL, con un x-default opcional y una etiqueta autorreferencial.
Generador de JSON-LD
Genera datos estructurados JSON-LD válidos para los esquemas Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList y Organization desde un formulario sencillo.
Comprobador de densidad de palabras clave
Analiza cualquier texto para contar la frecuencia de palabras y la densidad de palabras clave como frases de 1, 2 o 3 palabras, con un aviso de sobreoptimización.
Generador de etiquetas meta
Genera etiquetas meta de SEO, Open Graph y Twitter Card para tu página a partir del título, la descripción, la URL canónica, la imagen y el nombre del sitio.