Evitando o Conteúdo Duplicado em Sites para Mobile

Mobile Websites

Olá leitores da Agência Mestre,

Falador nato, o povo brasileiro vem investindo cada vez mais em um objeto, que podemos chamar de “desejo nacional”, o celular. Já ouvi diversas conversas contendo “qual o seu celular?”, “você tem um iPhone?” ou ainda, “seu celular entra na Internet?”. Esta última frase vem desaparecendo cada vez mais, refletindo o que alguns estudos mostram: um crescimento gigantesco na venda de smartphones, celulares com digamos, algo a mais. Com um aumento de 128%, o mercado de smartphones no Brasil vem impulsionando uma área um tanto já explorada nos nossos amigos americanos: a navegação da Internet.

É fato que está cada vez mais fácil para acessar o email, uma rede social ou um website através do smartphone. Não só os celulares estão melhores, mas as empresas tem notado que este é um nicho de usuários diferenciados e merece uma atenção especial, com páginas mais otimizadas em termos de velocidade e, em muitos casos, versões mais resumidas ou “enxutas” para não prejudicar a experiência do usuário.

É comum “brilhar nos olhos” de marketeiros ou agências web a criação de uma versão mobile, mostrando a super importância daquele público para a marca. Mas é ai que mora um dos maiores perigos, o problema de conteúdo duplicado entre as versões mobile e tradicional.

Entendendo o Problema

Existem casos onde produzimos duas versões do mesmo website, focando duas versões de visitantes: os oriundos de celular e os tradicionais (vamos considerar aqui desktop, netbook, notebook, tablets e etc). Desta forma fazemos a nossa publicidade em cima de “Acesse www.website.com para maiores informações” e, como somos uma empresa friendly para celulares, divulgamos: “Você utiliza celular? Visite m.website.com!”.

São duas versões do website, o mesmo conteúdo, oferecido para dois tipos de usuários, MAS você não se preocupou se um usuário tradicional poderia acessar a versão mobile. É, eles podem fazer isso se você não restringir o acesso a apenas browsers de mobile.

Versão Mobile para requisição de usuários

Assim como os usuários, o Googlebot também poderá acessar a sua versão mobile, desde que encontre um link, uma referência, para uma página hospedada dentro da versão mobile do seu website. Com isso, ele poderia ler, as duas versões, que são duas URLs, contendo o mesmo conteúdo, o famoso conteúdo duplicado que tanto falamos.

Versão mobile para Bots

Conteúdo Duplicado em Sites Mobile

Para identificar o problema é simples, basta possuir uma URL para a versão para mobile e outra para versão tradicional. Utilize o operador avançado site: no Google para ver quantas páginas (aproximadamente) ele já possui de cada versão.

Como exemplo, podemos testar o famoso serviço de check-ins, o Foursquare. Ele possui duas versões, o m.foursquare.com e o foursquare.com.

Fazendo a consulta para a versão Mobile temos o seguinte cenário:

Para a versão tradicional, excluindo a versão mobile, temos:

Com estes comandos conseguimos entender se o Googlebot possui acesso ao conteúdo mobile e até mesmo podemos ver quais são as URLs da versão mobile. Em seguida, faça o teste: clique nos resultados da versão mobile e confira se você possui acesso direto ao conteúdo. Caso possua o acesso sem nenhuma restrição, o domínio sofre com um “certo probleminha” de conteúdo duplicado.

É neste ponto que você pergunta: existe uma solução para o problema? Como proceder se eu identifiquei isto no meu website? Ou ainda, se preciso produzir um website com versão mobile, como tratar de forma correta os usuários?

A Solução para o Problema

Certa vez comentamos aqui na Agência Mestre sobre o que é Cloaking e como fazê-lo, e é aqui, neste tipo de caso, onde aplicamos de forma útil este tipo de técnica.

A técnica de Cloaking consiste em entregar conteúdos diferentes adequados para cada tipo de visitante do site, como o robot e um usuário qualquer.

Basicamente o que precisamos fazer é a verificação do browser do usuário, executando a seguinte decisão:
Fluxo de Decisão de Cloaking para Mobile

Com base neste fluxo de decisão, basta codificar uma espécie de verificador, baseado em uma lista de user-agents mobile, e executar os redirecionamentos (sempre usando 301) quando necessário. Uma boa dica para quem usa PHP é utilizar a classe chamada MobileUserAgent, a qual faz esta verificação baseada em uma lista de user-agents mobile.

Lista de User Agents para Mobile

