Nesse guia de UX para SEO eu compartilho várias técnicas para deixar a vida do usuário mais acessível e para quem deseja dominar o mundo.

1. Guia de UX para SEO

2. JR Martian
__
jrmartian.com.br
Graduado em Design, entusiasta em UX e Otimização de Apps, especialista em
SEO e SEM com certificações do Google e da Blue Array Academy. Já visitei o
Vale do Silício, o Googleplex, o YouTube Space, em NYC, MIT e a NASA.
Minha missão é deixar as coisas mais simples, acessíveis e compartilhar
conhecimento.

3. Mas afinal, o que
UX tem a ver
com SEO?
De forma geral, a UX visa simplificar, o máximo possível, as
etapas necessárias para que o usuário alcance o seu
objetivo.
Já o SEO é um conjunto de técnicas e estratégias que
respondem à intenção da busca do usuário por meio de uma
pesquisa online.

4. UX
não é apenas
Para o design
Para a tecnologia
Para o digital
SEO
não é apenas
Aumentar o tráfego
Melhorar o posicionamento
Aparecer no Google

5. É para você!

6. E como aplicar a
UX e o SEO juntos?

7. UX + SEO = SXO
Search Experience Optimization

8. DESEMPENHO INTERAÇÃO
COMPORTAMENTO

9. Navegacional
Informacional
Nome da marca, empresa, serviço
Ex: NASA, Elon Musk, SpaceX
Momento de descoberta
Ex: Como, onde, o quê, para que
serve, quando, qual o melhor
Transacional
Incentiva a compra
Ex: Comprar passagem barata
Intenção de busca

10. 67%
dos que veem TV também
assistem a vídeos na web
6 em cada 10
espectadores usam o celular ao
mesmo tempo que assistem TV
91%
dos usuários de smartphone
buscam por informação em
seus aparelhos enquanto estão
no meio de alguma outra tarefa
82%
dos usuários de smartphone
consultam seus aparelhos
enquanto estão na loja
decidindo o que comprar
Think With Google
61%
dos usuários tendem a deixar
a página se ela não oferecer
uma boa experiência móvel

11. Search Engine Roundtable
Enquanto as redes sociais centralizam os seus
conteúdos em suas plataformas, o Google
expande o seu conteúdo de forma democrática.
Mas, o que o Google quer afinal?
Entregar o melhor resultado para quem pesquisa
independentemente do formato de conteúdo.

13. Think With Google

14. Mas, o que isso tem
a ver com UX e SEO?

15. Tem a ver
com comportamento :)

16. Page Experience (2021)

17. Google Page Experience
Desempenho
Interatividade
Estabilidade visual
Compatibilidade mobile
Conexão segura HTTPS
Pop-up intrusivo
Core Web
Vitals
Page
Experience

18. Desempenho de carregamento
Após o início do carregamento da página, o conteúdo deve
aparecer em até 2,5 segundos.
Core Web Vitals
Como melhorar:
● Tenha um servidor otimizado e evite os compartilhados;
● Mantenha o cache habilitado e configure o tempo de duração;
● Otimize os arquivos .CSS e .JS, e remova os desnecessários;
● Comprima imagens para o formato .webp;
● Ative o lazy loading para imagem e vídeo somente quando visualizados;
● Utilize fontes padrão web e evite usar bibliotecas de fontes.

19. Interatividade da ação
Ao requisitar uma interação pela primeira vez, toque na tela,
clique no botão ou link, o intervalo do tempo de resposta deve ser
100 milissegundos.
Core Web Vitals
Como melhorar:
● Reduza a execução de códigos de terceiros;
● Remova códigos não utilizados;
● Minimize os arquivos .CSS e .JS;
● Divida os .JS maiores em arquivos menores;
● Evite páginas longas que exigem maior requisição.

20. Estabilidade visual
Mede a frequência de mudanças de elementos inesperados
enquanto a página é visualizada.
Core Web Vitals
Como melhorar:
● Defina altura e largura das imagens e vídeos;
● Evite anúncios, incorporações e iframes sem dimensões;
● Defina font-display:swap para ser carregado à fonte padrão;
● Utilize animações com a propriedade transform do .CSS;
● Evite conteúdos ou botões que mudem de posição.

21. Search Engine Journal
Page Experience E.A.T.
Core Web Vitals
Garante que o usuário navegue
com qualidade
Expertise, Autoridade e Confiabilidade
Garante que o usuário encontre
informação de qualidade
É fator de ranqueamento
Aumenta a credibilidade
Melhora a usabilidade
Proporciona segurança
Facilita a conversão
Não é fator de ranqueamento
Aumenta a reputação
Recebe links naturais e de qualidade
Escreva como um especialista
Mantenha o conteúdo atualizado

23. E como
organizamos isso?

24. Organização
Hierarquia
Segmentação
Descrição
Estrutura
Navegação
Conteúdo
Informação
Arquitetura
da informação

25. Viagem
Orlando
NASA
Rocket Garden
Orlando
São Paulo
Lisboa
Disney
NASA
Universal Studios
Angry Birds Space
Robot Scouts
Rocket Garden
Hospedagem
Aluguel de carro
Alimentação
Para
E-commerce

26. Para
Blog post
(Topic Cluster)
Marcos Pontes
Neil Armstrong
JAXA
Falcon 9
Elon Musk
Starlink
ESA
Roskosmos
Jessica Meir
Discovery
Apollo 11
Challenger
NASA
Agência
Espacial
SpaceX
Astronauta
Missões

27. Links
Verticais
Links
Horizontais
Facilitam o encontro da informação mais
rapidamente e ajudam a entender o contexto
para classificar nos resultados
Menu
Categoria
Subcategoria
Filtros
Facilitam a navegação do usuário nos
conteúdos e ajudam a encontrar a informação
para aquela pesquisa
Links internos
Artigos relacionados
Produtos relacionados
Tags

