La etiqueta <meta> es una etiqueta HTML que se usa para proporcionar información sobre el documento, como el título, los metadatos, el tema de color, el viewport y otros. La etiqueta <meta> se coloca dentro del elemento <head> del documento y no tiene contenido ni etiqueta de cierre. La etiqueta <meta> puede tener diferentes atributos según el tipo de información que se quiera indicar.
La etiqueta <meta> es muy importante para mejorar el aspecto y el rendimiento de tu sitio web, ya que puede ayudarte a:
- Definir la codificación de caracteres que usa el documento, para que se pueda mostrar correctamente cualquier carácter.
- Indicar la descripción y las palabras clave del documento, para que los motores de búsqueda y las redes sociales puedan indexarlo y clasificarlo mejor.
- Ajustar el tamaño y la escala del área visible del navegador en los dispositivos móviles, para que tu sitio web sea responsive y se adapte a cualquier pantalla.
- Establecer el color que se muestra en la barra de direcciones o en la barra de herramientas del navegador en algunos dispositivos móviles, para que tu sitio web tenga una apariencia más personalizada.
Ejemplos de la etiqueta <meta>
A continuación te mostramos algunos ejemplos de etiquetas <meta> con sus respectivos atributos y valores:
<meta charset="utf-8">: Esta etiqueta indica el tipo de codificación de caracteres que usa el documento. Se recomienda usarutf-8para que el documento pueda mostrar correctamente cualquier carácter.<meta name="description" content="Una breve descripción del sitio web">: Esta etiqueta indica la descripción del documento, que puede aparecer en los resultados de búsqueda o en las redes sociales. La descripción debe ser breve, clara y relevante para el contenido del documento.<meta name="keywords" content="HTML, meta, etiqueta, ejemplo">: Esta etiqueta indica las palabras clave que se relacionan con el contenido del documento. Las palabras clave pueden ayudar a los motores de búsqueda a indexar y clasificar el documento, pero no tienen tanto peso como antes.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Esta etiqueta indica el tamaño y la escala del área visible del navegador en los dispositivos móviles. El valorwidth=device-widthhace que el ancho del documento se ajuste al ancho del dispositivo, y el valorinitial-scale=1.0hace que la escala inicial sea 1:1.<meta name="theme-color" content="#ff0000">: Esta etiqueta indica el color que se muestra en la barra de direcciones o en la barra de herramientas del navegador en algunos dispositivos móviles. El valor debe ser un código hexadecimal de color.