Mar 082013

Mejorando el SEO de tu Prestashop con schema.org y RDA data para Facebook

Tweet about this on Twitter0Share on LinkedIn0Buffer this pageEmail this to someone

Aquí os dejo un par de truquitos rápidos para mejorar el SEO de vuestra tienda Prestashop ya sea 1.4 o 1.5, dado que solo implica cambios en las plantillas tpl.

El primero de ellos es relativo al schema.org que nos permite enviar datos estructurados a Google, Microsoft y Yahoo!

La modificación que requiere esto es fácil. En header.tpl de nuestro theme modificamos la etiqueta body tal que así (eliminar el espacio después de < y antes de > !!!):

< body itemscope itemtype="http://schema.org/WebPage" >

Para la página de producto (product.tpl), modificamos el div primario (normalmente primary_block o primary) así:

< div id="primary_block" itemscope itemtype="http://schema.org/Product" >

Y el código de la capa que printa las ofertas (precios rebajados en product.tpl, también) pongamos que se llama class=”price” así:

< div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer" >

Si combinamos esto con un buen SEO interno y unos Rich Snippets (mírate estos dos posts: uno y dos) vamos para arriba en buscadores 🙂

Y ahora a por Facebook

Todos nos hemos encontrado con el auténtico coñazo que es Facebook cuando compartes una ficha de producto de Prestashop. ¿Qué imagen de producto os pone? Efectivamente, la que le dá la gana. Puede ser el logo de la tienda o un logo de pago tipo el de Paypal. Con lo que optamos por decirle HOYGAN FACEBOOK NO ME PONGA LA HIMAGEN.

Eso lo arreglamos rápido poniendo este código en el header.tpl y con el condicional de “si es página de producto, enseña esto)


{if $page_name == 'product'}
< meta property="og:title" content="{$meta_title}" />
< meta property="og:description" content="{$meta_description}" />
{if $have_image}< meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" />{/if}
{/if}

og:title pillará como título de la página el meta título que hayamos especificado al producto. og:description, la descripción y, finalmente, og:image extraerá, en este caso, la imagen con tamaño large_default para printarla como imagen asociada al link que compartimos en Facebook.

¡Espero que os sirva!

