Web Semântica e SEO: Melhorando resultados nos buscadores com HTML 5 e dados estruturados

Web Semântica e SEO

26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 1

Como a utilização de Microdata (microdados) pode melhorar a experiência de usuário na busca por conteúdo

Microdata Dados estruturados Web Semântica HTML 5 SEO

Por ser uma evolução/extensão do HTML, Microdata é

livre, de código aberto e multi-plataforma por natureza 26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 2

1. Apresentação 2. SEO 3. HTML5 4. Web Semântica 5. Dados Estruturados - Microdata

a) Quem já está utilizando?

b) Exemplos de códigos

c) Ferramentas de teste

d) O que está por vir? 6. Links recomendados


Otimização para Mecanismos de Busca significa realizar ações on-site e off-site para popularizar um web site

Visa melhorar o posicionamento nos resultados de buscas orgânicas, ou naturais (Google, Bing, Yahoo, etc.) SEO x Search Engine Marketing (SEM) e pay-per-click (PPC)

Fama de “trapaça” no passado

Hoje é estratégia defensiva – quem não faz, perde pro concorrente que já faz

Trabalho árduo, especializado, contínuo e com resultados em longo prazo Curto prazo: grande diferença entre fazer ou não fazer SEO



SERP = Search Engine Result Page (Página de Resultados do Mecanismo de Busca)

PPC

PPC

Orgânica (70% clicks)

Foco do SEO

30% clicks

Fatores Positivos

Palavras-chave

Título da página

Confiança

Autoridade

Tendência

Idade

Links de entrada


Fatores Negativos

Spam de mecanismo de busca

Alta taxa de bounce

Conteúdo duplicado

Troca ou venda de links

Páginas Tags de título Descrição da mídia Densidade das palavras-

chave Texto âncora ...

Meta-tags: fraca

relevância pelo mau uso no passado keywords e description

Bola da vez: Dados Estruturados


Site Seleção do nome do

domínio Redesign do website Configuração do

servidor web Geotargeting Canonicalização da

URL Arquitetura de links Melhorias de

desempenho ...

Off-site Backlinks autoritários

(com reputação) Mídias sociais Solicitação de links Envio a diretórios,

blogs, fóruns Escrita de artigos Press-releases Publicações ...

Novos elementos Novos atributos Suporte completo a CSS3 Video e Audio sem necessidade de plugins Gráficos 2D e 3D Armazenamento Local (offline) Banco de dados SQL local Aplicações Web

Esta versão traz importantes mudanças quanto ao papel do HTML no mundo da Web,

através de novas funcionalidades como semântica e acessibilidade, com novos recursos, antes só possíveis por meio de outras tecnologias

Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos (navegadores, parsers, etc)

Será o novo padrão para HTML, XHTML, e HTML DOM Atualmente, está em fase de esboço. Previsão: 2014


<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Player de áudio em html5</title> </head> <body> <audio controls autoplay> <source src="audio.mp3" /> <p>Seu browser não suporta essa tecnologia.</p> </audio> </body> </html>


No site da W3c, há a expressão: “The Semantic Web is a web of data”

A Web semântica interliga significados de palavras e tem como finalidade conseguir atribuir um sentido aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador

A Web Semântica é uma evolução da nossa web atual com as informações devidamente organizadas

Surgiu em 2001, quando Tim Berners-Lee, James Hendler e Ora Lassila publicaram um artigo na revista Scientific American, intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades”


É baseada no Resource Description Framework (RDF) e envolve outras tecnologias como SPARQL, OWL, and SKOS


Muito complexo!


Rating: Review by: Sarah “OMG! That was like, the best lunch I ever had! Awesome!”

“A World of Welsh Lamb” Wednesday, 6 October 12:00 - 14:00 Leadenhall Market 45-52 Leadenhall Market, City, EC3V 1LR

Endereço de uma

Organização

Review

Evento

Só texto. Nada pra ver aqui…

The Pizza Shop 123 Fake Street Faketown Fakeshire FA12 KE1

Fonte: seomoz


Ah! Você quer dizer The Pizza Shop que fica na Fake Street!

Detalhes do contato

<div class="vcard">

<span class="fn org">The Pizza Shop</span>

<div class="adr">

<span class="street-address">123 Fake Street</span>,

<span class="locality">Faketown</span>,

<span class="region">Fakeshire</span>.

</div>

</span>

Phone: <span class="tel">123-456-789</span>

