Mcatorce Suite
← Volver al blog

Etiquetas Meta HTML Esenciales para SEO y Para Compartir en Redes

Las etiquetas meta que debe tener toda página, incluidas title, description, viewport, canonical, robots, Open Graph y tarjetas de Twitter, con longitudes recomendadas y ejemplos.

Prueba la herramienta: Generador de Meta Tags

Las etiquetas meta viven en el head de una página y la describen para navegadores, buscadores y redes sociales. Un conjunto pequeño hace la mayor parte del trabajo.

Lo básico

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Título de la página - Marca</title>
<meta name="description" content="Un resumen claro de la página.">
<link rel="canonical" href="https://example.com/page/">
  • charset fija la codificación del texto. Usa UTF-8.
  • viewport hace que la página se escale bien en los teléfonos.
  • title se muestra en los resultados de búsqueda y en las pestañas del navegador. Apunta a unos 50 a 60 caracteres, con el tema principal primero.
  • description suele convertirse en el fragmento de los resultados de búsqueda. Apunta a unos 120 a 160 caracteres y escríbela para personas, no para palabras clave.
  • canonical indica a los buscadores la URL preferida cuando el mismo contenido es accesible desde varias direcciones.

Robots

<meta name="robots" content="noindex, nofollow"> pide a los buscadores que no indexen la página ni sigan sus enlaces. Omítela en las páginas que deben posicionarse, ya que indexar es lo predeterminado.

Open Graph

Las etiquetas Open Graph controlan cómo se ve un enlace al compartirlo en Facebook, LinkedIn, WhatsApp y muchas otras aplicaciones:

<meta property="og:title" content="Título de la página">
<meta property="og:description" content="Resumen breve.">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

Una buena imagen para compartir mide unos 1200 x 630 píxeles, y la URL debe ser absoluta.

Tarjetas de Twitter y X

<meta name="twitter:card" content="summary_large_image"> selecciona una vista previa grande. Twitter lee las etiquetas Open Graph si faltan las suyas.

Otras etiquetas útiles

  • theme-color colorea la barra del navegador en móvil.
  • lang en el elemento html declara el idioma.
  • author y keywords tienen poco o ningún efecto en el posicionamiento hoy.

Preguntas frecuentes

¿La meta descripción afecta al posicionamiento? No directamente, pero una buena puede aumentar los clics.

¿Por qué no se actualiza la vista previa al compartir? Las plataformas guardan en caché las vistas previas. Usa sus herramientas de depuración para refrescarla.