{"id":6625,"date":"2014-04-30T10:50:50","date_gmt":"2014-04-30T08:50:50","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=6625"},"modified":"2014-04-30T11:11:31","modified_gmt":"2014-04-30T09:11:31","slug":"seo-con-html5-conceptos-y-los-microdatos","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/seo-con-html5-conceptos-y-los-microdatos\/","title":{"rendered":"SEO con HTML5. Conceptos y los Microdatos."},"content":{"rendered":"

En los \u00faltimos a\u00f1os la estrategia a la hora de crear sites\u00a0ha cambiado sustancialmente.<\/span>
\n Si bien es cierto que la imagen, el dise\u00f1o y la usabilidad es importante, se ha convertido en algo vital estar bien posicionado.
\nPuesto que el posicionamiento org\u00e1nico-natural (SEO) aporta visitas, y las visitas incentivan las ventas o el\u00a0negocio.<\/span><\/p>\n

Para ayudar a los web\u00a0spiders<\/span><\/a> como google<\/strong> a rastear nuestro contenido, existen infinidad de t\u00e9cnicas o estrategias. (ver SEOTIPS<\/span><\/a>).<\/span><\/p>\n

En esta entrada voy a centrarme en los microdatos, esa informaci\u00f3n no visible al ojo humano pero que existe dentro del HTML<\/strong> y que aporta valor a\u00f1adido a los agentes de los buscadores que nos visitan<\/strong>.\u00a0Los microdatos son propiedades del etiquetado <\/strong>que nos permiten definir el significado del contenido de cada una de las etiquetas, su carga sem\u00e1ntica<\/strong>.<\/span><\/p>\n

Mediante HTML5 podremos crear informaci\u00f3n sensible a los buscadores de forma eficaz.<\/span>
\n Hace ya tiempo, para crear fragmentos enriquecidos HTML y a\u00f1adir informaci\u00f3n sem\u00e1ntica a la web v\u00e1lida para propositos SEO surgieron\u00a03 est\u00e1ndares:<\/span><\/p>\n

Microdatos (HTML5)<\/strong>, \u00a0Microformatos <\/strong>y RDFa<\/strong><\/span><\/a><\/span><\/p>\n

Cada buscador era compatible con alguno de estos tres, por ejemplo google con microdatos, yahoo con microformatos\u2026<\/span><\/p>\n

<\/span><\/p>\n

Los microformatos<\/strong> son porciones de c\u00f3digo HTML (o XHTML) que permiten estructurar informaci\u00f3n aprovechando los atributos “id” o “class” empleadas por algunas etiquetas del HTML.<\/span><\/p>\n

RDFa<\/strong> es en esencia una generalizaci\u00f3n de los atributos de los elementos\u00a0<\/strong>meta<\/i>\u00a0y\u00a0link<\/i><\/strong>\u00a0de XHTML<\/strong>. La a min\u00fascula que se a\u00f1ade a las siglas RDF es precisamente la inicial de la palabra “atributos”.<\/span><\/p>\n

Los tres tipos tratan de resolver el mismo problema, pero de formas diferentes. \u00a0\u00bfCuales son esas\u00a0Diferencias?<\/span><\/p>\n

Pues parece evidente que el m\u00e1s c\u00f3modo y limpio es el microdato<\/strong>. De hecho, la posibilidad de agrupar todas las etiquetas “sem\u00e1nticas”<\/strong> permite diferenciarlas del resto (las del dise\u00f1o), con lo que el trabajo es m\u00e1s intuitivo<\/strong>.<\/span><\/p>\n

Otra ventaja es el hecho de contar con el respaldo de Schema.org<\/span><\/a><\/strong>. \u00a0Esto nos permite, por un lado tener cierto nivel de normalizaci\u00f3n en el etiquetado. Por ende, una mayor flexibilidad en la descripci\u00f3n, ya que es posible combinar diferentes esquemas para lograr una descripci\u00f3n m\u00e1s precisa. Otra caracteristica es que a Google le gustan mucho mas\u00a0los microdatos.<\/span><\/p>\n

Hace tiempo solamente exist\u00eda un \u00fanico sitio donde estaban los vocabularios<\/strong> que se pod\u00edan insertar en los microdatos que era:\u00a0<\/span>http:\/\/data-vocabulary.org<\/span><\/a>,<\/span><\/p>\n

Pero entonces llego\u00a0shema.org<\/span><\/a>\u00a0que lo que hizo fue usar un \u00fanico est\u00e1ndar para mostrar fragmentos enriquecidos, en este caso microdatos , con un vocabulario com\u00fan para todos que es\u00a0http:\/\/shema.org<\/span><\/a>\u00a0que es compatible por la inmensa mayor\u00eda.<\/span><\/p>\n

En definitiva HTML5 \u00a0usas microdatos<\/strong> pero con un vocabulario com\u00fan para todos que es \u00a0schema.org<\/span>\u00a0<\/span><\/a><\/span><\/p>\n

Ejemplo del uso de Microdatos en HTML5<\/strong><\/span><\/p>\n

Los microdatos requieren un contenedor de datos (itemscope<\/strong>) , itemtype<\/strong> (propiedades), y los datos (itemprop<\/strong>)<\/span><\/p>\n

Ejemplo de HTM5 y microdatos:<\/strong><\/span><\/p>\n

\u00a0<\/span><\/p>\n

<html>\r\n<head><\/head>\r\n<body><header><\/header><nav><\/nav>\r\n\r\n<article><section>\r\n<div itemscope itemtype=\"https:\/\/schema.org\/Person\">\r\nMi nombre es <span itemprop=\"name\">Oscar<\/span>\r\nMi pagina web es <span itemprop=\"url\">www.palentino.es <\/span>\r\nEsto es un <span itermprop=\"title\"> Ejemplo de SEO con HTML5 <\/span>\r\n<\/div><\/section>\r\n\r\n<\/article>\r\n<\/body>\r\n<\/html><\/span><\/pre>\n
\u00a0<\/span><\/p>\n
Lista de propiedades de los microdatos<\/strong><\/span><\/p>\n
Un elemento del tipo http:\/\/schema.org\/Person<\/span><\/a> representa una persona.<\/span>
\n Los siguientes elementos son los tipos de nombres de propiedad definidos:<\/span><\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Propiedad<\/span><\/th>\nDescripci\u00f3n<\/span><\/th>\n<\/tr>\n<\/thead>\n
name<\/span><\/td>\nNombre<\/span><\/td>\n<\/tr>\n
nickname<\/span><\/td>\nNick (pseud\u00f3nimo)<\/span><\/td>\n<\/tr>\n
photo<\/span><\/td>\nUna imagen<\/span><\/td>\n<\/tr>\n
title<\/span><\/td>\nEl t\u00edtulo de la persona (Por ejemplo: \u201cFrontEnd Developer\u201d)<\/span><\/td>\n<\/tr>\n
role<\/span><\/td>\nEl rol de la persona (Por ejemplo: \u201cTeam Lead\u201d)<\/span><\/td>\n<\/tr>\n
url<\/span><\/td>\nEnlace a la p\u00e1gina web de la persona<\/span><\/td>\n<\/tr>\n
affiliation<\/span><\/td>\nNombre de la organizaci\u00f3n a la cual la persona est\u00e1 asociada (Por ejemplo: empresa donde trabajas)<\/span><\/td>\n<\/tr>\n
friend<\/span><\/td>\nIdentifica la relaci\u00f3n entre una persona y otra.<\/span><\/td>\n<\/tr>\n
contact<\/span><\/td>\nIdentifica la relaci\u00f3n entre la persona descrita y otra persona<\/span><\/td>\n<\/tr>\n
acquaintance<\/span><\/td>\nIdentifica la relaci\u00f3n entre la persona descrita y otra persona<\/span><\/td>\n<\/tr>\n
address<\/span><\/td>\nLa localizaci\u00f3n de la persona. Puede tener subpropiedades como: calle, localidad, regi\u00f3n, c\u00f3digo postal, pa\u00eds y nombre.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u00a0<\/span><\/p>\n
Posicionando una\u00a0tienda online con la etiqueta\u00a0Product<\/em><\/strong><\/span><\/p>\n
Cuando creamos tiendas online, se pueden etiquetar infinidad de cosas. Es bastante interesante para mejorar la informaci\u00f3n que damos sobre nuestros productos a los spiders. Para etiquetarlos contamos con la etiqueta product. Esta descripci\u00f3n nos la ofrece el schema.org.<\/span><\/p>\n
http:\/\/schema.org\/Product<\/span><\/a><\/span><\/p>\n
Ejemplo de texto a insertar dentro de HTML5<\/strong><\/span><\/p>\n
Mi unidad de discp duro SSD<\/span>
\n <img src=”discoduro-sd.jpg” \/><\/span>
\n Valoraci\u00f3n 4.5\/5 basado en la valoraci\u00f3n de 14 clientes<\/span><\/p>\n
75.00\u20ac<\/span>
\n Disponible<\/span><\/p>\n
Descripci\u00f3n del producto:<\/span>
\n Disco duro SSD de alto rendimiento y tal …<\/span><\/p>\n
Comentarios de los clientes:<\/span><\/p>\n
estoy muy contento – por Oscar,1 de mayo de 2014<\/span>
\n 5\/5 estrellas<\/span><\/p>\n
Traducido a HTML5<\/strong><\/span><\/p>\n
<div itemscope itemtype=\"http:\/\/schema.org\/Product\">\r\n<span itemprop=\"name\">Mi unidad de discp duro SSD\" <\/span>\r\n<img src=\"discoduro-sd.jpg\" \/>\r\n<div itemprop=\"aggregateRating\"\r\nitemscope itemprop=\"http:\/\/schema.org\/AggregateRating\">\r\nValoraci\u00f3n <span itemprop=\"ratingValue\">4.5<\/span>\/5\r\nbasado en la valoraci\u00f3n de <span itemprop=\"reviewCount\">14<\/span> clientes\r\n<\/div>\r\n\r\n<div itemprop=\"offers\" itemscope itemtype=\"http:\/\/schema.org\/Offer\">\r\n<span itemprop=\"price\">75.00 \u20ac<\/span>\r\n<link itemprop=\"availability\" href=\"http:\/\/schema.org\/InStock\" \/>Disponible\r\n<\/div>\r\n\r\nDescripci\u00f3n del producto:\r\n<span itemprop=\"description\">Disco duro de alto rendimiento y tal.<\/span>\r\n\r\nComentarios de los clientes::\r\n\r\n<div itemprop=\"reviews\" itemscope itemtype=\"http:\/\/schema.org\/Review\">\r\n<span itemprop=\"name\">Estoy muy contento<\/span> -\r\npor <span itemprop=\"author\">OScar<\/span>,\r\n<time itemprop=\"publishDate\" datetime=\"2014-05-01\">1 de Mayo de 2014<\/time>\r\n<div itemprop=\"reviewRating\" itemscope itemtype=\"http:\/\/schema.org\/Rating\">\r\n<meta itemprop=\"worstRating\" content = \"1\">\r\n<span itemprop=\"ratingValue\">1<\/span>\/\r\n<span itemprop=\"bestRating\">5<\/span>estrellas\r\n<\/div>\r\n\r\n...\r\n<\/div>\r\n\r\n<\/span><\/pre>\n
\u00a0<\/span><\/p>\n
Google nos ofrece una herramienta para testear si hemos puesto bien nuestras etiquetas<\/strong>. <\/span><\/p>\n
Se llama\u00a0Rich Snippets testing tool<\/span><\/a>\u00a0(http:\/\/www.google.com\/webmasters\/tools\/richsnippets<\/a>).
\nSe introduce la URL de la p\u00e1gina que has etiquetado e indica c\u00f3mo saldr\u00e1 en buscadores.<\/span><\/p>\n
\u00a0<\/span><\/p>\n
Para finalizar, aunque\u00a0Google afirme que el hecho de tener microdatos con schema no llega a influir en el ranking de resultados naturales, es l\u00f3gico pensar que esto cambie y que una p\u00e1gina bien estructurada facilite el trabajo de\u00a0interpretaci\u00f3n de los contenidos, mejorando el posicionamiento del sitio. <\/span><\/p>\n
Considero adem\u00e1s que google en sus sucesivos algoritmos trate de dar peso a este aspecto, puesto que los SEOs facilitan\u00a0a sus buscadores el trabajo a la hora de analizar el contenido<\/strong>.<\/span><\/p>\n
\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
En los \u00faltimos a\u00f1os la estrategia a la hora de crear sites\u00a0ha cambiado sustancialmente. Si bien es cierto que la imagen, el dise\u00f1o y la usabilidad es importante, se ha convertido en algo vital estar bien posicionado. Puesto que el posicionamiento org\u00e1nico-natural (SEO) aporta visitas, y las visitas incentivan las ventas o el\u00a0negocio. Para ayudar a los web\u00a0spiders como google a rastear nuestro contenido, existen infinidad de t\u00e9cnicas o estrategias. (ver SEOTIPS). En esta entrada voy a centrarme en los microdatos, esa informaci\u00f3n no visible al ojo humano pero que existe dentro del HTML y que aporta valor a\u00f1adido a los agentes de los buscadores que nos visitan.\u00a0Los microdatos son propiedades del etiquetado que nos permiten definir el significado del contenido de cada una de las etiquetas, su carga sem\u00e1ntica. Mediante HTML5 podremos crear informaci\u00f3n sensible a los buscadores de forma eficaz. Hace ya tiempo, para crear fragmentos enriquecidos HTML y a\u00f1adir informaci\u00f3n sem\u00e1ntica a la web v\u00e1lida para propositos SEO surgieron\u00a03 est\u00e1ndares: Microdatos (HTML5), \u00a0Microformatos y RDFa Cada buscador era compatible con alguno de estos tres, por ejemplo google con microdatos, yahoo con microformatos\u2026<\/p>\n","protected":false},"author":1,"featured_media":6632,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,240,14],"tags":[685,25,659],"class_list":["post-6625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-seotips-seo","category-varios","tag-html5","tag-posicionamiento","tag-seo"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=6625"}],"version-history":[{"count":26,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6625\/revisions"}],"predecessor-version":[{"id":6652,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6625\/revisions\/6652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/6632"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=6625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=6625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=6625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}