Portada

sábado, 21 de febrero de 2015

Actividad 2.1 Las etiquetas meta

Una de las múltiples piezas para mejorar el posicionamiento SEO y la información que damos a los rastreadores web sobre nuestro sitio web son las etiquetas <meta> de HTML. Es muy recomendable utilizarlas pues siempre facilitaremos el trabajo de rastreo e indexación de las arañas web.

Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que contiene. 

En el código, el atributo name dentro de la etiqueta <meta> especifica su tipo y content declara su valor, pero ninguno de estos valores es mostrado en pantalla. En general siempre tienen la misma forma:

<meta name=” ” content=” ” />

Cabe mencionar que en HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero se recomienda utilizarlas por razones de compatibilidad.

Vamos a ver algunas de las etiquetas <meta> y cómo implementarlas en nuestros sitios web.
  • 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" />
  • 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. Solo puede haber una metaetiqueta de este tipo.

<meta name="author" content="Wilberth Novelo" />
  • 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 programación web"/>
  • 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" />
  • 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="programación, web" />
  • 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.

Nota: HTML 5 designa la codificación utf-8 como el estándar por defecto y es el que yo también os recomiendo seguir. Esta declaración es obligatoria es HTML 5.

<meta name="encoding" charset="utf-8" />
  • Las metaetiquetas http-equiv
Todos aquellos metadatos que en vez de utilizar name como atributo utilizan http-equiv se 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.

<meta http-equiv="refresh" content="300; URL=nuevapagina.html" />
  • 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 atrinuto name siempre tiene que ser "robots"Y los posibles valores del atributo content son:

Indexación: index o 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.

Nota: Para identificar mejor qué páginas queremos que rastreen o que no rastreen es necesario definir un archivo robots.txt.
  • 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" />
  • Indicaciones a los navegadores
Por ejemplo, si queremos indicar que un sitio web es adecuado para verse en dispositivos móviles de Apple, podemos decir al navegador Safari que:

<meta name="apple-mobile-web-app-capable" content="yes" />


No hay comentarios.:

Publicar un comentario