O que significa Mobile First? Indexação Mobile-First e Design Mobile-First
Mobile first significa "a versão mobile vem primeiro". Em SEO, refere-se à indexação mobile-first: o Google rastreia seu site com o crawler de smartphone e indexa e ranqueia as páginas pela versão mobile, então o conteúdo visível apenas no desktop, na prática, não existe para o ranqueamento. Em web design, é a abordagem de projetar a interface primeiro para uma tela pequena e depois expandi-la para telas maiores. O Google anunciou que a migração para a indexação mobile-first foi concluída, e não é uma configuração que você possa desativar.
Os dois significados de mobile first
| Contexto | O que significa | O que verificar |
|---|---|---|
| SEO | Indexação mobile-first: o Google indexa e ranqueia uma página usando a versão mobile, rastreada com o crawler de smartphone | Se conteúdo, links, marcação e meta tags são iguais entre a versão mobile e a desktop |
| Web design e front-end | Uma abordagem "celular primeiro": a interface é projetada primeiro para uma tela estreita e depois aprimorada para telas maiores | Como a página aparece e funciona no celular: viewport, tamanhos de fonte, áreas de toque, rolagem |
Em CSS, mobile first significa que os estilos base são voltados para celulares, e as media queries com min-width expandem o layout para tablets e desktops.
.cards { display: grid; gap: 16px; } /* phone: one column */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* wider than 768 px: three columns */
}Os dois significados estão relacionados, mas um não exige o outro. Para a indexação mobile-first, não importa em que ordem o site foi criado: o que importa é que a versão mobile contenha as mesmas coisas que a desktop. Um site responsivo criado com a abordagem "celular primeiro" tende a chegar a isso automaticamente: um único documento HTML, só o layout muda.
Como o Google migrou para a indexação mobile-first
O Google costumava avaliar as páginas pela versão desktop, mesmo depois de a maioria das buscas ter migrado para o celular. Em 2016, começou a mudar gradualmente os sites para a indexação pela versão mobile. Em outubro de 2023, o Google anunciou no blog Search Central que a migração estava concluída. Um pequeno conjunto de sites que não funcionam no mobile, por exemplo, quando a versão mobile está bloqueada no robots.txt ou todas as páginas mobile redirecionam para a página inicial, ainda é rastreado pelo Googlebot desktop legado por enquanto, e o Google continua reduzindo seu uso.
Na prática: se seus relatórios e logs mostram principalmente "Googlebot Smartphone", isso é esperado. Para a busca, a versão desktop é secundária: ela atende pessoas, mas o índice contém o que o crawler de smartphone viu.
O que decorre disso
- O conteúdo deve ser o mesmo. Se o texto da versão mobile é mais curto e alguns blocos estão ocultos, a versão reduzida é a que é indexada.
- A marcação deve ser a mesma. Títulos, dados estruturados e endereços canônicos devem estar presentes na versão mobile.
- Imagens e textos alt devem estar no lugar, caso contrário o tráfego vindo de imagens é perdido.
- Textos ocultos por padrão (em abas, acordeões) são indexados, mas isso não é motivo para esconder metade da página.
Checklist: as versões mobile e desktop devem ser iguais
Com base nas práticas recomendadas de indexação mobile-first do Google. Preste atenção redobrada se o seu site tiver uma versão mobile separada ou entregar HTML diferente para celulares e computadores.
| Comparar | Requisito |
|---|---|
| Texto principal | O mesmo conteúdo da versão desktop. O texto em abas e acordeões é indexado, mas um artigo mobile reduzido vira um artigo reduzido no índice |
| Títulos | Os mesmos H1–H3 com a mesma redação |
| Links internos | O menu mobile, o rodapé e os links no texto apontam para as mesmas páginas |
| Dados estruturados | A mesma marcação nas duas versões: veja dados estruturados |
| Title e meta description | Equivalentes nas duas versões |
| Meta tag robots | A mesma: um noindex apenas na versão mobile tira a página do índice, mesmo que o desktop não tenha nenhum |
| Imagens | As mesmas imagens com o mesmo texto alt, em qualidade adequada: veja SEO de imagens |
| Lazy loading | O conteúdo principal não deve carregar somente após um toque, deslize ou digitação: o crawler não executa essas ações |
| robots.txt | As mesmas regras; CSS, JS e imagens necessários para a renderização não são bloqueados |
| Subdomínio m. separado | rel="canonical" da URL mobile para a URL desktop e rel="alternate" do desktop para o mobile |
Erros comuns
| Erro | Consequência |
|---|---|
| Subdomínio mobile separado com texto reduzido | A versão curta é indexada e as posições caem |
| Lazy loading sem alternativa | O conteúdo não fica visível para o bot: veja renderização de JavaScript |
| Links internos diferentes no menu mobile | Algumas páginas perdem peso interno |
| Bloqueio de recursos no robots.txt | O bot não consegue renderizar a página |
Como verificar se o seu site está pronto para mobile-first
O Teste de Compatibilidade com Dispositivos Móveis do Google acabou: em dezembro de 2023, o Google o descontinuou junto com a API e o relatório de Usabilidade em dispositivos móveis do Search Console. O que usar no lugar, passo a passo, está em como testar se um site é mobile-friendly. Em resumo:
- Usabilidade no celular. Nosso teste mobile-friendly carrega a página como um celular Android e verifica a meta viewport, media queries, larguras fixas acima de 480 px, texto pequeno, áreas de toque pequenas, riscos de rolagem horizontal e plugins legados, junto com uma captura de tela de iPhone. A nota de 0 a 100 é uma soma transparente de pesos com base no código da página, não o veredito do Google. Visitantes têm 15 verificações por dia, uma conta gratuita 45, e o Pro é ilimitado.
- O que o Google vê. A Inspeção de URL no Search Console mostra qual crawler buscou a página e o HTML renderizado; o teste ao vivo mostra o estado atual.
- Paridade de conteúdo. Nem o nosso teste nem o Lighthouse comparam a versão mobile com a desktop: você faz isso manualmente. Abra a página no Chrome, ative a emulação de dispositivo no DevTools e execute isto no console nas duas versões:
Uma diferença perceptível merece investigação. Se o site entrega HTML diferente por dispositivo, recarregue a página no modo de emulação antes de comparar.document.body.innerText.split(/\s+/).length // words document.querySelectorAll('a[href]').length // links document.querySelectorAll('script[type="application/ld+json"]').length // JSON-LD blocks - Velocidade e acessibilidade. O Lighthouse no DevTools faz a auditoria no modo mobile por padrão.
Versão mobile e velocidade
A indexação mobile não significa que apenas a velocidade no celular seja avaliada, mas, na prática, as métricas mobile são quase sempre piores que as do desktop: dispositivo e conexão mais fracos. Por isso, faz sentido começar a otimização de velocidade pela versão mobile: veja Core Web Vitals.
O que isso muda na promoção
Nada em relação a links e nada em relação a conteúdo: muda apenas qual versão da página precisa ser verificada. Antes de lançar uma cascata, certifique-se de que a página promovida no mobile mostra o mesmo texto e os mesmos links que no desktop.
Responsivo ou versão separada
O design responsivo, em que o mesmo endereço se adapta à tela, é mais simples e confiável do que um subdomínio mobile separado: não há discrepâncias de conteúdo, não é necessário indicar as versões entre si e os endereços não são duplicados. Hoje, uma versão mobile separada é quase sempre um legado, não uma solução.