Tweet about this on Twitter0Share on LinkedIn0Buffer this pageEmail this to someone
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (13 promedio de votos: 3,69 sobre 5)
Cargando…
84 Responses to Mejorando el SEO de tu Prestashop con schema.org y RDA data para Facebook
  1. Nuria Responder

    Este post es como para hacerte la ola! Y lo de facebook un puntazo, siempre me salía el logo de Paypal los logos de Visa, etc… Me ha sido muy útil, muchas gracias!

    • jordiob Responder

      Gracias Nuria! 🙂

  2. Juan Responder

    Muy buen aporte Jordi.
    Los inutiles como yo te lo agradecemos 😉

    • jordiob Responder

      Eeeeeh! De inútil nada eh? Sabe ud un rato largo! 🙂

  3. José Responder

    Muchas gracias por la información, pero tengo una duda: ¿esto es redundante con el plugin de Rich Snippets de Goodrelations, o es para hacer a mayores? Lo digo porque yo tengo instalado el plugin y no vaya a ser que la cague…

    • jordiob Responder

      Sip, juraría que goodrelations y snippets se pisan

      • paco Responder

        A que os regeris??
        Al modulo de.prestashop para incluis los rich snipetts??

  4. Luis Alcalá Responder

    ¡Genial Jordi! Útil, efectivo y al grano. Entiendo que para Facebook lo mejor es configurar las metas generales en el header.tpl y luego tu truquito para las fichas de producto. Pero ¿Quizás no sería más apropiado crearlas en product.tpl en vez del breadcrumb.tpl que es para toda la web? Lo digo porque si queremos compartir un listado de marca, en manufacturer.tpl por ejemplo llevaría otro código o también lo cargaría en CMS, etc…

    Saludos!

    • jordiob Responder

      Mea culpa Luís, quería decir antes del breadcrumb.tpl en la página product.tpl, pero no lo especifiqué. Corregido. Gracias! 🙂

  5. Jose Responder

    Está genial la información, la estoy implantando en varios e-commerce que gestionamos, pero me ocurre que a raiz de implantar lo de Facebook me muestra errores de validación del W3C.
    Las webs están gestionadas mediante Prestashop 1.3.2.3 y son XHTML 1.1.
    ¿Sabrías indicarme qué puedo hacer para solucionarlos?
    ¿Faltaría alguna metaetiqueta más en el header.tpl?
    ¿Habría que especificar otro Doc Type?
    Gracias de antemano por tan excelente aporte, sigue así.

    • jordiob Responder

      hola Jose! lo suyo es que mires las recomendaciones del validador de la W3C http://validator.w3.org/ y ver qué pistas te suelta 🙂

  6. Hugo Responder

    Hola, muy buen post como punto de partida.

    Solo añadir que sobretodo hay que poner el detalle de las propiedades, es decir, en product.tpl buscar dónde se pinta el nombre del producto y añadir itemprop=”name”, lo mismo con la marca y también el precio, añadir itemprop=”price”

    Otra cosa importante, sobre el precio, parece que a google no le gusta que esté junto a la moneda por lo que tenemos que separarlos, que los pinte por separado y poner el itemprop=”pricecurrency” a la dichosa moneda.

    Un saludo.

    • jordiob Responder

      buenas todas esas. Gracias!!!!

    • Albert Responder

      Hola!!

      Para los lerdos en código, aquellos que apenas distinguimos entre el head, el body y las etiquetas…¿Cómo podemos reconocer “donde se pinta el nombre del producto, la marca y el precio” para implementar lo que recomiendas?

      Saludos y muchas gracias!!!

  7. Rubén Responder

    Si pongo el código en mi plantilla de Leothemes se descuadra todo el tema (schema.org)

    ¿Hay solución?

  8. Alberto Responder

    Hola Jordi

    El post está muy bien pero hay una cosa que creo que no es correcto (al no ser que me equivoque)

    Las etiquetas meta siempre deben de ir en el head por lo que ponerlas antes del breadcrumb es incorrecto y no va a funcionar.

    Sobretodo a lo referente a Facebook, ya que, al considerar que og:image no existe va a coger las imágenes que le de la gana como hace de forma habitual. El título y la descripción los cogerá de los meta title y description que lleva prestashop de por si.

    El lugar más idóneo creo yo que sería en el header.tpl debajo del último meta (suele ser el robots), por tener todos los meta juntos.

    Dejo el código que debería ir
    {if $page_name == ‘product’}
    {if isset($meta_title)}{/if}
    {if isset($meta_description)}{/if}
    {if $have_image}getImageLink($product->link_rewrite, $cover.id_image, ‘large_default’)}”/>{/if}
    {/if}

    Si me equivoco encantado de que me corrijan

    Un saludo y gracias por el post

    • jordiob Responder

      hola! para este caso, pita igual, pero lo mejor es ponerlo antes del , sí

  9. Miguel Responder

    Hola,
    muy bueno el post Jordi.

    Una duda, en Webmaster Tools me indica el siguiente error:

    property:
    offers:
    Item 1
    Error: Missing required field “name (fn)”.

    En el comentario de Hugo dice que “hay que poner el detalle de las propiedades, es decir, en product.tpl buscar dónde se pinta el nombre del producto y añadir itemprop=”name”, lo mismo con la marca y también el precio, añadir itemprop=”price” ” Imagino que el error está relacionado con que falte ese detalle, ¿podrías por favor explicar dónde añadir eso?

  10. Nely Responder

    Muy buen aporte

  11. David Responder

    Buenas!
    Yo tengo varias dudas..
    Es que yo con esto me hago mucho daño por que no tengo ni idea de programacion web.

    En mi /web/themes/theme596/product.tpl
    me aparece aqui tendría que cambiarlo por ?
    Luego en la etiqueta body tengo
    y cambiarlo por..
    luego el div class=”price” no lo tengo…

    Alguien me puede ayudar’ es que no tengo idea si tengo que cambiarlo directamente unos por los otros o si me cargare toda la web!

  12. Juan Responder

    Recomiendas usar http://schema.org/WebPage en lugar de http://schema.org/Store?

    • jordiob Responder

      Hola Juan! no, es un error del post, hay que usar Store. Gracias!

  13. Jordi Responder

    Yo no puedo o soy cortito de miras….Lo he probado y en el Header.tpl de mi theme solo hay una vez la palabra body y si lo pongo (tal y como yo entiendo que lo comentas) en la pagina web arriba de todo me sale esto id=”index” class=”iqit “>

    La plantilla puede influir?

    Gracias

    • jordiob Responder

      Repásate los comentarios del post, ahí está explicado

      • Jordi Responder

        Pues lo he mirado y no lo encuentro, quien de ellos lo dice? Gracias

        • jordiob Responder

          Coño, tienes razon, pensaba que estaba ahí. Pásame tu header.tpl a jordiob (at) jordiob . Com y el lunes me lo miro!

          • Jordi

            Moltes gràcies Jordi!! Gràcies de veritat!!

  14. Jordi Responder

    y con lo de Facebook estoy igual, dentro del product.tpl no encuentro el lugar donde ponerlo…

  15. Ulises Responder

    Hola Jordiob,
    Para el tema de lo de facebook, en que archivo añado el codigo y en que sitio exactamente.

    Gracias

  16. Marco Responder

    Hola Jordi, y recomiendas algún módulo de prestashop que haga estos cambios de manera automática?

    • jordiob Responder

      no conozco ninguno, pero siempre es mejor hacerlo manualmente

  17. Fran Responder

    He probado lo del codigo para facebook, el nombnre y las decripcion la coje, pero la foto no. lo he puesto justo antes de breadcrum, pero no se ven

    • jordiob Responder

      hola Fran,el código es

      {*Invisible RDA data for Facebook*}


      {if $have_image}

      Antonio Responder

      Hola Jordi, he intentado todo lo anterior y mas cosas para conseguir que la imagen del producto salga cuando comparto el facebook, pero no hay manera…Llevo como un mes con esto y no lo consigo. Alguien puede decirme que misterioso problema hay en esto? gracias

      • jordiob Responder

        Pasame mail a jordiob arroba jordiob . Com y te echo uncable

    • Embutidos ibéricos Responder

      Muchas gracias por la información que llevaba un tiempo buscando, lo único que hay que estar atentos a los posibles cambios que schema.org va introduciendo en las etiquetas.

      Gracias

    • Asier Responder

      Buenas, lo primero enhorabuena a Jordi por el post, me ha servido de mucho.
      Por mi parte un pequeño aporte, ya que había el comentario del 1 de Julio de Alberto, que aunque estaba bien planteado, tenía algún error (no se si porque el blog “cortó” el código HTML…

      Mi modificación permite diferenciar entre las páginas generales de la tienda (inicio y otras) y las del catálogo (los productos en sí):


      {*Metas generales*}
      {if isset($meta_title)}

      {/if}

      {*Si es un producto pintamos lo siguiente*}
      {if ($page_name == "product")}

      {if isset($meta_description)}
      description_short|replace:'':''|replace:'':''}" />
      {/if}
      {if $have_image}
      getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" />
      {/if}
      {*Si es otra sección pintamos estos*}
      {else}

      {if isset($meta_description)}

      {/if}

      {/if}

      Además, por si a alguien más le ha sucedido eso de compartir algo en Facebook y que la imagen y textos que se muestran no son los correctos, si Jordi me lo permite, os dejo un link a otra web (con la que no tengo nada que ver) y en la que se explica como limpiar la chaché de Facebook y verificar los errores que podamos tener.

      Un saludo!

    • Felipe Responder

      Hola que tal, pero mi body que dices que remplace actualmente dice debo modificarlo o algo (para lo del shema)?

    • Javier Responder

      Hola a todos, no sé si es el hilo adecuado, pero tengo un problema y no sé dónde buscar ya:
      en el google webmaster tools, en los datos estructurados, me arroja errores indicando falta price (schema.org) Alguien me puede ayudar? gracias

      • jordiob Responder

        Hola Javier! Lo tienes implementado con un módulo?

        • Javier Responder

          Disculpa, ¿a qué te refieres exactamente? He ido añadiendo productos y unos dan este error y otros no, teniendo la misma configuración todos. ¿crees que algún módulo genera este error? Gracias por responder.

          • jordiob Responder

            ah! entonces no hay un patrón de error para todos los productos? puede ser que funcionen los que no tienen atributos o los que solo tienen un solo precio (no se altera el precio por atributos)?

            • Javier

              No, hay productos que dan error y otros no. Voy a comprobar que tengan un sólo precio y te cuento. Gracias por responder.

            • Javier

              Vaya, en la última actualización de estado de webmaster tools tengo 49 elementos con errores de un total de 51, esto va a peor…
              Los campos que he rellenado son los mismos para todos los productos, el fallo es el mismo:
              Error: Incomplete microdata with schema.org.
              En el resumen el error es “falta price”
              Voy a una armería a comprar una pistola…

    • Jesús Responder

      buenos dias, soy muy novato en esto del código. Uso prestashop 1.6.0.9 con el tema por defecto, y resulta que cuando busco mi header.tpl en deafaultbootstrap, en la etiqueta body tengo esto:

      Me pierdo, no se donde poner el código en este caso. Por favor, un poco de ayuda. Mis errores son los mismos que los de Javier, “Falta price”. Gracias.

      • jordiob Responder

        hola! no sale nada

    • Alba Responder

      Me pasa lo mismo que a Javier y a Jesús:

      Error: Incomplete microdata with schema.org.
      En el resumen el error es “falta price”

      ¿Alguien sabe donde está el problema?

    • ramiro Responder

      Hola Jordi buenos días. Me sirvió muchísimo el tema de facebook para compartir desde los productos. Ahora bien, utilizo en la web smartblog y tengo el problema sin resolver. ¿Tu me podrías indicar la línea a incluir para que esto también tenga efecto en compartir artículos del blog?.
      Gracias.

      • jordiob Responder

        hola Ramiro, no conozco smartblog, sorry

        • ramiro Responder

          Ok, gracias jordiob. Intento acomodar la línea pero obtengo la pagina en blanco. En los productos funciona bien. SmartBlog es un módulo gratuito para integrar en el ecommerce de prestashop 1.6. Gracias de todas formas.

    • jose Responder

      El código proporcionado, lo incluí aqui, en la pagina product.tpl:

      tabInfos[‘attribute’] = ‘{$aC.attribute}’;
      tabInfos[‘group’] = ‘{$aC.group}’;
      tabInfos[‘id_attribute_group’] = ‘{$aC.id_attribute_group|intval}’;
      attributesCombinations.push(tabInfos);
      {/foreach}
      {/if}
      //]]>

      {if $have_image}getImageLink($product->link_rewrite, $cover.id_image, ‘large_default’)}” />{/if}

      {include file=”$tpl_dir./breadcrumb.tpl”}

      {if isset($adminActionDisplay) && $adminActionDisplay}

      y no me funciona.

      Ayuda, profa!!

      • jordiob Responder

        Tienes que ponerlo en el header.tpl, si revisas los comentarios del post verás cómo se explica. El post está mal. Sorry

      • jordiob Responder

        atiende:

        {if $page_name == 'product'}


        {if $have_image}{/if}
        {/if}

    • Juan Responder

      Hola Jordi, estoy intentando poner esto:

      Pero no sé si tendría que quitar todo lo que hay entre , o agregarselo a la propia etiqueta tal que así:

      itemscope itemtype=”http://schema.org/WebPage” >

      un saludo!

    • Juan Responder

      Se ha comido parte del comentario, lo que me refiero es que si tengo que agregar ese atributo tal cual y ya, o sea, como class… e id, etc..?

      Otra cosa, es http://schema.org/WebPage o http://schema.org/Store que no me ha quedado del todo claro? xD

      un saludo!

      • jordiob Responder

        jelou! no lo entiendo, sorry

    • Juan Responder

      Disculpa, a lo mejor no me he explicado bien jeje

      Dentro de las etiquetas “”, en mi tema al menos, le sigue esto..

      {if isset($page_name)} id=”{$page_name|escape:’html’:’UTF-8′}”

      ectcétera.

      Mi pregunta es, cuando vaya a agregar lo de “itemscope itemtype=”http://schema.org/WebPage” >”, lo puedo poner al final de la etiqueta body, o tendría que borrar todos los atributos como id y class?

      Pd: a ver si me entiendes ahora, xD

      • jordiob Responder

        Ah ok! lo puedes poner al final de la etiqueta

    • Juan Responder

      Oki, gracias

    • Rubén Responder

      Hola Jordi, si utilizamos el marcado de datos estructurados con la herramienta que tenemos en Webmaster Tools, ¿es necesario rellenar todas las etiquetas meta de los productos?

      Gracias

      • jordiob Responder

        sip, es independiente

    • Joan Responder

      Hola Jordi…
      una gran aportación…!!
      Me surgen alguna dudas que sería de gran ayuda si pudieras comentar:
      Trabajo con una PS 1.6.0.9 y sale en ALGUNAS paginas de mis productos el mensaje que faltan datos estructurados, pero hay páginas de productos que en webmaster tools me aparecen sin errores. Entiendo que las modificaciones es para todos los productos, pero yo me pregunto, como es que sucede esto en algunos productos y en otros no ?? es normal ?? lógico ???

      También quería preguntarte si para la versión de 1.6.0.9 es válido ( lo que sugieres ) ???

      ultima pregunta:
      esto que sugieres que se añada o modifique:
      http://schema.org/WebPage

      se tiene que poner tal cual ?? o en WebPage tengo que poner mi dominio ?? ( vaya pregunta de principiante ehhh… jejejje ) es que no me gustaría cagarla ya que tengo mi tienda online en marcha y terminada y funcionando…

      muchas gracias de antemano Jordi…!!

    • Joan Responder

      Al primer paso de intentar modificar la pagina product.tpl me aparece un contratiempo:
      mi primary_block es una classe y no una id:

      crres que es oportuno modificarlo a id y también modificar todos los parametros css de la clase pasarlos a id ???

      gracias

    • Joan Responder

      Perdona.. acabo de comprovar que en la version 1.6.0.9 ya tiene todos estos paramentros puestos correctamente, almenos en mi version, pero igualemnte sigue saliendo el error :
      Error: Incomplete microdata with schema.org.

      gracias

    • Adrian Responder

      Hola Jordi,

      Para una tienda en prestashop 1.6 el procedimiento es el mismo ?

      Salu2

      • jordiob Responder

        hola! no, el marcado de schema viene integrado en el theme por defecto

    • Fran Responder

      genial post Jordi!!! He ido editando a piesjuntillas los archivos de PS y me ha ido de fabula en mi web http://www.silbanding.com

      Me ha surgido un pequeño problemilla al poner rich snippets a las reviews de mi web ya que el testing tool de google me dice: “La reseña no tiene ningún elemento con reseña especificado”.

      Sabes que puede ser? 🙁

      Gracias de antemano.
      Un saludo y sigue con estos post tan educativos

      • jordiob Responder

        ostras, ni idea!

    • Erik Responder

      Buenas Jordi, es aplicable esto a la versión 1.6 Sigue siendo importante en cuantoa SEO?

      • jordiob Responder

        Jelou Erik! en la mayoría de plantis ya viene por defecto

    • Marce Responder

      Hola Jordi,
      Muchas gracias por el post, (y por un montón de otros más que me han ayudado)
      He seguido este pero en web master tools de google me “canta” un error de validación con schema org, en concreto en el campo “price”, me dice que no está, que falta, y en el ejemplo que muestra, se ve el campo perfectamente con su valor y todo. Osea que lo muestra pero dice que no está.
      Concusión:que no se que hacer o que hice mal.
      Creo haber seguido tus instrucciones paso a paso, pero…¿¿??
      Tengo un 1.6
      Gracias de nuevo

      • jordiob Responder

        mira a ver si es porque tienes varios precios (antiguo y nuevo con dto)

    • Dani Responder

      Buenas Jordi,

      Muy buen post, pero no consigo solucionar nada… como ha muchos en GWT me sale que falta price tanto en páginas de categorias como en productos. Pero en la muestra de GWT me sale el price, pero ni marca ni modelo.

      Llevo buscando desde hace tiempo para solucionarlo pero no lo he conseguido ni de coña. Por lo que dices las plantillas del 1.6 ya vienen configurados los datos estructurados, pero no consigo solucionarlo.

      El método que indicas es para el 1.5, pero para 1.6 como sería? igual o deberiamos cambiar alguna cosa?

      Saludos y gracias de antemano.

      • jordiob Responder

        hay que tocarlo en el código, es la única manera

    • Javier Responder

      Buenas Jordi,

      Esto es aplicable para la version 1.6 de prestashop?

      Un saludo y gracias

    • Essenciales Responder

      Hola Jordi,

      Trabajo con la versión 1.6.1.4 de PS, y como al amigo Joan le ocurría solo me aparecen algunos productos como datos estructurados… ¿O todos o ninguno, no?
      ¿Quizá es que la cuenta de la Search Console solo tiene una semana?

      Merci

    • ALBERTO Responder

      Hola Jordi, Va la la version 1.6 de Presta.

      Saludos

Deja un comentario

Your email address will not be published. Please enter your name, email and a comment.