Como vimos acima, dependemos de uma lista mostrando quais são os browsers de dispositivos mobile. Para isto existem dois websites autoritários na área. O User-agents.org é um website com uma listagem gigantesca de user-agents conhecidos. O lado ruim dele para nós é que ele não possui uma listagem apenas para user-agents de mobile. Já o website da Zytrax.com possui uma listagem de user-agents apenas de versões mobile.

Com esta lista é possível alimentar o nosso nosso script de detecção e assim atingir o maior número de versões mobile possível.

Conclusões

Apesar dos frequentes problemas relacionados a conteúdo duplicado que encontramos em websites com versão mobile, existe uma solução para o caso, a qual deve ser empregada, de preferência, antes da versão mobile do website ir para o ambiente de produção.

A grande dica que você deve guardar deste artigo é sempre que trabalhar em um projeto, onde existem várias formas de acessar o mesmo conteúdo, você deve lembrar sempre em prevenir que as diferentes URLs sejam lidas pelo Googlebot, produzindo conteúdo duplicado.

Créditos da imagem para Johan Larsson.

Divulgue este artigo

11 Comentários para “Evitando o Conteúdo Duplicado em Sites para Mobile”

  1. renatatr

    Muito bom o artigo!
    Vejo ainda uma outra possibilidade: a utilização dos CSS Media Types, onde vc faz somente 2 folhas de estilo, uma para cada dispositivo, sem precisar refazer todo o website e não ter conteúdo duplicado.
    O Media Type “screen” pode ser usado para smartphones e o Media Type handheld para celulares menores.

    ;)

    Responder
    • Fábio Ricotta

      Oi Renatinha, valeu pelo comentário.

      Sobre a questão do uso de CSS complica quando você tem um hotsite em Flash e aí eles normalmente fazem uma versão mobile sem Flash. Este é um caso de um curso in-company que demos nas últimas semanas. Daí não teria como aplicar a idéia de folhas de estilo para mobile.

      Responder
  2. Herlon Augusto

    Muito bom artigo, obrigado pelo esclarecimento. Em meu celular acontecia isso e ficava ruim as vezes até falava que a pagina é muito pesada etc…
    Obrigado pela Dica !

    Responder
  3. Gustavo

    Fábio estou uma dúvida, e se bloquear o acesso a versão mobile pelo robots.txt? Isso na questão do conteúdo duplicado apenas… ou colocar um no-index resolve?

    Fazendo essa pergunta me surgiu uma outra interrogação, será que um dia o google vai mostrar os seus resultados de busca de forma diferente no celular e no pc? Por exemplo, o google poderia identificar que estou fazendo uma busca via smartphone e mostrar resultados de paginas feitas para celular, seria super relevante…. nao sei se já existe isso, se estou viajando muito… talvez alguem aqui saiba algo a respeito!

    Parabéns pelos posts, acompanho a mestre diariamente!

    Responder
  4. Rodrigo Lacerda

    Opa, Fábio. Obrigado.

    Isso responde melhor a dúvida que deixei naquele SearchCast. Eu tinha receio exatamente do Google identificar o Cloaking de alguma forma e não gostar disso.

    Fazendo dessa forma eu não preciso me preocupar com rel-canonical?

    Responder
  5. Bruno Oliveira

    No meu caso não vamos ter domínios nem endereços diferentes para móbile ou para deskops.
    O que posso fazer? Tem algum problema?

    Responder
  6. Diego Dimas

    Olá. Estamos criando uma versão mobile para o site da seguinte forma… para cada página do site, temos uma correspondente dentro d pasta “m”. as páginas da versão tradicional possui um script de redirecionamento, e cada vez que alguem entra nestas páginas pelo celular, é automaticamente redirecionado para a versão mobile da mesma página.
    eu poderia simplesmente bloquear a busca pelo google e outros robots nessas páginas mobile?
    porque se aparece a página tradicional no google, a mobile não precisaria aparecer, pois aquela que já aparece redirecionaria a pessoa automaticamente…

    vou usar exemplos, para tentar ser mais claro…

    a pessoa busca “imobiliarias em itapema”… Tanto no celular quanto nos PCs, é provavel que aparecesse as duas versões, correto?
    então eu bloquearia essa versão mobile para o google, e ele mostraria apenas como resultado a versão tradicional… Essa por sua vez, serviria para ambos usuários, pois se ele entra pelo PC, acessaria o site normal, e se entra pelo celular, seria redirecionado…

    Estou certo? É possível se fazer isso? Qual a maneira mais simples de se conseguir fazer isso?

    Obrigado desde já

    Responder
  7. Rodrigo Silva

    Fabio responde as perguntas acima se possível, são duvidas que eu também possuo. Obrigado

    Responder

Deixar um comentário

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>