12 de febrero de 2018

White Paper: Meta Tags imprescindibles a la hora de diseñar una web

Cuando hablamos de elementos que forman parte de una página web, todo el mundo piensa en el texto, imágenes, enlaces o vídeos que se muestran, pero además de estos elementos hay otros también muy importantes y que se encuentran dentro del código fuente del portal. Nos estamos refiriendo a los meta tags, que son instrucción en código HTML que se encargan de dar información de nuestra página web a los buscadores y robots de búsqueda de Internet, que usan estos datos para crear sus índices. Esta información se conoce con el nombre de metainformación.

Descargar White Paper: ‘Meta Tags imprescindibles a la hora de diseñar una web’

 

Como ya hemos comentado estas etiquetas no son visibles para los usuarios de la web, ni tampoco influye en el diseño del portal, pero su uso es muy importante para que los datos de esas páginas sean transferidos correctamente a los motores de búsqueda, pudiendo de esta forma mejorar nuestro posicionamiento SEO. Estas etiquetas nos permiten dar información sobre nuestra página, por ejemplo el autor, el título, la descripción o palabras claves entre otros.

Son muchos los meta tags que podemos utilizar, pero hoy a lo largo de nuestro White Paper veremos aquellos más importantes que deberían formar parte siempre de cualquier desarrollo. Los veremos divididos en dos bloques:

• Metaetiquetas “name”
• Metaetiquetas “http-equiv”

 

 

Meta Tags Name

Dentro de este tipo de etiquetas nos encontramos aquellos que contienen las propiedades del documento, por ejemplo el autor del documento, la descripción del sitio, la lista de palabras claves, etc.

Title

Hace referencia al título de la página, y aunque tiene una etiqueta propia con el formato “<title>Título de la página</title>”, no está de más que añadamos el meta “title”. Es de los más importantes junto con el tag “description”. Como peculiaridad, el título no debería contener más de 65 caracteres de longitud. Los buscadores más importantes utilizan esta información para titular las entradas en las listas de resultados, de ahí que sea tan importante elegir bien el título de cada página para que sea atractivo a ojos de los usuarios.

<meta name=»title» content=»Dominios, Hosting, Páginas Web, Servidores, Cloud | Hostalia«>

Description

Como hemos comentado anteriormente, uno de los meta tag más importantes y que siempre deberíamos utilizar. Se puede definir como nuestra tarjeta de presentación en la hoja de resultado de los buscadores, y no debe tener más de 155 caracteres. Es interesante que en esta descripción se incluyan palabras clave de nuestro contenido.

<meta name=»description» content=»Tu proveedor de hosting, dominios y servidores. Alojados en España y con una excelente calidad/precio. ¡Entra y descubre nuestras ofertas!» />

En el caso de disponer un portal web en varios idiomas podemos indicar diferentes versiones de nuestra descripción mediante el atributo “lang”.

<meta name=«description» lang=«es» content=«El principal objetivo de esta página es…» />

<meta name=«description» lang=«en» content=«the main purpose of this page…» />

Como veis, hemos indicado una descripción para español y otra para inglés.

 

Keywords

Se trata de un metadato que tuvo mucha importancia a la hora de conseguir mejorar el posicionamiento SEO de un sitio, pero que hoy en día no es tenido en consideración por los principales buscadores debido a que era muy fácil “engañarlos” a la hora de lograr un mejor posicionamiento. A pesar de esto se sigue recomendado su uso.

Dentro de este meta tag, lo que hay que indicar es aquellas palabras clave con las que queremos que nuestro portal web sea identificado. Se recomienda no indicar más de 5 o 6 palabras claves.

<meta name=«keywords» content=«dominios, alojamiento web, servidores dedicado, cloud hosting, servidores privados»>

 

Author

Es una etiqueta que no tiene ninguna importancia para la indexación del sitio, y se encarga de mostrar el autor de la página. Su uso es opcional aunque muy interesante.

<meta name=«author» content=«nombre del autor» />

 

Robots

Este meta tag sí que tiene importancia para el SEO. Dependiendo de los valores introducidos, servirá para indicar a los buscadores que se sigan los enlaces contenidos en la página o bien que se indexe o no la página. Su estructura es la siguiente:

<meta name=«robots» content=«lista de valores»>

Son varios los valores que se pueden utilizar dentro de este meta tag, valores que os explicamos a continuación.

