Aviso: Este é um artigo complementar para o Mozinar “Projetando para SEO: melhorando a visibilidade do local e aprimorando a UX“. Justin Taylor responde às perguntas feitas no Mozinar e expande a pergunta que foi feita com mais frequência pelos ouvintes.

“Por que é que os sites que parecem ótimos quase sempre têm um SEO que é uma droga?”

Esta é a pergunta que me propus a responder durante o recente Mozinar sobre o projeto para SEO.

Para ser um verdadeiro rei das SERPs, você vai, é claro, precisar de mais do que um site bem projetado de busca otimizada. Você provavelmente vai precisar de muitas menções sociais, links de qualidade, citações e co-citações, etc. O problema com esses fatores de classificação é que eles são difíceis de realizar em volume e geralmente requerem muito trabalho para conseguir, e, posteriormente, a grande maioria dos sites não os tem.

Você pode, ainda, alcançar grandes vitórias com um excelente design e otimização on-page.

Qual é o problema?

O problema é simples: os sites que parecem incríveis normalmente oferecem pouca oportunidade para otimização on-page e, inversamente, as páginas que estão bem otimizadas, muitas vezes, comprometem o design e a experiência do usuário. Mas qual é o objetivo de se ter um site que parece ótimo, se ele não puder ser encontrado? E existe alguma vantagem em ser fácil de encontrar, se o site não é envolvente?

Como podemos construir sites que parecem incríveis e que estejam engajados, e ainda manter o desempenho SEO?

Introduza o webfont

WebFonts de empresas como Google, Deck Fonte, Typekit, e Fonts.com já existem há alguns anos e são uma ótima maneira de dar estilo a um website sem comprometer a rastreabilidade. Eles formam a estrutura fundamental e o alicerce de qualquer site bem projetado e bem otimizado.

Para adicionar impacto visual, os designers adicionam elementos gráficos para sites, como banners e calls to action. Esses elementos são geralmente criados como imagens, de modo que o designer possa usar fontes bonitas, adicionar  efeitos de sombras, gradientes e toda uma série de outros tratamentos que fazem parte do kit de ferramentas dos designers. Os sites precisam disso, já que fazem com que se tornem envolvente e melhoram a UX.

Pegue o gráfico abaixo. Por melhor que pareça, há muita informação para ser incluída dentro de uma alt-tag. Também é difícil para enfatizar e priorizar as informações dentro de uma alt-tag, uma vez que ela é puro texto.

Usando uma combinação de WebFonts, HTML e CSS, é possível manter a beleza e conseguir um bom SEO, criando todos os elementos de texto dentro deste banner como “texto vivo”.

O banner de “texto vivo” pode não só parecer ótimo, mas também pode ser marcado com o tipo H1’s, tipo de corpo, texto em negrito e atualizados dinamicamente. Os mecanismos de pesquisa só verão isso como padrão HTML. O melhor de tudo: esses banners ou gráficos podem ser até mesmo marcados como Rich Text usando schema  ou microdados.

Projeto para otimização

O maior obstáculo na construção de sites bem apresentáveis, que também possuem grandes atributos de desempenho SEO, é unir estas duas coisas. Os designers se concentram em sites que são ótimos e criam uma boa experiência do usuário, enquanto que um SEO normalmente quer um site que seja muito rastreável ​​e que se classifique bem.

Se os designers e as equipes SEO conseguirem conciliar suas necessidades, os resultados podem ser inovadores e marcantes. Vejamos o exemplo abaixo – estes painéis são para um varejista de moda. O da esquerda foi visualizado pela designer. Em termos de UX, este painel é ótimo, mostra uma modelo vestindo o produto, explica por meio do uso do tipo bem posicionado exatamente o que um usuário pode esperar ver ao clicar. O problema é que, a partir de uma perspectiva SEO, este painel não serve.

Um SEO vai precisar de algo mais parecido com o painel no lado direito. Ele tem um cabeçalho claro e definido, possivelmente um <h1>, seguido de um texto long tail. Fica claro que, a partir de uma perspectiva UX, este painel está muito aquém da marca. O painel do lado esquerdo terá muito mais clique do que o painel do lado direito.

