Meta Tags en Blogger

Meta Tags en Blogger La utilización de meta tags en Blogger puede ser considerada una técnica de blogging sobre posicionamiento interno. Por ende, una estrategia para optimizar tu blog. En esta entrada te enseñaré como instalarlas en Blogger.

Las meta tags son etiquetas que se añaden en el código HTML de una web para aportar información relevante sobre la categorización de dicho sitio. A esta información sólo se podrá acceder a través del código fuente.

Las meta tags sólo resultan relevantes para los buscadores, un usuario que navegue normalmente por una página web nunca las verá.

Pasos para instalar meta tags en Blogger:

Paso 1: Ingresá al sitio web: http://blogger.com
Paso 2: Una vez en el escritorio de Blogger, haz clic en el menú vertical desplegable. Luego clic en Plantilla y en Editar HTML.
Paso 3: Se abrirá el código fuente del blog. Haz clic dentro del código, luego Control + F para utilizar el buscador que se observa en imagen.

Instalar meta tags en Blogger
Paso 4: Buscá <head> y justo debajo de dicha etiqueta colocá el siguiente código:


<!-- COMPATIBILIDAD IE -->
<b:include data='blog' name='all-head-content'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<!-- Para plantillas adaptables en dispositivos táctiles -->
<meta content='width=device-width,initial-scale=1.0,user-scalable=yes' name='viewport'/>

<!-- TÍTULO DEL BLOG -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<!-- DESCRIPCIÓN DEL BLOG -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName + ". Escribir aca la descripción del sitio."' name='description' property='og:description'/>
</b:if>

<!-- OTRAS META -->
<meta content='Nick en G+' name='author'/> <!-- Escribirlo literalmente -->
<meta content='es' http-equiv='content-language'/>
<meta content='General' name='rating'/> <!-- Para todos los públicos, caso contrario usar "mature" o "restricted" -->
<meta content='palabraclave1, palabraclave2, palabraclave3, etc' name='keywords'/>

<!-- FACEBOOK Y TWITTER -->
<meta expr:content='data:blog.pageTitle' name='twitter:title' property='og:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image' property='og:image'/>
<b:else/>
<meta content='URL_imagen_por_defecto' name='twitter:image' property='og:image'/>
</b:if>

<!-- FACEBOOK -->
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='url_pagina_blog_en_facebook' property='article:publisher'/>
<meta content='url_autor_en_facebook' property='article:author'/>

<!-- TWITTER CARDS -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta content='@usuario_twitter' name='twitter:site'/>
<meta content='@usuario_twitter' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

El código debería quedar ubicado entre las etiquetas <head> y <b:skin>. Una vez hecho esto es necesario agregar algunos datos propios (modificá aquello destacado dentro del código). Parte por parte:

Compatibilidad IE: Con esta meta reforzarás la compatibilidad de tu blog con Internet Explorer.
Título del blog: No es una meta, pero debe ir ubicado en el head. Su función es ponerle titulo al sitio.
Descripción del blog: La descripción de tu blog que aparece en el resumen de los resultados de búsqueda se habilita en Configuración > Preferencias para motores de búsqueda > Editar > ¿Habilitar descripción para búsquedas? > Sí y ahí debes grabar la de la página de inicio. Mientras que la de cada entrada se graba al redactar/editar desde el menú de la derecha del editor en: Configuración de la entrada > Descripción de búsqueda, de manera individual para cada post. Ahora bien, si te olvidas de hacerlo en alguna entrada, esta meta grabará un texto diferente para cada página de manera que no se generen descripciones duplicadas.
Otras metas: No son obligatorias, pero ayudan a la optimización. Debes sustituir “Nick en G+” por el nombre de usuario que tengas en Google Plus. Por ejemplo: “Cristian Gabriel González”. Debes sustituir “palabraclave1” y todas las que quieras utilizar por palabras clave relacionadas con tu blog. No abusar.
Facebook: Metas necesarias para Facebook. Le indica a Facebook que imágenes de las entradas deseas compartir en la red social. Completar los datos destacados en naranja.
Twitter Cards: Metas necesarias para Twitter Cards. Para que funcionen, previamente hay que darse de alta. Completar los datos destacados en naranja.
Una vez realizados todos los cambios, haz clic en Guardar plantilla. Paso 5: Por último, dirígete a la página principal del blog y también a un post cualquiera, accede con el botón derecho a Ver código fuente y observá las modificaciones implementadas. Las meta tags saldrán casi al comienzo del código. + Mostrar código fuente en las entradas de Blogger
+ Personalizar Favicon en Blogger

Profesional en constante evolución. Apasionado del diseño y la escritura. Blogger desde los 13 años. Escribo sobre marketing digital, social media y técnicas de blogging. Mi actividad profesional es la docencia. En este blog volcaré todos mis conocimientos. Más sobre mi.
SUSCRÍBETE AL BLOG POR CORREO ELECTRÓNICO

10 comentarios:

  1. Cuando las pongo para Twitter y pongo un tweet con la la url del post no se muestra la twitter card bien. En el titulo pone data:blog.pageName, en descripción pone data:description, etc...

    ResponderEliminar
    Respuestas
    1. Te diste de alta antes? facilitame un enlace para que pueda observar como colocaste el código.

      Saludos

      Eliminar
  2. Hola Cristian
    Muchas gracias por compartir y ayudar.
    Verás, llevo días intentando solucionar un problema con mi blog, he buscado tutoriales y lo he intentado todo sin resultado.
    El problema es que cuando quiero compartir la entrada de mi blog en facebook, la foto que aparece o es pequeña o directamente no sale imagen.
    He cambiado el tamaño de la imagen tal y como he leído en foros de ayuda, he intentado cambiar cosas en el código html pero no consigo nada bueno.
    No sé si es q hay algo q hago mal o q no entiendo.
    ¿Podrías ayudarme?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola:
      Por lo general, la foto que tome Facebook depende del tamaño de la original.

      Pasame la URL de tu blog y me fijo si tienes algun error en el código.

      Saludos

      Eliminar
    2. http://notodomierda.blogspot.com.es/

      Muchísimas gracias!

      Eliminar
    3. Entré a tu blog y no encontré problemas en las metas. Para estar seguro compartí 3 entradas de tu blog en mi Facebook y las imágenes fueron reconocidas en su tamaño original, que en los últimos 3 posteos elaborados por vos, son grandes.

      Todo funciona como debería. Prueba compartiendo el enlace desde el inicio de tu Facebook.

      Saludos!

      Eliminar
    4. Muchas gracias, Cristian.

      Eliminar