A versão mobile é crucial porque mais da metade de todo o tráfego de sites (58,67%) vem de dispositivos móveis. Além disso, o Google agora usa a indexação mobile-first, enfatizando a importância da compatibilidade dos sites com dispositivos móveis.
Com tantas pessoas usando seus smartphones para pesquisar e fazer compras, ter um site otimizado para dispositivos móveis é essencial para atrair e manter usuários. Vamos ver alguns dos erros mais comuns de otimização para dispositivos móveis e como corrigi-los.
1. Não possuir uma tag com largura ou escala inicial
Um dos problemas mais frequentes é não definir a viewport na seção <head>.
Páginas sem essa tag, ou com uma configuração inadequada, podem não ser exibidas corretamente em dispositivos móveis. A tag meta viewport permite que a largura e a escala sejam ajustadas corretamente em todos os dispositivos.
Por que a viewport é importante
Não definir a viewport pode resultar em exibição inconsistente, as páginas podem não ser escaladas corretamente, fazendo com que o texto e as imagens apareçam muito pequenos ou muito grandes em dispositivos móveis.
Sem ela, os dispositivos móveis podem renderizar as páginas nas larguras de tela de desktop e reduzi-las, dificultando a leitura do texto. Ter uma viewport configurada corretamente garante que sua página web se adapte a diferentes tamanhos de tela, proporcionando uma experiência de usuário acessível.
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.
2. Os alvos de toque não estão dimensionados adequadamente
Os alvos de toque são áreas interativas em uma páginae em que os usuários podem engajar. Isso inclui botões, links e elementos de formulário. Garantir que os alvos de toque sejam grandes o suficiente e bem espaçados torna sua página mais amigável e acessível.
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.
3. O documento possui tamanhos de fonte ilegíveis
Sites com fontes pequenas podem ser desafiadores para os usuários lerem em dispositivos móveis. O Lighthouse sinalizará qualquer página onde mais de 40% do texto seja menor que 12px.
Portanto, a regra aqui é simples e clara: pelo menos 60% do texto na sua página deve ter um tamanho de fonte de pelo menos 12px.
4. Plugins de navegador não suportados
Páginas que usam plugins de navegador como Flash, Shockwave, Java, Director e Silverlight não são suportadas pela maioria dos dispositivos móveis e navegadores, e os mecanismos de busca podem não indexá-las.
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 melhora a experiência do usuário, mas também pode aumentar a indexabilidade do seu site nos mecanismos de busca. Embora muitos outros problemas possam afetar o mobile de uma página, esses que discutimos são os mais comuns e impactantes.
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.
