HTML para robôs

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 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

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)

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/

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.

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.

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.

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.

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.

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 (1998):
http://www.google.com/

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).

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/

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).

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.

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/

2ª ERA: TÉCNICAS POUCO POPULARES
• Padrões de desenvolvimento rígidos (XHTML);
• Módulo: RDFa.

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>
<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/

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/

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íveis (Pariser, 2011);
• Excesso de informação está bloqueando a iniciativa de
busca do usuário pelo conteúdo.

HTML5
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article>
<header>
</header>
<div><img src=“dom-casmurro.jpg” alt=“Dom Casmurro”></div>
<p>Uma noite destas, vindo da cidade para o Engenho Novo(…)</p>
</article>
</body>
</html>
http://www.w3.org/TR/html/

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).

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/

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/

3ª ERA: RICH SNIPPETS
• Formatos aceitos no Schema.org:
RDFa, Microdata and JSON-LD;
• Links para produtos do Google
(YouTube, G+).

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

3ª ERA: OPEN GRAPH PROTOCOL
<!DOCTYPE html>
<html>
<head>
<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/

3ª ERA: OPEN GRAPH
• Facebook Developers - Debugger:
https://developers.facebook.com/tools/
debug/

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/

3ª ERA: TWITTER CARDS
• Documentação
https://dev.twitter.com/cards/overview
• Validação
https://cards-dev.twitter.com/validator/

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

PROCESSO DE TRABALHO
• Seja dono do produto!
• tenha carinho com o código e busque o aprimoramento
constante do código;
• teste, publique, compartilhe.

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.

FERRAMENTAS
• Há dezenas de verificadores de SEO:
• Site Analyzer
http://www.site-analyzer.com/
• SEO SiteCheckop
http://seositecheckup.com/

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

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.

HTML para robôs

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

HTML para robôs