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'/>

<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

<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.

<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.

<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 + ". Entra y te mostraremos esto."' 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.

<meta content='Nick en G+' name='author'/> 
<meta content='es' http-equiv='content-language'/>
<meta content='General' name='rating'/> 
<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.

<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>

<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'/>

<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.

Copy URL

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

22 comentarios :

kililiko+9/3/15, 23:55
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
Respuestas
José Luis Avila Herrera10/3/15, 16:24
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
Unknown11/3/15, 7:58
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
Alex González13/3/15, 22:28
Muy buen!!!! me ha servido demasiado
ResponderEliminar
Respuestas
jjjj16/3/15, 7:49
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
kililiko+17/3/15, 0:20
la modestia es de los sabios. ;) Saludos!
ResponderEliminar
Respuestas
pancromatic26/3/15, 23:22
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
Karla Castañeda17/4/15, 23:03
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
Entre Lugas20/5/15, 12:38
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
Fatima Cieza15/7/16, 21:17
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
Nasuverse24/1/17, 23:05
Ojala estes bien

¿Tenes mas post sobre tag o etiquetas para ayudar al buscador? gracias
ResponderEliminar
Respuestas
Cristian Valenzuela Silvestre2/6/18, 14:35
Muchas gracias y ánimo, se no puedes responder, pero adelante con tus proyectos.
ResponderEliminar
Respuestas

Añadir comentario

Oloblogger

Páginas

Oloblogger

9 de marzo de 2015

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

Compartir

22 comentarios :

Referencias