Problema común: Compartes tu web en LinkedIn y aparece sin imagen, con descripción rara o título incorrecto. Perdiste credibilidad y clicks en 3 segundos. Esto pasa cuando no tienes meta tags configurados correctamente.
¿Qué son los Meta Tags?
Los meta tags son fragmentos de código HTML invisibles para los usuarios pero que comunican información importante a:
Para posicionamiento SEO
Redes Sociales
Para previews al compartir
Navegadores
Para mostrar información
Tipos de Meta Tags Esenciales
1. Meta Tags Básicos (SEO)
Estos son fundamentales para el posicionamiento en Google:
<title>Título de tu página - Máx 60 caracteres</title>
<meta name="description" content="Descripción atractiva máximo 155 caracteres">
<meta name="author" content="360MKT">
<link rel="canonical" href="https://360mkt.es/pagina-exacta">💡 Tip: El title y description son lo que aparece en los resultados de Google. Hazlos atractivos para generar clicks.
2. Open Graph (Facebook, LinkedIn, WhatsApp)
Controlan cómo se ve tu web cuando la compartes en redes sociales:
<meta property="og:type" content="website">
<meta property="og:title" content="Título llamativo para redes">
<meta property="og:description" content="Descripción que invita al click">
<meta property="og:image" content="https://360mkt.es/imagen-1200x630.jpg">
<meta property="og:url" content="https://360mkt.es/pagina">
<meta property="og:site_name" content="360MKT">✅ Plataformas que usan Open Graph: Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord
3. Twitter Cards
Twitter/X tiene su propio sistema de meta tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título para Twitter/X">
<meta name="twitter:description" content="Descripción para Twitter/X">
<meta name="twitter:image" content="https://360mkt.es/imagen-1200x675.jpg">Tamaños de Imágenes Perfectos
📘 Open Graph (Facebook, LinkedIn)
- ✓ Tamaño recomendado: 1200x630px
- ✓ Mínimo: 600x315px
- ✓ Ratio: 1.91:1
- ✓ Formato: JPG o PNG
- ✓ Peso máximo: 1MB
🐦 Twitter Cards
- ✓ Tamaño recomendado: 1200x675px
- ✓ Mínimo: 300x157px
- ✓ Ratio: 16:9
- ✓ Formato: JPG, PNG, WebP
- ✓ Peso máximo: 5MB
⚠️ Errores Comunes con Imágenes
- ❌ Imagen muy pequeña → Se ve pixelada al compartir
- ❌ Imagen muy pesada → Tarda en cargar o no se muestra
- ❌ Texto importante en los bordes → Se recorta en el preview
- ❌ URL relativa → No se carga la imagen (debe ser URL completa con https://)
Plantilla Completa de Meta Tags
Copia y pega esto en tu <head>:
<head>
<!-- Meta Básicos -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título SEO - 360MKT</title>
<meta name="description" content="Descripción clara y atractiva">
<link rel="canonical" href="https://360mkt.es/pagina">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Título Social Media">
<meta property="og:description" content="Descripción social">
<meta property="og:image" content="https://360mkt.es/og-image.jpg">
<meta property="og:url" content="https://360mkt.es/pagina">
<meta property="og:site_name" content="360MKT">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título Twitter">
<meta name="twitter:description" content="Descripción Twitter">
<meta name="twitter:image" content="https://360mkt.es/twitter-card.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>Herramientas para Testear tus Meta Tags
📘 Facebook Sharing Debugger
URL: developers.facebook.com/tools/debug
Pega tu URL y verás exactamente cómo se ve en Facebook, LinkedIn y WhatsApp. Usa "Scrape Again" si hiciste cambios.
🐦 Twitter Card Validator
URL: cards-dev.twitter.com/validator
Testea cómo se verá tu URL cuando la compartan en Twitter/X.
💼 LinkedIn Post Inspector
URL: linkedin.com/post-inspector
Específico para LinkedIn. Útil si tienes problemas con previews en esta red.
Errores Comunes y Cómo Solucionarlos
❌ Error: La imagen no aparece al compartir
Solución:
- 1. Verifica que la URL sea absoluta (con https://)
- 2. Comprueba que la imagen existe y carga bien
- 3. Usa Facebook Debugger → "Scrape Again"
- 4. Espera 5-10 minutos para que actualice cache
❌ Error: El título se corta
Solución:
- • Título SEO: Máximo 60 caracteres
- • og:title: Máximo 55 caracteres (más conservador)
- • Pon lo más importante al principio
❌ Error: Descripción genérica o incorrecta
Solución:
- • Escribe una og:description específica para cada página
- • Máximo 155 caracteres
- • Usa palabras que inviten al click
- • No copies y pegues la misma en todas las páginas
❌ Error: Los cambios no se ven
Solución:
- • Facebook: Usa Debugger + "Scrape Again"
- • LinkedIn: Post Inspector + "Inspect"
- • Twitter: Espera 7 días o limpia cache del navegador
Ejemplo Real: Meta Tags de 360MKT
Así deberían verse los meta tags de la home de 360MKT:
<title>360MKT - Agencia Marketing Digital Valencia | Diseño Web & SEO</title>
<meta name="description" content="Agencia de marketing digital en Valencia. Diseño web, branding, SEO y estrategias digitales que generan resultados reales.">
<meta property="og:title" content="360MKT - Tu Agencia Digital en Valencia">
<meta property="og:description" content="Sistemas de crecimiento digital para empresas ambiciosas. Más de 50 clientes confían en nosotros.">
<meta property="og:image" content="https://360mkt.es/Assets/og-image-home.jpg">
<meta property="og:url" content="https://360mkt.es">Checklist: ¿Están Bien Configurados tus Meta Tags?
¿Necesitas ayuda optimizando tus meta tags?
En 360MKT auditamos y configuramos todos los meta tags correctamente para maximizar clicks desde redes sociales y mejorar tu SEO.
Solicita auditoría de meta tags