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 lenguage 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>Titulo de la pagina</title>
La siguiente meta etiqueta aunque es obsoleta o erronea, es comunmente usada y no se recomienda incluirla ya que ni siquiera esta formalmente definida en el estandar.
<meta name="title" content="Titulo de la pagina" />
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 descripcion" />
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.
- noimageindex – Previene que la página aparezca como enlace de una imagen indexada en Google.
- nocache – Sinónimo de “noarchive“.
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.
Cabe mencionar que dependerá de la cooperación del rastreador sí toma los parametros indicados en esta etiqueta, 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.
Acá puedes ver cómo preparar un fichero robots.txt adaptado para tu instalación de WordPress: Archivo robots.txt para aumentar la seguridad de tu WordPress
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.
<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.
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”.
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"/> <meta name="robots" content="index,follow" /> <link rel="canonical" href="http://mydomain.com/pagina" /> <link rel="publisher" href="https://plus.google.com/+myGplusPage/posts"/> <!-- 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>
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="shortcut icon" href="http://mydomain.com/favicon.ico" />
Hoy en día el uso de los favicons ha evolucionado y se ha ampliado para adapatarse a las diversas plataformas y aplicaciones disponibles. Para información más completa te recomiendo seguir este artículo en forma de cuestionario.
- 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.
- 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 prevenir que Google tradusca tu página al idioma del usuario.
<meta name="google" content="notranslate" />
- 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" />
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.
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" />
https://qrokes.com/seo/seo-etiquetas-meta-metatags/
