Seleccionar página

Lograr estar en los primeros puestos en Google es algo que muchos webmasters buscan con mucha desazón, como los conquistadores buscaban desesperados la legendaria ciudad de El Dorado. En esto del posicionamiento orientado a buscadores no hay nadie que pueda garantizar que vayas a estar el primero, y si alguien te lo garantiza mal empezamos. Sin embargo hay innumerables técnicas que te pueden ayudar a colocarte en los primeros puestos, a mejorar tu visibilidad en los buscadores y llegar a más personas. Hoy vamos a explicar como aportar nuestro granito de arena a la estrategia SEO de nuestra página a través de las etiquetas meta de HTML5, también conocidas como metadatos.

¿Qué son los metadatos?

En el campo de la informática los metadatos son un conjunto de etiquetas que contienen información acerca del documento web sobre el que trabaja, siendo capaz de analizarlo y clasificar su contenido. Esto facilita la labor a los buscadores y beneficia que tu página sea bien vista por el señor Google, y se anime a subirte unos puestos en el ranking del search. Estas metaetiquetas van situadas en la cabecera del documento web.

metadatos

Para este propósito vamos a usar las metatags que están disponibles en HTML5. Estas etiquetas son las principales que toda página debería poseer para contribuir a lo que Google denomina ‘web semántica’, algo por lo que tanto lucha y aboga.

Etiqueta meta description: Descripción

Esta metatag va a servir para describir de qué va nuestro sitio, su temática, objetivos…. Es uno de los metadatos fundamentales, pues es lo que va a aparecer en los resultados de las búsquedas, así que conviene dedicarle algún tiempo en redactarla correctamente. Para que la descripción esté lo más optimizada posible su longitud debe tener más de 50 caracteres y no más de 156.

Su sintaxis correcta sería la siguiente:

<meta name=”description” content=”Introduce aquí la descripción de tu sitio web” />

Etiqueta title: Título

Técnicamente no es una metaetiqueta aunque suele utilizarse junto a las demás. Su contenido es lo que suele mostrarse en la parte superior de los navegadores y en los títulos de los resultados de búsqueda.

<title>Aquí va el título de tu página</title>

Etiqueta meta keywords: Palabras clave

Con esta metaetiqueta declaramos cuales van a ser las palabras clave de nuestra página. Antiguamente esto funcionaba muy bien y era realmente útil, pero en la comunidad informática ha perdido fuerza desde la aparición de Matt Cutts en los medios declarando lo siguiente:

Google uses over two hundred signals in our web search rankings, but the keywords meta tag is not currently one of them, and I don’t believe it will be.

Matt Cutts es el responsable del área anti-spam de Google, departamento que se encarga de que los resultados del buscador de Google se ajuste el máximo posible a lo que demandan los usuarios. Con sus palabras deja claro que esta metaetiqueta ha perdido toda la importancia que tenía antaño.

Si aún así quieres usarla, su sintaxis correcta sería la siguiente:

<meta name=”keywords” content=”Introduce aquí las palabras clave de tu sitio” />

Etiqueta meta robots: Indexación y Rastreo

Esta metatag va a servir para determinar el comportamiento de nuestra página ante los distintos motores de búsqueda y establecer ciertas reglas o normas de rastreo. La meta ‘robots’ es para todos los motores de búsqueda y la meta ‘googlebot’ es específica para el robot de Google. Admiten varios valores aunque los que se establecen por defecto son “index,follow” que es lo mismo que all y no haría falta declararlo. Se pueden poner varios valores separados por comas. El listado completo de los valores son:

  • noindex : la página no se indexará
  • nofollow : los robots no seguirán los enlaces de la página
  • noarchive : no se muestra el enlace de la página en la caché
  • noodp : no se muestra la descripción alternativa de directorios ODP/DMOZ
  • nosnipet : en los resultados de búsqueda no se mostrará cierto fragmento
  • noimageindex : no hacer que tu página se referencie a una imagen mostrada por los resultados de los buscadores
  • unavailable_after:[date] : detener el rastreo e indexación de tu página a cierta fecha y hora
  • none : es igual a noindex,nofollow

Un ejemplo de su sintaxis correcta sería la siguiente:

<meta name=”robots” content=”noindex,nofollow” />

Etiqueta meta charset: Codificación de caracteres

En el conjunto de los metadatos seguramente sea uno de los más importantes. A través de esta metatag definimos el atributo del conjunto de caracteres para que no se interprete de manera incorrecta y veamos en nuestra web la palabra p&a¡gina en vez de página, o cosas raras como esa. Yo siempre recomiendo UTF-8 como el estándar a seguir.

Si usas HTML5 su sintaxis correcta sería la siguiente:

<meta name=”encoding” charset=”utf-8″ />

Etiqueta meta generator: Herramienta

Es una manera de decirle a los motores de búsqueda como está construida nuestra página, ya sea mediante un CMS, framework,WordPress…. Si es un desarrollo a medida puro y duro no debemos especificar nada. No es de los metadatos más importantes.

Su sintaxis correcta sería la siguiente:

<meta name=”generator” content=”Joomla 2.5″ />

Etiqueta meta site-verification: Verificación del Sitio

Una de las múltiples maneras que hay para demostrarle a Google que este sitio es tuyo y verificarlo correctamente es mediante el uso de estas metiquetas. Tendrás que hacer uso de tu cuenta de Google Webmasters Tools para realizarlo de manera correcta. Bajo mi punto de vista es una de las más útiles.

