Meta tags y Open Graph

Etiquetas SEO con vista previa

Sin base de datos: AIMRAN no guarda tus archivos, textos ni resultados

¿Qué es Meta tags y Open Graph?

Las meta etiquetas son líneas de código invisibles que le dicen a Google y a las redes sociales cómo mostrar tu página: el título, la descripción y la imagen que aparecen al buscarla o al compartir el enlace.

Rellena los datos de tu página y verás cómo quedará en los resultados de Google y al compartirla en Facebook, LinkedIn o X. Después copia el HTML y pégalo en tu web.

Cómo se usa

  1. Escribe el título y la descripción vigilando el contador de caracteres.
  2. Añade la URL, la imagen, el nombre del sitio y el idioma.
  3. Elige el tipo de página, la tarjeta de Twitter y, si quieres, el color del tema.
  4. Revisa la vista previa en Google y al compartir.
  5. Copia el HTML y pégalo dentro del <head> de tu página.

Ventajas

Detalles técnicos

Genera <title>, meta description, link rel="canonical" y, opcionalmente, theme-color. El bloque Open Graph incluye og:type (website o article), og:title, og:description, og:url, og:image, og:site_name y og:locale, y añade og:image:width 1200 y og:image:height 630 cuando se elige la tarjeta de imagen grande. El bloque de X/Twitter incluye twitter:card (summary o summary_large_image), twitter:title, twitter:description, twitter:image y twitter:site con la @ añadida automáticamente. Todos los valores se escapan para HTML y se omiten las etiquetas vacías. Los contadores recomiendan títulos de 30 a 60 caracteres y descripciones de 70 a 160, y la vista previa de Google recorta en esos límites.

Preguntas frecuentes

¿Qué son las meta tags?

Etiquetas HTML que van en el <head> de la página y describen su contenido a buscadores y redes sociales. Las más importantes son el título y la meta description.

¿Cuántos caracteres debe tener el título SEO?

Entre 30 y 60 caracteres aproximadamente, para que Google lo muestre completo. La meta description, hasta unos 160.

¿Qué es Open Graph?

Un protocolo creado por Facebook que define qué título, descripción e imagen se muestran al compartir un enlace en redes como Facebook, LinkedIn o WhatsApp.

¿Qué tamaño debe tener la imagen og:image?

Se recomienda 1200 × 630 píxeles (proporción 1,91:1) para que se vea grande y nítida al compartir.

¿Qué diferencia hay entre summary y summary_large_image?

summary muestra una miniatura pequeña junto al texto; summary_large_image muestra una imagen grande encima del título en X (Twitter).

Más herramientas de Desarrolladores