<a href="http://pizzaexample.com/"

class="url">http://pizzaexample.com</a>

</div>

The Pizza Shop 123 Fake Street Faketown Fakeshire FA12 KE1

Fonte: seomoz

Microformats: o mais antigo e mais simples. Possui definições para marcação de endereços, eventos, links de amigos e outros. Não suporta personalização (estensão) microformats.org

RDFa: Baseado no modelo de dados RDF do W3C, é uma forma de adicionar RDF em páginas HTML. Complexo e com curva de aprendizado mais lenta que as outras propostas w3.org/TR/xhtml-rdfa-primer/

Microdata: Mais simples, com participação ativa de

desenvolvedores de sistemas de busca em sua definição schema.org


http://www.microformats.org/

http://www.w3.org/TR/xhtml-rdfa-primer/






schema.org

Visão Geral http://support.google.com/webmasters/bin/topic.py?hl=pt-BR&topic=1088472&parent=21997&ctx=topic

Rich snippets (microdados, microformatos, RDFa, e marcador de dados)

Sobre microdados

Sobre microformatos

Sobre RDFa

Perguntas frequentes sobre o schema.org


http://support.google.com/webmasters/bin/topic.py?hl=pt-BR&topic=1088472&parent=21997&ctx=topic




http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=99170&topic=1088472&ctx=topic




















Structured data + Extended Vocabulary

<div itemscope itemtype=“http://schema.org/Product”>

Microdata Microformats

RDFa

Schema.org

Fonte: seomoz

• Foi criado pelo WHATWG (Criadores do HTML5/WebApplications 1.0) e tornou-se o padrão de marcação semântica adotado pelo HTML5

• Microdata utiliza-se de variados vocabulários para descrever itens semanticamente e pares key-value para atribuição de valores a suas propriedades


<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>


<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">Kenmore White 17" Microwave</span> <img itemprop=“image" src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' /> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Rated <span itemprop="ratingValue">3.5</span>/5 based on <span itemprop="reviewCount">11</span> customer reviews </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">$55.00</span> <link itemprop="availability" href="http://schema.org/InStock" />In stock </div> Product description: <span itemprop="description">0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.</span> </div>


receitaria.blog.br b4it.com.br


http://www.google.com/webmasters/tools/richsnippets http://foolip.org/microdatajs/live/ http://linter.structured-data.org/


http://www.google.com/webmasters/tools/richsnippets

http://www.google.com/webmasters/tools/richsnippets

http://linter.structured-data.org/










Há muito espaço para evoluir, pois HTML5, web semântica e dados estruturados estão em fase embrionária

Porém, o impacto será enorme para estratégias de SEO – e quem não fizer, ficará para trás

Grandes autoridades da web estão com o foco direcionado para a “web de dados”



Especulação: Filtros nas pesquisas? http://www.google.com/shopping

schema.org seomoz.org w3.org/TR/html5/ w3schools.com/html5 mestreseo.com.br/artigos-seo seomaster.com.br/blog tableless.com.br/html5/

Microdata: tableless.com.br/html5/?chapter=20

w3.org/standards/semanticweb/


http://www.schema.org/

w3.org/TR/html5/

w3.org/TR/html5/

w3.org/TR/html5/

w3.org/TR/html5/

http://www.mestreseo.com.br/artigos-seo

w3schools.com/html5





http://www.seomaster.com.br/blog

http://tableless.com.br/html5/

http://tableless.com.br/html5/?chapter=20



http://www.w3.org/standards/semanticweb/



Guerreiro SEO, John I. Jercovic SEM e SEO: Dominando o Marketing de Busca, Martha

Gabriel www.mestreseo.com.br www.schema.org seomoz.org http://codigoaberto.info/artigos/38-introducao-a-

marcacao-de-dados-estruturados.html http://loopinfinito.com.br/2012/04/26/marcacao-

semantica/


http://www.mestreseo.com.br/

http://www.schema.org/

http://www.seomoz.org/

http://codigoaberto.info/artigos/38-introducao-a-marcacao-de-dados-estruturados.html














http://loopinfinito.com.br/2012/04/26/marcacao-semantica/




Obrigado!

Contatos: b4it.com.br linkedin.com/in/marcoshenke


http://www.b4it.com.br/

http://linkedin.com/in/marcoshenke

http://linkedin.com/in/marcoshenke

Technology

Web Semântica e SEO: Melhorando resultados nos buscadores com HTML 5 e dados estruturados