web semântica e seo: melhorando resultados nos buscadores com html 5 e dados estruturados
DESCRIPTION
Palestra apresentada no V Festival de Software Livre do Vale do Sinos 24/12/2012 Resumo: Serão apresentados os principais conceitos do HTML 5 relacionados à Web Semântica, com foco na utilização de dados estruturados para atribuição de significado ao texto de uma página web. Buscadores como Google e Bing interpretam as marcações semânticas para gerar Rich Snippets em suas páginas de resultados, exibindo as informações extraídas de forma diferenciada e destacada. Como resultado, há uma significativa melhoria na experiência do usuário, que encontrando mais facilmente o que procura, possibilita um aumento na taxa de acesso à página e um melhor posicionamento no ranking de resultados.TRANSCRIPT
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 3
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 4
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 5
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 6
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 7
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 8
<!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>
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 9
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”
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 10
É baseada no Resource Description Framework (RDF) e envolve outras tecnologias como SPARQL, OWL, and SKOS
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 11
Muito complexo!
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 12
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 13
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 14
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 15
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 16
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
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 17
<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>
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 18
<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>
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 19
receitaria.blog.br b4it.com.br
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 20
http://www.google.com/webmasters/tools/richsnippets http://foolip.org/microdatajs/live/ http://linter.structured-data.org/
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 21
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 22
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 23
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 24
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”
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 25
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 26
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/
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 27
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/
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 28
Obrigado!
Contatos: b4it.com.br linkedin.com/in/marcoshenke
26/11/2012 Por Marcos Vinícius Henke Arnoldo – b4it.com.br 29