Metaetiqueta y generador OpenGraph
Cree las metaetiquetas que una página necesita para los resultados de búsqueda y las vistas previas sociales: título, descripción, URL canónica, Open Graph y etiquetas de tarjetas de Twitter. Complete los campos, vea cómo se ensambla el marcado a medida que escribe y pegue el bloque en el encabezado de su página.
Enter Page Metadata Details
Google & Social Card Live Preview
https://mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
<!-- Primary Meta Tags --> <title>My Awesome Website — Premium Tools</title> <meta name="title" content="My Awesome Website — Premium Tools" /> <meta name="description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://mywebsite.com" /> <meta property="og:title" content="My Awesome Website — Premium Tools" /> <meta property="og:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="og:image" content="https://mywebsite.com/og-image.png" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://mywebsite.com" /> <meta property="twitter:title" content="My Awesome Website — Premium Tools" /> <meta property="twitter:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="twitter:image" content="https://mywebsite.com/og-image.png" />
como funciona
- 1
Ingrese el título de la página y la descripción que desea que muestren los motores de búsqueda y las plataformas sociales.
- 2
Agregue la URL canónica y la URL de la imagen de vista previa; ambas deben ser rutas absolutas, no relativas.
- 3
Revise las etiquetas generadas, incluidos los equivalentes de tarjetas Open Graph y Twitter.
- 4
Copie el bloque y péguelo dentro del elemento principal de su página.
Ventajas y beneficios clave
Una fuente, tres consumidores
Los resultados de búsqueda, Open Graph y las tarjetas de Twitter se generan juntos a partir de la misma entrada, por lo que no pueden separarse.
Nombres de etiquetas correctos
Open Graph usa atributos de propiedad y Twitter usa atributos de nombre, una distinción que es fácil de equivocar a mano.
Comentarios inmediatos
El marcado se ensambla a medida que escribe, para que pueda ver el bloque terminado antes de pegarlo.
Salida independiente del marco
Etiquetas HTML simples que funcionan en un sitio estático, una plantilla, un campo CMS o una página escrita a mano.
Para qué lo usa la gente
- Agregar etiquetas de vista previa social a una página de destino que actualmente se comparte como una tarjeta en blanco.
- Establecer una URL canónica en una página a la que se puede acceder desde más de una dirección.
- Preparar metaetiquetas para el sitio de un cliente antes de entregárselo.
- Aprenda qué etiquetas realmente importan al verlas generadas juntas.
Formatos y opciones compatibles
| Etiquetas generadas | título, meta descripción, enlace canónico, Open Graph (og:título, og:descripción, og:url, og:image), etiquetas de tarjetas de Twitter |
|---|---|
| Salida | HTML simple que se pega en el elemento principal |
Privacidad y manejo de datos
Las etiquetas se ensamblan a partir de su entrada en el navegador. Las URL y el texto que ingresa no se envían a nuestro servidor ni se registran.
Límites y cosas que debes saber
- Los motores de búsqueda reescriben los títulos y las descripciones cuando consideran que un fragmento diferente es más útil; estas etiquetas son una entrada sólida, no una garantía.
- La imagen de vista previa debe ser una URL absoluta a la que se pueda acceder públicamente. Los rastreadores sociales no pueden recuperar localhost, una página autenticada o una ruta relativa.
- Vistas previas de caché de plataformas sociales. Después de cambiar las etiquetas, normalmente es necesario volver a raspar la URL en la propia herramienta de depuración de la plataforma antes de que aparezca la nueva tarjeta.
Solución de problemas
La tarjeta social todavía muestra contenido antiguo.
Esa es una caché del lado de la plataforma. Vuelva a extraer la URL en el depurador de uso compartido de la plataforma para forzar una actualización; cambiar las etiquetas por sí solo no la borra.
No aparece ninguna imagen en la tarjeta de vista previa
Compruebe que og:image sea una URL HTTPS absoluta, de acceso público y lo suficientemente grande (1200x630 es el estándar seguro). Las imágenes pequeñas o bloqueadas se eliminan silenciosamente.
Google muestra una descripción diferente
Google genera un fragmento que considera más relevante para la consulta. Asegúrese de que la descripción resuma con precisión la página; se utilizará con más frecuencia cuando coincida con la intención.
Meta Tag Generator — Title, Description & Open Graph Tags
Generate a complete set of SEO meta tags — title, meta description, canonical, Open Graph and Twitter Card — and copy them straight into your page head. A free meta tag generator with live length feedback so nothing gets truncated in the search snippet.
- Title and meta description with length guidance — live character counts keep you inside the roughly 60-character title and 155-character description that search engines display without cutting off.
- Open Graph tags for social sharing — og:title, og:description, og:image and og:url control exactly how a link previews on Facebook, LinkedIn, Slack and WhatsApp.
- Twitter Card markup — summary and large-image card tags so shared links render with a proper preview instead of a bare URL.
- Copy-paste ready HTML — the output is a valid block of head markup, ready for a template, a static site or a CMS SEO field.
- No sign-up, no plugin — everything is generated in your browser — a practical option when the site has no SEO plugin installed.
Free and unlimited. Generate the matching permalink with the URL Slug Generator and the site icon with the Favicon Generator.
Preguntas frecuentes
Why does Google show a different description than mine?
Google rewrites snippets when it judges another passage more relevant to the query. A description that accurately summarises the page gets used far more often than one written purely for keywords.
What size should the og:image be?
1200x630 is the safe standard. It must be an absolute, publicly reachable HTTPS URL — social crawlers cannot fetch localhost, a relative path or a page behind authentication.
I updated my tags but the shared card is unchanged. Why?
Social platforms cache previews. Re-scrape the URL in the platform's own sharing debugger to force a refresh; changing the tags alone will not clear their cache.
¿Dónde debo pegar estas metaetiquetas?
Pegue el fragmento HTML generado dentro de la sección <head> de sus páginas web.
¿Por qué Google muestra una descripción diferente a la mía?
Google reescribe fragmentos cuando considera otro pasaje más relevante para la consulta. Una descripción que resume con precisión la página se utiliza con mucha más frecuencia que una escrita exclusivamente para palabras clave.
¿Qué tamaño debe tener la imagen og:?
1200x630 es el estándar seguro. Debe ser una URL HTTPS absoluta y de acceso público: los rastreadores sociales no pueden recuperar localhost, una ruta relativa o una página detrás de la autenticación.
Actualicé mis etiquetas pero la tarjeta compartida no ha cambiado. ¿Por qué?
Vistas previas de caché de plataformas sociales. Vuelva a extraer la URL en el depurador de uso compartido de la plataforma para forzar una actualización; cambiar las etiquetas por sí solo no borrará su caché.
Herramientas relacionadas
Generador de códigos QR
Convierte cualquier enlace o texto en un código QR escaneable
Generador de morfismo de vidrio CSS
Genere efectos de interfaz de usuario de vidrio modernos y código CSS
Convertidor de casos de texto
Cambiar entre SUPERIOR, Inferior, Título y camelCase
Generador de marcadores de posición de Lorem Ipsum
Generar texto de marcador de posición ficticio para diseños de interfaz de usuario