{"id":252,"date":"2012-10-25T12:07:15","date_gmt":"2012-10-25T10:07:15","guid":{"rendered":"http:\/\/www.atrioweb.com\/blog\/?p=252"},"modified":"2022-02-03T13:52:59","modified_gmt":"2022-02-03T12:52:59","slug":"fragmentos-enriquecidos-para-destacar-en-google-y-aumentar-las-visitas","status":"publish","type":"post","link":"https:\/\/www.atrioweb.com\/blog\/atrio\/fragmentos-enriquecidos-para-destacar-en-google-y-aumentar-las-visitas","title":{"rendered":"Fragmentos enriquecidos para destacar en Google y aumentar las visitas"},"content":{"rendered":"<p>Google ha puesto en marcha recientemente (mayo de 2012) una recomendaci\u00f3n de marcado HTML denominada &#8216;datos estructurados&#8217; que permite al robot de b\u00fasqueda mejorar la indexaci\u00f3n de los contenidos de una web y mostrarlos de una forma m\u00e1s destacada y precisa en el buscador, con &#8216;fragmentos enriquecidos&#8217; (rich snippets), lo que puede redundar en un aumento de visitas.<\/p>\n<p>Despu\u00e9s de implementar esta f\u00f3rmula de marcado HTML en la web de uno de nuestros clientes m\u00e1s queridos, <strong>Musimaster<\/strong>, <a href=\"http:\/\/www.musimaster.com\/\" target=\"_blank\" rel=\"noopener\">una tienda de venta online de instrumentos musicales<\/a> desarrollada con Prestashop, hemos comprobado que se est\u00e1 produciendo efectivamente un aumento nada despreciable de las visitas a la p\u00e1gina como consecuencia de una mejora en la visibilidad de los productos de la web en Google con los &#8216;fragmentos enriquecidos&#8217;.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2012\/10\/musimaster-google3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-260\" title=\"Datos estructurados de Musimaster en Google\" src=\"http:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2012\/10\/musimaster-google3.jpg\" alt=\"\" width=\"529\" height=\"100\" srcset=\"https:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2012\/10\/musimaster-google3.jpg 529w, https:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2012\/10\/musimaster-google3-300x56.jpg 300w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/a><\/p>\n<p><!--more--><\/p>\n<p>Google ofrece fragmentos enriquecidos para los siguientes tipos de contenidos:<\/p>\n<ul>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=146645\">Opiniones<\/a><\/li>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=146646\">Personas<\/a><\/li>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=146750\">Productos<\/a><\/li>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=146861\">Empresas y organizaciones<\/a><\/li>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=173379\">Recetas<\/a><\/li>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=164506\">Eventos<\/a><\/li>\n<li><a href=\"http:\/\/support.google.com\/webmasters\/bin\/answer.py?answer=1623047\">M\u00fasica<\/a><\/li>\n<\/ul>\n<p>Nosotros hemos implementado este tipo de c\u00f3digo en las <strong>p\u00e1ginas de productos <\/strong>de <a href=\"http:\/\/www.musimaster.com\/\" target=\"_blank\" rel=\"noopener\">Musimaster<\/a>, y en este art\u00edculo vamos a explicar brevemente c\u00f3mo implementar este tipo de c\u00f3digo.<\/p>\n<h2>HTML estructurado en p\u00e1ginas de producto<\/h2>\n<p>En primer lugar, hay que tener en cuenta dos importantes condiciones impuestas por Google para que el robot acepte la presencia en el c\u00f3digo de datos estructurados relativos al producto:<\/p>\n<ol>\n<li>Es necesario que el producto se pueda comprar directamente en la p\u00e1gina.<\/li>\n<li>El tema principal de la p\u00e1gina debe tratar sobre un producto espec\u00edfico. No se admite el marcado de productos en p\u00e1ginas de listados de productos.<\/li>\n<\/ol>\n<p>En la web de <a href=\"http:\/\/www.musimaster.com\/\" target=\"_blank\" rel=\"noopener\">Musimaster<\/a>, cada p\u00e1gina de producto contiene informaci\u00f3n detallada acerca del producto: nombre, marca, categor\u00eda, precio, descripci\u00f3n, etc.<\/p>\n<p>Simplificando y eliminando el c\u00f3digo HTML circundante, el texto principal de cada p\u00e1gina producto es similar al ejemplo siguiente, correspondiente a una <a href=\"http:\/\/www.musimaster.com\/guitarras-acusticas-fender\/3841-guitarra-electroacustica-fender-cd110ce-blk.html\" target=\"_blank\" rel=\"noopener\">guitarra Fender, modelo CD110CE BLK<\/a>:<\/p>\n<pre style=\"font-size: 11px;\"><strong>Nombre:<\/strong> FENDER CD110CE BLK\n\n<strong>Categor\u00eda:<\/strong> Guitarras y Bajos &gt; Guitarras Ac\u00fasticas &gt; \nFender.\n\n<strong>Fabricante:<\/strong> Fender\n\n<strong>Imagen:<\/strong> &lt;img itemprop=\"image\"\nsrc=\"\/img\/guitarra-electroacustica-fender-cd110ce-blk.jpg\"&gt;\n\n<strong>Precio:<\/strong> 265,00 \u20ac\n\n<strong>Disponibilidad:<\/strong> En stock\n\n<strong>Condici\u00f3n:<\/strong> Nuevo.\n\n<strong>Valoraci\u00f3n:<\/strong> 4,4 sobre un total de 35\n\n<strong>Descripci\u00f3n:<\/strong> Guitarra electroac\u00fastica\nFender modelo CD-110CE. Color Black. Cuerpo Dreadnought\ncon Cutaway. Tapa de abeto laminado. Fondo y aros de Nato\nlaminado. 20 trastes. M\u00e1stil de nato. Diapas\u00f3n de palosanto.\nInlays dot. Electr\u00f3nica Fishamn Presys con afinador\nincorporado. Clavijero cromado.\n\n<\/pre>\n<p>Pues bien, el marcado HTML que propone Google para que el buscador presente esta informaci\u00f3n con fragmentos enriquecidos es el siguiente:<\/p>\n<pre style=\"font-size: 11px;\">&lt;div itemscope itemtype=\"http:\/\/data-vocabulary.org\/Product\"&gt;<\/pre>\n<div style=\"margin: 0 0 0 20px;\"><strong>Nombre:<\/strong> &lt;span itemprop=\u00bbname\u00bb&gt;FENDER CD110CE BLK&lt;\/span&gt; <strong>Categor\u00eda:<\/strong> &lt;span itemprop=\u00bbcategory\u00bb content=\u00bbGuitarras y Bajos &gt; Guitarras Ac\u00fasticas &gt; Fender\u00bb&gt;Guitarras y Bajos &amp;gt; Guitarras Ac\u00fasticas &amp;gt; Fender&lt;\/span&gt; <strong>Fabricante:<\/strong> &lt;span itemprop=\u00bbbrand\u00bb&gt;Fender&lt;\/span&gt; <strong>Imagen:<\/strong> &lt;img itemprop=\u00bbimage\u00bb src=\u00bb\/img\/guitarra-electroacustica-fender-cd110ce-blk.jpg\u00bb&gt; &lt;div itemprop=\u00bbofferDetails\u00bb itemscope itemtype=\u00bbhttp:\/\/data-vocabulary.org\/Offer\u00bb&gt;\n<div style=\"margin: 0 0 0 40px;\"><strong>Precio:<\/strong> &lt;span itemprop=\u00bbprice\u00bb&gt;265,00 \u20ac&lt;\/span&gt; <strong>[Moneda]:<\/strong> &lt;meta itemprop=\u00bbcurrency\u00bb content=\u00bbEUR\u00bb&gt; <strong>Disponibilidad:<\/strong> &lt;span itemprop=\u00bbavailability\u00bb content=\u00bbin_stock\u00bb&gt; En stock&lt;\/span&gt; <strong>Condici\u00f3n:<\/strong> &lt;meta itemprop=\u00bbcondition\u00bb content=\u00bbnew\u00bb&gt;<\/div>\n&lt;\/div&gt; &lt;div itemprop=\u00bbreview\u00bb itemscope itemtype=\u00bbhttp:\/\/data-vocabulary.org\/Review-aggregate\u00bb&gt;\n<div style=\"margin: 0 0 0 40px;\"><strong> Valoraci\u00f3n: <\/strong>&lt;span itemprop=\u00bbrating\u00bb&gt;4,4&lt;\/span&gt; sobre un total de &lt;span itemprop=\u00bbcount\u00bb&gt;35&lt;\/span&gt; opiniones.<\/div>\n&lt;\/div&gt; <strong>Descripci\u00f3n:<\/strong> &lt;span itemprop=\u00bbdescription\u00bb&gt;Guitarra electroac\u00fastica Fender modelo CD-110CE. Color Black. Cuerpo Dreadnought con Cutaway. Tapa de abeto laminado. Fondo y aros de Nato laminado. 20 trastes. M\u00e1stil de nato. Diapas\u00f3n de palosanto. Inlays dot. Electr\u00f3nica Fishamn Presys con afinador incorporado. Clavijero cromado.&lt;\/span&gt;<\/div>\n<pre style=\"font-size: 11px;\">&lt;\/div&gt;<\/pre>\n<p>Las caracter\u00edsticas del marcado son las siguientes:<\/p>\n<ul>\n<li>Todas las caracter\u00edsticas del producto aparecen enmarcadas por un bloque div: <code>&lt;div itemscope itemtype=\"http:\/\/data-vocabulary.org\/Product\"&gt;<\/code><\/li>\n<li>Dentro de este bloque div que lo engloba todo aparece otros dos divs anidados:\n<ol>\n<li>El primer div anidado (<code>&lt;div itemprop=\"offerDetails\" itemscope itemtype=\"http:\/\/data-vocabulary.org\/Offer\"&gt; <\/code>) agrupa la informaci\u00f3n relativa a una <em>oferta concreta<\/em> de ese producto: precio, disponibilidad y condici\u00f3n. Aunque no es nuestro caso, en la misma p\u00e1gina podr\u00eda haber varias ofertas relativas al mismo producto. Esta informaci\u00f3n puede dar lugar a que Google muestre un fragmento enriquecido de una l\u00ednea adicional mostrando estas caracter\u00edsticas.<\/li>\n<li>El segundo div anidado(<code>&lt;div itemprop=\"review\" itemscope itemtype=\"http:\/\/data-vocabulary.org\/Review-aggregate\"&gt;<\/code>) agrupa la informaci\u00f3n referente a la opini\u00f3n global del p\u00fablico sobre ese producto. Esta informaci\u00f3n puede dar lugar a que Google muestre un fragmento enriquecido de una l\u00ednea adicional mostrando la valoraci\u00f3n del producto en forma de estrellitas.<\/li>\n<\/ol>\n<\/li>\n<li>Cada caracter\u00edstica del producto, como el nombre, la marca y el precio, se etiqueta con un <code>&lt;div&gt;<\/code> o un <code>&lt;span&gt;<\/code> y se les asigna el atributo <code>itemprop<\/code> que indica una propiedad (por ejemplo, <code>&lt;span itemprop=\"brand\"&gt;<\/code>).<\/li>\n<li>En nuestro ejemplo hemos utilizado <code>div<\/code> y <code>span<\/code>, aunque puede usarse cualquier otra etiqueta HTML. De hecho, en la web de Musimaster hemos utilizado para el nombre del producto un h2: <code>&lt;h2 itemprop=\"name\"&gt;FENDER CD110CE BLK&lt;\/h2&gt;<\/code>.<\/li>\n<li>Google advierte que s\u00f3lo utilizar\u00e1 datos que sean visibles para el usuario, con algunas excepciones, entre las que se encuentran: categor\u00eda, moneda, precio, y condici\u00f3n. Si se quiere utilizar estas caracter\u00edsticas de forma oculta en el marcado HTML se debe utilizar -en general- la etiqueta meta, como por ejemplo para indicar la moneda: <code>&lt;meta itemprop=\"currency\" content=\"EUR\" \/&gt;<\/code>.<\/li>\n<\/ul>\n<p>Para conocer en detalle todos los par\u00e1metros que se pueden utilizar, visita <a href=\"https:\/\/support.google.com\/webmasters\/bin\/answer.py?hl=es&amp;answer=146750\" target=\"_blank\" rel=\"noopener\">la p\u00e1gina de informaci\u00f3n de Google sobre fragmentos enriquecidos en productos<\/a>.<\/p>\n<h2>Efectos SEO<\/h2>\n<p>Google no afirma -ni desmiente- que la presencia de datos estructurados en una p\u00e1gina redunde en un mejor posicionamiento de la misma. Lo que s\u00ed est\u00e1 demostrado -y parace bastante obvio- es que la presencia de fragmentos enriquecidos en los resultados de b\u00fasqueda tiene consecuencias:<\/p>\n<ol>\n<li>Aporta mayor informaci\u00f3n relativa a la b\u00fasqueda efectuada por el usuario<\/li>\n<li>Provoca que el usuario preste mayor atenci\u00f3n al resultado de tu p\u00e1gina.<\/li>\n<li>Incrementa la tasa de \u00e9xito de conversi\u00f3n de los clicks en ventas y reduce la tasa rebote (el n\u00famero de usuarios que abandonan inmediatamente la p\u00e1gina porque no encuentran lo que estaban buscado).<\/li>\n<\/ol>\n<p>Mira por ejemplo c\u00f3mo muestra Google el resultado de una b\u00fasqueda y como destaca el resultado de <a href=\"http:\/\/www.musimaster.com\/\" target=\"_blank\" rel=\"noopener\">Musimaster<\/a>:<\/p>\n<p><a href=\"http:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2012\/10\/musimaster-google2.jpg\"><img loading=\"lazy\" decoding=\"async\" title=\"musimaster-google2\" src=\"http:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2012\/10\/musimaster-google2-530x399.jpg\" alt=\"B\u00fasqueda en Google. Fragmentos enriquecidos\" width=\"530\" height=\"399\" \/><\/a><\/p>\n<p>En definitiva, los fragmentos enriquecidos van a desencadenar no s\u00f3lo un aumento de las visitas, sino tambi\u00e9n de la <em>calidad <\/em>de los visitantes a una p\u00e1gina web.<\/p>\n<h2>Corolario<\/h2>\n<p>Si tienes una web de comercio electr\u00f3nico, no esperes m\u00e1s y implementa los datos estructurados en tus p\u00e1ginas de producto. Sin duda, merece la pena. Los beneficios son inmensos en comparaci\u00f3n con lo sencillo que resulta implementarlos.<\/p>\n<p><strong>Nuestra empresa, Atrio. Arquitectura Web, puede ayudarte a implementar esta soluci\u00f3n en tu web. <a href=\"http:\/\/www.atrioweb.com\/cnt\" target=\"_blank\" rel=\"noopener\">Ponte en contacto con nosotros<\/a> si quieres m\u00e1s informaci\u00f3n al respecto.<\/strong><\/p>\n<p>\u00a0<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google ha puesto en marcha recientemente (mayo de 2012) una recomendaci\u00f3n de marcado HTML denominada &#8216;datos estructurados&#8217; que permite al robot de b\u00fasqueda mejorar la indexaci\u00f3n de los contenidos de una web y mostrarlos de una forma m\u00e1s destacada y &hellip; <a href=\"https:\/\/www.atrioweb.com\/blog\/atrio\/fragmentos-enriquecidos-para-destacar-en-google-y-aumentar-las-visitas\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11,5],"tags":[],"class_list":["post-252","post","type-post","status-publish","format-standard","hentry","category-atrio","category-google","category-seo-posicionamiento-web"],"_links":{"self":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":69,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions\/465"}],"wp:attachment":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}