SEO: Etiquetas META (Metatags)


Los metatags son etiquetas HTML que propiamente no están dirigidas a mostrarse a los usuarios pero son de gran utilidad para que los navegadores, buscadores y demás aplicaciones obtengan información de nuestro sitio. Todos estos elementos localizados en el <head> de tu sitio web como <meta> y <link> pueden ser considerados como meta datos, pero esto no significa que todos ellos sean relevantes para tu SEO.

A continuación describiré las etiquetas más usadas actualmente como buenas prácticas para un buen posicionamiento en buscadores (SEO).

Content type

Indica el tipo de codificación usada en el código fuente, debe estar lo más cerca del inicio del <head>. Esta información es incluida en la cabecera HTTP de la respuesta del servidor.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

La etiqueta anterior es obsoleta en HTML5, por lo que deberá sustituirse por el atributo charset de la siguiente manera:

<meta charset="UTF-8" />

Language

Indica el idioma del contenido de la página.

<meta http-equiv="Content-Language" content="es-mx" />

La etiqueta anterior ya no debe ser utilizada, el lenguaje o idioma del contenido del sitio deberá ser indicado en el atributo lang de la etiqueta html de la siguiente manera:

<html lang="es-MX">

Title

El título de las páginas es uno de los elementos más importantes para un buen posicionamiento en buscadores, debemos dedicar tiempo a decidir el contenido de estos títulos.

  • Crea títulos únicos y precisos para cada página y que sean descriptivos.
  • Deberíamos incluir las palabras clave más importantes.
  • Deben ser breves, alrededor de 55 caracteres es lo recomendado.
  • Recuerda que el titulo de la página en la mayoría de los casos aparece en los resultados de la búsqueda.
<title>Título de la página</title>

La siguiente meta etiqueta aunque es obsoleta o errónea, es comúnmente usada y no se recomienda incluirla ya que ni siquiera esta formalmente definida en el estándar.

<meta name="title" content="Título de la página" />

Description

En la mayoría de los casos el texto de la descripción es utilizado para mostrarse en los resultados de las búsquedas, es importante darle una redacción con contenido suficiente para que el usuario pueda decidir si nuestra página le es útil. Anteriormente se recomendaba que este texto no rebasara los 160 caracteres, pero hoy en día Google ha anunciado que en ocasiones pudieran tomar y mostrar hasta 320 caracteres de la “meta descripción” del sitio.

<meta name="description" content="Texto descripción" />

Se recomienda ampliamente que cada página tenga su propia descripción y sea propia para cada una de ellas.

Keyword

En la mayoría de los casos, los buscadores no toman en cuenta esta información – ¡PARA NADA! – incluir esta información es ya una práctica meramente por tradición. Hoy en día los buscadores son los suficientemente inteligentes para tomar esta información del contenido que se visualiza en nuestro sitio.

<meta name="keywords" content="Palabras clave separadas por coma"/>

No se recomienda el uso de esta meta etiqueta. Incluso Bing puede considerarlo como SPAM si determina que has intentado sobre-optimizar su uso.

Sin embargo, el tema de las palabras claves es una parte fundamental a la hora de posicionar correctamente nuestro sitio. Las palabras utilizadas en el título, descripción y contenido del sitio deben estar estratégicamente colocadas a manera de que el buscador indexe nuestro sitio de la manera que mejor nos conviene.

En el contenido es muy importante como utilizamos los marcadores <h1>…<h6>, esto indica al spider la importancia que tiene cada uno de estos textos, además de tomar relevancia de acuerdo a la distancia del inicio de la página donde son más rápidamente visibles para el usuario. Esto, sumado a la cantidad de veces que se encuentra repetida cada palabra entre muchos otros factores, son tomados en cuenta para determinar  las palabras claves a indexar por el propio buscador.

Robots

La etiqueta meta robots es de suma importancia y va dirigida únicamente a los motores de búsqueda, cabe mencionar que si omitimos esta etiqueta por default el buscador indexara y seguirá todos los enlaces de nuestro sitio (index,follow).

<meta name="robots" content="index,follow" />
  • index/noindex – Atributo para indicar si debe o no indexar la página en la base de datos del buscador.
  • follow/nofollow – Atributo para decirle al buscador si debe o no seguir los enlaces contenidos en la página.
  • noarchive – Previene que el buscador guarde en cache la página.
  • nosnippet – No se mostrará ninguna descripción en los resultados de búsqueda.
  • nocache – Sinónimo de “noarchive“.

