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

1,730 views

Published on

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
  • Be the first to comment

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

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

×