Web design responsivo

O Web design responsivo é uma configuração em que o servidor sempre envia o mesmo código HTML a todos os dispositivos e o CSS é usado para alterar a renderização da página no dispositivo. Os algoritmos do Google deverão detectar essa configuração automaticamente se todos os user agents do Googlebot tiverem permissão para rastrear a página e os recursos dela, ou seja, CSS, JavaScript e imagens.

Uma representação gráfica de como o design responsivo funciona
O design responsivo pode ser exibido em todos os dispositivos com o mesmo código que se ajusta ao tamanho da tela.

"Muito longo, não li" (TL;DR, na sigla em inglês)

  • Use a tag meta name="viewport" para informar ao navegador como ajustar o conteúdo.
  • Confira os Fundamentos da Web para mais documentação.

Como usar meta name="viewport"

Para sinalizar aos navegadores que a página se adaptará a todos os dispositivos, adicione uma metatag ao cabeçalho do documento:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A metatag viewport orienta o navegador sobre como ajustar as dimensões e a escala da página de acordo com a largura do dispositivo. Na ausência dessa metatag, o comportamento padrão dos navegadores de dispositivos móveis é renderizar a página com a largura de uma tela de computador (geralmente cerca de 980 pixels, com variações entre os dispositivos). Os navegadores de dispositivos móveis tentam melhorar a aparência da página aumentando o tamanho das fontes e redimensionando o conteúdo para caber na tela ou exibindo somente a parte do conteúdo que cabe nela.

Para os usuários, isso significa que os tamanhos das fontes podem ter uma aparência inconsistente e talvez seja necessário tocar duas vezes ou fazer o gesto de pinça para aplicar zoom a fim de visualizar e interagir com o conteúdo. Para o Google, talvez consideremos que a página não é compatível com dispositivos móveis por exigir esse tipo de interação em um dispositivo móvel.

À esquerda, temos uma página sem uma metatag viewport especificada. O navegador usa a largura de uma tela de computador e redimensiona a página para caber na tela, tornando o conteúdo difícil de ser lido. À direita, temos a mesma página com a metatag viewport especificada e correspondente à largura do dispositivo. Dessa forma, o navegador do dispositivo móvel não redimensiona a página e é possível ler o conteúdo.

No caso de imagens responsivas, inclua o elemento <picture>.

Como regra geral, caso seu site funcione em navegadores recentes, como o Google Chrome ou o Mobile Safari da Apple, ele funcionará com nossos algoritmos.

Por que usar o design responsivo

Recomendamos usar o Web design responsivo porque:

  • facilita o compartilhamento e a vinculação do conteúdo com um único URL para os usuários;
  • ajuda os algoritmos do Google a atribuir propriedades de indexação à página de maneira precisa, em vez de sinalizar a existência de páginas correspondentes para computadores ou dispositivos móveis;
  • exige menos tempo de engenharia para manter diversas páginas com o mesmo conteúdo;
  • reduz a possibilidade de erros comuns que afetam os sites para dispositivos móveis;
  • não exige redirecionamento para que os usuários tenham uma visualização otimizada para dispositivos, o que reduz o tempo de carregamento. Além disso, o redirecionamento com base em user agents é propenso a erros e pode reduzir a qualidade da experiência dos usuários do site. Para mais detalhes, veja a seção Erros ao detectar user agents;
  • economiza recursos quando o Googlebot rastreia seu site. Para páginas com Web design responsivo, um user agent do Googlebot precisa rastrear a página somente uma vez, em vez de vários user agents do Googlebot rastrearem a página diversas vezes para recuperar todas as versões do conteúdo. Essa melhoria na eficiência do rastreamento pode ajudar indiretamente o Google a indexar mais conteúdo do site e mantê-lo devidamente atualizado.

Caso você tenha interesse no Web design responsivo, primeiro leia nossa postagem do blog na Central do webmaster (em inglês) e acesse o site Fundamentos da Web.

JavaScript

Uma parte da criação de sites compatíveis com dispositivos móveis que exige bastante atenção é o uso de JavaScript para alterar a renderização e o comportamento do site em diferentes dispositivos. O JavaScript é muito usado, por exemplo, para definir qual anúncio ou variante de resolução de imagem será exibido na página.