Válidas únicamente para Google y Bing:

  • max-snippet:20 – Número máximo de caracteres para usar y formar el fragmento mostrado en las búsquedas. Un valor de “0” es equivalente a “nosnippet” y “-1” permite a Google elegir la longitud mas adecuada.
  • max-image-preview:standard – Establece el tamaño máximo (none, standard, large) de una vista previa de imagen para la página en los resultados de búsqueda.
  • max-video-preview:10 – Duración máxima en segmentos para los fragmentos de video mostrados en resultados de búsquedas. Un valor “0” para mostrar imagen estática y con “-1” no hay límite.
  • notranslate – No ofrecer una traducción de la página en los resultados de la búsqueda.
  • noimageindex – Previene que la página aparezca como enlace de una imagen indexada en Google.
  • unavailable_after:[fecha/hora] – No mostrar en los resultados de búsqueda después de la fecha y hora indicadas.
  • indexifembedded – (solo Google) Le dice a Google que aún desea que su contenido sea indexado cuando está insertado con iframes o etiquetas HTML similares en páginas externas, incluso cuando la página tiene la etiqueta noindex.

Ejemplo práctico:

<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />

Las siguientes etiquetas son obsoletas y actualmente no tienen ningún uso o importancia:

  • noodp – Con el cierre de DMOZ en marzo del 2017 esta etiqueta ha dejado de ser soportada, por lo tanto ya no se recomienda su uso. Su función era la de bloquear o evitar que los buscadores usaran la descripción de los sitios dados de alta en el directorio DMOZ y la mostrara en los resultados de las busquedas.
  • noydir – Similar al ODP, se refiere al también ya desaparecido (desde 2015) directorio de Yahoo y solo era soportado por ellos.

En el caso de Google es posible añadir directivas para bloquear un rastreador en especifico:

<meta name="AdsBot-Google" content="noindex" />
<meta name="googlebot-news" content="nosnippet" />

Cabe mencionar que dependerá de la cooperación del rastreador sí toma los parametros indicados en esta etiqueta o metatag, por lo que su uso es puramente informativo. Los buscadores de confianza como Google o Yahoo siguen y respetan estas reglas, pero existen algunos bots generalmente creados con intenciones maliciosas que no necesariamente van a obedecerlas.

Además, es importante considerar que esto no va a prevenir la lectura o descarga de la página, ya que el robot deberá ingresar y leer el contenido al menos para detectar el valor de la etiqueta. Es importante diferenciar la meta etiqueta noindex, que indica que la página no debiera ser indexada, y el archivo robots.txt que con la instrucción disallow indica que la página no debe ser leída (no crawl).

Te recomiendo mi artículo sobre robots.txt.

Puedes usar la cabecera HTTP X-Robots-Tag: noindex enviada en la respuesta del servidor para cada URL, todos los valores disponibles son validos y en caso de conflicto se tomará el más restrictivo.

En el caso de Google es posible especificar fragmentos de texto que no deberían ser usados para mostrar en los resultados de la búsqueda.

<p>Mostrar en la busqueda <span data-nosnippet>NO mostrar este texto</span></p>

El atributo HTML data-nosnippet es soportado por los elementos span, div y section.

Mas información: https://developers.google.com/search/reference/robots_meta_tag?hl=es

Canonical URL

Si nuestro sitio genera URL’s dinamicas ya sea por autenticación de usuarios, ordenación de artículos o productos o cualquiera sea el caso, es muy importante señalar la “Canonical URL” para indicar al buscador la dirección – preferida – que debe mostrar en los resultados de búsquedas y así evitar penalizaciones por contenido duplicado.

  • URL’s dinámicas generadas por búsquedas o sesiones de usuario.
  • Blog con secciones o categorias que muestran el mismo contenido.
  • El servidor esta configurado para mostrar el mismo contenido desde el subdominio www o sin el, de igual manera sirve contenido desde HTTP y HTTPS.
  • Artículos o contenido re-publicado en varios dominios.
<link rel="canonical" href="http://www.midominio.com/" />

En otras palabras, la “Canonical URL” es la versión preferida de un conjunto de páginas con contenido idéntico o muy similar.

Facebook y Twitter usan la “Canonical URL” para mostrar las vistas previas de los enlaces compartidos, aun por encima de la URL real. Google también soporta su uso como HTTP Header.

Viewport

Con esta etiqueta podemos controlar las dimensiones como se muestra la página web en un dispositivo. Cuando no se define, la página se mostrará de la misma manera en un dispositivo móvil como se mostraría en una PC de escritorio; con esto le indicamos al navegador como ajustar las dimensiones y el escalado de la página.

La siguiente etiqueta es comúnmente recomendada para páginas optimizadas para dispositivos móviles.

<meta name="viewport" content="width=device-width,initial-scale=1" />

Cabe mencionar que esta etiqueta no debe usarse si el sitio no está optimizado para dispositivos móviles (Responsive Design). Un mal uso de esta etiqueta puede afectar gravemente la experiencia de tus usuarios en cuanto a la manera de visualizar tu sitio, por lo que se recomienda tener precaución al momento de su implementación.

