Un HEAD completo con todas las etiquetas META que necesitas en Blogger | Oloblogger Las meta son un tipo de etiquetas HTML que se colocan dentro de la más general head y que sirven p...

9 de marzo de 2015

Un HEAD completo con todas las etiquetas META que necesitas en Blogger

Las meta son un tipo de etiquetas HTML que se colocan dentro de la más general head y que sirven para marcar ciertos datos interesantes para buscadores u otra aplicaciones que resultan invisibles para los usuarios.

Esos metadatos (de ahí su nombre) son por ejemplo de los que se nutre Facebook para cuando se comparte una entrada en esa red social, extrayendo de ellas cosas como la imagen a mostrar o el pequeño resumen de texto que le acompaña.

Fotomanipulación de JeanFan
Actualmente las meta no son tan relevantes para el posicionamiento como lo eran antaño, pero siguen dando puntitos que suman.


El título de esta entrada puede resultar algo pretencioso, pero de verdad que no se me han ocurrido más etiquetas realmente necesarias para un blog. La lista es bastante completa y más bien creo que me he pasado al incluir algunas de las que se podría prescindir.

Ya que estaba también he incluido en el código la etiqueta title aunque no sea propiamente dicha una meta y también una línea especial de Blogger que carga una serie de cosas que hacen que todo funcione bien en esta plataforma. Se trata de un include con el nombre all-head-content, casi auto-explicativo si se traduce del inglés.

Sobre esta línea comentar que ya carga automáticamente una serie de metadatos importantes, entre los que se encuentran algunos que nosotros vamos a añadir a mano. Por esa misma razón tiene que ir en primer lugar, ya que si va después, lo que cargue ese include "machacará" lo escrito por nosotros y queremos precisamente que sea justo al revés, que lo nuestro se superponga a lo automático.

