Semântica e Boas Práticas de Código Orientadas a SEO

84

Transcript of Semântica e Boas Práticas de Código Orientadas a SEO

Page 1: Semântica e Boas Práticas de Código Orientadas a SEO
Page 2: Semântica e Boas Práticas de Código Orientadas a SEO

Douglas Faria/douglasfaria10

/+DouglasFaria10

Page 3: Semântica e Boas Práticas de Código Orientadas a SEO

Douglas FariaUm cara tranquilo que gosta de códigos e estratégia. É empreendedor, fundador da Agência

Assoweb. Trabalha com Marketing Digital, Desenvolvimento Front-end e Design. Adora ler,

escrever, jogar futebol e tomar café. É músico nas horas vagas.

Graduado em Sistemas para Internet pela UNI-BH.

Pós graduando em comunicação e Marketing – Puc Minas.

Autor nos sites tableless.com.br, imasters.com.br e no Blog da Assoweb.

Page 4: Semântica e Boas Práticas de Código Orientadas a SEO

O que é semântica“Num sistema linguístico, o componente do sentido das palavras

e da interpretação das sentenças e dos enunciados.”Google

Page 5: Semântica e Boas Práticas de Código Orientadas a SEO

HTML5 Semântico

Antes de virar um mago e fazer pirotecnias, entenda o significado das coisas.

Page 6: Semântica e Boas Práticas de Código Orientadas a SEO

HTML x HTML5

A principal diferença foi a evolução semântica da linguagem.

Page 7: Semântica e Boas Práticas de Código Orientadas a SEO

Doctype e o elemento HTML

• Document Type Defination (DTD) ou, simplesmente Doctype.

• Serve para informar ao Browser a especificação de códigoutilizada.

• Deve ser declarado antes da tag <html>, como copia.

Page 8: Semântica e Boas Práticas de Código Orientadas a SEO

Como era feito

Como é feito agora

Page 9: Semântica e Boas Práticas de Código Orientadas a SEO

A semântica das novas marcações do HTML5

Acabou a festa das divs!

Page 10: Semântica e Boas Práticas de Código Orientadas a SEO

Header

Utilizado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc.

Page 11: Semântica e Boas Práticas de Código Orientadas a SEO

Nav

Sua função é agrupar uma lista de links para outras partes do site, seja essa lista de navegação local ou global.

Page 12: Semântica e Boas Práticas de Código Orientadas a SEO
Page 13: Semântica e Boas Práticas de Código Orientadas a SEO

Session

• Possui menos especificidade.

• <session> dividem o conteúdo em sessoes que contenham<header> ou <articles>, enquanto uma <div> divide qualquercoisa, sem finalidade específica.

Page 14: Semântica e Boas Práticas de Código Orientadas a SEO

Article

Serve para identificar um conteúdo independente e de maior relevância dentro da página, que pode ser distribuído via feed, como um post, artigo ou bloco de comentários.

Page 15: Semântica e Boas Práticas de Código Orientadas a SEO

Aside

Serve para mostrar conteúdos que fazem referência ao conteúdo principal à sua volta, como informações, blocos de navegação ou até mesmo publicidade.

Page 16: Semântica e Boas Práticas de Código Orientadas a SEO

Footer

Representa o rodapé de um documento ou de uma sessão específica do mesmo, podendo conter informações relacionadas ao autor e ao copyright, blocos de navegação ou links relacionados.

Page 17: Semântica e Boas Práticas de Código Orientadas a SEO

O que é SEO?

Page 18: Semântica e Boas Práticas de Código Orientadas a SEO

SEO: Search Engine Optimization

É o conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca gerando conversões, sejam elas, um lead, uma compra ou um envio de formulário, por exemplo.

Otimização para os mecanismos de busca

Page 19: Semântica e Boas Práticas de Código Orientadas a SEO

Conceitos

SEO

É-SI-OU

SIL

CÉU

SI-OU

Page 20: Semântica e Boas Práticas de Código Orientadas a SEO

Conceitos

SEO

É-SI-OU

SIL

CÉU

SI-OU

Page 21: Semântica e Boas Práticas de Código Orientadas a SEO

“20 a 25% das buscas feitas em um dia no Google são

totalmente novas”.

Udi ManberEngenheiro de Qualidade de Buscas do Google

Page 22: Semântica e Boas Práticas de Código Orientadas a SEO

100 bilhões de buscas no Google são feitas todos os

meses.

Page 23: Semântica e Boas Práticas de Código Orientadas a SEO

E para que serve o SEO?

Gerar conversão.Aumento de tráfego no site.Posicionamento de marca.Entre outras maravilhas.

Page 24: Semântica e Boas Práticas de Código Orientadas a SEO

ConceitosComo o SEO é visto hoje pelos bons profissionais do mercado:

• Processo

• Crawling -> Indexação -> Ranking ->Conteúdo -> Conversão

• Corrida pelo melhor conteúdo

• Estratégia

Page 25: Semântica e Boas Práticas de Código Orientadas a SEO

SEO x SEM(Orgânico x Patrocinado)

Page 26: Semântica e Boas Práticas de Código Orientadas a SEO
Page 27: Semântica e Boas Práticas de Código Orientadas a SEO
Page 28: Semântica e Boas Práticas de Código Orientadas a SEO
Page 29: Semântica e Boas Práticas de Código Orientadas a SEO

Como fazer SEOWtf?

Whitehat

Blackhat

Sobrinho maldito

Page 30: Semântica e Boas Práticas de Código Orientadas a SEO

WhitehatO cara bom!

Utiliza de práticas lícitas e honestas para atingir resultados sem tentativas de prejudicar seus concorrentes e/ou burlar os mecanismos de busca (Google).

Page 31: Semântica e Boas Práticas de Código Orientadas a SEO

BlackhatO cara do mau.

Utiliza de práticas ilícitas para atingir resultados e não se preocupa em prejudicar seus concorrentes. Sua principal diversão é trolar o mecanismo de busca (Google).

Page 32: Semântica e Boas Práticas de Código Orientadas a SEO

Sobrinho malditoGeralmente cobra ¼ do seu

preço, iludindo o cliente e, na maioria das vezes, só faz coisa

errada.

Page 33: Semântica e Boas Práticas de Código Orientadas a SEO

SEO quando tudo começou

Cadastro em diretórios.Cadastro nos principais mecanismos de busca.Keyword stuffing.

E assim, você fazia chover!

Page 34: Semântica e Boas Práticas de Código Orientadas a SEO

Do Pagerank ao Domain AuthorityInicialmente criado pelo Google para medir a referenciação de links de um domínio, o Pagerank ficou obsoleto e deu lugar a uma métrica mais importante, o Domain Authority, da Moz.

Ele monitora a autoridade de um domínio sob vários pontos de vista como o referenciamento, a qualidade, o nível de compartilhamento, entre outros.

Page 35: Semântica e Boas Práticas de Código Orientadas a SEO

Hoje, o SEO é feito para as pessoas, não para os robôs.

• Conteúdo• Foco no usuário• Visão de projeto• Impacto no Marketing Digital como um todo• Fatores Técnicos de rankeamento• Link Building• Domain Authority• SEO Local

Page 36: Semântica e Boas Práticas de Código Orientadas a SEO

E o que a semântica tem a ver com isso tudo?

A semântica auxilia o Google na compreensão do código e, a partir disso, o Google passo a medir a qualidade do seu código, a performance, entre outros aspectos, o quão você se preocupa em entregar uma experiência boa para o usuário de uma maneira geral.

Page 37: Semântica e Boas Práticas de Código Orientadas a SEO

Como a semântica contribuicom a web.

Interpretação do código por parte dos buscadores.Desempenho.Cross-Browser.Melhor renderização de browsers desktop e mobile.Manutenção e entendimento sobre o código.Contribuição para uma web mais limpa e unificada.Maior entendimento da Linguagem.

Page 38: Semântica e Boas Práticas de Código Orientadas a SEO

Dicas para você começar no SEO

Page 39: Semântica e Boas Práticas de Código Orientadas a SEO

Conteúdo

Page 40: Semântica e Boas Práticas de Código Orientadas a SEO

Trate o conteúdo com a devida importância que ele merece, afinal, ninguém gosta de conteúdo BOSTA.

Lembre-se: você será julgado pelo seu conteúdo.

Page 41: Semântica e Boas Práticas de Código Orientadas a SEO

Dicas para conteúdo• Fuja das especificações, conte uma história;• Resolva o problema de alguém• Inspira, entretém;• Motiva;• Orienta decisões;• Gerencia expectativas;• Traz o conceito de uma marca à vida;• Constrói ou quebra, a confiança.• Pirâmide invertida.• Escreva com estratégia.

Page 42: Semântica e Boas Práticas de Código Orientadas a SEO

Não pense que é fácil escrever para web.

Uma coisa é você colocar informação disponível, outra coisa é fazer ela gerar bons resultados.

Page 43: Semântica e Boas Práticas de Código Orientadas a SEO

Faça SEO para as pessoas

Page 44: Semântica e Boas Práticas de Código Orientadas a SEO

Essa é a grande tendência, focar no usuário.

• Pense como um buscador.• Não fique vendendo o peixe o tempo todo.• Qualidade de conteúdo.• Aborde a sua persona da maneira correta.• Linguagem, imagens, etc.

Page 45: Semântica e Boas Práticas de Código Orientadas a SEO

Visão de projeto

