Taller sobre los beneficios del HTML5 al SEO de una web en la sala Camon de Madrid Santiago Montiu HTML5 SEO Nuevas etiquetas Internacionalización Microformatos RDFa Microdata Contenido enriquecido

1. Beneficios del HTML5 al
SEO de una web
5 y 6 de Noviembre 2013

2. Santiago Montiu
Frontend Lead
santiago@montiu.es
@smontiu
&

3.  ¿ QUÉ ES EL SEO ?
 ¿ QUÉ ES EL HTML5 ?
 BENEFICIOS
 SEMÁNTICA
 DISEÑO != ESTRUCTURA
 ESTRUCTURAS HTML
 ORGANIZACIÓN DE CONTENIDOS
 <MAIN>
 MICROFORMATOS PROS y CONTRAS
 RDFa PROS y CONTRAS
 MICRODATA PROS Y CONTRAS

4. ¿ Qué es el SEO ?

5. No es MAGIA

14. Tengo cantidad pero no calidad

15. Menos enlazar y más compartir
Autoría en contenidos

17. Contenidos
• De calidad (shares)
• Actualizados (date)
• Mayor cantidad (items)
• Estructurados
o Ordenados (logic)
o Enlazados (itemref)
o Referenciados (autoría) (person)

18. ¿ Qué es el HTML5 ?

19. Presente y no futuro

20. Conjunto de tecnologías HTML5

22. Cambios en HTML5

23. Eliminación de etiquetas
Estilado  CSS3
Deprecated
Nuevo etiquetado  Enfoque semántico
Internacionalización
Valor semántico
Simplificación de estructuras
Identificación de elementos
...

24. Problemas en la Internacionalización de contenidos

25. ¿Cómo lo evito?

26. Internacionalización
Nuevas etiquetas HTML5
<ruby></ruby>
<bdi></bdi>
<rt></rt>
<bdo></bdo>
<rp></rp>
<wbr>

27. Internacionalización
<ruby></rudy>
Anotaciones extras para mostrar pronunciaciones de los
caracteres del Este asiático (Japón)

28. Internacionalización
<rt></rt>
Anotaciones internas de etiquetas <ruby></ruby>

29. Internacionalización
<rp></rp>
Fallback para anotaciones internas de etiquetas
<ruby></ruby>

30. Internacionalización
<bdi></bdi>
Bi-directional Isolation Element
Cuando dudamos de la dirección de escritura del
contenido del elemento.

31. Internacionalización
<bdo></bdo>
Aislar la bidireccionalidad de escritura en
contenidos. Sobrescribiendo la actual.
Atributo :
dir
ltr: left-to-right.
rtl: right-to-left.
auto: El navegador decide la dirección del contenido. (Traductor)

32. Internacionalización
<wbr>
Representa una oportunidad de salto de línea
En ocasiones nos gustaría indicar por donde tiene
que romper una frase o texto.
Ahora ya podemos
Ej:
mi casa es de ...
Muy usado y recomendado por Yahoo! para romper las url antes del marcado.

33. Valor Semántico
<section></section>
Define una sección de un documento. No puede ser
elemento descendiente o hijo de <address>

34. Valor Semántico
<nav></nav>
Define una navegación dentro del documento. Se
trata de una sección en si misma compuesta
únicamente por enlaces que apunta a otros
documentos o partes propias # hashtag
No puede ser elemento descendiente o hijo de
<address>

35. Valor Semántico
<article></article>
Define un contenido separado del resto del
documento o site. Que posee valor propio
(significado).
No puede ser elemento descendiente o hijo de
<address>

36. Valor Semántico
<aside></aside>
Define un contenido separado del resto del
documento con un valor irrelevante para el resto. Si
se eliminase el resto seguiría manteniendo sentido
y significado propio.
No puede ser elemento descendiente o hijo de
<address>

37. Valor Semántico
<header></header>
Define el encabezado de una sección.
No puede ser elemento descendiente o hijo de
<footer>
No puede ser elemento descendiente o hijo de
<address>
No puede ser elemento descendiente o hijo de
<header>