Esta seção descreve as diferentes abordagens do uso de JavaScript e como elas se relacionam com as recomendações do Google sobre o uso de Web design responsivo.

Configurações comuns

Veja aqui três implementações conhecidas de JavaScript para sites compatíveis com dispositivos móveis:

  • Adaptável ao JavaScript: nesta configuração, todos os dispositivos recebem o mesmo conteúdo de HTML, CSS e JavaScript. Quando o JavaScript é executado no dispositivo, a renderização ou o comportamento do site são alterados. Caso um site exija JavaScript, essa é a configuração recomendada pelo Google.
  • Detecção combinada: nesta implementação, os recursos do dispositivo são detectados pelo JavaScript e pelo servidor. Assim, o site exibe conteúdos diferentes em dispositivos distintos.
  • JavaScript disponibilizado dinamicamente: nesta configuração, todos os dispositivos recebem o mesmo HTML, mas o JavaScript vem de um URL que disponibiliza dinamicamente diferentes códigos de JavaScript, dependendo do user agent do dispositivo.

Veja a seguir cada configuração em detalhes.

Adaptável ao JavaScript

Nesta configuração, um URL exibe o mesmo conteúdo (HTML, CSS, JavaScript, uma imagem) para todos os dispositivos. A renderização ou o comportamento do site são alterados somente quando o JavaScript é executado no dispositivo. O funcionamento é similar ao do Web design responsivo, que usa consultas de mídia CSS.

Por exemplo, uma página envia a todos os dispositivos o mesmo HTML com um elemento <script>, que solicita um URL externo de disponibilização do JavaScript. Todos os dispositivos que solicitam o URL do JavaScript recebem o mesmo código. Quando executado, o JavaScript detecta o dispositivo e decide alterar algo na página, por exemplo, incluir uma imagem compatível com smartphones ou adicionar código, em vez de usar as alternativas para computador.

Essa configuração é muito similar ao Web design responsivo, e nossos algoritmos podem detectá-la automaticamente. Além disso, essa configuração não exige a inclusão do cabeçalho HTTP Vary, porque os URLs da página e os respectivos recursos não exibem o conteúdo dinamicamente. Devido a essas vantagens, essa é a configuração recomendada caso seu site demande o uso de JavaScript.

Detecção combinada

A detecção combinada é uma configuração em que o servidor trabalha com o JavaScript no cliente para detectar os recursos do dispositivo e alterar o conteúdo a ser exibido.

Por exemplo, um site pode alterar a renderização do conteúdo de maneiras diferentes caso o dispositivo seja um computador ou smartphone. Nesse caso, o site pode incluir JavaScript para detectar as dimensões da tela. Estas são enviadas para o servidor, que atualiza ou altera o código enviado ao dispositivo. Normalmente, o JavaScript armazena os recursos do dispositivo detectado em um cookie que o servidor lê em acessos posteriores do mesmo dispositivo.

Considerando que o servidor retorna códigos HTML distintos para user agents diferentes, a detecção combinada é considerada um tipo de configuração de exibição dinâmica. Os detalhes completos estão descritos na seção de exibição dinâmica. Em resumo, o site precisa incluir o cabeçalho HTTP responsivo "Vary: User-agent" quando for solicitado um URL que exiba um conteúdo em HTML distinto para diferentes user agents.

JavaScript disponibilizado dinamicamente

Nesta configuração, todos os dispositivos recebem o mesmo HTML com um elemento <script> para incluir um arquivo JavaScript externo, que pode ter conteúdos diferentes de acordo com o user agent solicitante. Ou seja, o código JavaScript é disponibilizado dinamicamente.

Neste caso, é recomendável que o arquivo JavaScript seja disponibilizado com o cabeçalho HTTP "Vary: User-agent". Isso sinaliza para os caches de Internet e o Googlebot que o JavaScript pode variar dependendo do user agent, além de indicar para o Googlebot que ele deve rastrear o arquivo JavaScript usando user agents diferentes.