A versão mobile de um site é o mínimo, digamos que obrigatório. Mais da metade do tráfego global (58,67%) vem de dispositivos móveis, e o Google usa a indexação mobile-first como padrão. Isso significa que a experiência dos usuários em smartphones tem um peso enorme no desempenho do seu site nos resultados de busca.
Com tantas pessoas usando celulares para pesquisar e comprar, ter um site otimizado para dispositivos móveis não é mais uma opção — é uma necessidade. Mas muitos sites ainda cometem erros básicos que prejudicam sua performance.
Vamos compartilhar aqui os problemas mais comuns e como corrigi-los.
Não possuir uma tag viewport configurada
Um dos maiores erros é não definir a tag meta viewport na seção <head> do HTML. Essa tag ajusta a largura e a escala da página para que ela seja exibida corretamente em dispositivos móveis. Sem ela, as páginas podem aparecer mal dimensionadas, com textos minúsculos ou imagens cortadas.
Ou seja, a falta da tag viewport faz com que os dispositivos móveis tentam renderizar a página como se fosse um desktop, reduzindo tudo para caber na tela. O resultado? Uma experiência frustrante para o usuário, que precisa dar zoom constantemente para ler o conteúdo.
Aqui está um exemplo de uma página sem a tag meta viewport, e a mesma página com a tag meta viewport.
Noções básicas sobre viewport
Um site otimizado para dispositivos móveis geralmente contém uma linha similar a essa em seu código-fonte:
<meta name="viewport" content="width=device-width, initial-scale=1" />- width=device-width – define a largura do viewport para ser igual à largura do dispositivo. Isso garante que a página use toda a largura da tela do dispositivo, tornando o conteúdo adequadamente dimensionado e mais fácil de ler.
- initial-scale=1 – define o nível de zoom inicial quando a página é carregada pelo navegador. Um valor de 1 significa que a página será exibida em uma escala de 1:1, sem zoom inicial, garantindo que o conteúdo não esteja ampliado ou reduzido quando a página for carregada.
Outras propriedades que você possivelmente pode encontrar:
- height – define a altura do viewport. Pode ser definido como device-height para corresponder à altura do dispositivo.
- minimum-scale – especifica o nível mínimo/máximo de zoom permitido pelo usuário.
- user-scalable – determina se o usuário pode ampliar e reduzir manualmente. Pode ser definido como “yes” ou “no”.
As propriedades user-scalable e maximum-scale, se implementadas de forma incorreta, podem prejudicar a acessibilidade. Por exemplo, desabilitar o zoom com “user-scalable=no” ou definir uma escala máxima restritiva pode impedir que usuários com deficiências visuais redimensionem o texto e os elementos para melhor legibilidade. Garanta que a tag meta viewport de suas páginas permitam o zoom e a escala adequada para atender aos padrões de acessibilidade.
Como verificar o viewport
Você pode verificar manualmente se sua página possui uma tag meta viewport visualizando o código-fonte da sua página. Procure a tag na seção <head> do HTML.
Outra opção é utilizar o Lighthouse, uma ferramenta gratuita e de código aberto do Google para analisar a qualidade das páginas. Abra o Chrome DevTools, clique com o botão direito na sua página e selecione “Inspecionar”, depois vá para a aba “Lighthouse”. Clique em “Generate report” para iniciar a auditoria do Lighthouse. Ele sinalizará problemas da tag meta viewport em seu relatório.
Você também pode utilizar um rastreador para chegar aos mesmos resultados do Lighthouse. Por exemplo, no Screaming Frog SEO Spider, conecte-se ao PageSpeed Insights e navegue até a aba ‘Mobile’ para ver quaisquer problemas relacionados ao viewport sinalizados pelo Lighthouse.
Alvos de toque pequenos ou mal espaçados
Os alvos de toque são áreas interativas da página, como botões, links e campos de formulário. Se eles forem muito pequenos ou estiverem muito próximos, fica difícil para os usuários interagirem, especialmente em telas sensíveis ao toque.
Por que os alvos de toque são importantes
Os alvos de toque precisam ser adequadamente dimensionados e espaçados para garantir que possam ser ativados facilmente sem acionar ações indesejadas. Quando os alvos de toque são muito pequenos ou muito próximos, torna-se difícil para os usuários interagirem com eles de forma eficaz.
Essa otimização é especialmente para:
- Pessoas usando dispositivos móveis onde as telas sensíveis ao toque são a principal forma de interação.
- Pessoas usando um mouse, caneta ou entrada de toque que têm deficiências de mobilidade, como tremores nas mãos.
- Usuários operando dispositivos em ambientes com movimento constante, como transporte público.
- Usuários de mouse que têm dificuldades com movimentos finos.
- Pessoas acessando um dispositivo com uma mão.
- Pessoas com dedos grandes, ou aquelas que usam apenas parte do dedo para operar o dispositivo.
Um tamanho mínimo recomendado para alvos de toque é de cerca de 48 pixels independentes de dispositivo em um site com um viewport móvel configurado corretamente.
Por exemplo, enquanto um ícone pode ter apenas uma largura e altura de 24px, você pode usar preenchimento adicional para aumentar o tamanho do alvo de toque para 48px. A área de 48×48 pixels corresponde a cerca de 9mm, que é aproximadamente o tamanho da área do dedo de uma pessoa.
Como verificar os alvos de toque
O Lighthouse pode ajudar a identificar problemas com os tamanhos dos alvos de toque.
Abra o Chrome DevTools, clique em “Generate report” para iniciar a auditoria do Lighthouse. O Lighthouse sinaliza páginas com alvos de toque que atendem a ambas as condições:
- O alvo é menor que 48px por 48px.
- Pelo menos 25% da área do alvo se sobrepõe a outro alvo.
Fontes ilegíveis
Textos pequenos são um problema sério em dispositivos móveis. O Lighthouse aponta páginas onde mais de 40% do texto tem tamanho inferior a 12 pixels.
Portanto, a regra aqui é simples: no mínimo, 60% do texto deve ter 12 pixels ou mais. Isso garante que a maioria dos usuários consiga ler o conteúdo sem esforço.
Uso de plugins obsoletos
Plugins como Flash, Java e Silverlight já foram populares, mas hoje são incompatíveis com a maioria dos dispositivos móveis e navegadores modernos. Além disso, esses recursos podem impedir que o Google indexe seu site corretamente.
Navegadores estão constantemente bloqueando conteúdo de plugins não suportados. A melhor solução a longo prazo é remover plugins desatualizados e substituí-los por alternativas modernas e suportadas, como players de vídeo HTML5 em vez de Flash.
Como encontrar esses plugins
Você pode inspecionar manualmente suas páginas visualizando o código-fonte e procurando referências a plugins não suportados. Procure por tags <object>, <embed> ou <applet>, que são comumente usadas para incorporar esses plugins.
Utilize também crawlers, como o Screaming Frog SEO Spider. Para preencher este filtro, a API do PageSpeed Insights deve estar conectada via ‘Config > API Access > PSI’. Vá para a aba ‘Mobile’. Aplique o filtro ‘Unsupported Plugins’ para visualizar URLs com esse problema.
Outra forma de encontrá-los é através das Ferramentas de Desenvolvedor do Navegador. Abra o Chrome DevTools, clique com o botão direito na sua página e selecione “Inspecionar” para abrir o DevTools. Verifique a aba “Console” para avisos sobre plugins obsoletos ou não suportados.
Garantir que seu site seja compatível com dispositivos móveis não é apenas uma questão de usabilidade — é fundamental para o SEO. Erros como falta de viewport, alvos de toque mal dimensionados, fontes ilegíveis e uso de plugins obsoletos podem prejudicar tanto a experiência do usuário quanto a indexação do site.
Para saber mais sobre mobile first, garanta acesso ao Curso Online Dominando o SEO Técnico na Prática, ou consulte nossos valores para uma Auditoria Detalhada de SEO Técnico e Page Experience para o seu site.
Conteúdo traduzido e adaptado de Mobile SEO: Common Errors and Solutions.