38. Valor Semántico
<footer></footer>
Define el pie de una sección.
No puede ser elemento descendiente o hijo de
<footer>
No puede ser elemento descendiente o hijo de
<address>
No puede ser elemento descendiente o hijo de
<header>

39. Valor Semántico
<main></main>
Define el contenido principal.
No puede ser elemento descendiente o hijo de
<article>
No puede ser elemento descendiente o hijo de
<aside>
No puede ser elemento descendiente o hijo de
<header>
No puede ser elemento descendiente o hijo de
<nav>

40. Valor Semántico
<figure></figure>
Define una única unidad con respecto al contenido
principal, no teniendo por que ser independiente
del contenido.
Puede ir acompañada de <figcaption></figcaption>
para indicar una leyenda, encabezamiento, título, o
subtítulo.
Normalmente se hace referencia desde el contenido
principal.

41. Valor Semántico
<time></time>
Define un tiempo o una fecha.
Atributo:
datetime especifica el valor de lo que representa el
elemento. RFC 3339
No puede ser elemento descendiente o hijo de
<time>

42. Valor Semántico
<mark></mark>
Define un contenido con relevancia dentro del
contexto, también como referencias a otros
contextos.
No puede ser elemento descendiente o hijo de
<time>

43. Contenido embebido
<video></video>
<audio></audio>
<source></source>
<track></track>
<canvas></canvas>
<svg></svg>
<math></math>
<embed></embed>

44. Formularios
<datalist></datalist>
<keygen></keygen>
<output></output>
<progress></progress>
<meter></meter>

45. <datalist></datalist>

46. <keygen></keygen>

47. Elementos interactivos
<details></details> widget para obtener mayor información
<summary></summary> leyenda de <details>
<menuitem></menuitem> representa un comando
<menu></menu> representa una lista de comandos

48. Estructura != Diseño

49. Contenido Semántico y SEO

50. Estudio previo, análisis y planificación
1º Organización, jerarquía y composición de contenidos.
2º Identificación del contenido principal.
3º Valor y relevancia de secciones.
4º Subsecciones e items internos.

51. Marcado del contenido
aportando valor y sentido

52. Microformatos
RDFa
Microdata

53. Microformatos

54. Microformatos
“Designed for humans first and machines second, microformats are a set of simple,
open data formats built upon existing and widely adopted standards.”
Convenciones para describir un tipo concreto de información, definir las
propiedades de cada identidad, como por ejemplo : una persona, un
evento, un lugar, una opinión, ...
Utilizan el atributo class para identificar cada entidad y sus propiedades
http://microformats.org/

56. Microformatos
Utilizan el atributo class para identificar cada entidad y sus propiedades
Prefijos independientes de los vocabularios
h-*  marca del vocabulario
p-*  propiedades (texto)
u-*  propiedades (url)
dt-*  propiedades (marcas temporales)
e-* propiedades (elementos embebidos)
http://microformats.org/

57. 1 Item
tipo: h-card  vocabulario
propiedades :
name : Rohit Khare
url : http://rohit.khare.org/
photo: https://s3.amazonnawe. .....

59. Microformatos
Vocabularios
•
•
•
•
•
•
•
•
•
•
•
•
h-adr
h-card
h-entry
h-event
h-geo
h-item
h-product
h-recipe
h-resume
h-review
h-review-aggregate
...
http://microformats.org/
Validador
http://pin13.com/
http://www.google.com/webmasters/tools/richsnippets

60. RDFa

61. RDFa
Resource Description Framework attributes
<p xmlns:foaf="http://xmlns.com/foaf/0.1/" about="#me">
I'm <span property="foaf:name">Philip Jägenstedt</span> at
<a rel="foaf:homepage" href="http://foolip.org/">foolip.org</a>.
</p>
Sujeto-predicado-objeto
Vocabulario FOAF
http://www.google.com/webmasters/tools/richsnippets

