Metatags SEO y Html. Lo que debes saber

By | Enero 16, 2017

A los programadores les resulta fácil hablar de lo que saben, están acostumbrados a usar palabras como etiquetas, script, funciones, bucle, etc.

Pero para el resto los mortales, personas normales como nosotros; cada vez que leemos un código parece como si estuviéramos intentando descifrar el alfabeto chino.

Html es un lenguaje de programación de marcado, es decir que en realidad no es un lenguaje de programación en si mismo sino que sirve para estructurar y dar forma a los programas.

Es relativamente simple aprender Html. Si no lo haz hecho todavía, te recomiendo que aprendas un poco. Aunque sea los principios basicos.

Las etiquetas metatags o meta etiquetas son útiles para el SEO, es una parte del Html que debes dominar si quieres hacer buen SEO.

Es muy probable que sin saberlo las estés utilizando. Sobre todo si usas algún CMS como wordpress, joomla, drupal o algún otro.

Los metatags son mucho más que sólo la meta descripción. La meta etiqueta que todos conocemos.

Sigue leyendo y aprende a aprovechar los metatags en todo su potencial,

 

¿Que es un meta tag?

La definición que nos da  Google sobre los metatags:

Las Meta etiquetas son una excelente manera que tienen los Webmaster para proporcionar a los motores de búsqueda información sobre sus sitios.  Se pueden utilizar para proporcionar información a todo tipo de sistemas, y cada uno procesará únicamente las etiquetas meta que entienden, ignorando el resto. Las meta etiquetas se insertan en la sección <head> de una página HTML.

Lo que nos dice San Google es muy claro. Los metatags contienen información para los motores de búsqueda o cualquier otro sistema informático que acceda a una pagina o sitio Web.

Es por eso que no son visibles para los usuarios, contienen información exclusivamente para diversos sistemas informáticos automatizados.

Existen varios metatags, cada uno cumple una función especifica en la comunicación entre ordenadores.

Los más comunes y utilizados son:

  • Meta descripción
  • meta robot
  • meta content

Más abajo tienes una lista de todas las meta etiquetas disponibles y su descripción.

Meta tags html y SEO

Ahora bien. La pregunta fundamental que nos hacemos es: ¿Qué influencia tienen las meta etiquetas en el SEO?

En un principio las meta etiquetas eran vitales para posicionar un sitio Web.

Los buscadores mostraban esa información en los resultados de búsqueda y las utilizaban para asignar un ranking.

Pero hoy en día los bots han evolucionado mucho y ya no son tan importantes.

Eso no significa que no sirvan para nada.

Existen decenas de metatags. Pero son pocos los que tienen algún efecto sobre el SEO:

  • Meta descripción: Una descripción de la pagina,
  • Meta robots: Instrucciones para los bots como Googleblot y otros.
  • Title: Técnicamente no es una meta etiqueta. De todas formas la incluimos aquí por su importancia SEO.

Por otro lado, hay muchos metatags que pueden afectar el rendimiento SEO aunque estén correctamente implementadas.

Demasiadas meta etiquetas pueden perjudicar tu SEO. Utiliza solo las que consideras necesarias y estudia en profundidad cada una antes de implementarla.

Sintaxis HTML

Una meta etiqueta se ve así:

<meta name="description" content="La descripcion de la pagina de 70 - 150 caracteres">

Y lo normal es agrupar todas las meta etiquetas juntas:


<head>
<meta charset="UTF-8">
<meta name="description" content="Aqui la descricpion">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Como vemos, la sintaxis es la siguiente:


<meta name"tipo de etiqueta" content="datos">

Dependiendo del tipo de etiqueta serán los datos ingresados en content.

Vemos también que los metatags no tienen etiqueta de cierre “</>” como si la tienen la mayoría de las etiquetas html.

Los metatags terminan en “>” si el documento es html o bien “/>” para xml.

A continuación, una lista detallada de todas las meta etiquetas existentes hoy en día.

Metatags útiles para SEO

Meta descripción

<meta name="description" content="Aquí la descripción de la pagina">

Una descripción de la pagina de entre 70 y 150 caracteres incluidos los espacios.

Esta meta etiqueta no puede faltar en ninguna pagina o sitio Web con aspiraciones serias. Es fundamental para el SEO.

Titulo

<title>Titulo de la pagina</title>
<meta name="title" content="Titulo de la pagina">

La etiqueta title es obligatoria. De no estar se producirá un error.

Aunque técnicamente no es una meta etiqueta, la incluimos aquí por su importancia en el SEO.

Suele ubicarse junto con la meta descripción.

La meta etiqueta title es opcional y se utiliza para aparecer en los buscadores con un titulo diferente al de la etiqueta title.

Meta tag para bots

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

Las meta etiquetas robots tienen la misma finalidad que los archivos robots.txt. Pueden controlar el rastreo y la indexacion de Googlebot y el resto de los bots de buscadores.

Los valores disponibles permiten especificar cuando una pagina debe dejar de ser rastreada, bloquear la indexacion de imágenes, desactivar las traducciones o bloquear completamente a los bots.

Aqui una guia completa sobre los meta robots

Metatags reconocidas por Google

Ademas de todas las anteriores:

Desactivar cuadro de busqueda en los resultados de Google

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