Pensar no SEO não apenas como o primeiro lugar do Google, mas como experiência e parte de um projeto.

Page 46: Semântica e Boas Práticas de Código Orientadas a SEO

Conheça os aspectos técnicos

Page 47: Semântica e Boas Práticas de Código Orientadas a SEO

On-Page x Off-Page

Page 48: Semântica e Boas Práticas de Código Orientadas a SEO

SEO On-Page• HTML Semântico• Títulos otimizados• Meta-descriptions atraentes e com Call-to-Action• Meta-dados configurados

• Meta Index

• URL amigável• Arquitetura da informação• Linkagem interna• Usabilidade• Sitemap.xml• Dados estruturados

Page 49: Semântica e Boas Práticas de Código Orientadas a SEO

Boas práticas On-Page• Conheça as Diretrizes para webmasters do Google:

http://goo.gl/65mkfJ• Escreva bem seu código html.• Mantenha seu título com 63 caracteres (máximo 90).• Mantenha sua Meta description com até 156 caracteres.• Teste o desempenho do seu site.• Faça um sitemap.xml e envie para a webmasters tools.• Otimize as imagens.• Cheque links quebrados.• Marque bem o seu conteúdo.• URL amigável é obrigação.• Faça um site responsivo.• Tenha uma linkagem interna bacana.

Page 50: Semântica e Boas Práticas de Código Orientadas a SEO

Encontrável

Legível

Inteligível

Direcionado à ação

Compartilhável

Título em H1Pelo menos dois H2Metadados: Description, Listagens, Conteúdo localLinks para conteúdo relacionadoTags ALT e TITLE em imagens

Pimâmide Invertida de conteúdoInteressante para lerBullets (listas)Listas numeradasSegue o guia de estilo do site

Conteúdo em formado adequado (texto, vídeo, infográfico, apresentação)Reflete os perfis selecionados como PersonasContextoRespeito ao nível de conhecimento da audiênciaArticula velhas ideias de novas maneiras

Call to ActionLocal para comentáriosConvite para compartilharLinks para conteúdo relacionadoUma lista aplicável de como usar

Algo que provoque uma resposta emocionalUma razão para compartilharUm convite ao compartilhamentoManeiras fáceis de compartilharPersonalização (Tweet, Favorite, salve)

Checklist On-Page

Page 51: Semântica e Boas Práticas de Código Orientadas a SEO

SEO Off-Page• Pense em Link Build

• Número• Qualidade• Texto âncora• Métricas • Ferramentas

• Idade do domínio• Fatores sociais• Networking x Assessoria de imprensa.

Page 52: Semântica e Boas Práticas de Código Orientadas a SEO

SEO Off-Page | Link Building

Passado x Presente

Passado

Há pouco tempo atrás, o link building era visto como uma forma rápida de se ganhar links e fácil para burlar o Google

Hoje, links continuam sendo imprescindíveis, mas podem ser um tiro no pé. Isso porque a autoridade e a qualidade contam mais do que a quantidade.

Não faça links, busque relacionamentos.

Page 53: Semântica e Boas Práticas de Código Orientadas a SEO

Faça linkagem interna

Page 54: Semântica e Boas Práticas de Código Orientadas a SEO

On-Page trabalhando em função do Off-Page

Breadcrumb

ex.: Home » Blog » Ferramentas de SEO

Linkando Assuntos do seu site construindo autoridade.

Linkagem interna

Page 55: Semântica e Boas Práticas de Código Orientadas a SEO

Se preocupe com Domain Authority

Page 56: Semântica e Boas Práticas de Código Orientadas a SEO

Métrica criada pela empresa americana MOZ, que simula o algoritmo do Google. Seu número vai de 0 a 100 e você pode checá-lo através do Open Site Explorer.

Domain Authority

Page 57: Semântica e Boas Práticas de Código Orientadas a SEO

Indicador de qualidade

Analisa links, volume de visitas.

Analisa impacto em redes sociais.

Serve para medir a autoridade de um domínio.

Referência:

http://tableless.com.br/o-que-e-autoridade-dominio-ou-domain-authority/

Domain Authority

Page 58: Semântica e Boas Práticas de Código Orientadas a SEO

SEO Local

Page 59: Semântica e Boas Práticas de Código Orientadas a SEO

• Oportunidade para pequenos negócios e/ou negócios locais.

• Campanha menor

• Interação com mapa.

• Otimização de local em redes sociais.

• Páginas de resultados específicas para locais no Google.

SEO Local

Page 60: Semântica e Boas Práticas de Código Orientadas a SEO
Page 61: Semântica e Boas Práticas de Código Orientadas a SEO
Page 62: Semântica e Boas Práticas de Código Orientadas a SEO
Page 63: Semântica e Boas Práticas de Código Orientadas a SEO

Crie sites Social Friendly