Atributos soportados

  • width – Ancho virtual del dispositivo.
  • device-width – Ancho físico del dispositivo.
  • height – Altura virtual del dispositivo.
  • device-height – Altura física del dispositivo.
  • minimum-scale – Mínima escala de zoom deseada, un valor de 1 significa el tamaño original, es decir “no zoom”.
  • maximum-scale – Máxima escala de zoom permitida, un valor de 1 significa el tamaño original, es decir “no zoom”.
  • initial-scale – Un valor de 1 establece una relación 1:1 entre los pixeles del CSS y los pixeles del dispositivo.
  • user-scalable – Permitir o no al usuario hacer zoom, “yes / no”.

Más información y detalle sobre el uso de esta meta etiqueta en el artículo de Mozilla sobre el Uso de Viewport.

Authorship

Esta función o etiquetas son obsoletas y ya no son soportadas por Google.

<link rel="author" href="https://plus.google.com/+yourprofile"/>
<link rel="publisher" href="https://plus.google.com/yourbrandpage"/>

Solían usarse para ligar tu página o contenido con un determinado perfil rel=author y una página de empresa rel=publisher en Google Plus. Su principal atractivo era esa pequeña foto que aparecía a un lado de los resultados en las búsquedas de Google (SERP).

Actualmente se esta dando paso a otros esquemas para enriquecer la manera en la que los buscadores indexan y muestran el contenido, Knowledge Graph y Datos Estructurados con schema.org (microdata, microformats y RDFa) son algunos recursos que podemos utilizar para marcar nuestro contenido y hacerlo mas entendible para los buscadores.

Ejemplo completo de como luciría la implementación de estas Meta Etiquetas.

<html lang="es-MX" xmlns:fb="http://ogp.me/ns/fb#" prefix="og: http://ogp.me/ns#"/>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Titulo de la página</title>
<meta name="description" content="Descripción de la página"/>
<link rel="canonical" href="http://mydomain.com/pagina" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<!-- OpenGraph metadata-->
<meta property="og:locale" content="es_LA" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Titulo de la página" />
<meta property="og:description" content="Tu descripción" />
<meta property="og:url" content="http://mydomain.com/pagina" />
<meta property="og:site_name" content="Nombre del sitio" />
<meta property="og:image" content="http://mydomain.com/image.png" />
<meta property='fb:admins' content='FB-AppID'/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="Tu descripción"/>
<meta name="twitter:title" content="Titulo de la página"/>
<meta name="twitter:site" content="@Organization"/>
<meta name="twitter:creator" content="@Author"/>
<!-- Favicon -->
<link rel="icon" href="http://mydomain.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="http://mydomain.com/favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://mydomain.com/favicon-180x180.png">
<meta name="msapplication-TileImage" content="http://mydomain.com/favicon-270x270.png">
<!-- Multi-language support -->
<link rel="alternate" href="http://mydomain.com" hreflang="es" />
<link rel="alternate" href="http://mydomain.com/en/" hreflang="en" />
<meta property="og:locale:alternate" content="en_US" />
<!-- Stylesheet CSS & Fonts-->
<!-- Google Analytics Code -->
</head>
<body>
<!-- HTML Code -->
</body>
</html>
view rawmypage.htmlhosted with ❤ by GitHub

Facebook: Open Graph y Twitter Cards

Con estas etiquetas (metatags) podemos personalizar la manera en la que Facebook y Twitter muestran los enlaces cuando son compartidos en cualquiera de estas redes sociales.

Este tema lo cubro a mayor detalle en el siguiente post: Facebook: Open Graph y Twitter Cards

Etiquetas adicionales y útiles

  • Es recomendable el uso de favicons. Con la siguiente línea añadimos esta pequeña imagen al lado del título de la página.
<link rel="icon" href="http://mydomain.com/favicon.ico" sizes="32x32" />

Hoy en día el uso de los favicons ha evolucionado y se ha ampliado para adaptarse a las diversas plataformas y aplicaciones disponibles. Para información más completa te recomiendo seguir este artículo en forma de cuestionario.

Es importante notar que shortcut icon ya no es soportado de acuerdo con la documentación oficial de MDN Mozilla.

  • El uso de hreflang para sitios en multiples idiomas.
<link rel="alternate" hreflang="en" href="http://en.example.com/" />

Por ejemplo, cuando tu sitio tiene distintas versiones para mostrar el contenido en diferentes idiomas. Más información sobre hreflang.

  • La meta etiqueta referrer para conservar el envío de la información de referencia de nuestro sitio, incluso desde HTTPS.
<meta name="referrer" content="origin" />

