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