Como criar uma UI focada em SEO para o layout do seu site?

Por Katarina Miky Tsuzuki, analista da área de On-Page da Gear Seo

Um layout com uma boa interface do usuário (UI) é essencial para atrair e manter um visitante em um site. Afinal, ela exerce um papel muito importante para chamar a atenção de um potencial cliente por meio do visual.

Além disso, ela atua de maneira funcional como um dos principais pontos de contato que levarão uma pessoa a encontrar aquilo que ela deseja ou cumprir os seus objetivos. Isso ocorre por meio de aspectos como um bom manejo da hierarquia dos elementos, botões em posições claras, aplicação adequada de textos e cores etc., conforme explicado pela Interaction Design Foundation.

Quando se trata de ranquear um site no Google, as telas precisam ser facilmente compreendidas pelos olhos humanos e chamar a atenção do cliente. O site também deve entregar textos de qualidade excelente trabalhados especialmente para o SEO.

Ainda, a interface de usuário deve considerar o funcionamento dos mecanismos de busca para apresentar os conteúdos adequadamente. Assim, eles são vistos da melhor maneira possível pelos bots dos buscadores. Foi pensando nessa questão que reunimos algumas dicas sobre o que deve ser considerado na UI de um site otimizado para SEO.

Observe o tamanho dos blocos de texto de conteúdos otimizados para SEO

Ao navegar por sites na internet, é muito comum ver exemplos de designs minimalistas que trabalham com frases muito curtas e letras grandes. Essa abordagem muitas vezes pode ser adotada por ser esteticamente agradável, ser fácil de ler e conferir um toque moderno ao layout. Porém, tal formato nem sempre é o mais adequado para comportar um conteúdo otimizado de SEO.

Para serem lidos adequadamente pelos mecanismos de busca, os blocos de texto devem conter pelo menos de 100 a 150 palavras. Portanto, o layout ideal deve conseguir comportar esse volume de conteúdo otimizado em cada seção destinada.

Em vista dessa necessidade de trechos de texto mais extensos ao longo da página, é preciso considerar esse aspecto desde o início do projeto para que o layout desenvolvido consiga adequar todo o conteúdo necessário, sem conferir um aspecto pesado visualmente.

Uma maneira de amenizar essa percepção de densidade é por meio da combinação dos blocos de texto com imagens, alternando o posicionamento entre eles. É possível variar, de maneira lógica e padronizada, a largura dessas caixas de texto no decorrer da página. Desse modo, o ritmo de leitura se torna mais dinâmico em razão dos respiros criados ao longo do texto.

Além disso, certos recursos interativos podem ser usados a fim de variar a forma como o conteúdo é disposto, ocultando parte do texto para diminuir o espaço ocupado no layout. Contudo, é preciso ter cautela com algumas restrições, como será explicado a seguir.

Tenha cuidado com o uso de certos recursos interativos

Quando se trata de sites otimizados para SEO, é recomendado ter cautela com efeitos visuais diferentes, animações e elementos interativos. Eles podem tornar o layout mais dinâmico, porém, os buscadores podem ter mais dificuldade de lê-lo. 

Isso ocorre porque, muitas vezes, esses recursos dependem do uso de JavaScript para o seu funcionamento. Ele nem sempre é interpretado adequadamente pelos bots dos mecanismos de busca. 

Caso algum texto para SEO seja inserido em algum elemento atrelado a essa linguagem, existe a possibilidade de esse conteúdo sequer ser identificado e considerado para o ranqueamento.

Por esse motivo, recomenda-se evitar inserir textos relevantes para o SEO em elementos como carrosséis. Vale optar pelo uso de outros mecanismos que garantam a visibilidade do conteúdo pelos buscadores, como scrollspy ou accordions.

Use imagens que mantenham a qualidade visual mesmo estando abaixo de 100 kB

Imagens são de grande importância em um site, pois não somente comunicam, mas também trazem um respiro em um conteúdo muito denso em texto, tornando a experiência menos cansativa e mais agradável ao usuário. Como qualquer outro elemento do site, elas precisam estar devidamente otimizadas para SEO.