Uma possível solução para este problema é um mouse-over. Inicialmente, quando visto, o painel ficará como acontece no lado esquerdo (exatamente como o designer quer), mas quando um usuário passa o cursor sobre a imagem, o painel muda para o que você vê no lado direito (exatamente o que o SEO quer).

A beleza desta solução é que a experiência do usuário e o clique são mantidos e como todos esses textos são um texto vivo, ele é rastreável, dando aos mecanismos de pesquisa tudo que eles precisam para indexar o site.

A div expansível

Outra ótima maneira de incorporar conteúdo indexável ao design minimalista de uma página é com uma div expansível. Ele pode proporcionar ótimos resultados tanto para o SEO, quanto na UX, fazendo textos relevantes (e rastreáveis​​) visíveis no clique do mouse.

Vejamos o exemplo abaixo. Frequentemente, esse tipo de painél de produtos é representado por imagens, e eles fazem um grande trabalho de envolver o usuário, oferecendo um método de navegação rico com um único clique.

Com exceção de alguns textos alternativos, este tipo de painél oferece muito pouco para os mecanismos de pesquisa para rastrear.

Ao adicionar uma div expansível a esses painéis, é possível apresentar uma série de oportunidades SEO. Clicar em um dos itens acima pode agora fornecer uma descrição convincente dessa categoria de produto, incluir imagens adicionais para auxiliar o processo de compra e, como resultado, aumentar as conversões e envolvimento do usuário. Mas talvez o maior bônus da div expansível seja que nós podemos fornecer mecanismos de pesquisa com texto long tail adicional para indexar.

A inclusão de divs expansíveis dentro de páginas web não é uma boa solução apenas para o usuário, mas também oferece oportunidades incríveis para conteúdo indexável.

As armas secretas

Calls to action, sinais de confiança, outdoors, e todos os outros elementos da página, muitas vezes, contêm o tipo de mensagem que queremos que o Google rastreie, mas na maioria dos casos, estes serão representados por imagens. Como resultado, descontos, entrega gratuita, entrega no dia seguinte, e outras ofertas não estão sendo rastreadas.

Crie todos estes elementos com WebFonts, CSS e HTML, de modo que possam ser rastreados. Queremos realmente que mensagens como “Entrega gratuita”, “desconto de 10%”, ou “venda” sejam escondidas dos mecanismos de pesquisa?

Os itens a seguir contêm mensagens de ótimas vendas, e todas elas foram construídas utilizando WebFonts, CSS, HTML e por isso são totalmente rastreáveis​​.

Juntando tudo

Todas as técnicas descritas parecem ser ótimas na teoria, mas na realidade podem ser realmente implementadas?

A resposta é sim! E para provar isso, nós construímos um site usando essas técnicas para um varejista fictício. O site apresenta todas estas técnicas e usa WebFonts, HTML e CSS para construir uma experiência que não é apenas agradável aos olhos, mas proporciona uma grande experiência do usuário e oferece uma abundância de dados para mecanismos de pesquisa rastrear. O site usamos divs expansíveis, painéis de “texto vivo”, além de muitas outras técnicas para entregar um site que possui uma grande experiência do usuário. No entanto, nenhum deles é à custa do SEO. O site dá aos mecanismos de pesquisa bom conteúdo indexável sem comprometer a UX.

O uso de “texto vivo” também oferece alguns bons resultados para celular, acessibilidade e sites de multi-linguagem, mas principalmente com o uso de WebFonts o teste A / B se torna super fácil. Para demonstrar isso, criamos versões A / B do site demo, que são servidas a partir de uma mesma URL, compartilham a mesma base de código e parecem idênticas para procurar bots. A única diferença entre os dois locais é obtida exclusivamente pelo uso de WebFonts, CSS, e algumas imagens de fundo diferentes.

O site demo está disponível no seguinte neste link.

Anatomia das páginas web

Armado com WebFonts, HTML e CSS, você tem as ferramentas para criar incríveis websites que contenham todos os elementos que um SEO também exige.

Para capitalizar totalmente estes ativos, é importante entender a estrutura da página. Naturalmente, isto vai variar de acordo com o seu cliente, segmento de mercado e as mensagens que eles querem entregar.

Uma das primeiras coisas que os designers são ensinados a entender é a importância da posição de informações em uma página, calls to action, e os sinais de confiança.

Um paralelo bom para o design da homepage é uma capa de revista. Não é por acaso que a maioria das capas de revistas tem um layout muito semelhante – isso é porque os designers de revistas entendem os parâmetros que são mais susceptíveis a envolver as pessoas no ponto de venda (ou seja, em uma prateleira de revistas).

Eles sabem que muitas vezes as revistas são empilhadas em camadas em prateleiras e, portanto, têm que ter algo forte que a identifique. Eles também tendem a usar este topo de quarto da página para comunicar as principais características/ofertas. Estes parâmetros para o design de revista têm paralelos naturais com sites, web designers têm de lidar com a dobra de página e tem de se concentrar mais do que nunca na posição de página com atualização recente do top algoritmo pesado.

Online e offline, a exigência é prender a sua atenção. No caso da revista, a área do cabeçalho seduz você com a familiaridade e as ofertas que são projetadas para fazer você pegar a revista, e uma vez que você o fizer, você verá uma fotografia sedutora e ofertas mais importantes. As áreas principais que ocupam estas ofertas são conhecidas como os “pontos quentes” – são essencialmente posições táticas na página que os designers de revista sabem que vão ter a melhor chance de ganhar sua atenção.

Estes mesmos parâmetros se aplicam ao design de webpage, então com a equipe no Graphitas, reunimos um infográfico que resume as posições-chave e pontos de acesso para qualquer página inicial e indica o seu impacto.

Baixe o nosso infográfico aqui!

Mais perguntas do Mozinar:

Houve algumas perguntas que ou eu não tive tempo para responder, ou que exigiram respostas mais profundas. Aqui estão as perguntas totalmente respondidas:

Como é que a compatibilidade do navegador afeta o design?

Justin: Muito pouco. Todas as versões recentes dos navegadores (incluindo o IE 6) suportam as fontes da web, de modo que o design só é comprometido pela compatibilidade do navegador CSS. Por exemplo, algumas versões do IE não vão permitir que o texto seja exibido em um ângulo. Nestes cenários, o navegador irá ignorar a entrada CSS, e depois resulta em problemas de layout que teríamos de corrigir criando um CSS separado para o navegador prejudicado. Na maioria dos casos, é possível fazer exceções de design para browsers incompatíveis, sem comprometer o design.

Existem ferramentas boas para a criação de gráficos de “textos vivo”?

Justin: Mais uma vez, não é um recurso abrangente que atende WebFonts, HTML, CSS e SEO. Há, no entanto, uma grande quantidade de recursos que lidam com esses itens individualmente. O melhor conselho que posso dar é utilizar o trabalho que outras pessoas criaram e pedir emprestado. O site exemplo apresentado acima mostra alguns bons exemplos de elementos comuns; por favor, sinta-se livre para usar o código de lá. Estou planejando criar trechos de código para os vários elementos do site demo para que possam ser mais facilmente utilizados.

As WebFonts desaceleram carregamento da página?

Justin: Cada WebFont está em torno de 50k de tamanho, então o uso excessivo de WebFonts pode afetar, sim, o carregamento da página. Como elas são frequentemente utilizadas para substituir os gráficos, o resultado final pode ser que elas poderiam facilmente diminuir o tamanho da página. Meu conselho é avaliar o tamanho do arquivo durante o processo de desenvolvimento e manter os limiares existentes página. Obviamente, não faz diferença se a largura de banda é usada fazendo o download de um gráfico ou de uma WebFont.

E os roll-overs e a visualização móvel? Eles funcionam em telas sensíveis ao toque?

Justin: Roll overs (ou overs do mouse) não funcionam em dispositivos de toque. Existem duas soluções para isso: remova o mouse sobre evento para dispositivos de toque para que o painel só execute um botão, ou altere o evento mouse sobre um evento em clique para mostrar o texto.