62. RDFa
Más información
http://www.w3.org/TR/rdfa-primer/
http://www.google.com/webmasters/tools/richsnippets

63. Microdata

64. Microdata
¿Cómo implementar microdata ?
1º Establecer el ámbito del microdato
http://schema.org
http://schema.org/docs/full.html
2º Especificar el tipo de elemento
3º Indicar las propiedades del elemento
http://www.google.com/webmasters/tools/richsnippets

65. Microdata
Itemscope
Determinamos el ámbito del elemento (item)
Itemprop
Determinamos las propiedades
Itemtype
Determinamos el tipo del item

66. Microdata
Itemref
Cuando tenemos propiedades no descendientes y necesitamos
asociar la propiedad a un item.
itemref=“id id”
Itemprop
Determinamos las propiedades. Las propiedades pueden repetirse para
un mismo scope
<ul itemscope>
<li itemprop=“name”>Álvaro</li>
<li itemprop=“name”>Carlos</li>
</ul>

67. <div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
<p>Band: <span itemprop="name">Jazz Band</span></p>
<p>Size: <span itemprop="size">12</span> players</p>
</div>
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Panasonic White 60L Refrigerator</span>
<img src="panasonic-fridge-60l-white.jpg" alt="">
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<meter itemprop="ratingValue" min=0 value=3.5 max=5>Rated 3.5/5</meter>
</div>
</div>

68. Microdata
Pueden coexistir varias propiedades para un mismo elemento
<span itemprop=“name image”></span>
Itemtid
Identificadores globales, ISBN para libros, ids de productos, ...
<span itemid=“urn:isbn:0-350-3402-8”>El mago de Oz</span>

69. Microdata
Microdata haciendo uso de los vocabularios de WHATWG
vCard
vEvent
hCalendar
hRecipe
hProduct
...

70. <section itemscope itemtype="http://microformats.org/profile/hcalendar#vevent">
<h3>
<a itemprop="url" href="http://atnd.org/events/5181" title="WDE-ex
Vol11『iPad のウェブデザイン：私たちがみつけたこと 』 : ATND">
<span itemprop="summary">WDE-ex Vol.11 — Designing for iPad: Our
experience so far</span>
</a>
</h3>
<p itemprop="description">
On <time itemprop="dtstart” datetime="2010-07-21T19:00:00+09:00">July 21st
19:00</time> - <time itemprop="dtend" datetime="2010-0721T20:00:00+09:00">20:00</time> at <span itemprop="location" itemscope
itemtype="http://microformats.org/profile/hcard">
<a itemprop="url” href="http://www.apple.com/jp/retail/ginza/map/">
<span itemprop="fn org”>Apple Ginza</span>
</a>
</span>, <span itemscope itemtype="http://microformats.org/profile/hcard">
<a itemprop="url” href="http://informationarchitects.jp/" title="iA">
<span itemprop="fn">
Oliver Reichenstein</span>, CEO of iA
</a>
</span>, will share the lessons they’ve learned while creating three iPad and iPad website.
</p>
</section>

71. Microdata
Microdata videos semánticos
Propiedades
•
•
•
•
•
•
•
•
name  Obligatorio
description  Obligatorio
thumbnailUrl  Obligatorio
duration  Recomendado
contentURL  Recomendado
embedURL  Recomendado
uploadDate  Recomendado
expires  Recomendado si es posible
http://schema.org/VideoObject

72. <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<h2>Video: <span itemprop="name">Title</span></h2>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
<meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
<meta itemprop="embedURL"
content="http://www.example.com/videoplayer.swf?video=123" />
<meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
<meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
<object ...>
<param ...>
<embed type="application/x-shockwave-flash" ...>
</object>
<span itemprop="description">Video description</span>
</div>

73. Microdata
Breadcrumbs
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green"
itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
http://schema.org/breadcrumb

75. Santiago Montiu
Frontend Lead
santiago@montiu.es
@smontiu
&