contenido 22 de julio de 2014 a las 13.41
   Imprimir artículo
elWebmaster.com

Las mejores prácticas para las etiquetas de HTML


elwebmaster1 Los metadatos se refiere a menudo como “datos sobre los datos” y una de las formas en que se realiza en las páginas web es a través de la etiqueta <meta>. El contenido de las etiquetas meta describe de manera general información sobre la página HTML que normalmente no puede ser representada por cualquier otra etiqueta HTML. Además de eso , la etiqueta meta también puede ser utilizada para emular un encabezado de respuesta HTTP (como la redirección a una página diferente) y tiene atributos como http- equiv y charset, cuyos detalles se han descrito claramente en el Mozilla Developer Network .

¿Por qué son las etiquetas <meta> importantes?

En el pasado, las etiquetas meta fueron utilizadas por los motores de búsqueda para indexar páginas web en base al título, descripción e incluso palabras clave. En un mundo perfecto, si todo el mundo los habría utilizado de manera justa, eso habría sido como una bendición . Sin embargo, algunos sitios web comenzaron a abusar de ellos, metiendo palabras clave populares con la esperanza de obtener mejores resultados de búsqueda. Google, reconociendo esto, anunció en 2009 que no utilizan palabras clave o descripciones en el meta en sus algoritmos de búsqueda para propósitos del ranking .

A pesar de que las etiquetas meta y su descripción no tienen efecto en el rango de motores de búsqueda, siguen apareciendo en los resultados de búsqueda. Esto significa que una persona llega a leer su descripción en una página de resultados de búsqueda antes de hacer clic en el enlace, lo que demuestra que las descripciones del meta deben ser escritos para que la gente lea y no para los robots de búsqueda. Así, mientras que una buena descripción de la meta no va a mejorar tu ranking , puede aumentar las tasas de click a tu sitio web desde las páginas de búsqueda.

Otra cosa importante a tener en cuenta es que no todo el tráfico de búsqueda se genera de Google, Bing, y Yahoo. Piensa en los demás (como Baidu) que dan peso a las etiquetas meta, lo que representa millones de búsquedas al día.

Uso de diferentes etiquetas <meta>

Las diferentes etiquetas <meta> son definidas cambiando atributo name a un valor válido.

La etiqueta meta más utilizada es el que se utiliza para ver las descripciones:

<meta name=”description”

content=”Una guía general de como usar las etiquetas meta en páginas HTML”>

En los casos de descripciones vacías (o las no existentes), los motores de búsqueda va a generar una descripción del contenido de la página.

También puedes establecer el autor de una página mediante etiquetas meta.

<meta name=”author” content=”Juan Siverio”>

El atributo charset se utiliza para especificar la codificación de caracteres de tu página. Una página HTML sólo puede tener un único juego de caracteres. Para la mayoría de las páginas web, se debe utilizar la codificación de caracteres UTF-8.

<meta charset=”UTF-8″>

Más información de la codificación de caracteres y como elegirlos lo puedes encontrar en W3C.

Sustituyendo encabezados HTTP

Como se ha mencionado, las etiquetas meta se pueden utilizar para llevar a cabo la tarea de cabeceras HTTP como redirección y de actualización.

<meta http-equiv=”refresh” content=”5;url=http://www.sitepoint.com/”>

El valor del atributo de content se refiere al intervalo de tiempo en segundos antes de realizar la actualización. La URL puede ser el mismo o diferente en función de si desea actualizar la página o redirigir a una nueva. También puede dejar la url vacía para actualizar la página actual.

Uso obsoleto

El uso de etiquetas meta ha evolucionado con los años y hay ciertas prácticas populares desde hace años que no se deben seguir en la actualidad. Por ejemplo:

<!– no uses esto! –>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

Esa es la versión más larga de la codificación de caracteres que era común en XHTML. Acortando a lo que ya comentamos anteriormente es suficiente.

Las etiquetas meta también fueron usadas para indicar los derechos de autor.

<!– no uses esto! –>

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

Esto puede mejorarse proporcionando un enlace apuntando a una página de derechos de autor (o un ancla en la misma página).

<link rel=”copyright” href=”copyright.html”>

Por último, a pesar de que muchos sitios web siguen utilizando las palabras claves en el atributo name, Google no considera esto en su algoritmo de ranking de búsqueda o cuando se muestran los resultados de búsqueda. De hecho, Google nunca ha considerado las palabras clave en su algoritmo de búsqueda.

<meta name=”keywords” content=”web,design,html,css,html5,development”>

Google ha dicho que es muy poco probable que esto cambie en el futuro , por lo que no debes molestarte con las palabras claves en las etiquetas meta.

Pero un factor importante, como se ha señalado anteriormente, es el hecho de que el motor de búsqueda en idioma chino Baidu considera la palabra clave en la etiqueta meta un factor importante en su algoritmo de búsqueda . Así que si esperas que una parte significativa de tu tráfico provenga de los usuarios en idioma chino, entonces debes incluir las palabras clave en la etiqueta meta, pero siempre ten cuidado de utilizarlas innecesariamente y con poca ética las palabras clave.

Habiendo dicho todo esto, no le hará daño a tu ranking en usar cualquiera de estos métodos obsoletos, pero esto le agregará código innecesario a tu página, así que lo mejor es simplemente evitarlos y utilizar métodos alternativos.

Uso en Social Media (Open Graph, Twitter Cards y Schema.org)

Con la creciente relevancia de las redes sociales, las etiquetas meta han evolucionado. Open Graph de Facebook te permite especificar cómo se muestra el contenido en línea de tiempo de un usuario. Estas etiquetas pueden permitirte comprobar cómo sus datos se comparten en Facebook usando Insights.

<meta property=”og:title” content=”The best site”>

<meta property=”og:image” content=”link_to_image”>

<meta property=”og:description” content=”description goes here”>

Para mayor información, te sugiero que vayas a la documentación de Facebook Open Graph.

Similar a Open Graph, Twitter tiene Twitter cards (utilizando name=”Twitter: tittle” o name=”Twitter: url”) y Google utiliza Schema.org (usando itemscope y itemprop).

Herramientas de metadatos

Las herramientas de metadatos no requieren un conocimiento profundo en HTML o de otras tecnologías web, así que aún tienes una salida si no quieres ensuciarte las manos.

Si usas WordPress, tienes un montón de opciones para la generación de metadatos al crear o editar un mensaje, el más popular es WordPress SEO by Yoast. Joomla y Drupal también tienen un conjunto de plugins y módulos relacionados con la meta. Si no utilizas ninguno de estos, siempre existe la opción de usar un generador de etiquetas meta en línea.

Conclusión

Las etiquetas meta no van a resolver todos tus problemas de accesibilidad y SEO, pero juegan un papel importante en estas áreas.Si eres el dueño de un sitio web, puedes controlar tu rendimiento del sitio web registrándote en Google Webmaster Tools. Una vez registrado, puedes recibir una notificación en caso de que existan errores de rastreo que podrían estar relacionados con el uso incorrecto de las etiquetas meta.

Fuente original del artículo: Sitepoint
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Diseño web dice:

    Me encantó esta guía. Muchas gracias.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder