Meta tags más importantes para el SEO

¿Qué son las meta tags?

Las etiquetas meta son un código HTML que se implementan en la web para dar indicaciones al motor de búsqueda y ayudarle a interpretar el contenido.

Es muy importante usar bien estas etiquetas ya que igual que te pueden ayudar a posicionar, pueden ser la ruina del seo para tu web.

A continuación te dejo las metatags más importantes para marcar la diferencia.

Las Meta Tags más importantes para el SEO

En este artículo te hablo de las principales meta tag que existen en el mundo del SEO.

¿Cuántas hay? ¿Son muchas? ¿Cuál es la más importante? ¿Me adelantas algo? 

Como dice este famoso entrenador de fútbol…

Vamos a ir partido a partido. Metaetiqueta a metaetiqueta.

¡Al lío!

Meta title

¿Recuerdas aquel amigo que era el chivatillo de los profes? 

Si, el que le llevaba los recados para hacer la pelota.

Pues Google hace de profe y la etiqueta title hace de tu amigo. 

Te explico. 

Esta etiqueta es la que tiene como misión decirle a los motores de búsqueda el tema más importante que va a tratar la página a rastrear.  

Pero al igual que hacía aquel colega, en mensaje tiene que ser algo conciso. Por lo que se aconseja no pasar de los 70 caracteres. Si te pasas de este número el resultado en la serp aparecerá cortado, o sea, no se verá entero lo que tratas de transmitir.

No olvides usar la palabra clave en la etiqueta, aquella que quieres posicionar. De forma concisa y que resalte. 

Que se entienda bien de que se trata de un vistazo.

Un ejemplo podría ser…

<title>Agencia SEO FullSeo | Posicionamiento Web de calidad</title>

Como puedes observar, una frase cortita, se entiende y sabes de que trata a la perfección la página. 

Como los buenos chivatos, mensaje corto y contundente. 

Que cuando se lo diga a Google en el odio no tenga que decirle…

Perdona, no te he entendido. 

Meta Description

Al contrario que con otras meta tags seo, esta en concreto no la usa Google para calcular el ranking de resultados de búsqueda. 

Peeeeeero…. 

Si que pueden ser importantes para nuestro ctr (relación que hay entre visualizaciones y clics) ya que aparece justo debajo del meta tittle en la serp.

Y este ctr si es algo que al buscador le pone. Así que, no le quites importancia a la meta name description. 

Muy bien Asier, pero descríbeme esta meta tag de una vez.

Voy.

Por decirlo de manera directa, es una etiqueta html y su función es definir o aclarar de que va cada una de nuestras url. Por lo tanto, ayuda al buscador a saber mejor el contenido que se va a tratar. 

Ejemplo visual.

Hay aplicaciones o herramientas que te ayuda a construir una buena meta description seo. Como por ejemplo semrush o… (añade alguna asier).

¡Vamos a por la siguiente!

Etiquetas Hx: Jerarquía de encabezados

En este caso simplemente te aconsejo tirar de lógica a la hora de estructurar el contenido. 

¿A qué me refiero?

Seguir el orden de h1, h2, h3, h4 es importante, ya que un texto bien organizado gusta tanto a Google como al usuario. 

Por lo tanto, ten presente que solo aparezca un H1 y las subdivisiones que vayan surgiendo las pongas en orden. No puede ser que incluyas antes un h4 que un h2. 

Fácil. 

¡A por la canonical!

Etiqueta canonical

Podemos decir que canonical es una de las más importantes de todas las etiquetas meta.

¿Por qué? 

Te cuento.

Esta meta tag tiene la función de decirle a Google cual es la url original en el caso de que aparezcan urls copiadas o parecidas. Para así aclarar donde queremos que ponga el foco, su atención.

Lo puedes hacer de esta manera.

<link rel=»canonical» href=»https://fullseo.es/» />

En este caso le indicamos que la que queremos que mire como no copiada es fullseo.es

Diremos que la url canónica es la original. 

Y a la copiada o parecida será la canonicalizada. 

Es clave que la uses bien, de lo contrario puede ser que Google opte por dar la originalidad a otra que tu no querías…

Y si eso pasa, mas vale que llames a Houston …

Etiqueta ALT

Cuando miras un artículo, una página, una aplicación o cualquier cosa por internet. 

Además del contenido en texto… ¿Que suele aparecer más como acompañamiento o como elemento principal?

Piensa un poco…

Va, ¿qué dirías?

