DEV Community

gilq
gilq

Posted on

Etiquetas <meta>: Las instrucciones secretas de tu Web 🕵️‍♂️

Si el HTML es un libro, las etiquetas <meta> son la ficha técnica de la biblioteca. No forman parte de la historia (el contenido visible), pero le dicen al bibliotecario (el navegador) y al lector (Google) de qué trata, en qué idioma está y cómo debe abrirse.

🔌 ¿Para qué sirven realmente?

Las etiquetas <meta> viven exclusivamente dentro del <head>. Sus funciones principales son:

  1. Configuración técnica: Definir el juego de caracteres o la compatibilidad.
  2. SEO (Buscadores): Darle a Google una descripciĂłn para mostrar en sus resultados.
  3. Responsividad: Adaptar la web a celulares.
  4. Redes Sociales: Controlar cĂłmo se ve tu link cuando lo compartes en WhatsApp o X (Twitter).

🚀 Código: El "Kit de Supervivencia" 

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Domina HTML. La guĂ­a definitiva para convertirte en Senior.">

    <meta name="keywords" content="HTML, Web Dev, Senior, Learning">
</head>
Enter fullscreen mode Exit fullscreen mode

Tip para el Futuro Senior:

ÂżHas notado que al compartir un link en Discord o Slack aparece una "tarjeta" con imagen y tĂ­tulo? Eso se logra con las etiquetas Open Graph (og:). Si quieres que tu web se vea profesional al ser compartida, DEBES incluirlas.

<meta property="og:title" content="Mi Pagina">
<meta property="og:image" content="banner-pro.jpg">
Enter fullscreen mode Exit fullscreen mode

Top comments (0)