Volver a Implementación de Schema

Meta Tags y Open Graph

Guía técnica completa para optimización de búsqueda IA

¿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 motores de búsqueda y plataformas IA. Piensa en ellos como etiquetas que explican de qué trata tu página.

Para optimización GEO, los meta tags ayudan a los motores IA a entender el contexto de tu contenido, propósito y cómo mostrarlo cuando se comparte. Los meta tags apropiados 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 resultados de búsqueda y respuestas de motores IA. 150-160 caracteres es 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 primarias naturalmente. Hazla convincente y precisa.

Etiqueta Title

El título de tu página aparece en pestañas del navegador, resultados de búsqueda y cuando se comparte. 50-60 caracteres recomendados. Incluye tu marca y palabra clave principal.

<title>Complete Guide to Meta Tags & Open Graph</title>

URL Canonical

Indica a los motores de búsqueda la versión preferida de tu página. Previene 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 bots 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" />

Tags de Open Graph

Los tags de Open Graph controlan cómo tu contenido aparece cuando se comparte en redes sociales. Originalmente creado por Facebook, ahora usado por muchas plataformas incluyendo herramientas 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 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 máximo de archivo: 8 MB
  • Formato: JPG o PNG
  • Proporción: 1.91:1

Tags de Twitter Card

Las Twitter Cards funcionan de manera similar a Open Graph pero son específicas para 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: Miniatura de imagen cuadrada pequeña
  • summary_large_image: Imagen de banner grande (recomendado)
  • app: Para promociones de aplicaciones móviles
  • player: Para contenido de video/audio

Meta Tags Avanzados para GEO

Información de Autor

Ayuda a los motores IA a entender 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

Tags técnicos esenciales para renderizado apropiado.

<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>

Probando Tus Meta Tags

Siempre prueba los meta tags antes de publicar:

Debugger de Compartir de Facebook

Prueba tags de Open Graph: developers.facebook.com/tools/debug/

Validador de Twitter Card

Prueba Twitter Cards: cards-dev.twitter.com/validator

Inspector de Posts de LinkedIn

Prueba compartir en LinkedIn: linkedin.com/post-inspector/

Consejos Rápidos de Meta Tags

  • Escribe meta descriptions únicas para cada página
  • Mantén los títulos bajo 60 caracteres
  • Usa imágenes de alta calidad para og:image (1200x630px)
  • Siempre incluye URLs canonical
  • Prueba con herramientas de debugging antes de publicar
  • Actualiza og:image cuando rediseñes o rebrandees

Recursos Relacionados

Guía Completa de Meta Tags y Open Graph para Búsqueda IA