Exacto, imágenes.

Pues este elemento también es importante, de ahí que hablemos de esta meta tag como algo a tener en cuenta. La etiqueta alt o imágenes de metas.

Como te vengo diciendo, a Google tenemos que ponerle todo sencillo. Y a la hora de posicionar en Google imágenes usaremos la etiqueta ALT. Lo que ayudará al buscador a saber más sobre nuestra imagen en concreto.

Por lo que se antoja clave. 

Aunque sea un texto que el usuario no ve, sí que puede aparecer cuando una imagen no terminar de cargarse o si se usa algún lector de pantalla que te lee en voz alta.

Ejemplo.

<img src=”ejemplo-imagen.jpg” alt=”ESTE ES EL TEXTO ALT” />

Y es que no solo tiene ese peso en oro a la hora de posicionar en Google imágenes, sino que podemos jugar con ellas para introducir la keyword sobre la que estamos trabajando.

Poniendo así más énfasis en ella y que pueda tener más peso a la hora de ser buscada por el usuario.

Como puedes observar, cada etiqueta tiene su cosita. No dejes ninguna porque creas que es menor y pasas de trabajarla.

Todo cuenta.

¡A los robots!

Robots meta tag o Meta robots

Esta meta tag puede ser importante por lo siguiente.

Porque con esta etiqueta puedes tener el control de cómo indexar una página y de cómo mostrarla al usuario en los resultados de búsqueda. 

Normalmente se usa para mandar indicaciones negativas al crawler sobre alguna de tus páginas. Ya que en caso contrario la araña las toma como positivas.

Uf, que lío has montado Asier.

Me explico. 

Si por ejemplo quieres que indexe una página no tienes porqué añadir etiqueta robots, pero en caso contrario sí. 

Las principales (que no todas) acciones que puede hacer con esta etiqueta meta son las siguientes. 

1. Translate – notranslate: Dar la opción o no de traducir la página en cuestión.
2. noimageindex: Las imágenes de la página no serían indexadas
3. Index – noindex:  Podremos decir a los crawler si queremos que indexe o no una página en concreto. Usando noindex diríamos que NO indexe y por lo tanto que en los resultados de búsqueda no aparezca esta opción.
4. Archive – noarchive, El noarchive manda al robot a no almacenar el contenido de la página en la memoria caché interna del propio buscador. El termino archive haría lo contrario. 
5. Snippet – nosnippet: Para que el buscador deje ver solo el título con la descripción o sin ella. 
6. Follow – nofollow: En este caso al encontrarse a la araña y hablar con ella le diría “sigue rastreando los enlaces por favor” o “no sigas rastreando, ya es suficiente por hoy. Usando el follow o nofollow respectivamente.

Ejemplo. 

<Meta name = “robots” content = “noindex” />

Terminamos con otra etiqueta meta y vamos a por la compañera. 

Esto no para.

¡Open Graph, eres la siguiente!

Open Graph

Encontramos en nuestro camino la siguiente etiqueta meta, aunque no esté directamente relacionada con el SEO, mi consejo es que no lo descuides. 

La open graph les transmite a las redes sociales la información que pueden o deben dar al usuario cada vez que nuestro enlace sea compartido. 

Esperemos que sean muchas.

Ya sabes la importancia y el tráfico que podemos conseguir a través de las redes, reforzar nuestra marca en ellas es un factor que te puede dar muchísimo. 

Se implementan de la siguiente manera:

<meta property=”og:type” content=”website” />

<meta property=”og:title” content=”título de tu página o tu post” />

<meta property=”og:description” content=”descripción del contenido de la página” />

<meta property=”og:image” content=”enlace al archive de la imagen” />

<meta property=”og:url” content=”permalink” />

Seguramente conozcas muy pocas personas que no estén en alguna de las grandes redes sociales. Y tu cliente ideal no iba a ser menos, por lo que cuidar el contenido que le das es importante. 

Ya sabes, el poder de las redes es alto.

Como cuando hablamos de la meta refresh direct…Ups, eso ya es del siguiente apartado. 

¡Vente, te lo cuento ya!

Meta refresh redirect 

En la vida hay muchas cosas que mejor no usar, seguro que se te vienen algunas a la mente. 

• El coche de papá para ir de fiesta.
• El portátil de tu hermano sin avisar.
• El taladro a las 2 de la mañana.
• Preservativos de segunda mano
• Meta equiquetas de redireccionamiento.

Me centro en la última. 

En primer lugar … ¿de qué se trata? 

Simplemente hace la función de decirle al navegador que redirija al usuario a otra url distinta pasado un tiempo. Aunque Google lo respete, no es muy aceptado.

¿Por qué?

• No es compatible con cualquier navegador. 
• Puede confundir por momentos al usuario, así como plantear problemas de seguridad. 
• Las páginas se analizan antes de que surja la url de destino, lo que puede llevar un tiempecito que no es agradable.

¿Qué puedes hacer?

• A no ser que sea muy necesario, no uses esta etiqueta.
• En su lugar, mejor usar una redirección 301  .

Si realmente lo necesitas y no te queda más remedio, te cuento cómo lo puedes hacer.

Pega el código a continuación en la <head> sección de tu página:

<meta http-equiv = "refresh" content = "5; url =" https://dominio.com/ ">

El atributo de contenido especifica el tiempo de retraso en segundos. El atributo URL especifica la URL de redireccionamiento.

Recuerda, como aquella vez que le quitaste el coche a tu padre para ir de fiesta, ese día no te quedaba otra. Era o eso o nada. 

Pues con esta metaetiqueta, igual. 

Meta viewport

¿No te pasa eso de estar viendo una página o app por el móvil y al verla por pc parece un poco cutre?

Con la meta name viewport puedes hacerle llegar al navegador como quieres que se represente la página en los diferentes tamaños que elijas. 

Tablet, móvil, pc…

Con la viewport meta estamos diciendo a Google, por ejemplo, que nuestra página es compatible con móviles o tabletas. Algo que el buscador valora positivamente a la hora de colocar tu web más arriba en los resultados de búsqueda. 

Suele pasar que cuando una página en versión pc se abre en un teléfono parece algo de poca calidad, incluso dificultando la lectura o experiencia en ella. 

Por tanto, hay serias posibilidades de que el usuario abandone el sitio web más rápido que el correcaminos cuando veía al coyote.

¡Mec mec!

¿Qué puedes hacer con esta etiqueta meta?

• Úsala de ventana gráfica en todas las páginas web.
• A no ser que estés muy seguro de lo que haces, usa la etiqueta “estádar”
• Pega el código <head> después en la sección de su página web.

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

Un detalle para tener en cuenta:

El atributo de contenido no tiene que establecerse en width = device-width, initial-scale = 1.0 , pero sí que es la implementación más común y la correcta para la mayoría de las páginas.

Continuemos pues.

Codificación de caracteres (Meta charset)

En este caso hablamos de la letra, de la fuente. 

Si en el header (cabecera) del archivo http no dejamos marcada la fuente, lo haremos usando html. Dejando de lado pequeños problemas que puedan surgir, como que la ñ o las tildes no aparezcan en su correcto uso. 

¿Qué meta tag usaremos?

<meta charset="utf-8"/>

También es interesante este apartado en caso de que un navegador entre a los archivos html desde el disco duro y no lo haga o reciba por http. 

Seguimos con las instrucciones a dar a los robots. 

Instrucciones para los robots de búsqueda

Las meta tags tienen diferentes funciones, pero una de las más importantes es darle instrucciones a los crawler (robots o arañas) para la indexación de nuestra página. 

¿Cómo lograrlo?

Con la etiqueta meta “robots”. 

A continuación, te cuento las meta para estipular si una página puede ser indexada y por tanto aparecer en los buscadores. Metadatos claves para el SEO. 

Index

Con esta indicación estamos permitiendo al robot indexar nuestra página html.

No hace falta que la añadas ya que es la predeterminada. Si no tiene ninguna meta tag que le diga lo contrario, se indexará sin necesidad de poner esta.

Quedaría, tal que así:

 <meta name="robots" content="index"/>

Noindex

¡Ojo!

Solo usar si pretendemos que una página no sea añadida en el índice, ya que, este meta tag le dice a Google lo que no debe transferir a su base de datos.

Quedaría así.  

 <meta name="robots" content="noindex"/>

Datos para tener presentes:

• Cuando uses la palabra “robots” le estás hablando a todos los buscadores, 
• Si solo queremos dirigirnos a un buscador, lo puedes hacer con un atributo opcional como puede ser “googlebot”.
• Recuerda que “noindex” es para que no indexe la página en cuestión. La que nosotros le decimos.

Follow

Normalmente, los motores de búsqueda pasarán por los enlaces de la página html en cuestión. En caso de que no se lo niegues, claro.

