Como criar um site otimizado para celular e ter o máximo de sucesso em SEO
Por Toy Wen Da, Cofundador · Atualizado em · 7 min de leitura
Traduzido do original em inglês. Ler em inglês
Para criar um site otimizado para celular que ranqueie bem, projete primeiro a versão para celular e deixe o desktop se adaptar a ela. O Google ranqueia suas páginas quase exclusivamente com base no que o rastreador mobile enxerga. Por isso, conteúdo escondido no celular ou carregamento lento no mobile custam posições, por melhor que pareça a versão para desktop.
Por que a indexação mobile-first muda todo o trabalho
Antes de 2019, o Google ranqueava os sites principalmente pela versão desktop da página. Naquele ano, passou para a indexação mobile-first, e hoje seu rastreador avalia a renderização mobile do seu conteúdo, dos links e dos dados estruturados para decidir onde você aparece. Uma página desktop bem acabada, mas que perde conteúdo no celular, fica na prática invisível para o Google nas partes que foram removidas.
Mais de 55% do tráfego web global já vem de dispositivos móveis, e mais de 60% das buscas no Google acontecem no celular. A documentação para desenvolvedores do Google explica como funciona a indexação mobile-first e o que ele espera de uma página mobile rastreável (fonte: Google Search Central). Se o seu site mobile e o desktop mostram conteúdos, links ou títulos diferentes, vale a versão mobile.
Passo 1: Teste primeiro o desempenho atual no celular
Não dá para corrigir o que você não mediu. Antes de mexer no design, passe suas páginas principais por uma auditoria mobile completa e anote cada falha específica, em vez de se contentar com uma nota única de aprovado ou reprovado.
Qual ferramenta responde a qual pergunta
| Ferramenta | O que verifica | Melhor uso |
|---|---|---|
| Relatório de Usabilidade em dispositivos móveis do Search Console | Erros reais de rastreamento: texto pequeno demais, elementos clicáveis muito próximos, viewport não definida | Encontrar problemas de indexação mobile no site todo |
| PageSpeed Insights / Lighthouse | Core Web Vitals, detalhamento do tempo de carregamento, recursos que bloqueiam a renderização | Diagnosticar por que uma página específica está lenta |
| Emulação de dispositivos nas DevTools do navegador | Layout em diferentes larguras de tela | Verificações visuais rápidas durante o desenvolvimento |
| Um verificador gratuito de compatibilidade com celular | Se uma única URL é renderizada e funciona corretamente no celular | Checagens rápidas antes ou depois de uma mudança |
O teste gratuito de compatibilidade com celular da SearchBlueprint permite verificar uma URL sem esperar por um rastreamento completo. Teste sua página inicial, suas principais páginas de destino e qualquer página com formulário, porque formulários e menus de navegação são onde se escondem a maioria dos problemas de SEO mobile.
Passo 2: Projete pensando primeiro no mobile, e não apenas adaptando para ele
Design mobile-first significa começar pela menor tela e acrescentar complexidade conforme o espaço permitir, em vez de encolher um layout de desktop. Duas regras importam mais do que todas as outras.
A primeira é a paridade de conteúdo. Nunca esconda descrições de produtos, detalhes de preços ou o texto principal no celular para economizar espaço: o rastreador mobile do Google só enxerga o que os usuários de celular enxergam e não consegue ranquear você por um conteúdo que não está lá.
A segunda é uma tag viewport funcionando. Toda página precisa de <meta name="viewport" content="width=device-width, initial-scale=1"> no head. Sem ela, os navegadores mobile renderizam a página na largura do desktop e a reduzem, o que prejudica as áreas de toque e o tamanho do texto antes mesmo de o visitante fazer qualquer coisa.
Antes de publicar uma página redesenhada, confira-a com uma lista, em vez de confiar na memória. O checklist de SEO on-page da SearchBlueprint reúne as verificações de pré-publicação que pegam essas falhas, e várias delas são específicas do mobile.
Passo 3: Acerte nas áreas de toque, nas fontes e no espaçamento
Estas são as correções mais baratas da lista e estão entre as mais esquecidas. Um botão fácil de clicar com o mouse pode ser quase impossível de acertar com o polegar.
Os defeitos que mais custam e quanto vale corrigi-los
| Defeito no mobile | Correção recomendada | Impacto relatado |
|---|---|---|
| Áreas de toque abaixo de 44-48px | Áreas de no mínimo 48x48px, com cerca de 8px de espaçamento | Menos toques errados, menos alertas de usabilidade no Search Console |
| Texto do corpo abaixo de 16px | Definir 16px como mínimo para texto legível | Um caso relatou a taxa de rejeição caindo de 78% para 41% depois de aumentar a fonte para 16px |
| Menus suspensos que só abrem com hover | Refazer para funcionar com toque e clique, não apenas com hover | Uma agência relatou que cerca de 80% dos usuários de celular não conseguiam chegar aos produtos atrás de um menu com hover |
| Imagens grandes e não otimizadas | Servir WebP/AVIF, adicionar srcset responsivo e usar lazy-load abaixo da dobra |
Um caso relatou o tempo de carregamento caindo de 12 segundos para 2,1 segundos após otimizar as imagens |
As diretrizes de acessibilidade do W3C estabelecem um piso relacionado: a WCAG 2.2 exige um tamanho mínimo de alvo para que os elementos interativos continuem utilizáveis por pessoas com destreza limitada (fonte: W3C Web Content Accessibility Guidelines). Cumpri-lo costuma resolver ao mesmo tempo a usabilidade mobile e a acessibilidade.
Passo 4: Otimize a velocidade e as Core Web Vitals
No celular, a velocidade pesa tanto no ranking quanto na conversão. A própria pesquisa do Google constatou que 53% dos visitantes mobile abandonam um site que leva mais de três segundos para carregar, e que sites não otimizados têm 62% menos chance de gerar qualquer conversão.
Três métricas decidem se uma página mobile atinge o padrão técnico do Google, conhecido como Core Web Vitals:
- Largest Contentful Paint (LCP) deve ficar abaixo de 2,5 segundos.
- Interaction to Next Paint (INP) deve ficar abaixo de 200 milissegundos.
- Cumulative Layout Shift (CLS) deve ficar abaixo de 0,1.
Os limites, e como o Lighthouse os calcula, estão documentados em detalhes no web.dev. Para atingi-los, comprima e redimensione as imagens antes de enviá-las, adie o JavaScript não essencial, ative o cache do navegador e use uma CDN se o seu público estiver espalhado por várias regiões. Nada disso exige um redesign, já que se trata, em sua maioria, de trabalho no servidor e nos arquivos.
Passo 5: Ajuste formulários e navegação para o polegar
Um formulário feito para o mouse costuma falhar no celular. Use o tipo de campo correto para cada entrada (tel para telefones, email para endereços de e-mail) para que o teclado certo apareça automaticamente, e ative o preenchimento automático sempre que for seguro. Um caso relatado registrou as conversões do formulário passando de 2,1% antes das mudanças para 8,7% depois, apenas por corrigir os tipos de campo, o tamanho dos campos e o preenchimento automático.
O Google também lê sinais mais amplos da qualidade da experiência do usuário, e o guia da SearchBlueprint sobre os sinais de UX que realmente afetam o ranking aprofunda como engajamento e usabilidade influenciam o desempenho na busca, além das correções para mobile descritas aqui.
Se você ainda mantém um subdomínio mobile separado m., abandone-o. Um design responsivo que entrega a mesma URL para todos os dispositivos evita a complexidade dos redirecionamentos e mantém seus sinais de ranking em uma única página, em vez de dividi-los.
Por que isso compensa do ponto de vista comercial
O Google informa que quase 78% das buscas no celular por empresas locais resultam em uma compra ou visita em até um dia, e a Pew Research constatou que 76% dos adultos nos EUA fizeram uma compra online pelo smartphone em 2022, com adoção maior entre adultos de 18 a 49 anos. Um site mobile lento ou desajeitado perde um público majoritariamente mobile justamente no momento em que ele está pronto para comprar.
Perguntas frequentes
Um site otimizado para celular realmente afeta meu ranking no Google, ou apenas a usabilidade?
Os dois. O Google usa a indexação mobile-first, então a versão mobile da sua página é a que é rastreada e ranqueada, e um problema de usabilidade mobile também é um problema de SEO.
Qual é o erro de SEO mobile mais comum?
Esconder conteúdo no celular para manter o layout limpo. Qualquer texto, link ou detalhe de produto removido da visualização mobile fica, na prática, invisível para o algoritmo de ranking do Google, já que ele avalia a versão mobile por padrão.
Quão pequenas podem ser as áreas de toque antes de prejudicar a usabilidade?
Mantenha os elementos interativos com pelo menos 44-48 pixels, com alguns pixels de espaçamento entre eles. Qualquer coisa menor aumenta os toques errados e costuma ser sinalizada no relatório de Usabilidade em dispositivos móveis do Search Console.
Qual velocidade de página devo buscar no celular?
Mire em Largest Contentful Paint abaixo de 2,5 segundos, Interaction to Next Paint abaixo de 200 milissegundos e Cumulative Layout Shift abaixo de 0,1. Esses limites das Core Web Vitals estão documentados no web.dev e entram na forma como o Google avalia a experiência da página.
Ainda preciso de uma versão mobile separada do meu site?
Não. Um único site responsivo, que se adapta a qualquer tamanho de tela, é o padrão atual e evita os problemas de redirecionamento e de conteúdo duplicado que os subdomínios mobile separados criam.
Saiba com clareza em que pé o seu site está
Um site otimizado para celular raramente exige uma grande reconstrução. É uma série de correções específicas e mensuráveis em velocidade, áreas de toque, formulários e paridade de conteúdo. Para ver onde o seu site está perdendo visitantes e posições no mobile antes de mudar qualquer coisa, fale com a equipe por trás de um relatório de SEO de exemplo e veja o que uma auditoria completa revela.
Recursos / Referências
Leitura relacionada: Responsive Design SEO: What Actually Moves Your Rankings.
Fontes
Sobre o autor
O SearchBlueprint pesquisou, escreveu e avaliou este artigo com o mesmo pipeline de conteúdo que nossos clientes usam nos próprios sites. A nota que aparece na assinatura é a que nosso mecanismo de conteúdo deu a esta página antes de ela ser publicada. Nada aqui passa por revisão manual, e esse é justamente o ponto: é o resultado do produto, publicado onde qualquer pessoa pode conferir.