SEO para dispositivos móveis e outros dispositivos

Tablets

Ao pensar em como configurar o site para usuários de dispositivos móveis, é comum lembrar-se dos visitantes que usam tablets para acessar o site. Embora não haja recomendações específicas sobre a criação de sites otimizados para tablets e compatíveis com mecanismos de pesquisa, existem algumas dicas para criar sites para a exibição em computadores, smartphones e tablets.

Web design responsivo

Nossa recomendação geral é a utilização do Web design responsivo. Isso significa que o site usará o mesmo código HTML para todos os dispositivos com diferentes regras de estilos CSS para otimizar a interface do site em computadores, smartphones e tablets.

Se você usar o Web design responsivo em seu site, teste-o em tablets de tipos variados para verificar se o site é renderizado corretamente. Assim como smartphones, também há tablets com diferentes tamanhos e resoluções de tela.

Conteúdo específico ao dispositivo

Um site pode retornar páginas diferentes (HTML, CSS, JavaScript etc.) em dispositivos distintos. Essas páginas podem ser exibidas no mesmo URL (configuração chamada de exibição dinâmica) ou em URLs específicos e distintos.

Caso o site tenha páginas diferentes para usuários de computadores e smartphones, mas não tenha páginas específicas para tablet, conforme nossa experiência, os usuários de tablet esperam ver a versão do site para computador, e não para smartphone.

Se o site tiver páginas otimizadas para tablet, estas diretrizes poderão ajudar você a configurá-lo:

  • Exibição dinâmica: com ela, os mesmos URLs são exibidos para usuários de computador, smartphones e tablets. Dependendo do user agent, essa exibição pode fornecer HTML e CSS diferentes. Como descrito nas recomendações dos sites para smartphones, sugerimos que você use o cabeçalho HTTP Vary.
  • URLs distintos e específicos para tablet: neste caso, sugerimos que você permita que o Googlebot rastreie os URLs para tablet e use um rel="canonical" em todos esses URLs para indicar o URL para computador equivalente.

Feature phones

Nossa recomendação para os sites que atendem usuários de smartphones é a utilização do Web design responsivo, se possível. No entanto, como os feature phones não têm um recurso para acompanhar as consultas de mídia CSS, os webmasters que quiserem exibir conteúdo nesses feature phones precisarão configurar os sites para usar exibição dinâmica ou URLs distintos na publicação do conteúdo do feature phone.

Também recomendamos que as páginas compatíveis com feature phones incluam a tag <link rel="alternate" media="handheld"> conforme descrito abaixo.

Esta seção demonstra como implementar cada uma dessas configurações.

Exibição dinâmica

Ao configurar o servidor a fim de exibir dinamicamente um conteúdo otimizado para feature phones com o mesmo URL de outros dispositivos, use a mesma implementação da exibição em smartphones. O servidor precisa incluir o cabeçalho de resposta HTTP Vary: User-Agent, e é importante considerar os problemas comuns ao detectar user agents. Além disso, inclua a seguinte tag na sua página:

<link rel="alternate" media="handheld" href="[current page URL]" />

URLs diferentes

Os webmasters dispõem de três configurações compatíveis para atender a usuários em computadores, smartphones e feature phones por meio de URLs distintos. Essas configurações usam as anotações descritas anteriormente para a criação de sites otimizados para smartphones e feature phones.

Configuração de URLs específicos

Nesta configuração, as definições seriam as seguintes:

  • http://www.example.com/page-1 é usado para usuários de computador.
  • http://m.example.com/page-1 é usado para usuários de smartphones.
  • http://phone.example.com/page-1 é usado para usuários de feature phones.

Nessa configuração, recomendamos que as seguintes anotações sejam adicionadas para ajudar nossos algoritmos a compreender a relação entre páginas equivalentes direcionadas a dispositivos diferentes:

Em www.example.com/page-1, adicione:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />

Em m.example.com/page-1, adicione:

<link rel="canonical" href="http://www.example.com/page-1" />

Em phone.example.com/page-1, adicione:

<link rel="canonical" href="http://www.example.com/page-1" />

Configuração de URLs para computadores e todos os dispositivos móveis

Nesta configuração, um site usa um URL para os computadores e outro para todos os dispositivos móveis, ou seja, smartphones e feature phones. Por exemplo:

  • http://www.example.com/page-1 é usado para usuários de computador.
  • http://m.example.com/page-1 é usado para usuários de smartphones e feature phones.

Nesse caso, a anotação em http://www.example.com/page-1 é a seguinte:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

Na página m.example.com, inclua a seguinte tag:

<link rel="canonical" href="http://www.example.com/page-1" />

rel="canonical" precisa ser incluído, independentemente se elas são páginas de feature phones / smartphones ou não.

O servidor precisa incluir o cabeçalho HTTP Vary: User-Agent na resposta. Isso envia aos caches de Internet e ao Googlebot o sinal de que a resposta do servidor pode diferir com base no user agent. O Googlebot usa esse sinal para rastreamento.

Configuração de URLs separados para feature phones

Nesta configuração, um site disponibiliza conteúdo a computadores e smartphones em um URL usando o Web design responsivo ou a exibição dinâmica e aos feature phones com um URL distinto. Por exemplo:

  • http://www.example.com/page-1 é usado para usuários de computador e smartphones.
  • http://m.example.com/page-1 é usado para usuários de feature phones.

Nesse caso, a anotação em http://www.example.com/page-1 é a seguinte tag:

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />

A anotação em http://m.example.com/page-1 é a seguinte tag:

<link rel="canonical" href="http://www.example.com/page-1" />

Redirecionamentos e o cabeçalho HTTP Vary

Caso os visitantes de dispositivos móveis que acessam a versão para computador sejam redirecionados automaticamente para a versão para dispositivos móveis, ou vice-versa, configure o servidor de modo a incluir o cabeçalho HTTP Vary.

Sitemaps

Nossas recomendações quanto ao uso de sitemaps de feature phone e sitemaps para URLs alternativos de smartphone permanecem as mesmas.

Enviar comentários sobre…