Esto, aún sin ser necesario, puede ser incluido en una metaetiqueta.

Quedando de la siguiente manera.

<meta name="robots" content="follow"/>

Nofollow

Para que un robot de búsqueda no pase por algunas subpáginas que nosotros decidimos, puedes usar el “nofollow” de la siguiente manera.

<meta name="robots" content="nofollow"/>

En este caso el robot pasará de largo por los enlaces, pero no lo hará con el contenido. Que si lo almacena en la base de datos. 

Te en cuenta lo siguiente.

Los meta tags Index/Noindex y Follow/Nofollow se pueden usar solos o combinados. 

Por ejemplo.

• En caso de que quieras que una página sea indexada pero que los link pasen desapercibidos.
• También podrías dejar que haga las dos acciones, o ninguna si así lo prefieres. 

Así:

<meta name="robots" content="index,nofollow" />

<meta name="robots" content="index,follow" />

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

El nofollow no pasa fuerza a la url que apunta pero sí que la perdemos nosotros. El linkjuice se pierde en la nada. Para que no perdamos nosotros ese linkjuice se tendrían que ofuscar enlaces en vez de ponerlos en nofollow. De hecho, cada vez google hace menos casos a los enlaces nofollow.

Language Meta Tags

Otra de las meta tag seo de las que voy a hablarte es la de lenguaje(hreflag)

Pero Asier. ¿es importante?

Si y no. 

¿Cuándo lo sería?

 En caso de que tu web se dirija a mercados diferentes y optes por varias lenguas y traducciones.

¿Cuándo no? 

En caso de que lo anterior no se cumpla.

Evitarás así, al decirle que tu web está en varios idiomas, que el buscador considere como contenido duplicado esas traducciones. 

Algo que te llevaría a penalización, si o si.

Esto podemos hacerlo de una manera sencilla por medio de plugins para crear una web con varios idiomas. 

El más popular es XPML de WordPress, el cual te aconsejo. 

Geo Meta Tags

Durante un tiempo se estuvo usando esta meta tag seo para decirle a Google que determinara la localización de la web.

Pero en 2017 desmintieron que tuvieran en cuenta esto para ello.

Ahora, para concretar tu web en una zona o país lo puedes hacer mediante la herramienta de Google search console, en su apartado segmentación internacional.

Identificará las etiquetas hreflang y listo.

Fácil y rápido.

Rating Tag

¿Cuántas veces al día ves debajo de alguna web o producto las estrellitas de valoración?

¿100? ¿1000? ¿100000000?

Esta etiqueta es la encargada de mostrar dichas estrellitas, las que nos muestra Google en los resultados de búsqueda. 

Esta es una de las meta etiquetas que más me gustan y que suelo usar siempre en mi blog, ayuda mucho a destacar el resultado en la SERP, lo cual mejora el ctr. 

Lo puedes hacer a través del siguiente plugin. 

KK Star Rating

Date Tag

Con la date tag aparecerá en los resultados de búsqueda la fecha en la que fue creada o subida la página. 

Si, si tienes una ecommerce quizás te interese menos esta etiqueta meta html que un libro manual para hacer punto de cruz.

Pero si tienes un blog si que te puede ser útil, ya que la fecha de la publicación es importante para el usuario.

Si creaste tu web con WordPress te aconsejo “de todas todas” usa el plugin yoast seo para esta función. 

Autor (author) y copyright

Concluyo este artículo con un 2×1.

Dos etiquetas meta que puedes usar, pero que no son (por decirlo de alguna manera) obligatorias. Con ellas estaremos poniendo quién fue el diseñador de una página y por otro lado el propietario de los derechos del código fuente de una página html.

He de decirte que…

Las etiquetas de autor son generadas de manera automática en algunos sistemas de contenido (CMS), nombrando así a la persona que trabajó en dicha página en última estancia.

Así, los administradores podrán sacar fácilmente del directorio quién es el encargado de gestionar la página.

<meta name="author" content="Nombre del autor" />

<meta name="copyright" content="Propietario del copyright" />

Meta tag despedida

Incluyendo esta etiqueta meta…nada, es broma. Hemos llegado al final, como diría porky de los Looney tunes…

Esto es to, esto es to , esto es todo amig@s.  ?

Espero que te sea útil toda esta información. No olvides que si te surge alguna pequeña duda o te apetece comentar algo te leo y contesto en menos de 48 horas. 

Estaré encantado de hacerlo.

¡Hasta la siguiente!