25 septiembre 2012

Imágen del "autor" en las busquedas de Google

Si sóis habituales a buscar cosas en Google, habréis observado que junto a los resultados de busqueda, aparece una pequeña imágen del "autor" de ese artículo, pues bien, en este artículo os describo la forma de hacerlo.

Este sería el resultado

Lo primero sería crear un perfil de Google+ con una foto de perfil de primer plano de buena calidad en la que se te reconozca, (esta será la que se muestre en los resultados de búsqueda de Google).

Ahora debemos añadir las páginas webs donde queremos que salga nuestra foto de autor, al perfil de Google +, para ello vamos a la pestaña Perfil, entramos en editar perfil y en la pestaña donde pone “colaborador en” añadir las webs.

Una vez finalizado estos pasos, tan solo nos falta colocar el enlace en nuestros blog, pero este enlace, no es un enlace normal, si no, que deberá describir el autor del artículo. El nombre debe ser el mismo que el del perfil de Google + para que funcione, pero no solo eso, sino, que el enlace debe dirigirnos al perfil de Google + que tenemos, para ello copiamos la dirección de la barra de direcciones del navegador cuando estemos en el perfil de Google +, y se lo ponemos al enlace, además este enlace debe tener el atributo rel:"author", a continuación os dejo un ejemplo de cómo debería quedar en enlace en código HTML, que es como deberéis crearlo:
Escrito por: <a href="https://plus.google.com/106881662225015745755" rel="author" target="_blank">AntonioHermi</a>
Como observaréis, en el enlace apuntamos hacia el perfil de Google +, lleva el atributo author, y el texto normal será vuestro nombre, por lo que al mostrarlo en la web se verá lo siguiente:

Escrito por: AntonioHermi

Lo podemos instalar en la plantilla de dos formas diferentes:
1.- Mediante enlace directo
2.- Mediante caja de autor

Mediante enlace directo:
.- Copiamos el código anterior (con vuestros datos)y nos dirijimos a:
Plantilla-Edicción de Html-continuar-marcamos( Expandir plantillas de artilugios )
y buscamos mediante f3: <div class='post-footer'> y encima pegamos el código. Guardamos y listo.

Resultado
Escrito por: AntonioHermi

Mediante caja de autor:
 Primeramente nos dirijimos a: Plantilla-Edicción de Html-continuar-marcamos( Expandir plantillas de artilugios ) y buscamos mediante f3: ]]></b:skin> y justo encima pegamos los estilos con el siguiente código:

/* acerca del autor----------------------------------- */
.acercadelautor {
background: #F7F6F6;
border:1px solid #E1E0E0;
padding-bottom:10px;
margin:5px auto;
padding:10px 5px 5px 10px;
letter-spacing:normal;
font-size:11px; /* Tamaño del texto */
line-height:1.0em;
border-radius:10px;
}
.acercadelautor:hover {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
}
.fn {
font-size:12px;
}
/* fin acerca del autor-------------------------------------- */

Los colores se pueden modificar para adaptarlo a vuestros blog en esta Tabla de colores.

El segundo paso sería incluir el enlace con la imagen y para ello usamos el siguiente código, donde modificaremos nuestros datos:

<div class='acercadelautor'>
<img alt='' border='0' src='DIRECCIÓN URL DE LA IMAGEN DEL PERFIL' style='float:left; margin:0 10px 10px 0; width:50px; height:50px;'/>
<span class='fn'><b><a href='https://plus.google.com/NUMERO IDENTIFICACION GOOGLE PLUS' rel='author' title='Escrito por TU NOMBRE'>Publicado por TU NOMBRE </a></b></span>
<p>UN BREVE RESUMEN DE TI.</p><p>Me puedes seguir en mi cuenta de <a href='URL DE TWITTER'><span style='font-family: Comic Sans MS; font-weight: bold; color: DeepSkyBlue;'>Twitter</span></a> o contactarme en <a href='URL DE FACEBOOK'><span style='font-family: Comic Sans MS; font-weight: bold; color: Blue;'>Facebook</span></a></p>
</div>

Una vez modificado con nuestros datos, copiamos y y nos dirijimos a:
Plantilla-Edicción de Html-continuar-marcamos( Expandir plantillas de artilugios ) y buscamos mediante f3: <div class='post-footer'> y encima pegamos el código. Guardamos y listo.


Bueno, si habéis realizado todos los pasos correctamente, os saldrá la foto de autor, y empezareis a notar un aumento de visitas, desde que realicéis estos pasos, tardareis 3 o 4 días en empezar a ver que aparece vuestra foto, así que paciencia y ya veréis la diferencia.

Si queréis ver el ejemplo, abrir Google y colocar Amor Sevillista.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

9 comentarios

Jefe. Aunque no tenga nada que ver con el tema en cuestión. Cuando tengas oportunidad de incluir por aquí, o por donde sea, el tema nuevo de El Arrebato..."Oh, Kanouté", me lo comunicas, me gustaría meterlo en el móvil de tono de llamada.

Pués tu petición se ha echo realidad, ja ja.

Antonio haber si puedes hacer una d estos ami.saludos crack.!!!!!

He notado que has logrado colocar un logo en ves de foto de perfil como autoria.
¿Como puedo hacer yo lo mismo?

Fácil, cambia la foto del perfil de google+ por tu logo y listo.

saludos, coloque todo como dijiste pero cuando verifico me da dos errores

estos
Advertencia: Missing required field "updated".
Advertencia: Missing required hCard "author".

mi pagina esta http://www.musicamundiial.com/ espero tu ayuda

Yodeimi, lo he comprobado y está todo bien, tan solo queda esperar a que el señor Google lo indexe.....
Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"