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.

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

10 comentarios:

Anónimo28/7/15, 2:11 p.m.
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...
ResponderBorrar
Respuestas
Anónimo3/1/16, 8:24 p.m.
Buen post!
ResponderBorrar
Respuestas
Fer26/1/16, 2:00 p.m.
buen post!
ResponderBorrar
Respuestas
Anónimo15/2/16, 5:09 p.m.
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.
ResponderBorrar
Respuestas
programar excel14/11/18, 1:19 a.m.
Amigo sabes como redireccionar un link a otro. Te comento tengo en los post mas de 500 un link a click bank. Pero cambio quiero redireccionar a otro link que cuando se haga click en link vieho vaya al link nuevo para no tener que modificar el link en los 500 post uno por uno. gracias si quierrs ver de lo que hablo
https://programarexcel.com
ResponderBorrar
Respuestas