Generador de metaetiquetas — Open Graph y tarjetas de X
Generador de meta tags para buscadores y redes sociales con vistas previas de enlaces
Funciona en tu navegador · no se sube nada
Vienen valores de ejemplo. Sustitúyelos por los datos de tu página.
Usa la dirección completa que empieza por https:// (o http://).
Dirección completa de la imagen que se muestra al compartir el enlace. La vista previa carga la imagen directamente desde esa dirección.
Con o sin @. Déjalo vacío para omitir la etiqueta.
Etiquetas generadas
12 líneas de etiquetas generadas, 2 cosas que revisar
- Sin imagen, las vistas previas de KakaoTalk y Facebook no muestran ninguna foto.
- Has elegido la tarjeta de imagen grande, pero no hay imagen.
<title>Contador de caracteres — Cuenta palabras y caracteres</title> <meta name="description" content="Pega tu texto para contar al instante caracteres con y sin espacios, palabras y bytes."> <link rel="canonical" href="https://www.example.com/es/contador-de-caracteres/"> <meta property="og:type" content="website"> <meta property="og:title" content="Contador de caracteres — Cuenta palabras y caracteres"> <meta property="og:description" content="Pega tu texto para contar al instante caracteres con y sin espacios, palabras y bytes."> <meta property="og:url" content="https://www.example.com/es/contador-de-caracteres/"> <meta property="og:site_name" content="Sitio de ejemplo"> <meta property="og:locale" content="es_ES"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Contador de caracteres — Cuenta palabras y caracteres"> <meta name="twitter:description" content="Pega tu texto para contar al instante caracteres con y sin espacios, palabras y bytes.">
Pégalas dentro del <head> de tu HTML.
Vistas previas (maquetas)
Contador de caracteres — Cuenta palabras y caracteres
Pega tu texto para contar al instante caracteres con y sin espacios, palabras y bytes.
example.com
Sitio de ejemplo
https://www.example.com/es/contador-de-caracteres/
Contador de caracteres — Cuenta palabras y caracteres
Pega tu texto para contar al instante caracteres con y sin espacios, palabras y bytes.
Son maquetas de las apps reales, así que las longitudes y los puntos de corte pueden variar. Comprueba la anchura del título y la descripción en Google con la herramienta de vista previa SERP. KakaoTalk puede conservar durante un tiempo la vista previa de un enlace que ya ha visto, así que puede aparecer una vista previa antigua después de cambiar las etiquetas.
Los nombres de las etiquetas siguen el protocolo Open Graph (ogp.me) y X (Twitter) Cards. KakaoTalk, Facebook, LinkedIn y Slack leen og:title, og:description, og:image y og:url; X lee twitter:card y puede recurrir a las etiquetas og: para el resto. Las comillas, <, > y & de tu texto se escapan para HTML. No se guarda ni se envía nada de lo que escribes.
Qué es
Este generador de meta tags escribe las etiquetas del head que controlan cómo se ve una página en los resultados de búsqueda y cuando se comparte su enlace. Las apps de mensajería y las redes sociales construyen sus tarjetas de enlace a partir de las etiquetas Open Graph, y X añade sus propias etiquetas de tarjeta. Rellena un formulario breve y obtendrás HTML listo para pegar en el head de tu página, con las comillas ya escapadas y con maquetas de un resultado de Google y de una tarjeta de enlace de KakaoTalk (la app de mensajería más usada en Corea).
Cómo se usa
- Escribe el título, la descripción y la URL de la página. Para empezar vienen valores de ejemplo.
- Añade la URL completa de la imagen para compartir y una breve descripción de ella. Sin imagen, un aviso te recuerda que las tarjetas no tendrán foto.
- Elige el nombre del sitio, el tipo de página, el idioma y el tipo de tarjeta de X. La cuenta de X es opcional.
- Corrige lo que aparezca debajo de las etiquetas generadas, como URL relativas o un título vacío.
- Copia las etiquetas en el head de tu página.
- Revisa las maquetas de vista previa para hacerte una idea del resultado.
Cómo funciona
- Los nombres de las etiquetas siguen el protocolo Open Graph (ogp.me): og:type, og:title, og:description, og:url, og:site_name, og:locale, og:image y og:image:alt, más las etiquetas de X Card: twitter:card, twitter:site, twitter:title, twitter:description y twitter:image.
- La URL de la página se usa tanto para el enlace canonical como para og:url.
- Las comillas, <, > y & se escapan como entidades HTML, los saltos de línea y los espacios repetidos se reducen a un solo espacio, y los campos vacíos no generan etiqueta.
- Las cuentas de X solo se aceptan con 1 a 15 letras, dígitos o guiones bajos.
- Las vistas previas son maquetas; las apps reales usan sus propias fuentes y reglas de recorte.
Ejemplos
| Entrada | Etiqueta generada |
|---|---|
| Título: Contador de caracteres | <title>Contador de caracteres</title>, og:title, twitter:title |
| Descripción con “comillas” | content="Descripción con "comillas"" |
| Cuenta de X: toolsnack | <meta name="twitter:site" content="@toolsnack"> |
| Imagen /og.png | Aviso: usa una dirección https:// completa |
Preguntas frecuentes
¿Qué etiquetas usan las vistas previas de enlaces?
WhatsApp, Facebook, LinkedIn, Slack y KakaoTalk leen og:title, og:description, og:image y og:url. X lee primero twitter:card y puede recurrir a las etiquetas og para el título, la descripción y la imagen.
¿Por qué no aparece mi imagen en la vista previa?
og:image debe ser una dirección completa que empiece por https://. La mayoría de los rastreadores ignoran las rutas relativas como /og.png, y la imagen tiene que ser accesible públicamente.
He cambiado las etiquetas, pero sigue saliendo la vista previa antigua.
Las apps de mensajería y las redes sociales pueden conservar durante un tiempo la vista previa de un enlace que ya han visto. Se actualiza con el tiempo, y las herramientas para desarrolladores de cada plataforma permiten pedir que vuelvan a leer la página.
¿Qué longitud deben tener el título y la descripción?
Google recorta los fragmentos por anchura, no por número de caracteres. Usa la herramienta de vista previa de resultados de búsqueda (SERP) para ver exactamente dónde se cortarían tu título y tu descripción.
¿Se guarda lo que escribo?
No. Las etiquetas y las vistas previas se crean en tu navegador. Si escribes la URL de una imagen, tu navegador la carga directamente para mostrar la vista previa.
