HTML
PARA ROBÔS
Julho de 2015 - Woman Techmakers Rio
QUEM SOU EU?
Simone Villas Boas
desenvolvedora front-end, compartilho
experiências multidisciplinares no blog
pixeladas al...
O QUE É HTML?
• HyperText Markup Language.
(Tim Berners-Lee e Dan Connolly, 1993)
• Linguagem de marcação semântica para t...
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dom Casmurro, de Machado de Assis</title>
<meta name="description" content=“A hi...
PREMISSAS PRIMORDIAIS
• Qualquer um pode intuir a forma pela qual um código
HTML é interpretado por um navegador.
• Qualqu...
O QUE ENTENDEMOS POR
ROBÔS AQUI?
• Qualquer programa que indexe
páginas na Web.
• Também conhecidos por bots,
crawlers, sp...
A ERA DOT COM
1ª era: popularização da internet, indexação manual
1ª ERA: MARCAS
• Corrida para a nova mídia;
• URL é parte essencial da marca
(e ainda é);
• Palavras-chave da AOL.
julho d...
1ª ERA: CATÁLOGOS
• Lycos (1995)
• Excite (1995)
• Yahoo! (1995)
• Altavista (1995)
• Cadê? (1995)
• Além de outras centen...
1ª ERA: CATÁLOGOS
• O desenvolvedor deveria cadastrar a URL do site
manualmente em cada um dos sites de busca;
• Ou utiliz...
WEB 2.0
2ª era: robôs de busca, semântica, UX, AI
Dotcom Crash - 2000
2ª ERA: ROBÔS DE BUSCA
• Wandex (1993):
o primeiro robô de busca
• Webcrawler (1994):
http://www.webcrawler.com/
• Google ...
2ª ERA: ROBÔS DE BUSCA
• SEO (Search Engine Optimization):
• ou o desenvolvimento orientado ao Google;
• ou a vida medida ...
SITEMAP
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>htt...
2ª ERA: DIVERSIDADE
• Especialização dos mecanismos de busca:
• por tipo de conteúdo (pessoas, notícias, imóveis, empregos...
2ª ERA: TÉCNICAS POPULARES DA WEB 2.0
• desenvolvimento voltado para os padrões W3C;
• código semântico;
• usabilidade e a...
MICROFORMATOS
<div class="h-product">
<h1 class="p-name">Dom Casmurro</h1>
<img class="u-photo" src="dom-casmurro.jpg" alt...
2ª ERA: TÉCNICAS POUCO POPULARES
• Padrões de desenvolvimento rígidos (XHTML);
• Módulo: RDFa.
julho de 2015 HTML para rob...
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
RDFA
<div xmlns:dc="http://purl.org/dc/elements/1.1/">
<h1 property="dc:title">Dom Casmurro</h1>
<h2 property="dc:author">...
A MORTE DA WEB
3ª era: a era do social, do vídeo
e das plataformas ubíquas
The Web Is Dead, Wired - 2010
3ª ERA: A MORTE DA WEB
• Acabou o amor:
• HTML5 (WHATWG) ou HTML 5 (W3C);
• Especificação final do HTML5 publicada em 2014...
3ª ERA: A MORTE DA WEB
• A queda de relevância dos sites de busca:
• A informação alcança o usuário antes;
• Filtros invis...
HTML5
<!DOCTYPE html>
<html>
<head>
<title>Dom Casmurro, de Machado de Assis</title>
</head>
<body>
<article>
<header>
<h1...
3ª ERA: PADRÕES CORPORATIVOS
• Protocolos de indexação publicados e mantidos por
empresas:
• Schema (Google, Yahoo!, Bing)...
3ª ERA: SCHEMA COMO MICRODATA
<article itemscope itemtype="http://schema.org/Book">
<header>
<h1 itemprop="name">Dom Casmu...
3ª ERA: SCHEMA COMO RDFA
<article vocab="http://schema.org/" typeof="Book">
<header>
<h1 property="name">Dom Casmurro</h1>...
3ª ERA: RICH SNIPPETS
• Formatos aceitos no Schema.org:
RDFa, Microdata and JSON-LD;
• Links para produtos do Google
(YouT...
3ª ERA: RICH SNIPPETS
• Google Search Console
https://www.google.com/webmasters/tools/
• Structured Data Testing Tool
http...
3ª ERA: OPEN GRAPH PROTOCOL
<!DOCTYPE html>
<html>
<head>
<title>Dom Casmurro, de Machado de Assis</title>
<meta property=...
3ª ERA: OPEN GRAPH
• Facebook Developers - Debugger:
https://developers.facebook.com/tools/
debug/
julho de 2015 HTML para...
3ª ERA: TWITTER CARDS
<!DOCTYPE html>
<html>
<head>
<title>Estante Virtual: Dom Casmurro</title>
<meta name="twitter:site"...
3ª ERA: TWITTER CARDS
• Documentação
https://dev.twitter.com/cards/overview
• Validação
https://cards-dev.twitter.com/vali...
PROCESSO DE TRABALHO
• Trabalhe junto!
• com o arquiteto de informação para estabelecer um sitemap e
negocie a implementaç...
PROCESSO DE TRABALHO
• Seja dono do produto!
• tenha carinho com o código e busque o aprimoramento
constante do código;
• ...
PROVOCAÇÃO GRATUITA
• Vale o escrito!
• Googlebot entende JavaScript, mas
não confie cegamente nisso.
• Cuidado com framew...
FERRAMENTAS
• Há dezenas de verificadores de SEO:
• Site Analyzer
http://www.site-analyzer.com/
• SEO SiteCheckop
http://s...
OUTRAS LEITURAS
• Eli Pariser. The Filter Bubble
http://www.thefilterbubble.com
• John Pavlus. Why urls won’t die
http://b...
QUESTÕES?
OBRIGADA!
Estes slides estão disponíveis em
http://s1mone.net
This work is licensed under a Creative Commons
Attribution-S...
HTML para robôs
Próximos SlideShares
Carregando em…5
×

HTML para robôs

4.560 visualizações

Publicada em

O código HTML é criado por humanos para usufruto de outros humanos. O desafio para qualquer robô de busca é interpretar esta mensagem para gerar uma boa indexação de dados. Mas podemos dar uma mãozinha, não é? Analisando a história da web, dos mecanismos de busca e do desenvolvimento front-end, veremos que um código semântico e bem marcado pode ser bom para todos.

Publicada em: Internet
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.560
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.955
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML para robôs

  1. 1. HTML PARA ROBÔS Julho de 2015 - Woman Techmakers Rio
  2. 2. QUEM SOU EU? Simone Villas Boas desenvolvedora front-end, compartilho experiências multidisciplinares no blog pixeladas aleatórias. Passei por empresas como Petrobras, Jornal O Globo e PontoFrio.com e agora colaboro com o time da Estante Virtual. Sou testemunha ocular da história. nas redes: @s1mone julho de 2015 HTML para robôs
  3. 3. O QUE É HTML? • HyperText Markup Language. (Tim Berners-Lee e Dan Connolly, 1993) • Linguagem de marcação semântica para textos com recursos hipertextuais. (Ted Nelson, 1965) • Desenvolvida originalmente para navegadores da World Wide Web. (Tim Berners-Lee, 1990) julho de 2015 HTML para robôs
  4. 4. HTML <!DOCTYPE html> <html> <head> <title>Dom Casmurro, de Machado de Assis</title> <meta name="description" content=“A história de Bentinho e Capitu.”/> <meta name="keywords" content=“amor, traição”/> <meta name="author" content=“Machado de Assis”/> </head> <body> <h1>Dom Casmurro</h1> <h2>Machado de Assis</h2> <p>Publicado em 1899</p> <p>Uma noite destas, vindo da cidade para o <strong>Engenho Novo</strong>, encontrei no trem da Central um rapaz aqui do bairro, que eu conheço de vista e de chapéu. Cumprimentou-me, sentou-se ao pé de mim(…)</p> </body> </html> http://www.w3.org/html/
  5. 5. PREMISSAS PRIMORDIAIS • Qualquer um pode intuir a forma pela qual um código HTML é interpretado por um navegador. • Qualquer um é capaz de publicar e compartilhar documentos. • Os navegadores devem relevar eventuais erros de sintaxe e devem ser retrocompatíveis. julho de 2015 HTML para robôs
  6. 6. O QUE ENTENDEMOS POR ROBÔS AQUI? • Qualquer programa que indexe páginas na Web. • Também conhecidos por bots, crawlers, spiders. • Diversas finalidades: busca, compartilhamento de conteúdo. julho de 2015 HTML para robôs
  7. 7. A ERA DOT COM 1ª era: popularização da internet, indexação manual
  8. 8. 1ª ERA: MARCAS • Corrida para a nova mídia; • URL é parte essencial da marca (e ainda é); • Palavras-chave da AOL. julho de 2015 HTML para robôs
  9. 9. 1ª ERA: CATÁLOGOS • Lycos (1995) • Excite (1995) • Yahoo! (1995) • Altavista (1995) • Cadê? (1995) • Além de outras centenas de sites de cadastro de URLs genéricos. julho de 2015 HTML para robôs
  10. 10. 1ª ERA: CATÁLOGOS • O desenvolvedor deveria cadastrar a URL do site manualmente em cada um dos sites de busca; • Ou utilizar serviços de cadastros de sites; • Metadados do documento eram mais para ajudar desenvolvedores a fazer o cadastro do que uma ajuda para crawlers. julho de 2015 HTML para robôs
  11. 11. WEB 2.0 2ª era: robôs de busca, semântica, UX, AI Dotcom Crash - 2000
  12. 12. 2ª ERA: ROBÔS DE BUSCA • Wandex (1993): o primeiro robô de busca • Webcrawler (1994): http://www.webcrawler.com/ • Google (1998): http://www.google.com/ julho de 2015 HTML para robôs
  13. 13. 2ª ERA: ROBÔS DE BUSCA • SEO (Search Engine Optimization): • ou o desenvolvimento orientado ao Google; • ou a vida medida pelo PageRank. • Outros auxílios para robôs de busca: • robots.txt (1994); • sitemap.xml (2005); • atributos: nofollow, noindex (2005). julho de 2015 HTML para robôs
  14. 14. SITEMAP <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.estantevirtual.com.br/livros-mais-vendidos</loc> <lastmod>2015-06-15</lastmod> <changefreq>daily</changefreq> <priority>0.8</priority> </url> </urlset> http://www.sitemaps.org/
  15. 15. 2ª ERA: DIVERSIDADE • Especialização dos mecanismos de busca: • por tipo de conteúdo (pessoas, notícias, imóveis, empregos). • por tipo de mídia (texto, fotos, vídeos). julho de 2015 HTML para robôs
  16. 16. 2ª ERA: TÉCNICAS POPULARES DA WEB 2.0 • desenvolvimento voltado para os padrões W3C; • código semântico; • usabilidade e acessibilidade de interfaces; • simplicidade (KISS e “code is poetry”); • microformats.org (2004): nomenclatura semântica. julho de 2015 HTML para robôs
  17. 17. MICROFORMATOS <div class="h-product"> <h1 class="p-name">Dom Casmurro</h1> <img class="u-photo" src="dom-casmurro.jpg" alt=“Dom Casmurro" /> <p class="e-description">A história de amor e traição entre Bentinho e Capitu.</p> <p class="p-price" value=“20.00">R$ 20,00</p> <p> <a class="p-brand h-card" href=“http://livrariagarnier.com.br”> Livraria Garnier </a> </p> </div> http://microformats.org/
  18. 18. 2ª ERA: TÉCNICAS POUCO POPULARES • Padrões de desenvolvimento rígidos (XHTML); • Módulo: RDFa. julho de 2015 HTML para robôs
  19. 19. XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset=“UTF-8” /> <title>Dom Casmurro, Machado de Assis</title> <meta name="description" content=“A história de amor entre Bentinho e Capitu.” /> <meta name="keywords" content=“amor, traição, ficção, literatura brasileira” /> <meta name="author" content=“Machado de Assis” /> </head> <body> <h1>Dom Casmurro</h1> <h2>Machado de Assis</h2> <p>Publicado em 1899</p> <div><img src=“dom-casmurro.jpg” alt=“Dom Casmurro” /></div> <p>Uma noite destas, vindo da cidade para o Engenho Novo(…)</p> </body> </html> http://www.w3.org/TR/xhtml1/
  20. 20. RDFA <div xmlns:dc="http://purl.org/dc/elements/1.1/"> <h1 property="dc:title">Dom Casmurro</h1> <h2 property="dc:author">Machado de Assis</h2> <p property="dc:date" content="1899-01-01">Publicado em 1899</p> </div> http://www.w3.org/TR/xhtml-rdfa-primer/
  21. 21. A MORTE DA WEB 3ª era: a era do social, do vídeo e das plataformas ubíquas The Web Is Dead, Wired - 2010
  22. 22. 3ª ERA: A MORTE DA WEB • Acabou o amor: • HTML5 (WHATWG) ou HTML 5 (W3C); • Especificação final do HTML5 publicada em 2014. julho de 2015 HTML para robôs
  23. 23. 3ª ERA: A MORTE DA WEB • A queda de relevância dos sites de busca: • A informação alcança o usuário antes; • Filtros invisíveis (Pariser, 2011); • Excesso de informação está bloqueando a iniciativa de busca do usuário pelo conteúdo. julho de 2015 HTML para robôs
  24. 24. HTML5 <!DOCTYPE html> <html> <head> <title>Dom Casmurro, de Machado de Assis</title> </head> <body> <article> <header> <h1>Dom Casmurro</h1> <h2>Machado de Assis</h2> </header> <div><img src=“dom-casmurro.jpg” alt=“Dom Casmurro”></div> <p>Publicado em 1899</p> <p>Uma noite destas, vindo da cidade para o Engenho Novo(…)</p> </article> </body> </html> http://www.w3.org/TR/html/
  25. 25. 3ª ERA: PADRÕES CORPORATIVOS • Protocolos de indexação publicados e mantidos por empresas: • Schema (Google, Yahoo!, Bing); • Open Graph Protocol (Facebook, Pinterest, LinkedIn); • Twitter Cards (Twitter); • Webapps (Apple, Microsoft). julho de 2015 HTML para robôs
  26. 26. 3ª ERA: SCHEMA COMO MICRODATA <article itemscope itemtype="http://schema.org/Book"> <header> <h1 itemprop="name">Dom Casmurro</h1> <h2 itemprop="author">Machado de Assis</h2> </header> <p>ISBN: <span itemprop=“isbn”>9788521314844</span></p> <p>Páginas: <span itemprop=“numberOfPages”>288</span></p> <p>Editora: <span itemprop=“publisher”>Nobel</span></p> <p itemprop=“citation”>Uma noite destas, vindo da cidade para (…)</p> </article> http://schema.org/
  27. 27. 3ª ERA: SCHEMA COMO RDFA <article vocab="http://schema.org/" typeof="Book"> <header> <h1 property="name">Dom Casmurro</h1> <h2 property="author">Machado de Assis</h2> </header> <p>ISBN: <span property=“isbn”>9788521314844</span></p> <p>Páginas: <span property=“numberOfPages”>288</span></p> <p>Editora: <span property=“publisher”>Nobel</span></p> <p property=“citation”>Uma noite destas, vindo da cidade para (…)</p> </article> http://schema.org/
  28. 28. 3ª ERA: RICH SNIPPETS • Formatos aceitos no Schema.org: RDFa, Microdata and JSON-LD; • Links para produtos do Google (YouTube, G+). julho de 2015 HTML para robôs
  29. 29. 3ª ERA: RICH SNIPPETS • Google Search Console https://www.google.com/webmasters/tools/ • Structured Data Testing Tool https://developers.google.com/structured- data/testing-tool/ • Bing Webmaster Tools http://www.bing.com/toolbox/webmaster julho de 2015 HTML para robôs
  30. 30. 3ª ERA: OPEN GRAPH PROTOCOL <!DOCTYPE html> <html> <head> <title>Dom Casmurro, de Machado de Assis</title> <meta property="og:title" content="Dom Casmurro, Machado de Assis" /> <meta property="og:type" content="book" /> <meta property="og:site_name" content=“Estante Virtual" /> <meta property="og:url" content="http://www.estantevirtual.com.br/domcasmurro/" /> <meta property="og:image" content="http://capas.estantevirtual.com.br/domcasmurro.jpg" /> <meta property="og:image:width" content="108" /> <meta property="og:image:height" content="180" /> <meta property="og:description" content="Compre Dom Casmurro(…)" /> </head> <body> </body> </html> http://ogp.me/
  31. 31. 3ª ERA: OPEN GRAPH • Facebook Developers - Debugger: https://developers.facebook.com/tools/ debug/ julho de 2015 HTML para robôs
  32. 32. 3ª ERA: TWITTER CARDS <!DOCTYPE html> <html> <head> <title>Estante Virtual: Dom Casmurro</title> <meta name="twitter:site" content="@estantevirtual"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="Dom Casmurro"/> <meta name="twitter:description" content="Compre Dom Casmurro(…)"/> <meta name="twitter:image" content=http://capas.estantevirtual.com.br/dom-casmurro.jpg"/> </head> <body> </body> </html> https://dev.twitter.com/cards/overview/
  33. 33. 3ª ERA: TWITTER CARDS • Documentação https://dev.twitter.com/cards/overview • Validação https://cards-dev.twitter.com/validator/ julho de 2015 HTML para robôs
  34. 34. PROCESSO DE TRABALHO • Trabalhe junto! • com o arquiteto de informação para estabelecer um sitemap e negocie a implementação deste com os desenvolvedores; • com a equipe de marketing para definir o que é importante para a indexação e publicação de conteúdo nas diversas plataformas de busca na web e compartilhamento social; • com o gestor do projeto para incluir o desenvolvimento necessário nos sprints julho de 2015 HTML para robôs
  35. 35. PROCESSO DE TRABALHO • Seja dono do produto! • tenha carinho com o código e busque o aprimoramento constante do código; • teste, publique, compartilhe. julho de 2015 HTML para robôs
  36. 36. PROVOCAÇÃO GRATUITA • Vale o escrito! • Googlebot entende JavaScript, mas não confie cegamente nisso. • Cuidado com frameworks MVC em JavaScript. • Lugar de conteúdo é no HTML. julho de 2015 HTML para robôs
  37. 37. FERRAMENTAS • Há dezenas de verificadores de SEO: • Site Analyzer http://www.site-analyzer.com/ • SEO SiteCheckop http://seositecheckup.com/ julho de 2015 HTML para robôs
  38. 38. OUTRAS LEITURAS • Eli Pariser. The Filter Bubble http://www.thefilterbubble.com • John Pavlus. Why urls won’t die http://bit.ly/1C1Tltp • WIRED. The Web Is Dead. Long Live the Internet http://wrd.cm/1BsWTTz • UX Magazine. Why Web Design is Dead https://uxmag.com/articles/why-web-design-is-dead julho de 2015 HTML para robôs
  39. 39. QUESTÕES?
  40. 40. OBRIGADA! Estes slides estão disponíveis em http://s1mone.net This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

×