TechLead

Meta Tags y SEO

Metadatos, Open Graph y optimización para motores de búsqueda

¿Qué son las Meta Tags?

Las meta tags son elementos HTML en el <head> que proporcionan información sobre tu página a navegadores, motores de búsqueda y plataformas de redes sociales. No aparecen en la página misma pero controlan cómo se muestra tu página en los resultados de búsqueda y cómo se comparte en redes sociales.

Meta Tags Esenciales

Codificación de Caracteres y Viewport

Estas dos son requeridas en cada página:

<head>
  <!-- Indica al navegador qué conjunto de caracteres usar -->
  <meta charset="UTF-8" />

  <!-- Hace la página responsive en móviles -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Título (¡Lo Más Importante para SEO!)

Aparece en resultados de búsqueda, pestañas del navegador y compartidos sociales:

Aprende JavaScript - Tutoriales Gratis | TechLead
https://techlead.com > aprende-js
Domina JavaScript con nuestros tutoriales completos...
<title>Aprende JavaScript - Tutoriales Gratis | TechLead</title>

50-60 caracteres
Incluye palabra clave principal
Incluye nombre de marca
Único para cada página

Descripción

Se muestra en resultados de búsqueda—¡este es tu discurso de venta!

<meta name="description" content="Domina JavaScript con nuestros
  tutoriales completos que cubren desde conceptos básicos hasta avanzados.
  Ejemplos interactivos, ejercicios y proyectos incluidos." />

150-160 caracteres
Incluye palabras clave naturalmente
Hazlo convincente—¡convence a los usuarios de hacer clic!
Único para cada página

Palabras Clave (Opcional, Menos Importante Ahora)

<meta name="keywords" content="javascript, js, tutorial,
  aprender javascript, desarrollo web" />

La mayoría de los motores de búsqueda ignoran esto ahora. Enfócate en título y descripción.

Autor y Color del Tema

<meta name="author" content="Equipo TechLead" />
<meta name="theme-color" content="#3b82f6" />

theme-color cambia el color de la UI del navegador móvil para coincidir con tu marca.

Open Graph (Compartir en Redes Sociales)

Controla cómo se ve tu página cuando se comparte en Facebook, LinkedIn, Slack, Discord, etc.

VISTA PREVIA: Cómo aparece en Facebook/LinkedIn

og:image (1200x630px)
techlead.com
Aprende JavaScript - Tutoriales Gratis
Domina JavaScript con tutoriales completos que cubren desde conceptos básicos hasta avanzados...
<!-- Tags básicos de Open Graph -->
<meta property="og:title" content="Aprende JavaScript - Tutoriales Gratis" />
<meta property="og:description" content="Domina JavaScript con
  tutoriales completos que cubren conceptos básicos a avanzados." />
<meta property="og:image" content="https://techlead.com/og-image.jpg" />
<meta property="og:url" content="https://techlead.com/aprende-js" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="TechLead" />

<!-- Dimensiones de imagen (recomendado para mejor visualización) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Miniatura del tutorial de JavaScript" />
Consejos para Imágenes Open Graph:
  • Tamaño recomendado: 1200x630px (Facebook, LinkedIn)
  • Tamaño mínimo: 600x315px
  • Formato: JPG o PNG (menos de 8MB)
  • Incluye texto superpuesto—¡la imagen puede recortarse!

Twitter Cards

Tags especiales para Twitter (ahora X). Twitter también lee Open Graph si faltan los tags de Twitter.

VISTA PREVIA: Card de Twitter/X

twitter:image
techlead.com
Aprende JavaScript - Tutoriales Gratis
Domina JavaScript con tutoriales completos...
<!-- Tipo de card de Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@techlead" />
<meta name="twitter:title" content="Aprende JavaScript - Tutoriales Gratis" />
<meta name="twitter:description" content="Domina JavaScript..." />
<meta name="twitter:image" content="https://techlead.com/twitter-image.jpg" />
Tipos de Card:
  • summary - Imagen pequeña
  • summary_large_image - Imagen grande (más común)
  • app - App móvil
  • player - Reproductor de video/audio
Tamaños de Imagen:
  • summary: 120x120px (mín)
  • large_image: 300x157px (mín)
  • Recomendado: 800x418px

Robots y Control de SEO

Indica a los motores de búsqueda cómo indexar tu página:

Permitir Indexación (por defecto)

<meta name="robots"
  content="index, follow" />

index = mostrar en resultados de búsqueda
follow = rastrear enlaces en la página

Prevenir Indexación

<meta name="robots"
  content="noindex, nofollow" />

Bueno para: páginas de admin, sitios de staging, contenido duplicado

Otras Opciones de Robots:

<!-- Prevenir cacheo de snapshots -->
<meta name="robots" content="noarchive" />

<!-- No mostrar fragmentos de texto en búsqueda -->
<meta name="robots" content="nosnippet" />

<!-- No seguir enlaces de imágenes -->
<meta name="robots" content="noimageindex" />

URL Canónica (Prevenir Contenido Duplicado)

Indica a los motores de búsqueda cuál versión de una página es la "principal":

Problema: El mismo contenido en múltiples URLs perjudica el SEO

https://ejemplo.com/blog/mi-post
https://ejemplo.com/blog/mi-post?utm_source=twitter
https://ejemplo.com/blog/mi-post?page=1
https://www.ejemplo.com/blog/mi-post
<!-- Solución: Indica a los motores de búsqueda la URL canónica (principal) -->
<link rel="canonical" href="https://ejemplo.com/blog/mi-post" />

Favicons e Iconos de App

Iconos para pestañas del navegador, marcadores y pantallas de inicio:

T
Favicon aparece en pestañas del navegador y marcadores 
<!-- Favicon estándar (todos los navegadores) -->
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Icono Apple touch (pantalla de inicio iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Manifiesto de web app (PWA, Android) -->
<link rel="manifest" href="/site.webmanifest" />

<!-- Color del tema para navegadores móviles -->
<meta name="theme-color" content="#3b82f6" />
Tamaños de Iconos:
  • favicon.ico: 16x16, 32x32, 48x48 (archivo ICO multi-tamaño)
  • favicon-32x32.png: Escritorio estándar
  • favicon-16x16.png: Escritorio Retina
  • apple-touch-icon.png: 180x180 (iOS)
  • android-chrome-192x192.png: 192x192 (Android)
  • android-chrome-512x512.png: 512x512 (splash de Android)

Ejemplo Completo de <head>

<head>
  <!-- Esencial -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- SEO -->
  <title>Aprende JavaScript - Tutoriales Gratis | TechLead</title>
  <meta name="description" content="Domina JavaScript con nuestros
    tutoriales completos que cubren conceptos básicos a avanzados.
    Ejemplos interactivos incluidos." />
  <meta name="author" content="Equipo TechLead" />

  <!-- URL Canónica -->
  <link rel="canonical" href="https://techlead.com/aprende-js" />

  <!-- Open Graph (Facebook, LinkedIn, etc.) -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Aprende JavaScript - Tutoriales Gratis" />
  <meta property="og:description" content="Domina JavaScript con nuestros
    tutoriales completos que cubren conceptos básicos a avanzados." />
  <meta property="og:image" content="https://techlead.com/og-image.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://techlead.com/aprende-js" />
  <meta property="og:site_name" content="TechLead" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@techlead" />

  <!-- Favicons -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#3b82f6" />

  <!-- Hojas de estilo -->
  <link rel="stylesheet" href="/styles.css" />
</head>

Errores Comunes

  • Mismo título/descripción en cada página: ¡Hazlos únicos!
  • Título demasiado largo: Mantén menos de 60 caracteres (se corta en búsquedas)
  • Descripción demasiado corta: Usa 150-160 caracteres—¡hazla convincente!
  • Falta og:image: Los compartidos sociales se ven poco profesionales sin imágenes
  • Tamaño incorrecto de og:image: Usa 1200x630px para evitar recortes
  • Sin URL canónica: Puede causar penalizaciones por contenido duplicado
  • Falta meta viewport: La página no será responsive en móviles

Mejores Prácticas de SEO

  • Títulos y descripciones únicos: Cada página necesita diferentes
  • Incluye palabras clave naturalmente: No las acumules, escribe para humanos
  • Usa HTML semántico: Encabezados apropiados (h1-h6), elementos semánticos
  • Optimiza imágenes: Comprime, usa texto alt, usa formatos modernos (WebP)
  • Carga de página rápida: La velocidad es un factor de ranking (menos de 3 segundos)
  • Compatible con móviles: Google usa indexación mobile-first
  • HTTPS: Requerido para buen ranking SEO
  • Enlaces internos: Vincula páginas relacionadas entre sí
  • Usa schema markup: Datos estructurados (JSON-LD) para rich snippets
  • Actualizaciones regulares de contenido: El contenido fresco posiciona mejor

Herramientas de Prueba

Aprende Más

  • Google Search Console: Monitorea indexación, rendimiento de búsqueda
  • Facebook Sharing Debugger: Prueba tags de Open Graph
  • Twitter Card Validator: Prueba renderizado de cards de Twitter
  • Lighthouse (Chrome DevTools): Auditoría SEO, rendimiento
  • PageSpeed Insights: Verifica velocidad de página (móvil y escritorio)
  • Schema Markup Validator: Prueba datos estructurados