Es un tema avanzado para análisis de SEO y tiene implicaciones cuando nuestro sitio es servido sobre el protocolo HTTPS. Te recomiendo este artículo para conocer un poco más sobre el tema.

  • Para especificar una imagen en miniatura para una página, puedes añadir una metaetiqueta thumbnail. Las imágenes en miniatura de los resultados de búsqueda son una forma útil de proporcionar a los usuarios más información sobre las URL de tus páginas.
<meta name="thumbnail" content="http://example.com/foo.jpg" />
  • Con la siguiente etiqueta evitamos que skype señale los números telefónicos contenidos en la página.
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
  • Si la página utiliza tecnología AJAX, con esto indicamos al buscador que nuestra página soporta el esquema de rastreo para dicha tecnología.
<meta name="fragment" content="!"/>
  • Te permite redireccionar la página después de un lapso de tiempo. A menos que tengas una muy buena razon para usarla, no se recomienda su uso.
<meta http-equiv="refresh" content="10; url=https://qrokes.com/" />

Por ejemplo, puedes mostrar una página de bienvenida con algún anuncio o noticia e ir a tu página principal después de un periodo de tiempo. Pero existen mejores maneras de hacerlo desde el servidor, como las redirecciones 301 (refresh regresa un código 200).

  • Para verificar tu sitio en la Google Search Console.
<meta name="google-site-verification" content="123456789" />
  • Previene que Google muestre una caja de búsqueda de tu sitio en los resultados.
<meta name="google" content="nositelinkssearchbox" />

Algo como esto:

Google nositelinkssearchbox metatag

Sitios como eBay o Amazon usan esta etiqueta para asegurar que los usuarios hacen las busquedas directamente en su sitio y obtienen una mejor experiencia, ven más productos, anuncios y por consiguiente aumentan sus ventas.

  • Podemos indicarle al navegador algunos dominios donde de manera anticipada podría resolver el DNS para agilizar la navegación o las siguientes acciones del usuario.
<link rel="dns-prefetch" href="https://midominio.com">
  • Le indicamos al navegador si la página cuenta con una versión AMP para mostrar.
<link rel="amphtml" href="https://midominio.com/amp-page.html">

Etiquetas adicionales e inocuas

El siguiente grupo de etiquetas (tags) en la mayoría de los casos son inocuas, es decir, los buscadores no las toman en cuenta, pero por alguna extraña razón es muy común su uso.

<meta name="language" content="es" />
<meta name="revisit-after" content="1 month" />
<meta name="rating" content="General" />
<meta name="author" content="Nombre del autor" />
<meta name="owner" content="Nombre del propietario de la pagina" />

Conclusión sobre el uso de Metatags

El uso de las meta etiquetas o metatags puede ser de gran beneficio para mejorar la manera en la que nuestro sitio es visto e indexado por los buscadores, de igual manera si no son usadas de manera correcta podrian afectar el posicionamiento del sitio e incluso evitar que sea mostrado en los resultados de las busquedas.

En este artículo traté de abarcar la mayoría de las etiquetas comunmente usadas e incluí algunos elementos adicionales útiles en referencia al contenido de la sección <head> de una página, ya que tienen una finalidad similar a los metatags, que es la de proporcionar información adicional que no es mostrada en el contenido visible para el usuario.

Importante tomar en cuenta, estos son los únicos metatags que Google toma en cuenta y entiende.

Más información sobre el uso de las etiquetas meta.


12 respuestas a “SEO: Etiquetas META (Metatags)”

    • Este artículo en especial se actualiza constantemente, al menos 3 o 4 veces por año.
      Según su investigación, ¿Me pudiera dar referencias o argumentos de la importancia de esos meta datos que menciona?
      Hasta donde nosotros sabemos son actualmente y completamente obsoletos.
      Saludos Alfonso!

  1. Me gustaría saber si el uso excesivo de metas es malo para el sitio web, estoy navegando por muchas paginas y veo que en algunas dicen que ciertas son importantes en otras otras y así, pero si muchos en común por ej. Descripción, título, palabras, entre otras… vuelvo a la pregunta, es malo el exceso de metas (no repetidas claro)

    Gracias por taaanta info siempre vengo a este sitio a instruirme (: sigan así!

    • Hola Marcos,
      Cada Meta-Etiqueta cumple una función en específico, no tiene nada de malo usar todas las que consideres necesario siempre y cuando sean usadas correctamente.
      Un ejemplo claro de mal uso, sería incluir una descripción que no tiene nada que ver con el contenido de la página con el fin de manipular a los buscadores. Este tipo de acciones pueden resultar en penalizaciones o un bajo posicionamiento en buscadores.
      Espero haber aclarado tu duda.
      Saludos.

Responder a Richard Larenas Calderón Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *