Mercy Selene Alonzo Ramírez : febrero 2016

INSTITUTO TECNOLÓGICO SUPERIOR DEL SUR DEL ESTADO DE YUCATÁN

INGENIERÍA EN SISTEMAS COMPUTACIONALES

ASIGNATURA:

PROGRAMACIÓN WEB

ACTIVIDAD:

10 EJEMPLOS DE LA APLICACIÓN DE LA ETIQUETA <META>

FACILITADOR:

JIMMY PEÑA KOO

PRESENTA:

MERCY SELENE ALONZO RAMÍREZ

GRUPO:

“B”

SEMESTRE:

8 ^V

FECHA DE ENTREGA:

19 DE FEBRERO DEL 2016

Etiquetas <meta>

La etiqueta <meta> se utiliza para identificar propiedades de un documento (el autor, una lista de palabras claves, la descripción de una página, etc.) y para asignar valores a esas propiedades.

Para ello nos servimos del atributo name que especifica la propiedad a usar y del atributo content para definir el contenido de dicha propiedad.

1.-La etiqueta <meta> application-name: descripción de una aplicación Web

Está exclusivamente pensada para describir el nombre de una aplicación Web. Su valor es cualquier cadena de texto que sirva para dar un nombre a la aplicación y solo puede aparecer una vez. No se debe incluir si no estamos dentro de una aplicación Web.

<meta name="application-name" content="Servicio web de base de datos 1.0" />

Importancia: media

2.-La etiqueta <meta> author: ¿quién es el autor?

Esta metaetiqueta sirve para describir al autor de la página web. Su valor es cualquier cadena de texto. Su uso es muy importante y debe de incluir siempre además de realizar otras acciones específicas como relacionar al autor de un documento como su perfil de Google+ pero esta no es una acción que sea haga con metadatos. Solo puede haber una metaetiqueta de este tipo.

<meta name="author" content="Javier Iglesia Aparicio" />

Importancia: alta

3.-La etiqueta <meta> description: ¿de qué trata esta página web?

Con esta metaetiqueta describimos la página web: qué contiene, cuál es su tema principal, etc. Atención: su uso es importante porque es el texto que suele aparecer en los resultados de búsqueda, luego conviene cuidar su contenido. Solo puede haber una metaetiqueta de este tipo.

<meta name="description" content="Un blog sobre analítica web, SEO y web semántica: avanzando hacia un SEO semántico" />

Importancia: alta

4.-La etiqueta <meta> generator: ¿con qué herramienta se ha hecho la página web?

Esta metaetiqueta sirve para identificar el software con el cual se ha elaborado una página web. Sólo se puede utilizar una web y no debe añadirse si el sitio web ha sido elaborado manualmente, sin utilizar un software o un gestor de contenidos.

<meta name="generator" content="Joomla 3.0" />

Importancia: baja

5.-La etiqueta <meta> keywords: ¿qué palabras son clave en la página web?

Punto clave, a pesar de que siempre se ponga en cuestión su verdadero valor en el posicionamiento debido a su uso abusivo, la lista de palabras clave, importantes, del contenido de nuestra página web. Su contenido tienen que ser un conjunto de palabras separadas por comas.

<meta name="keywords" content="analítica web, seo, web semántica, seo semántico, analytics" />

A pesar de las dudas sobre su efectividad, ¿quién se atreve a dejar de usarlas? Nadie. Luego es necesario seguir teniendo cuidado en este punto.¿Cuántas palabras clave se deben añadir? ¿Cuál es la longitud adecuada? La recomendación más extendida es la de no superar un total de 256 caracteres, incluidos los espacios en blanco. Y por palabras es prudente tener entre 5 y 8 palabras clave. Cada palabra clave puede estar constituida por hasta 4 o 5 palabras.

Importancia: alta

6.-La etiqueta <meta> charset: la codificación de caracteres

Una metaetiqueta cuya definición es muy importante pues de nada nos sirve haber elegido bien todas las palabras y contenido de nuestra página si luego el navegador no las muestra adecuadamente por haber elegido una codificación de caracteres distinta a la que utilizamos. Porque no es lo mismo que aparezca analítica web a que aparezca anal^?ticaweb. Siempre se debe especificar la misma codificación de caracteres con la que estemos trabajando en nuestro gestor de contenidos.

Importante: HTML 5 designa la codificación utf-8 como el estándar por defecto y es el que yo también os recomiendo seguir. Para especificar la codificación se usa una metaetiqueta un poco distinta de las anteriores:

<meta name="encoding" charset="utf-8" />

Esta declaración es obligatoria es HTML 5 y sustituye al modo en que se declaraba en antiguas versiones de HTML y en XHTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Atención:

No se deben utilizar ambas declaraciones en simultáneo. Si usamos HTML 5, utilizaremos la primera declaración; en cualquier otro caso la segunda.
La declaración de codificación siempre tiene que estar en los primeros 1024 bytes del documento HTML.

Importancia: alta

7.-Las metaetiquetas http-equiv

