Marketing 3064 IA & Tech 650 Gestão & Carreira 423 Vendas & CRM 245 SEO 164
IA & Tech

Como tornar seu site responsivo para o Google, segundo o próprio Google

MM
Matt Montenegro Founder & CEO
20/09/2017 3 min
TL;DR

Para o Google, site responsivo usa o mesmo HTML e URL em qualquer dispositivo e adapta o layout à tela. A indexação que prioriza o mobile olha a versão smartphone para classificar.

  • Por que importa: o Google recomenda o design responsivo por ser o padrão mais fácil de manter.
  • Como funciona: a meta viewport com width=device-width evita o zoom forçado de largura de desktop no celular.
  • Ponto de atenção: conteúdo e metadados no mobile precisam equivaler ao desktop para a mesma intenção de busca.
  • Conclusão: priorize um layout flexível, teste em tela estreita e libere recursos ao rastreador.
Nós já explicamos aqui a importância de tornar seu site responsivo, principalmente quando se trata de indexação e rankeamento no Google. Se você ainda não entende muito bem sobre isso, leia este artigo sobre o mobile-first index. Basicamente, é fundamental que você saiba que, para o Google, uma nova forma de indexação vai funcionar e os conteúdos responsivos aparecerão em melhores posições da SERP. Isso não é importante apenas para o Google, é claro! A experiência do usuário deve ser uma das principais preocupações do seu negócio online. E, em um mundo em que o número de usuários mobile está cada vez maior, atendê-lo nesses dispositivos é fundamental. E não basta apenas usar uma versão “m.” do seu site. Faz muito mais sentido ter uma única versão responsiva do que duas URLs separadas, uma para desktop e outra para mobile. E quem está dizendo isso não sou eu, e sim o próprio Google! Mas como adaptar todo seu site à essa nova realidade? É isso que vou explicar para você agora (toda essa explicação é baseada no artigo do Google que já linkei aqui).
Neste post 1

Torne seu site responsivo para os Google Bots

Tornar seu site responsivo é diferente de torná-lo responsivo e amigável para os bots do Google. Para entender tudo sobre como tornar seu site responsivo leia este conteúdo. Quando seu site já estiver pronto, você vai começar a fazer o redirect 301 das URLs separadas em uma só. Assim: Imagem ilustrativa do artigo Basicamente, o redirect vai ser feito da versão “m.” para a versão “normal”, que já será a do seu site (agora responsivo)! Mas o Google também recomenda, como uma boa prática, configurar rel=canonical (as Canonical Tags) nas URLs responsivas apontando para si mesmas. Imagem ilustrativa do artigo Importante: a parte chata disso tudo é que o redirect deve ser feito em cada URL separadamente. Lembre-se que, além dos benefícios para o usuário e para o seu rankeamento, ter um site responsivo é importante também para as configurações e manutenção da sua página. E aí, você já tem um site responsivo?

Perguntas frequentes

O que é um site responsivo?

É um site cujo layout muda para caber no dispositivo, mantendo o mesmo endereço. No Guia do Google, o web design responsivo exibe o mesmo HTML no mesmo URL e adapta a apresentação ao tamanho da tela. Na prática, o usuário lê sem pinçar zoom só para achar o menu.

Por que o Google recomenda design responsivo?

Porque é o padrão mais fácil de implementar e manter entre as configurações mobile-friendly. A indexação que prioriza dispositivos móveis usa a versão smartphone para indexar e classificar. Um único URL responsivo reduz divergência entre o que o usuário e o bot veem.

Como fazer o site ficar responsivo no básico?

Inclua a meta viewport com width=device-width e initial-scale=1, use layouts fluidos e evite elementos mais largos que a tela. O web.dev explica que, sem viewport, o mobile costuma renderizar perto de 980px e forçar zoom. Depois valide leitura e toque em largura de smartphone.

Site sem versão mobile some do Google?

Não automaticamente. O Google diz que não é obrigatório ter versão mobile para aparecer nos resultados, embora seja altamente recomendável. Ainda assim, a classificação olha a experiência mobile primeiro. Se o desktop for a única versão boa, você compete em desvantagem.

MM Matt Montenegro

Matt Montenegro

Publicitário e Designer de Produto; ex-CEO da VidMonsters (M&A Hotmart). Fala sobre a indústria de tecnologia e compartilha insights a respeito do atual zeitgeist.

Leia mais