¿Qué son los meta tags?
Los meta tags son fragmentos de código en tu HTML que describen el contenido de tu página. Son invisibles para los visitantes pero visibles para los motores de búsqueda y plataformas de IA. Piénsalos como etiquetas que explican de qué trata tu página.
Para la optimización GEO, los meta tags ayudan a los motores de IA a entender el contexto y propósito de tu contenido y cómo mostrarlo cuando se comparte. Unos meta tags adecuados mejoran la descubribilidad y presentación de tu contenido.
Meta tags esenciales
Meta description
Un resumen breve del contenido de tu página. Aparece en los resultados de búsqueda y en respuestas de motores de IA. 150-160 caracteres es lo ideal.
<meta name="description" content="Learn how to optimize your website for AI search engines with Bloffee's complete GEO optimization platform. Improve your content for ChatGPT, Claude, and other AI tools." />Mejores prácticas: Escribe descripciones únicas para cada página. Incluye palabras clave principales de forma natural. Hazla atractiva y precisa.
Title tag
El título de tu página aparece en las pestañas del navegador, los resultados de búsqueda y cuando se comparte. Se recomiendan 50-60 caracteres. Incluye tu marca y la palabra clave principal.
<title>Complete Guide to Meta Tags & Open Graph</title>URL canonical
Indica a los motores de búsqueda cuál es la versión preferida de tu página. Evita problemas de contenido duplicado. Esencial para GEO.
<link rel="canonical" href="https://geo-score.online/learn/technical/meta-tags-complete" />Meta tag robots
Controla cómo los motores de búsqueda y los bots de IA interactúan con tu página. Usa "index, follow" para permitir acceso completo.
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />Etiquetas Open Graph
Las etiquetas Open Graph controlan cómo aparece tu contenido al compartirlo en redes sociales. Creadas originalmente por Facebook, ahora se usan en muchas plataformas, incluidas las herramientas de IA.
Ejemplo completo de Open Graph
<meta property="og:title" content="Complete Guide to Meta Tags" />
<meta property="og:description" content="Master meta tags and Open Graph for GEO optimization." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://geo-score.online/learn/technical/meta-tags-complete" />
<meta property="og:image" content="https://geo-score.online/images/meta-tags-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Bloffee" />
<meta property="og:locale" content="en_US" />
<meta property="article:published_time" content="2025-01-10T00:00:00.000Z" />
<meta property="article:modified_time" content="2025-01-10T12:00:00.000Z" />
<meta property="article:author" content="Bloffee" />Requisitos de la imagen Open Graph
Tu og:image es crucial. Aparece cuando se comparte el contenido. Sigue estas especificaciones:
- Tamaño recomendado: 1200 x 630 píxeles
- Tamaño mínimo: 600 x 314 píxeles
- Tamaño de archivo máximo: 8 MB
- Formato: JPG o PNG
- Relación de aspecto: 1,91:1
Etiquetas Twitter Card
Las Twitter Cards funcionan de forma similar a Open Graph pero son específicas de Twitter/X. Mejoran cómo aparecen tus enlaces en la plataforma.
Ejemplo de Twitter Card
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@bloffee" />
<meta name="twitter:creator" content="@bloffee" />
<meta name="twitter:title" content="Complete Guide to Meta Tags" />
<meta name="twitter:description" content="Master meta tags and Open Graph for GEO." />
<meta name="twitter:image" content="https://geo-score.online/images/meta-tags-guide.jpg" />Tipos de Twitter Card
- summary: Imagen pequeña cuadrada en miniatura
- summary_large_image: Imagen banner grande (recomendada)
- app: Para promociones de apps móviles
- player: Para contenido de video/audio
Meta tags avanzados para GEO
Información del autor
Ayuda a los motores de IA a entender la autoría y autoridad del contenido.
<meta name="author" content="Bloffee Team" />
<link rel="author" href="https://geo-score.online/about" />Idioma y locale
Especifica el idioma del contenido para sitios internacionales.
<html lang="en">
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="nl_NL" />
<meta property="og:locale:alternate" content="fr_FR" />Charset y viewport
Etiquetas técnicas esenciales para una correcta renderización.
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Plantilla completa de meta tags
Usa esta plantilla como punto de partida para todas tus páginas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Your Page Title | Brand Name</title>
<meta name="title" content="Your Page Title | Brand Name">
<meta name="description" content="Clear description of your page content in 150-160 characters.">
<meta name="author" content="Your Name or Company">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
<link rel="canonical" href="https://yoursite.com/page-url">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yoursite.com/page-url">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Clear description for social sharing.">
<meta property="og:image" content="https://yoursite.com/image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Brand">
<meta property="og:locale" content="en_US">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://yoursite.com/page-url">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Clear description for Twitter.">
<meta name="twitter:image" content="https://yoursite.com/image.jpg">
</head>
<body>
<!-- Your content -->
</body>
</html>Probar tus meta tags
Prueba siempre los meta tags antes de publicar:
Facebook Sharing Debugger
Prueba las etiquetas Open Graph: developers.facebook.com/tools/debug/
Twitter Card Validator
Prueba las Twitter Cards: cards-dev.twitter.com/validator
LinkedIn Post Inspector
Prueba el contenido compartido en LinkedIn: linkedin.com/post-inspector/
Consejos rápidos sobre meta tags
- •Escribe meta descriptions únicas para cada página
- •Mantén los títulos por debajo de 60 caracteres
- •Usa imágenes de alta calidad para og:image (1200x630 px)
- •Incluye siempre URLs canonical
- •Prueba con herramientas de depuración antes de publicar
- •Actualiza la og:image cuando rediseñes o cambies de marca
Recursos relacionados
- Implementación de Schema
Añade datos estructurados junto con los meta tags
- Checklist técnica SEO
Guía completa de optimización técnica
- Alt text de imágenes
Optimiza las imágenes para la búsqueda con IA