Actividad 2.1

10 Ejemplos de como emplear la etiqueta "<meta>"

1.- Título (Title)

Los navegadores lo leen y aparece en la barra del título de una pestaña o una ventana como nombre estándar de la página en la lista de favoritos y en el historial del navegador. Los buscadores más importantes usan esta etiqueta para titular las entradas en las listas de resultados o SERP, de modo que influye de forma decisiva en la elección del internauta.

<title>Los meta tags más importantes y su función | IONOS</title>

2.- Codificación de caracteres

Si la fuente no fue previamente definida en el header del archivo HTTP, es necesario hacerlo usando HTML. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente. El meta tag que usaremos es este:

<meta charset="utf-8"/>

3.- Descripción (Description)

En la descripción o meta description podemos describir brevemente el contenido de la página web. Esta información se muestra como snippet (una síntesis en dos líneas del tema de una página que aparece bajo la URL) en los buscadores de uso más generalizado como Google o Bing, por lo que se recomienda cuidar su redacción.

<meta name="description" content="Los meta tags de HTML codifican información para ser interpretada por el navegador y los buscadores. ¿Sabes cuáles son imprescindibles?"/>

4.- Palabras clave (Keywords)

Con esta etiqueta meta los administradores tienen la posibilidad de definir palabras clave para el buscador.

<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>

5.- Refresh

Con los meta tags “http-equiv” es posible configurar también una transferencia sencilla. De forma parecida a como funciona la etiqueta “expires”, con este atributo también se define una fecha de vencimiento, a partir de la cual los navegadores o los motores de búsqueda serán dirigidos a una URL establecida previamente. En este ejemplo, en 10 segundos se produce el reenvío a la página principal de IONOS:

<meta http-equiv="refresh" content="10; url=http://www.ionos.es/"/>

6.-  Expires

Es posible que no se quiera prohibir el almacenamiento temporal en caché de forma absoluta. En este caso se puede usar el atributo “http-equiv” para definir una fecha de expiración para los datos HTML solicitados. Se haría de esta manera:

<meta http-equiv="expires" content="tiempo de expiración en segundos"/>

<meta http-equiv="expires" content="0"/>

<meta http-equiv="expires" content="43200"/>

7.-  Control de caché

Para asegurar la fluidez del funcionamiento de Internet, las webs se suelen guardar en servidores proxy intermedios o en el caché del navegador para ser descargadas fácilmente en el futuro. Para impedirlo usamos el meta tag “cache-control” con el valor no-cache:

<meta http-equiv="cache-control" content="no-cache"/>

8.- Autor (author) y copyright

Estos dos meta tags, de uso opcional desde el punto legal, permiten hacer referencia al diseñador de una página web y al propietario de los derechos del código fuente de una página HTML. 

<meta name="author" content="Nombre del autor" />

<meta name="copyright" content="Propietario del copyright" />

9.- Idioma

Idioma en el que está escrita la página. Debe ponerse si queremos que los que lean esa página sean los usuarios que tienen los buscadores en ese idioma. Cada idioma tiene un código, normalmente las dos primeras letras del idioma (escritas en su propio idioma) ej: Español: ES, Francés: FR; Inglés: EN; Alemán DE.

<meta name="language" content="es"/>

10.- Content-Type


Indica el tipo de codificación de caracteres en el que está escrita la página. Esto es importante en páginas que están escritas en idiomas con otros tipos de alfabeto distinto al nuestro. en nuestro alfabeto, el tipo de codificación es el siguiente, y la mayoría de las páginas llevan esta etiqueta:


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>