HTML5 – Etiqueta Meta

La etiqueta meta representa varios tipos de metadatos que no pueden ser expresados con las etiquetas title, base, link, style y script. Con ella podemos indicar el tipo de codificación de nuestra página y otro tipo de metadatos. Para ello utiliza los atributos name, http-equiv, charset e itemprop.

El atributo charset se utiliza para especificar la codificación usada en nuestra página. Únicamente debe existir una etiqueta meta con el atributo charset en la página. En él indicaremos si nuestra página esta codificada en UTF-8, ISO o cualquier otro tipo de codificación. Este elemento debe estar dentro del los primeros 512 bytes de la página:

Otro de los atributos de la etiqueta meta es content, el cual es utilizado para dar valores a los metadatos de la página o a las directivas pragma.

Un tercer atributo es name, éste asigna un metadato a la página. Un metadato esta expresado como un par nombre-valor, el atributo name es el encargado de especificar que metadato queremos crear, y el atributo content proporciona su valor.

Algunos de los metadatos más utilizados son:

    • application-name: representa el nombre que tendrá el documento web.
    • author: indica el nombre del creador de la página.
    • description: con este metadato se pretende dar una pequeña descripción de lo que contiene nuestra página. Este valor sera muy utilizado por los directorios de páginas y buscadores.
    • generator: se utiliza para indicar con que software se ha creado la página. Si tú has creado el documento a mano no necesitas incluir este metadato en él.
    • keywords: es el conjunto de palabras más relevantes de nuestro documento. Por ejemplo, las palabras más relevantes para un documento que hable sobre HTML5, podrían ser: HTML5, Video, Tags, Enlaces.

Estos son los más conocido y utilizados, pero existen una gran cantidad de metadatos. Entre los que he encontrado más interesantes son:

    • robots: define el comportamiento que los robots deben tener con la página. Podremos incluir todos los valores que queramos separados por comas:
    Valor Descripción Usado
    index Permite al robot indexar la página Todos
    noindex Indica al robot que no indexe la página Todos
    follow Permite al robot seguir los links en la página Todos
    nofollow Indica al robot que no puede seguir los links de la página Todos
    noodp Previene el uso de la descripción Open Directory Project, si la hay, como la descripción de la página en los resultados de una búsqueda Google, Yahoo, Bing
    noarchive Previene que los motores de búsqueda cachear el contenido de la página Google, Yahoo
    nosnippet Previene que se muestre la descripción de la página en los resultados de una búsqueda Google
    noimageindex Previene que la página aparezca referida de un indice de imágenes Google
    noydir Previene el uso de la descripción Yahoo Directory, si la hay, como descripción de la página en los resultados de una búsqueda Yahoo
    nocache Sinónimo de noarchive Bing
    • creator: define el nombre del creador de la página. Si existe más de uno se deberán usar varios de estos elementos.
    • googlebot: es sinónimo de robots, pero solo para Googlebot.
    • viewport: ayuda a conocer el tamaño inicia del viewport. Este pragma es utilizado únicamente por dispositivos móviles.
    Valor Posibles valores Descripción
    width un entero positivo o la cadena device-width define el ancho, en pixels, del viewport
    heigth un entero positivo o la cadena device-height define la altura, en pixels, del viewport
    initial-scale un número positivo entre 0.0 y 10.0 define el ratio entre el ancho del dispositivo y el tamaño del viewport
    maximum-scale un número positivo entre 0.0 y 10.0 define el valor máximo del zoom; éste debe ser mayor o igual a la minimum-scale o el comportamiento sera indeterminado.
    minimum-scale un número positivo entre 0.0 y 10.0 define el valor mínimo del zoom; este debe ser menor o igual a la maximum-scale o el comportamiento será indeterminado
    user-scalable un valor booleano (yes or no) Si tiene el valor no, el usuario no podrá hacer zoom en la página. Por defecto el valor es yes.
    • msapplication-task: crea una acción asociada a la página. Esta tarea aparecera en el menu del sitio anclado en windows7.
    • msapplication-starturl: contienen la dirección URL raíz de la aplicación, en un sitio anclado.
    • msapplication-tooltip: proporcionan texto de información adicional sobre herramientas que aparece cuando mantiene el mouse sobre el acceso directo del sitio anclado en el menú Inicio de Windows o en el escritorio.
    • msapplication-navbutton-color: definen el color personalizado de los botones Atrás y Adelante en la ventana del explorador del sitio anclado.
    • msapplication-window: establecen el tamaño inicial de la ventana del sitio anclado cuando el sitio se inicia por primera vez.
    • MobileOptimized: indica el ancho de que tendrá la página en un dispositivo móvil.

El último de los atributos de la etiqueta meta es http-equiv, en este caso decimos que es una directiva pragma. Los valores que puede contener este atributos son:

    • http-equiv=”content-type”: es la alternativa al atributo charset, las dos tienen la misma funcionalidad. En este tipo de declaración el atributo content debe tener como valor la cadena, seguido por la cadena “charset=”, y el identificador de la codificación.
    • http-equiv=”refresh”: este pragma indica el tiempo para que se refresque la página. El tiempo se representa con un entero, que indica el numero de segundos para que se refresque la página. Si añadimos una URL este será el tiempo que tardara la pagina en refrescarse y redireccionarse a la URL.
    • http-equiv=”x-ua-compatible”: Permite controlar el modo en el que IE renderizará la página y para para activar enable Google Chrome’s open web technologies (Google Chrome Frame, e.g. content=”chrome=1″).

Este es un pequeño resumen de todas las posibilidades que nos da la etiqueta meta, existen muchísimas que os invito a investigar.

Enlaces : Sitios Anclados |