Su sintaxis correcta sería la siguiente:

<meta name=”google-site-verification” content=”Aquí irían los datos proporcionados por webmasters tools ” />

Etiqueta meta notranslate: Traducción

Es una manera de evitar esas traducciones que Google ofrece a ciertos usuarios de idioma distinto al tuyo. Si prefieres que tu web no se traduzca usa esta metatag.

Su sintaxis correcta sería la siguiente:

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

Etiqueta meta nositelinks: Cuadros de Búsqueda

Algunas veces Google muestra cuadros de búsqueda específicos cuando los usuarios hacen consultas de búsqueda de tu sitio. Para prevenir esto podemos usar esta metaetiqueta.

Su sintaxis correcta sería la siguiente:

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

Etiqueta meta author: Autor del Sitio

Sirve para identificar correctamente el autor del sitio web. Su uso es muy importante y solo debe haber una metatag como ésta en la página.

Su sintaxis correcta sería la siguiente:

<meta name=”author” content=”Nombre del autor del sitio web” />

Etiquetas meta http-equiv: Interacción con el servidor

Son etiquetas diferentes a las que hemos venido relatando anteriormente. Se les conoce como directivas pragma y sirven para realizar conexiones http e interactuar con el servidor. Algunas de las más usadas son:

  • http-equiv=”content-type” : para definir el conjunto de caracteres, aunque para HTML5 es recomendable usar el meta charset que hemos visto antes.
  • http-equiv=”default-style” : sirve para especificar la hoja de estilos por defecto
  • http-equiv=”refresh” : para redireccionar nuestra página a cierta URL tras un periodo de tiempo que especifiquemos. El estándar W3C no recomienda su uso. En lugar se deben hacer redireccionamientos 301 a través del servidor.
  • http-equiv=”X-UA-Compatible” : para indicar compatibilidades con distintos navegadores

Ejemplos de su sintaxis correcta serían las siguientes:

<meta http-equiv=”refresh” content=”30;URL=”url-destino” /> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />

Etiqueta meta viewport: Responsive Design

Si tu sitio web usa un diseño adaptado a móviles y tabletas con esta metaetiqueta podemos proporcionar información de cómo debe verse en cada dispositivo. Muy útil si usas frameworks tipo Bootstrap.

Un ejemplo de su sintaxis correcta sería la siguiente:

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

Etiquetas meta del estándard Dublin Core

El conjunto de metadatos Dublin Core es uno de los estándares más extendidos en la recuperación de la información de la web, y aunque inicialmente se implementó en el ámbito bibliotecario y documental, cada vez es más usado también en lenguajes como HTML, XML… No voy a hablar demasiado del tema porque tampoco sé demasiado. Lo que quiero dejar claro es que hay que saber que existen, que son útiles y que es conveniente usarlas en tu página web.

Algunos ejemplos de estas metaetiquetas serían:

<meta name=”DC.title” content=”Metadatos Dublin Core” /> <meta name=”DC.creator” content=”Juan Manuel Benítez Jiménez” /> <meta name=”DC.description” content=”Descripción de qué es y como funciona el estándard Dublin Core” />

Metaetiquetas OpenGraph de Facebook

Con estos metadatos mostrarás mucha más información que con un simple enlace: el titulo del sitio, su url, una imagen personalizada…. Úsalas para crear una marca de profesionalismo al difundir tus posts en Facebook.
Ejemplos generales de las metatags de Facebook:

<meta property=”og:title” content=”Tu Título” /> <meta property=”og:description” content=”La Descripcion”/> <meta property=”og:type” content=”website” /> <meta property=”og:url” content=”aquí va tu web” /> <meta property=”og:image” content=”la url donde está tu imagen” /> <meta property=”og:site_name” content=”tu sitio web” />

Metaetiquetas Twitter Cards

Lo mismo ocurre en Twitter, puedes personalizar la forma de presentar tus artículos con parámetros muy parecidos a los de Facebook pero con algunas diferencias. Tienes que ingresar en https://cards-dev.twitter.com/validator y pedir a Twitter que te lo valide correctamente.

Ejemplo personal de las metatags de Twitter:

<meta name=”twitter:card” content=”summary” /> <meta name=”twitter:site” content=”@juanmabenitez82″ /> <meta name=”twitter:title” content=”Vamos a aprender a usar los metadatos en HTML5″ /> <meta name=”twitter:description” content=”Explicación del uso de metadatos” /> <meta name=”twitter:image” content=”https://www.juanmabenitez.com/8825505054440.jpg” /> <meta name=”twitter:url” content=”https://www.juanmabenitez.com” />

Conclusiones

Los metadatos son un conjunto de atributos imprescindibles para mejorar tu relación con los motores de búsqueda, optimizar tu perfil en las redes sociales y sobre todo, mantener contento al gigante Google. Hay que dedicarle el tiempo suficiente a tu página web para mejorar este apartado, y prestarle toda la importancia que se merece.

Si aún no estás del todo convencido, aquí te enlazo un breve vídeo de Matt Cutts donde trata este tema y deja claro la posición de Google al respecto.

Título
Aprende a usar los metadatos de HTML5
Título
Aprende a usar los metadatos de HTML5
Descripción
Uso y funcionamiento de los metadatos de HTML5 para mejorar el posicionamiento de tu página web. Aprende a utilizar las etiquetas meta en la cabecera HTML.
Autor

Pin It on Pinterest

Share This