• Index: Se trata del valor por defecto e indicará que la página será indexada, apareciendo en las hojas de resultado de los buscadores.
• NoIndex: Actúa exactamente al contrario que el caso anterior. Si no queremos que la página sea posicionada por los buscadores deberemos hacer uso de este valor.
• Follow: Por medio de este valor indicamos que todos los enlaces presentes en la página serán seguidos por parte de los buscadores.
• NoFollow: estaremos indicando a los buscadores que no sigan los enlaces que aparezcan en la página.

Los valores Index/NoIndex y Follow/NoFollow se pueden combinar entre sí. Os dejamos las cuatro combinaciones básicas de estas etiquetas:

 

Index, Follow

Permite la indexación y rastreo de la página web y es el valor por defecto. Prescindir de la etiqueta meta robots es lo mismo que utilizarla con esta configuración.

<meta name=«robots» content=«Index, Follow»>

 

NoIndex, Follow

En este caso, se evitaría la indexación pero se permitiría el rastreo de los enlaces. Es la configuración perfecta en el caso de que queramos que nuestra página no aparezca en los buscadores, pero sí que se siga el rastro de los enlaces.

<meta name=«robots» content=«NoIndex, Follow»>

 

Index, NoFollow

Permite la indexación de la página pero no así el rastreo de los enlaces que aparezcan en ella.

<meta name=«robots» content=«Index, NoFollow»>

 

NoIndex, NoFollow

Evitará la indexación de la página y el rastreo de los enlaces.

<meta name=«robots» content=«NoIndex, NoFollow»>

Meta Tags HTTP Equiv

Las etiquetas que forman parte de este grupo son mandadas como cabeceras HTTP independientes cuando una página es enviada por un servidor web. Su misión es la de ejercer un mayor control sobre los navegadores de los usuarios, reforzando la información proporcionada por las cabeceras HTTP estándares.

Cuando un usuario solicita una página al servidor, éste mira que exista. Si no es así, devuelve un error 404 conocido por todo el mundo. Si la página sí que existe, lo primero que se envía son una serie de cabeceras HTTP que contienen los Meta Tags con información de la página y a continuación, envía la página en sí.

Dicho esto, veamos cuáles son los metas más importantes dentro de este grupo.

 

Content-Type

Por medio de este metadato es posible indicar el juego de caracteres utilizado en el documento. Por medio del atributo “content” se le indica si el contenido puede interpretarse en un navegador web en formato HTML o texto plano. Además de esto, por medio del atributo “charset” se indica el juego de caracteres utilizado. Los más habituales suelen ser “utf-8” e “iso-8859-1”. De esta manera se consigue la correcta visualización de caracteres como la “ñ” o los acentos.

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

 

Pragma – Control de cache

Para mejorar la velocidad de carga, las páginas web suelen utilizar sistema de caché. Ante una nueva petición de información primero se mira si el contenido está cacheado para evitar hacer una llamada al servidor que siempre es más lenta. A pesar de sus beneficios hay ocasiones en las que puede interesarnos que ciertas páginas no sean cacheadas. Para ello, se puede utilizar el metadato “pragma” con el valor “no-cache”.

<meta http-equiv=«pragma» content=«no-cache»>

Las páginas que hagan uso de este metadato solicitarán la información al servidor tras cada petición.

 

Expires

Indica la fecha a partir de la cual el documento guardado en cache expira y el navegador volverá a solicitar la información al servidor, cacheando de nuevo esa información. El valor de la fecha ha de estar en formato GMT.

<meta http-equiv=«expires» content=«Mon, 19 Feb 2018 13:50:00 GMT»>

Como trabajar con este formato de fecha puede ser complicado, este metadato también permite indicar el tiempo de expiración en segundos. De esta forma, si queremos que el contenido solo esté cacheado durante 1 hora, deberemos indicar el valor 3600.

<meta http-equiv=«expires» content=«3600»>

En el caso de indicar un valor 0, se considerará que la información está caducada y se volverá a solicitar al servidor.

 

Refresh

El último de los metadatos que vamos a ver dentro de este bloque permite indicar un tiempo que tiene que pasar para que se produzca el refresco de la página. Como en el caso anterior, el valor se indicará en segundos.

<meta http-equiv=«refresh» content=«30»>

Si además del valor en segundos el atributo “content” contiene una url de destino, entonces pasado ese tiempo se hará una redirección hacia dicha url.

<meta http-equiv=«refresh» content=«30; URL:http://www.hostalia.com«>

Aunque la lista de metadatos es amplia, no siempre será necesario hacer uso de todos ellos. De todas formas, siempre es bueno conocerlos para utilizarlos en caso de necesidad.

 

 

Comentarios