SEO en Blogger, optimizar H1 y H2.

Las opciones de SEO en blogger no son muy publicitadas ya que a diferencia de otras plataformas no tenemos mas alternativa que tocar la plantilla. El SEO (Search Engine Optimization) es la optimización de los motores de búsqueda, vale decir lo que podemos hacer para mejorar la visibilidad de nuestros sitios en internet. Para esto existen varias técnicas, comenzaremos con algo fundamental que es el SEO on-page.

Lo primero de nuestra serie de artículos será arreglar el titulo de la página y titulo del blog, los que generalmente vienen dados como H1 el titulo del blog, H2 la fecha y H3 el titulo de los post lo que está herrado ya que por relevancia debería ser:

Cuando estamos en el Home:
H1 titulo del blog
H2 titulo del post

Cuando estamos dentro de un post:
H1 titulo del post
H2 titulo del blog

Bueno, esto que parece una tontería, en realidad no lo es tanto,  ya que por mas que pongamos títulos llamativos y bien logrados no conseguiremos el objetivo de hacerlos relevantes si no hacemos estos cambios. Esto no tiene que ver con la fuente que utilices, vela decir que aunque hagas los títulos con una letra gigante, si llevan la etiqueta H3 nunca serán relevantes. Se entiende lo que quiero decir?

una vez dicho todo, lo primero que debemos hacer es ir a la edición html de la plantilla, pulsar dentro del cuadro y apretar Ctrl F, allí se abrirá un buscador en donde buscaremos y eliminaremos el siguiente código:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>
Varias veces me he encontrado con dos trozos de código iguales en la plantilla, generalmente es el el segundo el que debemos cambiar. Una vez eliminado lo reemplazamos por este:

<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "item"'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>  
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>      
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

Una vez hecho todo este embrollo, puede que nos encontremos con la situación de que  han cambiando los títulos de la plantilla y ahora se ven mas grandes o mas pequeños, en la misma edición html en el buscador pones .post h3 y cambias donde dice h3 por h2 y así sucesivamente.

Como yo he probado y modificado muchas plantillas, en varias de ellas con estos pasos ha sido suficiente, comprobando está terminado y salen los titulos como yo quiero, sin embargo a veces siguen saliendo dentro del post ambos titulos con h1, si este fuera el caso haz lo sigueinte:

Busca el siguiente código:
<h1 class='title' style='background: transparent; border-width: 0px'>
      <b:include name='title'/>
</h1> 

Lo cambias por este:
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<h2 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h2>
</b:if>

Con esos pasos ya debería estar todo listo. Recuerda ante todo hacer una copia de tu plantilla ya que este procedimiento es bastante engorroso.

Gadget de Instagram para Blogger

Instagram para muchos es la app favorita y para otros se ha convertido en la red social del momento, ya que puedes compartir las fotos con tus amigos no si antes agregar unos efectos especiales tipo retro, los cuales en lo personal me gustan mucho.

Por estos motivos hoy queremos mostrarte como puedes agregar el gadget de instagram a tu blog para que los lectores puedan seguirte en ambas plataformas. Primero que todo debes descargar la app de Instagram, es decir, tenerla instalada en tu móvil. La idea es promocionarse y tal vez conseguir algún backlink, lo que nunca está demás, ya que como hemos mencionado otras veces, es gracias a los enlaces externos que podemos conseguir mejorar nuestra posición en los distintos buscadores.

Una vez que hayas realizado este paso, te registras y vas a tu cuenta. En manage application o si lo usas en español, administrar aplicaciones se encuentra badges, una vez allí,  escoges el que mas te guste, tras ello aparecerá el código que deberás copiar en tu blog.


Ve a tu blog - diseño -añadir un gadget en las opciones escoges la opción HTML /Javascript y añades el código que copiaste anteriormente. Una vez que tengas listo este paso, no queda mas que arrastrar el gadget al sector donde quieres que se muestre.


Como vez es algo muy sencillo, pero gracias a estos pequeños pasos conseguiremos aumentar nuestra visibilidad en internet. Recientemente la aplicación a incluido una función para poder grabar videos de hasta 15 segundos de duración, puedes bajar videos de Instagram a tu PC sin la necesidad de usar extensiones. Para ello haremos una revisión mas adelante.
¿Que opinas acerca de esta app? ¿Que le agregarías?

Ofertas de Adsl para 2014

Como buen blogger me gusta estar al tanto de todo lo que tiene que ver con internet, por eso para mi es importante tener una conexión veloz de manera de entregar los contenidos adecuados y no perder información. O no te ha pasado alguna vez que estás escribiendo un articulo en tu blog y en un abrir y cerrar de ojos pierdes todo?

