Your SlideShare is downloading. ×
Beneficios del HTML5 al SEO de una web - Montiu Noviembre 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Beneficios del HTML5 al SEO de una web - Montiu Noviembre 2013

1,080
views

Published on

Taller sobre los beneficios del HTML5 al SEO de una web en la sala Camon de Madrid …

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

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,080
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 6. Tengo cantidad pero no calidad
  • 7. Menos enlazar y más compartir Autoría en contenidos
  • 8. Contenidos • De calidad (shares) • Actualizados (date) • Mayor cantidad (items) • Estructurados o Ordenados (logic) o Enlazados (itemref) o Referenciados (autoría) (person)
  • 9. ¿ Qué es el HTML5 ?
  • 10. Presente y no futuro
  • 11. Conjunto de tecnologías HTML5
  • 12. Cambios en HTML5
  • 13. 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 ...
  • 14. Problemas en la Internacionalización de contenidos
  • 15. ¿Cómo lo evito?
  • 16. Internacionalización Nuevas etiquetas HTML5 <ruby></ruby> <bdi></bdi> <rt></rt> <bdo></bdo> <rp></rp> <wbr>
  • 17. Internacionalización <ruby></rudy> Anotaciones extras para mostrar pronunciaciones de los caracteres del Este asiático (Japón)
  • 18. Internacionalización <rt></rt> Anotaciones internas de etiquetas <ruby></ruby>
  • 19. Internacionalización <rp></rp> Fallback para anotaciones internas de etiquetas <ruby></ruby>
  • 20. Internacionalización <bdi></bdi> Bi-directional Isolation Element Cuando dudamos de la dirección de escritura del contenido del elemento.
  • 21. 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)
  • 22. 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.
  • 23. Valor Semántico <section></section> Define una sección de un documento. No puede ser elemento descendiente o hijo de <address>
  • 24. 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>
  • 25. 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>
  • 26. 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>
  • 27. 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>
  • 28. 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>
  • 29. 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>
  • 30. 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.
  • 31. 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>
  • 32. 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>
  • 33. Contenido embebido <video></video> <audio></audio> <source></source> <track></track> <canvas></canvas> <svg></svg> <math></math> <embed></embed>
  • 34. Formularios <datalist></datalist> <keygen></keygen> <output></output> <progress></progress> <meter></meter>
  • 35. <datalist></datalist>
  • 36. <keygen></keygen>
  • 37. 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
  • 38. Estructura != Diseño
  • 39. Contenido Semántico y SEO
  • 40. 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.
  • 41. Marcado del contenido aportando valor y sentido
  • 42. Microformatos RDFa Microdata
  • 43. Microformatos
  • 44. 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/
  • 45. 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/
  • 46. 1 Item tipo: h-card  vocabulario propiedades : name : Rohit Khare url : http://rohit.khare.org/ photo: https://s3.amazonnawe. .....
  • 47. 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
  • 48. RDFa
  • 49. 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
  • 50. RDFa Más información http://www.w3.org/TR/rdfa-primer/ http://www.google.com/webmasters/tools/richsnippets
  • 51. Microdata
  • 52. 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
  • 53. Microdata Itemscope Determinamos el ámbito del elemento (item) Itemprop Determinamos las propiedades Itemtype Determinamos el tipo del item
  • 54. 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>
  • 55. <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>
  • 56. 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>
  • 57. Microdata Microdata haciendo uso de los vocabularios de WHATWG vCard vEvent hCalendar hRecipe hProduct ...
  • 58. <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>
  • 59. 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
  • 60. <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>
  • 61. 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
  • 62. Santiago Montiu Frontend Lead santiago@montiu.es @smontiu &