• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo incluir Meta Tags en tu sitio web y para redes sociales

metatags

Las etiquetas meta o elementos meta (también conocidas por su nombre en inglés, metatags o meta tags) son etiquetas HTML que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.

Cuando un motor de búsqueda indexa tu sitio web recopila toda esta información mostrando todos los datos obtenidos. Los Meta Tags son importantes para el posicionamiento SEO pero lo es más el contenido que tenga tu sitio web.

El aspecto de los Meta Tags es similar a este código:

<meta name="nombre de la etiqueta" content="contenido de la etiqueta">

Hay muchos Meta Tags pero vamos a explicar los más importantes en forma de lista:

  • Etiqueta Meta Title. El título de la página tiene una etiqueta de marcado propia, es uno de los más importantes, y tiene el siguiente formato:

    <title>Título de la página</title>
    
  • Etiqueta Meta Description. Se utiliza para describir brevemente el contenido de la página, y pese a que el texto no es visible en el navegador, lo utilizan los buscadores como resumen en sus páginas de resultados. Ofrecer una buena descripción es muy importante, pero no pongáis tantas palabras claves aquí porque no se tendrán en cuenta. Tiene el siguiente formato:

    <meta name="description" content="Aquí va la meta descripción de la página.">
    
  • Etiqueta Meta Keywords. Sirven para resumir el contenido de un documento en base a unas cuantas palabras clave. Este metadato carece de importancia en la actualidad para los grandes buscadores, es decir, carece de interés para tu posicionamiento. Ya lo avisó Google en el año 2009 en este enlace. No se deberían usar más de 5 u 8 palabras clave. Su formato es el siguiente:

    <meta name="keywords" content="palabra1, palabra2, palabra3, palabra4">
    
  • Etiqueta Meta Robots. Dependiendo de la configuración que utilices, puedes autorizar o no el rastreo e indexación de tu página por parte del buscador. Se utiliza como alternativa al archivo robots.txt. Los valores pueden ser Index, Follow (permite la indexación y rastreo de la página y es el valor por defecto), NoIndex, Follow (evita la indexación pero permite el rastreo, es la configuración ideal cuando no quieres que una página aparezca en los resultados del buscador), Index, NoFollow (permite la indexación pero evita el rastreo) y NoIndex, NoFollow (evita la indexación y el rastreo). Tiene el siguiente formato:

    <meta name="robots" content="Valores">
    
  • Etiqueta Meta Viewport. Se usa en los sitios que cuentan con una versión para móviles de tipo adaptable o responsive. Sirve para indicar cómo de grande se mostrará la página en la pantalla. Solo debe usarse en sitios responsive. Width=device-width significa que el tamaño de la página debe ser como el del dispositivo en que se muestra. Initial-scale=1.0 significa que la página debe mostrarse inicialmente tan grande como permita la pantalla. Tiene el siguiente formato:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  • Etiqueta Meta Language. Se utiliza para especificar el idioma de la página. Su formato es el siguiente:

    <meta name="language" content="Spanish">
    
  • Etiqueta Meta Revisit-after. Le dice al buscador en cuántos días debe volver a revisar el contenido. Su formato es:

    <meta name="revisit-after" content="número de días">
    
  • Etiqueta Meta Author. Indica el nombre de la persona o empresa que ha creado el contenido de la página. Su formato es el siguiente:

    <meta name="author" content="nombre del autor">
    
  • Etiqueta Meta Copyright. Si consideras necesario indicar el autor de la propiedad intelectual de los contenidos de tu sitio puedes utilizar esta metaetiqueta de la manera descrita a continuación:

    <meta name="copyright" content="Copyright © 2016 nombre de la persona u organización propietaria de los derechos">
    

Hay más Meta Tags como Meta Generator, Meta Subjetc, Meta Rating, etc. pero que ya no aportan nada apreciable al posicionamiento. Es importante resaltar que algunos de ellos tienen un tope de caracteres que no se debe sobrepasar, os pongo una imagen a continuación:

Es importante hablar de las Metaetiquetas para redes sociales dado el reconocido poder y el papel cada vez más importante que juegan las redes sociales en la difusión de tus contenidos y por tanto la alta cuota de tráfico que te pueden aportar y esto precisamente es lo que persigue el SEO.

No me voy a extender mucho ya que el funcionamiento es el mismo, solo cambia un poco el código. Para verlo mejor, vamos a la página oficial de Open Graph Protocol, que es el protocolo desarrollado por Facebook. Cuando compartes un enlace de tu sitio en Facebook, si has implementado los correspondientes metas en la página, mostrará mucha más información que dicho simple enlace, por ejemplo, una imagen, el título de la página, la descripción, la url, etc. Todos estos elementos los defines tú previamente utilizando los metadatos que definen este protocolo.

En el enlace que os acabo de pasar se ve todo mejor pero os pongo un ejemplo a continuación de la estrucutura del código como ejemplo:

<!-- Open Graph data -->
<meta property="og:title" content="el título de tu sitio"/>  
<meta property="og:type" content="valores"/>  
<meta property="og:url" content="url de tu sitio o del post"/>  
<meta property="og:image" content="http://tusitioweb.com/image.jpg">  
<meta property="og:site_name" content="el nombre del sitio web"/>  
<meta property="fb:admins" content="tu Id en Facebook"/>  
<meta property="og:description" content="descripción de la página." />

Para ver muchos otros, puedes aprender más visitando la página oficial de Facebook. Y para saber cuál es tu ID de tu página de Facebook visita este enlace.

Para Twitter se puede utilizar por ejemplo lo siguiente y muchos más:

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nombredeusuario">
<meta name="twitter:title" content="título de la página">
<meta name="twitter:description" content="descripción de la página.">
<meta name="twitter:creator" content="@autor">
<meta name="twitter:image" content="http://tusitioweb.com/image.jpg">

Para Google+ se pueden utilizar los siguientes por ejemplo:

<!-- Google+ data -->
<meta itemprop="name" content="título de la página" />
<meta itemprop="description" content="descripción de la página" />
<meta itemprop="image" content="http://tusitioweb.com/image.jpg">

Una vez explicado los Meta Tags vamos a añadirlos a nuestro sitio web de Wordpress o a nuestro sitio web realizado con Dreamweaver u otro editor.

Añadir Meta Tags en nuestro sitio web de Wordpress

Para añadirlos sólo tenemos que seguir los siguientes pasos:

  1. Abrimos el archivo header.php que se encuentra dentro de la carpeta de nuestro tema.
  2. Ponemos los Meta Tags dentro de la etiqueta <head>. Podemos sustituir el meta <title> que hay si queremos. Os pongo un ejemplo a continuación.
  3. Guardamos y subimos el archivo al servidor.

Con esto ya lo tendremos hecho. Lo único que al ponerse sólo en el archivo header.php todas las páginas de nuestro sitio web tendrán el mismo título y descripción. Se aconseja que cada página lo tenga diferente, también lo que compartamos en redes sociales.

Si queremos conseguir esto debemos utilizar algún plugin, aconsejo para ello All in One SEO Pack. También hay otros buenos que podéis probar como Yoast SEO, Add Meta Tags, Open Graph Protocol Framework o Head Meta Data.

No me gusta cargar un sitio web de plugins pero para el SEO parece más que necesario por lo menos uno.

Añadir Meta Tags en nuestro sitio web de Dreamweaver u otro editor

Es bien sencillo, tan solo tenemos que poner los Meta Tags en todos los archivos .php de nuestra web dentro de la etiqueta <head>. En cada página cambiar los Meta Title y Meta Description que correspondan con el contenido de cada sección y los que compartas por redes sociales con los Meta Tags correspondientes.

Y hasta aquí este tutorial sobre los Meta Tags que espero que os sea de mucha utilidad.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code