El elemento <meta> permite especificar información adicional importante sobre el documento HTML o página web. La información de esto elemento es invisible para los usuarios, pues está pensada para los navegadores web u otras aplicaciones que puedan necesitar información complementaria.
La etiqueta de este elemento es <meta>; sin etiqueta de cierre. Por tanto, se trata de un elemento vacío. El contenido de este elemento se introduce por medio de sus atributos. También es conocido con el nombre de etiqueta meta o metaetiqueta; el nombre es una traducción de Meta-Tag.
Se puede introducir tantos elementos <meta> como sean necesarios. Teniendo en cuenta que no son vistos por el usuario, su uso no afectará a la apariencia del documento HTML. Para introducirlos, es obligatorio que estén anidados dentro de las etiquetas del elemento <head>. Vamos a ver un ejemplo:
<head>
<meta charset='UTF-8'>
</head>
Atributos
Con los atributos se pueden definir varios tipos de información adicional y que pueden tener una utilidad muy diferente. En el ejemplo anterior usamos el atributo charset para definir la codificación de caracteres UTF-8. Otros casos pueden ser la definición de un autor o añadir una descripción del sitio web.
Lista de atributos:
| Atributo | Valor | Descripción |
|---|---|---|
charset | Codificación de caracteres. | Especifica la codificación de caracteres del documento HTML. |
name | application-name, author, description, generator, keywords, viewport, robots | Especifica el nombre de la información adicional. |
http-equiv | content-language, content-type, content-style-type, content-security-policy, refresh, allow, content-encoding, content-length, date, expires, cache-control, last-modified, location, set-cookie, X-UA-Compatible, default-style | Especifica una cabecera HTTP. |
content | Cadena de texto. | Especifica el valor asociado con el atributo name o con http-equiv. |
Este listado de atributos es una referencia útil para poder consultarla cuando sea necesario, pero también es importante conocer y aprender la forma de usar los elementos meta, uno por uno. Por tanto, veremos varios ejemplos.
Definir la codificación de caracteres
La codificación de caracteres de un documento HTML o página web es muy importante y se debe especificar siempre. Si no se define, se corre el riesgo —y es probable que suceda— que los caracteres del contenido no sean interpretados de forma correcta. Esto provoca que en su lugar aparezcan otros símbolos.
En HTML existen dos maneras para especificar la codificación de caracteres. Las dos vías son ofrecidas mediante los elementos meta: una manera de hacerlo es con el atributo charset, pero también se puede especificar con la combinación de atributos http-equiv y content, llamada «directiva pragma».
Importante: esta especificación debe caber completamente dentro de los primeros 1024 bytes al principio del documento HTML. Por lo tanto, lo mejor es colocarla inmediatamente después de la etiqueta de apertura del elemento <head>.
Ejemplo de código usando el atributo charset:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
...
Ejemplo de código usando la «directiva pragma»:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
...
En un documento HTML debe haber como mínimo una codificación especificada, pero nunca de las dos maneras. Se puede usar una forma u otra, indistintamente. La primera es más rápida de escribir. El valor de la codificación no distingue mayúsculas de minúsculas, y se recomienda usar siempre el valor UTF-8.
Ejemplos de elementos <meta> con el atributo ‘name’
Descripción de la página web
Con el elemento <meta> y el atributo name='description' se puede definir la descripción de un sitio web. Los buscadores web la usarán para clasificar mejor la página web en cuestión. Es muy usado en SEO.
<meta name='description' content='Esta página web explica los algoritmos iterativos.'>
Palabras clave de la página web
Con el elemento <meta> y el atributo name='keywords' se puede listar un grupo de palabras clave que indicarán de forma clara la temática de la página web. Este atributo también lo usan mucho en el mundo del SEO.
<meta name='keywords' content='algoritmos, programación, Python'>
Autoría de la página web
Se puede especificar el autor de una página web mediante el elemento <meta> y el atributo name='author'. Los buscadores tienen en cuenta esta información para mostrarla en los resultados de búsqueda.
<meta name='author' content='Isaac Newton'>
Indexado de la página web
Se puede controlar cómo se deben indexar y servir las páginas a los usuarios de los buscadores con el atributo name='robots'. Este atributo es muy usado en SEO para controlar el indexado. En el ejemplo siguiente se impide a los rastreadores de los buscadores la indexación del contenido de la página en cuestión.
<meta name='robots' content='noindex'>
Ejemplos de elementos <meta> con el atributo ‘http-equiv’
Recarga el documento cada cierto tiempo
Con el elemento <meta> y el atributo http-equiv='refresh' se puede establecer un tiempo periódico de recarga de la página web. En el atributo content se especifica un valor cuya unidad es el segundo. Por ejemplo, si queremos que el documento HTML se recargue cada 10 segundos:
<meta http-equiv='refresh' content='30'>
Establece una política de seguridad de contenido
El elemento <meta> con el atributo http-equiv='content-security-policy' permite controlar los recursos que el User-Agent (navegador) puede cargar a una página web. Esto ayuda a protegerse contra ataques XSS. En el ejemplo siguiente, se permite cargar recursos únicamente sobre el protocolo HTTPS.
<meta http-equiv='content-security-policy' content='default-src https:'>
Establece hojas de estilo CSS por defecto
Con el atributo http-equiv='default-style' del elemento <meta> también se puede definir hojas de estilo CSS por defecto que deben usar los navegadores web. El valor de este atributo debe coincidir con el valor de un elemento <link> introducido en el mismo documento HTML para que sea válido.
<meta http-equiv='default-style' content='/style.css'>
Define la fecha de vencimiento de la página web
Se puede establecer la fecha de vencimiento de una página web mediante el elemento <meta> y el atributo http-equiv='expires'. Normalmente este atributo se usa en páginas que preparan un evento próximo, un formulario de inscripción a un curso o a un seminario, una oferta temporal de un producto u otros casos similares, cuya particularidad es que dejarán de ser válidos a partir de cierta fecha.
Este atributo debe especificar la fecha de vencimiento con el formato ISO 8601. Por ejemplo, si queremos indicar el año, el mes y la fecha lo haremos cumpliendo el formato YYYY-MM-DD, del inglés Year, Month, Day (año, mes y día). De tal manera que la fecha quedaría así: 2020-01-01. Veamos el ejemplo completo:
<meta http-equiv='expires' content='2020-01-01'>
