html para robôs
TRANSCRIPT
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)
julho de 2015 HTML para robôs
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.
julho de 2015 HTML para robôs
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
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
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
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
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
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
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).
julho de 2015 HTML para robôs
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
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.
julho de 2015 HTML para robôs
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/
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 WEB3ª 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.
julho de 2015 HTML para robôs
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
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/
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
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+).
julho de 2015 HTML para robôs
3ª ERA: RICH SNIPPETS
• Google Search Consolehttps://www.google.com/webmasters/tools/
• Structured Data Testing Toolhttps://developers.google.com/structured-data/testing-tool/
• Bing Webmaster Toolshttp://www.bing.com/toolbox/webmaster
julho de 2015 HTML para robôs
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/
3ª ERA: OPEN GRAPH
• Facebook Developers - Debugger:https://developers.facebook.com/tools/debug/
julho de 2015 HTML para robôs
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çãohttps://dev.twitter.com/cards/overview
• Validaçãohttps://cards-dev.twitter.com/validator/
julho de 2015 HTML para robôs
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
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
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
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
OUTRAS LEITURAS
• Eli Pariser. The Filter Bubble http://www.thefilterbubble.com
• John Pavlus. Why urls won’t diehttp://bit.ly/1C1Tltp
• WIRED. The Web Is Dead. Long Live the Internethttp://wrd.cm/1BsWTTz
• UX Magazine. Why Web Design is Deadhttps://uxmag.com/articles/why-web-design-is-dead
julho de 2015 HTML para robôs
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.