Page 64: Semântica e Boas Práticas de Código Orientadas a SEO
Page 65: Semântica e Boas Práticas de Código Orientadas a SEO
Page 66: Semântica e Boas Práticas de Código Orientadas a SEO

Integre seu conteúdo ao Facebook.

Facebook - Opengraph

• http://blog.popupdesign.com.br/facebook-open-graph/

• Imagens de compartilhamento

Teste:

• https://developers.facebook.com/tools/debug/

Page 67: Semântica e Boas Práticas de Código Orientadas a SEO

Integre seu conteúdo ao Google+.

Google Plus

• Rich Snippets – Dados Estruturados

• https://support.google.com/webmasters/answer/99170?hl=pt-BR

• Publish

• https://support.google.com/plus/answer/1713826?hl=pt-BR

• Teste

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

Page 68: Semântica e Boas Práticas de Código Orientadas a SEO

Integre seu conteúdo às redes sócias.

Twitter Cards

• https://dev.twitter.com/cards/overview

Page 69: Semântica e Boas Práticas de Código Orientadas a SEO

Análise de concorrência

Page 70: Semântica e Boas Práticas de Código Orientadas a SEO

A Análise de concorrência é necessária para que você se contextualize sobre os conteúdos abordados no mercado, sobre como está sendo feita a campanha de Marketing Digital desses concorrentes e principalmente, para você saber o que está faltando.

Se antecipe para ter vantagem competitiva.

Page 71: Semântica e Boas Práticas de Código Orientadas a SEO

Ter um Blog é essencial

Page 72: Semântica e Boas Práticas de Código Orientadas a SEO

Conteúdo

Construção de Autoridade

Linkagem interna

Link building

Fortalecimento do SEO

Page 73: Semântica e Boas Práticas de Código Orientadas a SEO

Mensuração de dados

Page 74: Semântica e Boas Práticas de Código Orientadas a SEO

Google Analytics (GA)

• Conheça o seu usuário

• Conheça o desempenho do seu site

• Mensure os resultados da campanha

• Aproveite os milhões de dados que todo mundo possui, vê, mas quase ninguém usa.

• Google Search Console (GSC)

• Dados de acesso

• Aspectos técnicos

Page 75: Semântica e Boas Práticas de Código Orientadas a SEO
Page 76: Semântica e Boas Práticas de Código Orientadas a SEO
Page 77: Semântica e Boas Práticas de Código Orientadas a SEO

https://support.google.com/analytics/answer/1008080?hl=pt-BR

Instalando o Google Analytics

Page 78: Semântica e Boas Práticas de Código Orientadas a SEO

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

Page 79: Semântica e Boas Práticas de Código Orientadas a SEO
Page 80: Semântica e Boas Práticas de Código Orientadas a SEO

Integre o GA ao GSC• Fuja do Not Provided

• Dados complementares

• Como fazer a integração:

http://www.assoweb.com.br/seo/linkar-o-google-analytics-com-o-webmasters-tools/

Page 81: Semântica e Boas Práticas de Código Orientadas a SEO

Ferramentas

Análise On-Page

Site analyzer - http://www.site-analyzer.com/WooRank - http://www.woorank.com/pt/Browseo - http://www.browseo.net/

BackLinks

Open Site Explorer - https://moz.com/researchtools/ose/Ahrefs - https://ahrefs.com/MajesticSEO - https://pt.majestic.com/

Gerenciamento de tarefas

Trello - http://trello.com

Analisa conteúdo duplicado

Copy Scape - http://www.copyscape.com/

Gestão de campanhas (SEO, Social Media, PPC, Marketing)

MOZ - http://www.moz.comSEM Rush - http://www.semrush.comRaven - http://raventools.com/

Análise de palavra-chave

UberSuggest - http://ubersuggest.org/

Ferramentas do Google

Google Analytics - http://goo.gl/cuNWMGGoogle Search Console - http://goo.gl/oSZgejGoogle Keyword Planner - http://goo.gl/lW1rWmGoogle Trends - http://goo.gl/SbrPHeGoogle Rich Snippets Test - http://goo.gl/At1sIW

Glossário de SEO

Glossário Agência Mestre http://goo.gl/snEZg2

Page 82: Semântica e Boas Práticas de Código Orientadas a SEO

DicasSeja criativo para fazer coisas diferentes!

Divirta-se!

Saiba inglês.

Vá a eventos e palestras.

Utilize ferramentas.

Crie uma metodologia de trabalho.

Converse com grandes nomes da área.

Estude, estude e estude.

Não se esqueça que o SEO é para pessoas.

Page 83: Semântica e Boas Práticas de Código Orientadas a SEO

Douglas Faria/douglasfaria10

/+DouglasFaria10

Page 84: Semântica e Boas Práticas de Código Orientadas a SEO

Obrigado!