Todo esto que viene a continuación debe ir entre la apertura del <head> y la primera etiqueta <b:skin><![CDATA[/* y aunque lo voy a presentar por trocitos para poder añadir algunos comentarios, debe ir todo seguido en esa parte de la plantilla. Salvo alguna cosa especial, creo que en ese lugar no hará falta nada más.



Cargamos el include y las primeras dos meta: una para forzar el modo compatibilidad superior de la versión de Internet Explorer que tenga el usuario y otra para plantillas adaptables.

<b:include data='blog' name='all-head-content'/>
<!-- Compatibilidad IE -->
<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'/>

Esto no es una meta, pero también debe ir en el head. Se ocupa de ponerle título a la página (el texto que veis en la pestaña del navegador). Un formato para la página principal y otro para el resto.

<!-- Título -->
<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>

La descripcion o pequeño resumen de texto sobre el contenido de la entrada. Se habilita en Configuración > Preferencias para motores de búsqueda > Editar > ¿Habilitar descripción para búsquedas? > Sí y en ese mismo lugar se graba la de la página de inicio. 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.

Si se nos olvida hacerlo en alguna entrada, con el condicional que puse se quedará grabado un texto diferente para cada página de manera que no se generen descripciones duplicadas.
(cambiar a discreción el texto "Entra y te mostraremos esto.") por cualquier otro genérico.

<!-- Descripcion -->
<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 + &quot;. Entra y te mostraremos esto.&quot;' name='description' property='og:description'/>
</b:if>

Estas son de carácter general y la mayoría son prescindibles. Por ejemplo, Google no necesita la etiqueta del lenguaje para descubrir en qué idioma está escrita la página, pero todo sea por echarles una mano.
En un color distinto lo que debéis cambiar.

<!-- Otras META -->
<meta content='Nick en G+' name='author'/> <!-- Escribidlo 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'/>

Las últimas son las necesarias para Facebook y Twitter Cards. Las de Facebook no son exclusivas pues su protocolo (OpenGraph) sirve también para otros sitios. Creo que hasta el propio Google también las lee.

Si las imágenes no son los suficientemente grandes podría no salir la que habéis especificado (más info) y para que funcione Twitter Cards previamente hay que darse de alta.

<!-- Facebook y Twitter -->
<meta expr:content='data:blog.pageName' 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'/>


Una vez puesto todo esto y grabados los cambios, podéis comprobar que todo sale bien yendo a vuestra página de inicio (y también a un post cualquiera para ver la diferencia), accediendo con botón derecho a "Ver código fuente". Casi al principio os saldrán las metas con los valores cargados.

También podéis hacer pruebas en los siguientes enlaces: Facebook | Twitter | Google.

Para actualizar la caché de Facebook y que no os salgan datos antiguos que habrán quedado obsoletos tras estos cambios, será necesario que tras teclear la dirección a comprobar pinchéis en el botón Fetch new scrape information.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

19 comentarios :

  1. Hola Oloman, tuve un error en el anterior comentario, algo más que ortográfico, volviendo al texto, me agrada ser el primer comentario, a no ser que se me hayan adelantado mientras escribo, tu blog me ha ayudado bastante en mi seo, gracias y un saludo.

    ResponderEliminar
  2. Feliz de ser el segundo! Gracias Oloblogger por esta importantísima información. Ya he realizado los cambios que nos sugieres. Espero que estos cambios sirvan de algo para generar un poco más de tráfico porque he visto que en los últimos 2 meses ha caído demasiado. ¿Te ha pasado lo mismo? Saludos.

    ResponderEliminar
    Respuestas
    1. No. No he notado cambio alguno en mis visitas, pero es que yo estoy estable desde hace mucho. De todas formas todos esos ajustes que Google está haciendo desde hace tiempo tienen que ser para algo. A algunos para mejor y a otros para peor.

      Eliminar
  3. Una duda puntual, bueno mejor dicho dos; una respecto a esta entrada; como deberíamos poner nuestro nick de google +, con el nombre común o si utilizamos la nueva característica del nombre en la url de nuestro perfil que va todo junto me refiero? En mi caso por ejemplo 1- Carlos Martínez ó 2- 'CarlosMartínez1'
    La siguiente no tiene que ver con esta entrada pero si con su creador y quiero aprovechar para hacerlo público: Que sale mas caro invitarte a comer o encargarte un traje de pana ;) Porque te mereces las dos opciones. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Pues no estoy seguro, pero creo que debería ser "Carlos Martínez", aunque eso de los acentos creo que sientan muy mal a Google... si no lo han arreglado.

      Eliminar
  4. Muy buen!!!! me ha servido demasiado

    ResponderEliminar
  5. Como siempre, impecable oloman, Gracias, andaba buscando esto, Seria bueno que hicieras un artículos, de como hacer SEO en blogger en 2015.

    ResponderEliminar
    Respuestas
    1. Algunas cosas son de sentido común, pero si yo supiera realmente de SEO ¿crees que tendría un blog de nivel medio? :)

      Eliminar
  6. la modestia es de los sabios. ;) Saludos!

    ResponderEliminar
  7. Buenas noches,

    Un gran descubrimiento tu blog. Muy instructivo para los que nos peleamos con blogger para intentar hacer nuestro blog un poco más atractivo tocando el código a manija.

    He probado lo que comentas aquí y en otras entradas, pero sigo teniendo el mismo problema. Tengo un blog de reseñas literarias y me encuentro que cuando hago en google una búsqueda para una reseña en concreto google siempre me devuelve una única entrada que hace referencia a la página principal del blog, y no a la entrada particular de la reseña.

    ¿Cómo puedo solventar esto?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Es que estas etiquetas no van a solucionar eso Pancromatic. Intenté explicar al principio del post que cada vez Google las tiene menos en cuenta.
      No hay una fórmula mágica para que Google te trate mejor o al menos, yo no la conozco.

      De todas formas supongo que no es cuestión de que te devuelva una única entrada, sino de que tus resultados salen muy atrás. Yo por ejemplo logré encontrar este

      Eliminar
  8. Vas a soltar la carcajada. Hace tiempo que había incluido las twitter cards, pero tenía que dar de alta el blog y no lo hacia ¿sabes por qué? Por que usaba es "t" para su icono jajaja... Sentía que la iban a ver y me daba no sé que...ya luego pensé...Karla, no alucines, ¡qué van a ver por favor!, ni que no tuvieran cosas más importantes en que pensar y que hacer xD

    ResponderEliminar
    Respuestas
    1. Hecho. La suelto... Jajajajaja :)
      Al menos ya tienes la mayor parte del trabajo resuelto. Anda, date ya de alta tranquila ;)

      Eliminar
  9. Oloman, si estoy escribiendo el blog en dos idiomas, cuál sería la meta etiqueta? se pueden agregar dos idiomas o sólamente uno?

    ResponderEliminar
    Respuestas
    1. Pues en un principio en el que quieras destacar de cara a Google, pero si ambos idiomas tienen la misma relevancia, entonces casi mejor que no uses la etiqueta de lenguaje.

      Eliminar
  10. Hola Oloman. Estoy creando un sumario en el home pero como los snippets son muy cortos y no me sirven asi he decidido usar la meta description. Dejo un título, una imagen y pongo el llamado a la meta description y si funciona pero SOLO CON UN PROBLEMA: En todos los casilleros de los post del sumario aparece la misma meta description global, osea la que se configuró primero. Entonces asi no sirve. Veo que con los botones de compartir de facebook en el sumario si toma la meta description especifica. ¿Cómo lo puedo hacer?

    PD: Por ahora estoy usando un div como "comodín" con el mismo texto de la meta description del post y lo muestro en el sumario pero eso hace que todo el resto del contenido, asi no se vea, también sea cargado y eso ralentiza la carga y talvez en algún momento Blooger me limita la cantidad de post a mostrar.

    Este es el blog de prueba: http://minimafatimaciesa.blogspot.pe/

    Gracias!!

    ResponderEliminar
    Respuestas
    1. cambié la url, ahora es esta: http://apecc2016.blogspot.pe/ gracias

      Eliminar
    2. Efectivamente, la DATA DESCRIPTION no funciona en portada como tú necesitas. Siempre muestra la descripción del blog, no de cada post.

      Tu solución puede valer (o eso o no te queda más remedio que usar JS) y no creo que tengas problemas si añades un <!-- more --> (Ver más info sobre los cortes)

      Eliminar
    3. Gracias por la info Oloman =)

      Eliminar