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 COM1ª 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.02ª 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 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.


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


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çãohttps://dev.twitter.com/cards/overview

• Validaçãohttps://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 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


QUESTÕES?

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.

http://creativecommons.org/licenses/by-sa/4.0/

http://creativecommons.org/licenses/by-sa/4.0/