As imagens precisam de textos alternativos e precisam estar no tipo de arquivo correto, como já explicado em posts anteriores. Além disso, um dos principais pontos do projeto do layout é o peso que a mídia pode ter e a qualidade visual devido a essa limitação.

Em linhas gerais, é recomendado que as imagens tenham peso abaixo de 100 kB para evitar um carregamento lento da página. Mídias pesadas podem afetar o desempenho do site e, consequentemente, o seu ranqueamento de SEO no Google. 

Para uma imagem de dimensões menores, a mesma foto com 100 kB ou com 1 MB não costuma apresentar uma diferença visual significativa. Porém, caso seja uma mídia grande que ocupe quase toda a largura da tela e tenha uma altura considerável, é provável que sua qualidade visual seja drasticamente impactada para conseguir atingir esse peso menor, adquirindo um aspecto “pixelado” que causa a aparência de baixa qualidade.

Como essa queda de resolução em imagens de tamanhos muito grandes é inevitável para a otimização do peso, já no início da criação do layout, é importante considerar que se deve evitar o uso de imagens muito grandes que ocupem quase a tela inteira. A preferência é utilizar blocos de imagem um pouco menores.

Trabalhe estrategicamente o visual e os elementos da primeira dobra de um site

A primeira dobra de um site é a primeira tela que um usuário enxerga sem rolar para baixo. Esse espaço limitado deve receber uma atenção especial no layout por ser de grande importância tanto do ponto de vista de UX quanto do de SEO.

Segundo um estudo de Jakob Nielsen, 80% do tempo de atenção do usuário está na primeira dobra da página de um site, ao passo que apenas 20% do resto do tempo é focado no conteúdo abaixo. Em outras palavras, essa primeira parte deve apresentar a maior parte das informações relevantes ao usuário para que ele identifique, em um primeiro olhar, exatamente o que ele precisa saber e permaneça na página. Isso evita que ele volte para a SERP e opte por um site de um concorrente, o que impactaria o SEO, conforme explica o artigo do Semrush.

Em vista dessa questão, é desejável que essa parte do layout contenha uma certa quantidade de elementos que chamem a atenção do potencial cliente, mantendo-o no site. Como exemplo, podemos citar figuras chamativas, títulos e textos coerentes com o objetivo de busca do usuário, e links para outras páginas internas do site.

Insira um bloco de texto destinado ao conteúdo de SEO no fim da página quando não houver a possibilidade de aplicá-lo ao longo dela

Como explicado anteriormente, é comum que algumas páginas com conteúdo otimizado para SEO tenham um volume textual mais denso. Entretanto, nem sempre será possível inserir esse texto no layout de maneira natural, como no caso de páginas de categoria de produto, por exemplo. Nelas, o usuário espera encontrar uma lista com cards desses itens de compra, filtros e banners eventualmente, mas não extensos blocos de texto explicativos sobre determinado assunto.

Nesses casos, um recurso que pode ser usado é acrescentar um bloco de texto que é parcialmente escondido por um accordion. Isso permite a inserção do conteúdo na página sem afetar muito o seu layout ou tirar a naturalidade da navegação.

Dicas não são regras!

É importante ressaltar que todas as dicas apresentadas aqui são apenas sugestões. Elas devem ser aplicadas mediante a avaliação da circunstância de cada parte de um projeto, afinal, não são verdades absolutas. Cada caso requer análises e recursos específicos.

Embora um carrossel não deva conter conteúdo textual de SEO, por exemplo, nada impediria o uso desse recurso para criar links para outras páginas internas. Também não é proibido usar imagens grandes em todas as circunstâncias. 

Estas são apenas recomendações para serem consideradas do ponto de vista de SEO. Elas podem ser ou não acatadas dependendo das prioridades e dos objetivos de cada projeto.

Faça seu projeto com a Gear SEO!

Um conteúdo útil, apresentado por meio de um layout claro e agradável, retém os usuários no seu site. É essencial que o layout tenha sido desenvolvido desde o início com os requisitos técnicos necessários para ser interpretado corretamente pelos bots dos mecanismos de busca. 

Desse modo, as chances de melhor ranqueamento aumentam, assim como o número de visitantes interessados. Acesse o site da Gear SEO e conte com nossos especialistas para fazer seu projeto de UI com foco em SEO!