yoigo movistar
Bueno, hoy te comento que adsl contratar para que puedas escribir en tu blog de manera rápida y que todo se haga sin contratiempos. Así ya no perderás mas información por las demoras.

Una buena alternativa es contratar el adsl de Yoigo, me parece que es de los mejores ya que se ha unido a Movistar, debido a esto ofrecen servicio de internet, móvil y fijo a  un precio de 24 euros por mes, y para mi se ve bastante conveniente.

En la parte que me interesa que es la de internet, puedes contar con la velocidad de 10 megas reales, lo que es increíble para cuando queremos por ejemplo agregar algún gadget al sitio y no se quede la pantalla cargando todo el tiempo o te de errores, esto último es algo que me ha pasado muchas veces con mi internet antiguo. ¿Como es la velocidad de tu internet? ¿Te ha provocado problemas?

Menú en Blogger para Etiquetas


Ya vimos en una entrada anterior como poner en el blog un menú con las páginas que por defecto nos entrega Blogger.
Hoy veremos un nuevo menú, muy sencillo para poner en el blog con el link que nosotros queramos. Puede ser útil para las etiquetas o categorías por ejemplo, para darle un aspecto mas ordenado.
Lo primero que haremos es editar el código de mas abajo y agregarle nuestras url donde queremos que se dirija el lector. En donde dice TU URL, editas y pones las tuyas.
Luego copias todo el código vas a diseño | añadir un gadget | Html/javascript y lo pegas todo allí, por último lo arrastras donde quieres ponerlo. Y ya está el menú.

<style type='text/css'>
#menu {
background-color:#F5F5F5;
height:29px;
margin:3px auto 0;
width:900px;
}
#menu ul {
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:630px;
}
#menu ul li {
display:block;
float:left;
font-size:12px;
height:29px;
letter-spacing:1px;
line-height:18px;
margin-right:0;
padding:0;
text-transform:none;
}
#menu ul li:hover {
background-color:#DDDDDD;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {
color:#666666;
display:block;
float:left;
height:19px;
margin:0;
padding:5px 20px 0;
text-transform:none;
}
#menu ul li a:hover {
background: #fff;
height:25px;
text-decoration:none;
}
#menu ul li ul {
width:180px;
}
</style>
<div id='menu'>
  <ul>
<li><a href='TU URL'>Inicio</a></li>
<li><a href='TU URL'>Contacto</a></li>
<li><a href='TU URL'>Páginas Amigas</a></li>
<li><a href='TU URL'>Políticas</a></li>
</ul>
</div>

El diseño no es ninguna maravilla, pero es práctico y lo pueden editar totalmente a gusto. Si quieres mas pestañas copias <li><a href='TU URL'>Inicio</a></li>  tantas veces como sea necesario, cambiando los datos por los tuyos.


Lista de Títulos en las Etiquetas. (Mejorado)

Hoy veremos un tutorial que leí en el blog de El escaparate de Rosa, que me pareció muy interesante. Esto es que al pinchar las etiquetas de nuestro blog, o también llamadas categorías, saldrá una lista con los títulos del blog. Por que es interesante??? Bueno, simplemente porque todo esto se logra con condicionales, de modo que no es necesario llenar la plantilla de scripts que lo único que consiguen es ralentizar nuestro blog.
Se ha mejorado el tutorial de manera que no salga la lista en las páginas recientes/antiguas.


La única pega que le encuentro es que por defecto también se mostrarán resumidas las entradas recientes, entradas antiguas pero veremos si se puede solucionar y mas adelante actualizaré el post con la solución.

Lo primero que haremos será guardar nuestra plantilla por si no resultan bien los pasos que hemos seguido, yo los pruebo antes de postearlos pero muchas plantillas poseen códigos distintos.

Localizamos:
<b:include data='post' name='post'>


Y cambiamos esa línea por todo este código:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:if cond='data:blog.searchLabel'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/></li></ul>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Antes de ]]></b:skin> pegamos lo siguiente, que serán los estilos que le daremos a nuestros títulos, estos pueden cambiarse.
#titulos{ /*estilo para el espacio ocupado por la lista */
margin:6px 0px;
background:#fff;
padding:6px;
border:1px solid #e3e2e3}
#titulos ul{ /*estilo de la lista */
margin:0px;
list-style-type:none;
background:#eeeded;
padding:3px;}
#titulos li{ /* estilo para cada item (título) de la lista */
background: #fff;
padding:15px 0px 3px 40px;
font-weight:bold}

Lo último es esconder las fechas de las entradas, si piensas que queda bien con ellas entonces no hagas este paso.
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo cambiamos por este:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if></b:if></b:if>

Puedes darle tus propios estilos, agrandar las letras, etc. Recuerda siempre respaldar tu plantilla.