28. URLs e Crawl Depth
Quanto mais longe ou profunda a página, menor
a probabilidade de ser rastreado e ser relevante
para os mecanismos de busca.
Screaming Frog

29. Profundidade 1 Profundidade 2
Profundidade 3
Profundidade 4
Sitebulb

30. Hellooooo!

31. Facilita a navegação
Diminui o bounce rate
Aumenta o pageview
Melhora a interação
Facilita a tomada de decisão
Aumenta a conversão
Benefícios para o
usuário
Melhora o crawl budget
Ajuda o bot encontrar
Facilita a indexação
Aumenta a autoridade dos links internos
Aumenta a relevância das páginas
Melhora a classificação nos resultados
Benefícios para o
rastreador

32. "A usabilidade é uma condição necessária
para a sobrevivência." Jakob Nielsen

33. Grupo Nielsen Norman
Usabilidade
Facilita a tomada de decisão sem precisar
se esforçar em pensar
Utilidade
X
Aquilo que estou utilizando atende a minha
expectativa
Autonomia Satisfação

34. Mobile first (priorizar dispositivos móveis)
Responsividade do conteúdo, imagens e vídeos
Distanciamento da área de cliques / touch screen
Legibilidade / Escaneabilidade
Conteúdos importantes acima da dobra
Conteúdos não ultrapassem a tela
Áreas de descanso / respiro
Mensagens de alerta / erros visíveis
Design (+ função / - estética)
Testes e mais testes…
Grupo Nielsen Norman
Boas práticas
de usabilidade

35. Google Search Console | Mobile Friendly
Testes
de usabilidade

36. WCAG | World Health Organization
Acessibilidade
Pessoas com necessidades especiais (15% população)
Conexão de rede lenta
Navegadores antigos
Garantia de navegação em qualquer dispositivo
Democratização do acesso à informação
É a prática de garantir que o conteúdo
esteja acessível sem nenhuma ou
restrição.
WCAG
(Web Content Accessibility Guidelines)

37. WCAG | World Health Organization
Perceptível
As informações e os componentes da interface do
usuário devem ser apresentados a ele de maneira que
percebam:
● Alternativas de texto
● Legendas
● Descrição de áudio
● Contraste de cor
● Orientação visual
● Conteúdo ao passar o mouse
e etc.
Operável
Os componentes da interface do usuário e a
navegação devem ser operáveis:
● Teclado acessível
● Atalhos em teclas
● Título e etiquetas
● Link no contexto
● Foco visível
● Gestos de ponteiro
e etc.

38. WCAG | World Health Organization
Compreensível
As informações e a operação da interface do usuário
devem ser compreensíveis.
● Idiomas
● Pronúncia
● Palavras incomuns
● Abreviaturas
● Erro de identificação
● Etiquetas de instruções
e etc.
Robusto
O conteúdo deve ser robusto o suficiente para
que possa ser interpretado por uma ampla
variedade de agentes de usuário, incluindo
tecnologias assistivas.
● Links
● Elementos de formulário
● Mensagens de status
e etc.

39. WCAG
Descrições alt text ajudam os deficientes visuais a compreender
Utilize o atributo alt até 100 caracteres
Imagens decorativas devem conter alt vazio (alt=" ")
Utilize a descrição alt text na imagem para aparecer na pesquisa
Utilize o alt text para usuários com conexão lenta
Utilize alt text para endereçar o contexto da imagem
Utilize a extensão de imagem .webp para carregar mais rápido
Utilize a extensão .svg para ilustrações e ícones
Salve o nome da imagem com a keyword relacionada
Atributos
para imagem
Os buscadores usam o texto alternativo
para ajudar a classificar imagens
durante a pesquisa.

40. Youtube
Adicione legendas e closed captions
Use transcrição automática
Traduza os títulos e descrições dos vídeos
Crie um arquivo de transcrição
Ative a opção "editor de legendas"
Inclua legenda quando inseridos na página
Carregue uma imagem antes do player do vídeo
Não reproduza o vídeo automaticamente
Não oculte os botões de reprodução e velocidade
Atributos
para vídeos
Compartilhe vídeos com um público
maior, incluindo espectadores surdos
ou com perda auditiva e usuários que
falam outro idioma.

41. WCAG | Pedro Dias
Use links descritivos ao passar o mouse e evite "clique aqui"
Sublinhe os links para sinalizar área clicável
Utilize autocomplete em campos de formulários
Padronize a navegação de forma minimalista
Utilize paginação ao invés de rolagem infinita no mobile
Utilize contrastes entre textos, imagens e backgrounds
Ofereça a opção de fechar janelas lightbox clicando fora e com ESC
Utilize duas versões de layout (claro e escuro), se possível
Utilize tradutor para libras
Utilize legendas em vídeos e alternativa de textos em áudio
Boas práticas
para acessibilidade

42. Material.io
Material
Design
● Designers
● Devs
● Editores

43. Ferramentas
para testes

44. Como monitorar tudo isso?

45. Títulos
e descrições
Storybase

46. Desktop
e mobile
Attention Insight

47. Vídeos
Ex. Walmart
Attention Insight

48. Inteligência
Artificial
RealEye

49. Ferramentas
para testes
Clarity (free)
Smartlook
Hotjar
Heatmap
Attention Insight
Visual Eyes
RealEye
Eye Tracking
Attention Insight
RealEye
Vídeo
StoryBase (free)
Title
Google Optimize (free)
SearchPilot
VWO
Teste A/B

50. E para quem
ficou até o final…

51. JR
Martian
_
jrmartian.com.br