Has construido tu web. Es bonita, funcional, con contenido valioso. Pero hay un problema: nadie sabe que existe.
Cada día se realizan miles de millones de búsquedas en Google. Y Google tiene un trabajo imposible: decidir qué páginas mostrar primero. El SEO (Search Engine Optimization) es el arte de ayudar a Google a entender tu contenido para que te muestre a las personas correctas.
No es magia negra ni trucos sucios. Es simplemente comunicarte bien con los motores de búsqueda.
<head>: el currículum de tu página¿Recuerdas la sección <head> del documento HTML?
Es donde vive la información sobre tu página — no el contenido visible,
sino los metadatos que describen qué es y para quién es.
Piensa en el <head> como el currículum que le entregas a Google.
Cuanto mejor esté redactado, más probabilidades tienes de "conseguir el trabajo"
(aparecer en los resultados).
<title> — El titular de tu páginaLa etiqueta más importante. Aparece en:
Un buen título es descriptivo, único para cada página, y tiene entre 50-60 caracteres (más se corta en Google).
<meta name="description"> — El resumenLa descripción que aparece bajo el título en Google. Es tu oportunidad de "vender" el clic:
Idealmente entre 150-160 caracteres. Si no la pones, Google elegirá un fragmento aleatorio de tu página — y rara vez acierta.
<meta name="viewport"> — Móviles primeroEsta meta tag le dice al navegador cómo escalar la página en móviles:
Sin ella, tu web se verá diminuta en teléfonos. Google penaliza las páginas que no funcionan bien en móviles. Es obligatoria.
<meta name="keywords"> — El dinosaurioAntiguamente, Google usaba esta etiqueta para entender el contenido. Hoy en día, la ignora completamente. Los spammers abusaron tanto de ella que Google aprendió a extraer las palabras clave del contenido real.
La incluyo aquí para que la conozcas, pero no pierdas tiempo con ella.
¿Has compartido un enlace en WhatsApp, Twitter o LinkedIn y aparece una imagen bonita con título y descripción? Eso es Open Graph.
Son meta tags que controlan cómo se ve tu página cuando la comparten:
Las más importantes:
| Tag | Para qué sirve |
|---|---|
og:title | Título al compartir |
og:description | Descripción al compartir |
og:image | La imagen grande que aparece (¡muy importante!) |
og:url | La URL canónica |
og:type | Tipo de contenido: website, article, product... |
La imagen es crucial. Una buena imagen de Open Graph puede multiplicar los clics cuando alguien comparte tu enlace.
Twitter tiene su propio sistema, aunque también lee Open Graph como fallback:
El tipo de twitter:card más común es summary_large_image
(muestra una imagen grande) o summary (imagen pequeña a la izquierda).
El pequeño icono que aparece en la pestaña del navegador:
Parece un detalle menor, pero es parte de tu identidad visual. Sin favicon, tu pestaña se ve genérica y poco profesional.
<head> completo de un profesionalAquí tienes un ejemplo de cómo se ve todo junto:
Crea una página con un <head> profesional que incluya:
<title> descriptivo<meta description> atractivaog:title)El mejor contenido del mundo no sirve de nada si nadie lo encuentra...