Las etiquetas meta son utilizadas en el documento HTML y se agregan en el encabezado de la página web, sirven para especificar información de la página, como el autor, descripción de la web, palabras clave o keywords, ultima modificación, entre otros meta datos.
<head> <meta charset="UTF-8"> <meta name="description" content="tutoriales"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Juan H"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Toda la información contenida en estas etiquetas no se mostrará en la página web, pero ayudarán a los motores de búsqueda a identificar tu página y como mostrar el contenido en las búsquedas.
HTML5 introdujo un método que permite a la web ajustar los elementos al tamaño del dispositivo.
Elementos de la etiqueta <meta>
La etiqueta meta debe llevar atributos que van a definir la función de esa etiqueta, por ejemplo name y content (nombre y contenido), en el nombre pondremos la etiqueta meta que se va a usar y en el contenido los valores de esa etiqueta.
<meta name="" content=""> <meta charset="utf-8">
charset sirve para ayudar al navegador a interpretar la codificación del texto que se define con UTF-8 aunque este puede cambiar, ver más.
Configurando el viewport.
El viewport es toda el área visible del usuario y el tamaño del contenido varía según el dispositivo y será más pequeño en un teléfono celular que en una computadora. Por ende, los elementos de la pagina se verían más pequeños, pero con esta etiqueta podemos solucionar eso, ya que se da la instrucción al buscador de ajustar las dimensiones de la pagina.
Para usarlo, incluye el siguiente código en tu archivo HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ejemplos etiqueta meta.
- Description: define una descripción de tu página web.
<meta name="description" content="tutoriales">
- Keywords: palabras clave para los buscadores.
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
- Author: nombre del autor de la página
<meta name="author" content="Juan H">
- Viewport: modifica el tamaño del contenido para ajustarse a diferentes dispositivos y se vea bien la pagina.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Nota: siempre pon las meta etiquetas dentro de <head>.
Ahora que ya conoces las etiquetas meta para HTML5 es momento de que las pongas en practica con tu página web. Si no sabes como hacer una página web, aquí te enseño cuales son las principales etiquetas HTML5 para hacer una página web.
Isaac G.
