Controla qué muestra Facebook cuando recomiendan tu web por @JoaquinAlmansa

    Joaquín Almansa Sáez

    Los botones de recomendación social están por todas partes, en tiendas online, periódicos digitales… y blogs, como este mismo que estás leyendo.

    Cuando haces click sobre estos botones, tus círculos sociales ven esa recomendación que has hecho.

    Si tienes una web, gracias a estos botones, las redes sociales están haciendo publicidad gratis de tu web… qué bien ¿no?
    Y ya que se está hablando de ti en las redes sociales, ¿por qué no controlar qué es lo que se dice te ti?

    En este artículo te explicaré cómo personalizar la imagen y el texto que se muestra en Facebook y Google+ cuando alguien recomienda tu web. ¡Toma el control ya!

    Usaré un ejemplo real de un cliente: una tienda online de castillos hinchables.

    Opengraph

    Seguro que habéis oído hablar de la web semántica. Se trata de describir las páginas web y los contenidos de las mismas de modo que resulte más fácil a las máquinas entender qué información están manejando. Existe un protocolo que nos permite hacer esto y nos permite decir que nuestra web representa a un producto, una canción, una página web… y que además mejora la integración con las redes sociales: Opengraph.

    Echad un vistazo al trocito de código que añadí a la página web:

    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
    <meta property="fb:app_id" content="568622099865488" />
    <meta property="og:url" content="http://www.castilloshinchablessaltofeliz.com" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Castillos Hinchables Salto Feliz" />
    <meta property="og:image" content="http://www.castilloshinchablessaltofeliz.com/imagenes/logo_opengraph.jpg" />
    <meta property="og:description" content="Saltos, ilusión y diversión con Castillos Hinchables Salto Feliz." />

    Se trata de código fuente, que no se ve cuando se visualiza la página web en el navegador, pero que sí ven los “robots” (Google, Facebook…).
    Gracias a este trocito de código, podemos controlar qué texto y qué imagen se muestran cuando se recomienda la página.

    Haced una prueba, entrada en CastillosHinchablesSaltoFeliz.com y pulsad sobre los iconos de recomendación social (están a pie de página). La imagen que muestra Facebook no la ha elegido Facebook al azar. La controlamos nosotros, es la que hemos especificado en la propiedad “image”. Con el texto sucede lo mismo, se muestra el que hemos indicado en la propidad “description”.
    Controla cómo te recomiendan

    Revisemos el resto de propiedades que hemos incluido: url (es la dirección de la página a recomendar) y luego nos quedan type y app_id.

    Type sirve para especificar el tipo de objeto que estamos recomendando. En este caso “website”. El protocolo opengrah define varios tipos como website, music.song, article…

    App_Id hace referencia a un identificador de aplicación en Facebook. Si accedéis a https://developers.facebook.com/apps y pulsáis sobre la opción de menú Apps podréis crear una nueva aplicación de Facebook y de ahí obtener este app_id.

    Inclusión de los botones de recomendación social

    No podemos olvidarnos de lo más importante, incluir los botones de recomendación social.  Facebook, Twitter y Google nos lo ponen fácil para que incluyamos sus botones. Nos dan directamente el código necesario para incluirlo en nuestra página web.

    Facebook: https://developers.facebook.com/docs/reference/plugins/like/
    GooglePlus: https://developers.google.com/+/web/+1button/
    Twitter: https://twitter.com/about/resources/buttons

    No sólo Facebook

    Aunque parezca que lo que hemos hecho está muy orientado a Facebook, tanto las recomendaciones de Google+ como las de Twitter tienen en cuenta la imagen y textos que hemos indicado mediante opengraph.

    ¿A qué esperas? ¡Sácale el máximo partido a las redes sociales!