Todos aquellos metadatos que en vez de utilizarnamecomo atributo utilizanhttp-equivse llaman directivas pragma. Nunca se deben repetir en una misma página y sirven para crear mensajes de respuesta HTTP e interactuar con el servidor. estas son las opciones actualmente disponibles:

http-equiv=”content-type”. Para declarar la codificación del documento como hemos visto anteriormente.
http-equiv=”default-style”. Para definir la hoja de estilos por defecto del sitio web. El valor del atributo content tiene que ser cualquiera de estos valores:
- El nombre debe coincidir con el valor del atributotitlede un elemento linken el mismo documento, y dicho elementolinkdebe de tener un atributo hrefque indique la localización del archivo de la hoja de estilos.
- El nombre debe coincidir con el atributo titlede un elemento styleen el mismo documento, y el contenido de dicho elemento debe de ser una hoja de estilo CSS.

Para aclarlos. Si en nuestra cabecera hemos indicado que usamos una hoja de estilos de este modo <link rel="stylesheet" type="text/css" href="hojaestilos.css" title="hoja-por-defecto" />, entonces podemos hacer esta declaración:<meta http-equiv="default-style" content="hoja-por-defecto" />. Igualmente, si dentro de la web tenemos un código CSS descrito así: <style type="text/css" title="estilo2">body{color:black;}</style>, entonces podremos definirlo como estilo por defecto mediante la declaración<meta http-equiv="default-style" content="estilo2" />.

http-equiv=”refresh”. Nos permite definir un tiempo de refresco de la página web e incluso una re-dirección pasado un tiempo definido. Si sólo hay un valor, tienen que ser una valor numérico entero que indica los segundos que han de pasar para que la página se refresque. Así que si escribimos<meta http-equiv="refresh" content="300" />, la página se refrescará pasados 5 minutos. Si además queremos indicar que pasado un tiempo se dirija a una página nueva, deberemos escribir: <meta http-equiv="refresh" content="300; URL=nuevapagina.html" />. De esta forma, pasados 5 minutos cargaremos nueva pagina.html.
http-equiv=”X-UA-Compatible”. Para indicar compatibilidades con navegadores.

Existen otras metaetiquetas que se usan pero no están declaradas en el estándar como:

http-equiv=”set-cookie”, para crear una cookie HTTP. Se deben usar cabecera HTTP reales para crearlas en vez de esta metaetiqueta.
http-equiv=”content-language”, para definir el idioma por defecto. Ahora se debe usar el atributolangen el elemento html: <html lang="es-ES">.

8.-La metaetiqueta robots

Con esta metaetiqueta declaramos cuál deseamos que sea el comportamiento de los rastreadores web cuando indexan nuestro sitio web. El valor del atributo namesiempre tiene que serrobots. Y los posibles valores del atributo content son:

Indexación:indexo noindex. Indicamos si queremos que indexe o no nuestras páginas web.
Seguimiento de enlaces: follow o nofollow. Indicamos si deseamos que el rastreador siga o no siga los enlaces encontrados en el código de la página web

Se permite siempre una combinación de indexación y seguimiento pero que tenga lógica:

<meta name="robots" content="index, follow" />. Permite indexar todo el contenido y seguir los enlaces. Es siempre el valor por defecto así que si no tenemos un meta robosts en nuestra página web, los rastreadores siempre asumirán este comportamiento por defecto.
<meta name="robots" content="noindex, nofollow" />. Ni permitimos indexar ni seguir los enlaces. En este caso nuestra web será invisible para los buscadores.
<meta name="robots" content="index, nofollow" />. Permitimos indexar pero no seguir los enlaces.
<meta name="robots" content="noindex, follow" />. No queremos que nos indexen pero si permitimos seguir los enlaces.

Para identificar mejor qué páginas queremos que rastreen o que no rastreen es necesario definir un archivo robots.txt.

Otras metaetiquetas no estándares

Existe una enorme multitud de metaetiquetas propietarias y utilizadas únicamente por algunas aplicaciones. Otras que tratan de aportar metadatos respecto a estándares como Dublin Core. Y otras cuantas que se usan aunque generalmente no les importe a nadie su contenido. Este es un recorrido rápido y sin ánimo de ser exhaustivo.

9.-Facebook y Twitter

Mediante metaetiquetas pasamos información a Twitter y a Facebook cuando alguien comparte un artículo nuestro en esas redes. Estos son algunos ejemplos:

<meta property=""fb:admins" content="1456677" />, <meta property="og:title" content="Título" /> y <meta name="twitter:card" content=""summary" />

Información para plantillas responsivas

Si utilizamos una plantilla responsiva en nuestro sitio web, tipo Bootstrap, también se utilizan metaetiquetas para dar información de cómo debe verse en cada dispositivo. Con el ejemplo siguiente indicamos que se tiene que tener como ancho base la anchura del dispositivo e iniciar a escala 1, sin zoom.

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

10.-Verificación de sitios

Para utilizar algunos servicios como las herramientas webmaster de Google o Bing uno de los métodos de autenticación es incluir metaetiquetas en la cabecera, como estas:

<meta name="google-site-verification" content="4634ab636e3" /> o <meta name="verification" content="234124dae24" />.