Esta metaetiqueta desactiva el cuadro de búsqueda que puede aparecer en las paginas de los resultados de búsqueda, al igual que ciertos enlaces que se muestran asociados a la caja de búsqueda.

Desactivar traducción de Google

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

Pueden darse situaciones en las que no deseamos que Google ofrezca la traducción de una pagina. En esos casos se utiliza esta meta etiqueta.

Verificar propiedad en Search Console

<meta name="google-site-verification" content="..." />

Etiqueta meta para verificar propiedad en Google Search Console.

Es uno de los métodos alternativos de hacerlo.

Definir tipo de contenido y conjunto de caracteres

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Otra meta etiqueta imprescindible. Define el grupo de caracteres que se utiliza en la pagina.
El valor recomendado es Unicode/UTF-8.

Con html5 esta meta etiqueta puede escribirse de la siguiente forma:

<meta charset="utf-8" /> 

Redirección o actualización

<meta http-equiv="refresh" content="300">

Esta sirve para actualizar una pagina, lo mismo que hace la tecla F5.

Se puede especificar un tiempo de espera antes de que se actualice

Si agregamos una URL, estaremos creando una redirección mediante este metatag.

<META http-equiv="refresh" content="5;http://www.example.com/newpage">

ATENCIÓN: Este metatag debe usarse con precaución. No es compatible con todos los navegadores y puede confundir al usuario.
Siempre que sea posible es conveniente hacer redirecciones 301 desde el servidor.

Otras meta etiquetas:

Open graph – Facebook

<meta property="og:title" content="El mejor sitio web del mundo">
<meta property="og:image" content="imagen enlazada">
<meta property="og:description" content="descripcion aqui">

Las meta etiquetas Open Graph son utilizadas por Facebook.

Estas son solo algunas, para más información consulta la documentación.

También existe algo similar para Twitter y para Google+.

Puedes implementar estas meta etiquetas si quieres optimizar tu Web para estas redes sociales

Para aplicaciones

<meta name="application-name" content=”nombre de la app”>

Define una aplicación móvil especificando su nombre o titulo.

Responsive

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

Metatag importante para que la pagina se vea bien en cualquier dispositivo.

Indica al navegador las dimensiones de la pagina ideales para cada dispositivo.

Hoja de estilos CSS

<meta http-equiv="default-style" content="the document's preferred stylesheet">

Especifica la hoja de estilos CSS definida para la pagina.

Puede resultar útil cuando existe algún conflicto entre archivos de CSS, aunque raramente se utiliza.

Metatags de Copyright

<meta name="copyright" content="[email protected] Sebastopolys-Derechos reservados">
<meta name="dcterms.rightsHolder" content="Dueño de los derechos de copyright">
<meta name="dcterms.rights" content="Declaracion de copyright">
<meta name="dcterms.dateCopyrighted" content="año de declaracion de copyright">

 

Más etiquetas meta

Hay muchísimas meta etiquetas más. Algunas son realmente ridículas y no sirven para nada. Otras directamente son falsas.

Antes de usar una metaetiqueta desconocida, averigua si son reales y si realmente sirven para algo.

Aquí van algunas que pueden llegar a servirte.

O tal vez quieras conocerlas solo para satisfacer tu curiosidad.

Información de contacto

<meta name="contact" content="[email protected]">
<meta name="contact" content="[email protected]" />
<meta name="contact" content="[email protected]">
<meta name="designer" content="">
<meta name="contactName"CONTENT="Mr. E. Xample">
<meta name="contactOrganization" CONTENT="Company XYZ inc.">
<meta name="contactStreetAddress1"CONTENT="Mainstreet 123">
<meta name="contactZipcode"CONTENT="98979">
<meta name="contactCity"CONTENT="New York">
<meta name="contactCountry"CONTENT="USA">
<meta name="contactPhoneNumber" CONTENT="+1 123 6382824">
<meta name="contactFaxNumber"CONTENT="+1 123 5566779">
<meta name="contactNetworkAddress"CONTENT="[email protected]">
<meta name="company" content="[la empresa]" />

Descripción corta

<meta name="abstract" content="este es el mejor sitio web del mundo.. jeje.">
meta name="subject" CONTENT="Otra descripción corta">

Lenguaje

<meta name="language" content="Spanish">

Actualización

<meta name="revisit-after" content="7 days">
<meta name="revisit-after" content="1 month">

Muchos Webmasters utilizan este metatag a pesar de que poco se conoce sobre su utilidad.

En teoría le indica a los crawlers bots que deben volver a visitar la pagina después de un tiempo especifico.

Expiracion

meta name="expires" content="tue, 01 Jun 2010">

Uso de CMS o software

<meta name=”generator” content=”WordPRess”>

Cache

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Cookies

<meta http-equiv="Set-Cookie" content="ACCOUNT=9983373; path=/; expires=Thursday, 20-May-09 00:15:00 GMT" />

 

 

Recuerda que no todas las metaetiquetas son útiles para SEO, ya hasta algunas pueden ser contraproducentes si están mal implementadas.

Además, hay que tener en cuenta que existe una amplia variedad de metatags, cada uno con su función especifica.

El uso abusivo de los metatags pueden ser motivo de una penalización por parte de los motores de búsqueda.

Usa sólo las que consideres necesarias.

Lista de todas las meta etiquetas reales que existen

Save

Save

Save

Save

Save

Save

Save

Save

Save