{"id":2279,"date":"2019-05-29T00:00:00","date_gmt":"2019-05-29T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/05\/29\/seo-e-web-design\/"},"modified":"2019-05-29T00:00:00","modified_gmt":"2019-05-29T00:00:00","slug":"seo-e-web-design","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/seo-e-web-design\/","title":{"rendered":"Como unir SEO e Web Design para criar p\u00e1ginas mais atrativas para a persona e para os buscadores"},"content":{"rendered":"\n

Quando investimos no desenvolvimento de um site<\/a>, queremos que ele seja bem apresent\u00e1vel, com elementos visuais agrad\u00e1veis, al\u00e9m de oferecer uma navega\u00e7\u00e3o funcional, simples e intuitiva.<\/p>\n\n\n\n

Tudo isso faz parte da preocupa\u00e7\u00e3o em oferecer uma boa experi\u00eancia do usu\u00e1rio, mas ser\u00e1 que podemos conciliar essa abordagem com as t\u00e9cnicas de SEO<\/a>?<\/p>\n\n\n\n

Apesar de existirem diversos desafios em aliar SEO e web design<\/a>, essa \u00e9 uma combina\u00e7\u00e3o totalmente vi\u00e1vel. Isso fica mais claro \u00e0 medida que entendemos a import\u00e2ncia de criar p\u00e1ginas atrativas tanto para pessoas quanto para buscadores e conhecemos melhor os erros de design que afetam a otimiza\u00e7\u00e3o para mecanismos de busca.<\/p>\n\n\n\n

Quer saber mais? Siga conosco!<\/p>\n\n\n\n

Por que associar SEO e web design?<\/h2>\n\n\n\n

S\u00e3o muitos os argumentos a favor da ideia de considerarmos o SEO e o web design como aliados na cria\u00e7\u00e3o de um site<\/a> extraordin\u00e1rio. Confira 5 dos principais motivos para manter ambos em harmonia.<\/p>\n\n\n\n

A maior parte do tr\u00e1fego costuma vir das buscas org\u00e2nicas<\/h3>\n\n\n\n

Segundo um estudo da BrightEdge, empresa que tem uma sofisticada plataforma de SEO e outras solu\u00e7\u00f5es de marketing digital<\/a>, em m\u00e9dia, a busca org\u00e2nica corresponde a 50,1% do tr\u00e1fego dos sites<\/a>.<\/p>\n\n\n\n

Isso significa que, por mais efetiva que seja uma estrat\u00e9gia focada em tr\u00e1fego pago, s\u00e3o as buscas naturais que trar\u00e3o mais visitantes para o site no longo prazo<\/strong>. Logo, devemos enxergar o SEO como uma excelente oportunidade de otimizar nossas p\u00e1ginas para fortalecer o canal com maiores chances de atrair prospects.<\/p>\n\n\n\n

Se a sua empresa j\u00e1 tem um site, blog ou e-commerce<\/a> h\u00e1 algum tempo, confira na sua ferramenta de web analytics<\/a>. \u00c9 bem prov\u00e1vel que o tr\u00e1fego org\u00e2nico seja o maior canal de aquisi\u00e7\u00e3o de visitantes.<\/p>\n\n\n\n

A apar\u00eancia do site reflete o comprometimento da empresa<\/h3>\n\n\n\n

Quando acessamos uma p\u00e1gina em que percebemos um descuido com a escolha do layout<\/a>, fontes, cores, imagens e outros elementos visuais, a impress\u00e3o que fica \u00e9 que aquela marca n\u00e3o est\u00e1 empenhada em fornecer uma boa experi\u00eancia aos visitantes.<\/p>\n\n\n\n

Portanto, \u00e9 fundamental investir em um site de qualidade, com um design coerente com os valores da empresa<\/strong> e em equil\u00edbrio com as caracter\u00edsticas da persona<\/a>.<\/p>\n\n\n\n

Um design ruim afasta usu\u00e1rios<\/h3>\n\n\n\n

Al\u00e9m de prejudicar a reputa\u00e7\u00e3o da marca<\/a>, um site com apar\u00eancia e experi\u00eancia ruins costuma ter uma consequ\u00eancia imediata no comportamento do usu\u00e1rio: ele tende a abandonar aquela p\u00e1gina.<\/p>\n\n\n\n

Vale lembrar que essa frustra\u00e7\u00e3o n\u00e3o vale apenas para websites com um projeto que deixa a desejar, mas tamb\u00e9m para aqueles que contam com elementos de design em excesso<\/strong>.<\/p>\n\n\n\n

Funcionalidades excessivas e imagens com resolu\u00e7\u00e3o muito acima do desej\u00e1vel tamb\u00e9m dificultam a navega\u00e7\u00e3o e aumentam a vontade de clicar no bot\u00e3o voltar.<\/p>\n\n\n\n

Certas tecnologias n\u00e3o funcionam bem com os mecanismos de busca<\/h3>\n\n\n\n

Quando o Flash estava no auge, permitia criar sites com efeitos e anima\u00e7\u00f5es que os padr\u00f5es da Web dificilmente possibilitavam na \u00e9poca.<\/p>\n\n\n\n

As possibilidades em termos de design eram incr\u00edveis, por\u00e9m, essa tecnologia n\u00e3o \u00e9 rastre\u00e1vel pelos rob\u00f4s dos mecanismos de busca, o que dificulta (e muito) a indexa\u00e7\u00e3o de sites<\/strong> constru\u00eddos assim.<\/p>\n\n\n\n

O Flash \u00e9 um dos exemplos mais not\u00e1veis, mas que mostra muito bem como o uso de uma tecnologia que preze apenas pela parte do design pode arruinar a presen\u00e7a da marca nas p\u00e1ginas de resultados de buscas.<\/p>\n\n\n\n

Fazer SEO durante a constru\u00e7\u00e3o do site evita retrabalho<\/h3>\n\n\n\n

Como o SEO consiste em uma otimiza\u00e7\u00e3o, \u00e9 comum que as empresas deixem essa etapa para depois, quando o web design ou mesmo o site inteiro j\u00e1 est\u00e1 pronto.<\/p>\n\n\n\n

Acontece que isso demanda uma s\u00e9rie de altera\u00e7\u00f5es que poderiam ser evitadas se o SEO fizesse parte do processo de constru\u00e7\u00e3o das p\u00e1ginas.<\/p>\n\n\n\n

Quais princ\u00edpios n\u00e3o podem faltar nessa combina\u00e7\u00e3o?<\/h2>\n\n\n\n

Agora, vamos ver quais s\u00e3o os fundamentos e elementos essenciais para criar um website atrativo ao mesmo tempo para a persona e para os sites de busca<\/a>.<\/p>\n\n\n\n

1. Navega\u00e7\u00e3o e estrutura do site<\/h3>\n\n\n\n

Quando vamos ao supermercado, encontramos placas com as indica\u00e7\u00f5es de Frutas e Verduras, Bebidas, Congelados, Higiene, entre outros. Se formos \u00e0 se\u00e7\u00e3o de Higiene, por exemplo, veremos os produtos separados por Desodorante, Sabonete, Creme Dental, Shampoo, e assim por diante.<\/p>\n\n\n\n

Podemos dizer que um site se organiza de maneira semelhante<\/strong>. Dividimos os produtos ou conte\u00fados em categorias<\/a> e subcategorias, seguindo uma hierarquia. Elas ficam dispon\u00edveis em menus, de maneira que o usu\u00e1rio consiga avan\u00e7ar segundo aquilo que procura.<\/p>\n\n\n\n

Ou seja, a facilidade de chegarmos ao produto procurado no supermercado usando as placas dos departamentos como orienta\u00e7\u00e3o corresponde \u00e0 navega\u00e7\u00e3o, enquanto a divis\u00e3o do estabelecimento em se\u00e7\u00f5es e subse\u00e7\u00f5es \u2014 e a escolha dos seus respectivos nomes \u2014 \u00e9 equivalente \u00e0 estrutura do site.<\/p>\n\n\n\n

Vamos usar o site da Amazon Brasil como exemplo.<\/p>\n\n\n\n\"seo\n\n\n\n

Existe um menu de navega\u00e7\u00e3o global, com op\u00e7\u00f5es relacionadas \u00e0 compra (lojas), sua conta, ofertas do dia. Dentro do Menu Lojas, se formos em Livros, vemos mais subcategorias (Todos os Livros, Livros em Oferta, Mais Vendidos etc.).<\/p>\n\n\n\n

Ao clicarmos em Todos os Livros, somos direcionados a uma p\u00e1gina espec\u00edfica, com ofertas e um menu local, em que o usu\u00e1rio pode ter acesso aos t\u00edtulos por g\u00eanero, autor ou editora.<\/p>\n\n\n\n\"seo\n\n\n\n

Repare como a Amazon teve o cuidado de n\u00e3o colocar todas as op\u00e7\u00f5es poss\u00edveis em um mesmo menu. A navega\u00e7\u00e3o \u00e9 claramente de uma categoria mais geral para uma mais espec\u00edfica.<\/p>\n\n\n\n

Al\u00e9m de ajudar o usu\u00e1rio a entender o que o site tem a oferecer e permitir que siga para onde deseja, a organiza\u00e7\u00e3o em n\u00edveis e subn\u00edveis auxilia os mecanismos de busca a entenderem o contexto e o grau de import\u00e2ncia entre as suas p\u00e1ginas.<\/p>\n\n\n\n

Sendo assim, preze pela simplicidade<\/strong>, ao evitar a elabora\u00e7\u00e3o de menus mirabolantes e agrupar seus conte\u00fados ou produtos em uma divis\u00e3o adequada de categorias e subcategorias. Se enfrentar dificuldades nesse processo, a arquitetura da informa\u00e7\u00e3o<\/a> ser\u00e1 de grande ajuda.<\/p>\n\n\n\n

2. Disposi\u00e7\u00e3o do conte\u00fado<\/h3>\n\n\n\n

J\u00e1 se sabe que a qualidade do conte\u00fado \u00e9 um dos fatores mais importantes<\/a> para o algoritmo do Google. Por isso, valorize as informa\u00e7\u00f5es que o seu site tem a transmitir.<\/p>\n\n\n\n

Tenha em mente que, na Web, disputamos a aten\u00e7\u00e3o do usu\u00e1rio, que, provavelmente, est\u00e1 com diversas outras abas abertas al\u00e9m da sua p\u00e1gina. Nesse contexto, em que cada visita ao seu site pode ser considerada uma vit\u00f3ria, devemos direcionar o foco ao conte\u00fado e n\u00e3o criar distra\u00e7\u00f5es.<\/p>\n\n\n\n

Portanto, pense sempre em ajudar o leitor a encontrar o que deseja, balanceando texto, elementos visuais e espa\u00e7os em branco, de modo a n\u00e3o deixar o conte\u00fado em segundo plano<\/strong>.<\/p>\n\n\n\n

3. Responsividade<\/h3>\n\n\n\n

Um design responsivo<\/a> \u2014 aquele que tem a capacidade de se adaptar ao tamanho da tela do dispositivo do usu\u00e1rio \u2014 \u00e9 indispens\u00e1vel, ainda mais com o crescente uso de internet m\u00f3vel no mundo. Para voc\u00ea ter uma ideia, o celular j\u00e1 \u00e9 o principal meio de acesso \u00e0 internet no Brasil<\/a>.<\/p>\n\n\n\n

Devido a essa relev\u00e2ncia, o Google j\u00e1 considera a compatibilidade das p\u00e1ginas com aparelhos m\u00f3veis como um dos fatores de rankeamento<\/a> do seu buscador.<\/p>\n\n\n\n

Ent\u00e3o, valorize a liberdade dos seus visitantes e ofere\u00e7a sempre uma experi\u00eancia agrad\u00e1vel, n\u00e3o importando se eles preferem visitar o seu site do desktop ou de outro gadget.<\/p>\n\n\n\n

4. Uso de imagens<\/h3>\n\n\n\n

O apelo visual de um site \u00e9 crucial para gerar conex\u00e3o entre o visitante e a marca. Nesse sentido, as imagens s\u00e3o importantes aliadas para melhorar a apar\u00eancia e complementar o conte\u00fado em texto presente na p\u00e1gina.<\/p>\n\n\n\n

Acontece que os motores de busca (ainda) n\u00e3o s\u00e3o capazes de interpretar o que tem nas figuras. Por esse motivo, em termos de SEO, \u00e9 preciso ter a preocupa\u00e7\u00e3o de incluir uma descri\u00e7\u00e3o nas imagens que voc\u00ea decidir adicionar. Para isso, basta inserir um texto alternativo, utilizando o atributo alt text<\/a>.<\/p>\n\n\n\n

Infelizmente, essa n\u00e3o \u00e9 a \u00fanica preocupa\u00e7\u00e3o que devemos ter com as imagens. Como entenderemos a seguir, elas costumam ser fonte de muitos erros que atrapalham o SEO.<\/p>\n\n\n\n

Que erros de web design mais afetam o SEO?<\/h2>\n\n\n\n

Depois de vermos bons motivos para aliar ambos os elementos e entendermos os pilares dessa combina\u00e7\u00e3o, vejamos 10 erros de web design que podem arruinar o posicionamento da sua marca nas buscas.<\/p>\n\n\n\n

1. Esquecer de compactar as imagens<\/h3>\n\n\n\n

Imagens de qualidade s\u00e3o, sem d\u00favida, parte significativa de um bom design. Contudo, se tiverem uma resolu\u00e7\u00e3o muito elevada, podem afetar a rapidez de carregamento<\/strong> do site<\/strong>.<\/p>\n\n\n\n

Dificilmente o usu\u00e1rio ter\u00e1 paci\u00eancia para esperar uma p\u00e1gina abrir se ela demorar mais que alguns segundos, ainda mais se ele acessa de um dispositivo m\u00f3vel. Por isso, para o Google<\/a>, a velocidade de carregamento do site \u00e9 um fator de rankeamento.<\/p>\n\n\n\n

Diante disso, \u00e9 importante ter aten\u00e7\u00e3o ao tamanho (em termos de dimens\u00f5es e de megabytes) das figuras para que n\u00e3o deixem as p\u00e1ginas mais lentas. Procure sempre usar uma ferramenta de compacta\u00e7\u00e3o de imagens<\/a> antes de inseri-las no site.<\/p>\n\n\n\n

Veja a ferramenta TinyPNG<\/a>. Neste exemplo, ela foi capaz de comprimir uma imagem em 75%!<\/p>\n\n\n\n\"seo\n\n\n\n

2. Manter um conte\u00fado ruim<\/h3>\n\n\n\n

Por mais que o conte\u00fado nem sempre seja associado ao design, devemos lembrar que existem aspectos est\u00e9ticos que podem atrapalhar o engajamento do usu\u00e1rio com ele. Par\u00e1grafos e frases muito grandes, fonte muito pequena e cor da letra que dificulta a leitura<\/strong> s\u00e3o caracter\u00edsticas que os buscadores t\u00eam condi\u00e7\u00f5es de detectar.<\/p>\n\n\n\n

Repare na imagem a seguir como as palavras s\u00e3o as mesmas.<\/p>\n\n\n\n\"web

<\/p>\n\n\n\n

Veja s\u00f3 como os blocos de texto muito grandes, par\u00e1grafos inteiros em caixa alta e uma cor sem contraste adequado deixam a experi\u00eancia muito pior.<\/p>\n\n\n\n

3. Incluir chamadas JavaScript em excesso<\/h3>\n\n\n\n

A Web est\u00e1 repleta de scripts que ajudam a aprimorar os sites com elementos mais din\u00e2micos ou incorporando m\u00eddias de outros servi\u00e7os com a fun\u00e7\u00e3o embed<\/a>. O problema \u00e9 que a requisi\u00e7\u00e3o de muitos recursos externos pode deixar o carregamento lento, o que j\u00e1 sabemos que \u00e9 prejudicial tanto para a experi\u00eancia do usu\u00e1rio quanto para SEO.<\/p>\n\n\n\n

Com isso em mente, use as chamadas de scripts de terceiros com modera\u00e7\u00e3o. Analise se elas realmente s\u00e3o indispens\u00e1veis, ou se \u00e9 poss\u00edvel recorrer a outras solu\u00e7\u00f5es.<\/p>\n\n\n\n

Veja o caso deste blog: dos 2,4 megabytes transferidos, 654 kilobytes correspondiam a JavaScripts. \u00c9 cerca de 26% dos dados de transfer\u00eancia no carregamento desta p\u00e1gina espec\u00edfica.<\/p>\n\n\n\n\"seo\n\n\n\n

4. Fazer parte significativa do site em Flash<\/h3>\n\n\n\n

\u00c9 verdade que o Flash pode criar efeitos incr\u00edveis no seu site, mas vale lembrar que o usu\u00e1rio precisa ter o Adobe Flash Player instalado no dispositivo para conseguir visualizar.<\/p>\n\n\n\n

Al\u00e9m disso, os mecanismos de busca n\u00e3o indexam muito bem os conte\u00fados constru\u00eddos apenas com essa tecnologia.<\/p>\n\n\n\n

Dessa forma, o ideal \u00e9 evitar usar o Flash para navega\u00e7\u00e3o e conte\u00fado em texto, ou, simplesmente, optar por outras alternativas que sigam os padr\u00f5es da Web.<\/p>\n\n\n\n\"site\n\n\n\n

5. Ignorar os usu\u00e1rios de dispositivos m\u00f3veis<\/h3>\n\n\n\n

J\u00e1 discutimos o aumento expressivo das conex\u00f5es por tablets e smartphones, o que indica que a probabilidade de a maioria dos visitantes do seu site vir desses aparelhos \u00e9 muito grande. <\/p>\n\n\n\n

Se ele n\u00e3o estiver preparado para esses gadgets, \u00e9 quase certo que a pessoa vai abandonar a p\u00e1gina.<\/p>\n\n\n\n

Como os buscadores consideram o fato de o site ser mobile-friendly<\/a> ou n\u00e3o para definir o seu posicionamento, vale a pena investir em um design responsivo tamb\u00e9m do ponto de vista de SEO.<\/p>\n\n\n\n\"site\n\n\n\n\"site\n\n\n\n\"site\n\n\n\n

6. Substituir elementos importantes do HTML por imagens<\/h3>\n\n\n\n

Criar imagens impressionantes e us\u00e1-las no lugar de elementos importantes de HTML como as heading tags<\/a> pode agradar bastante aos olhos, mas \u00e9 algo que n\u00e3o vai funcionar para SEO.<\/p>\n\n\n\n

As tags H1, H2 e H3<\/strong> destacam o grau de relev\u00e2ncia de cada parte do seu conte\u00fado e permitem dar maior \u00eanfase \u00e0 palavra-chave<\/strong> daquela p\u00e1gina<\/strong>.<\/p>\n\n\n\n

Utilizando novamente o exemplo do nosso \u201cBlog do SEO\u201d, percebemos na figura que existe uma imagem com o t\u00edtulo do post, mas, ainda assim, a tag H1 com esse mesmo t\u00edtulo foi mantida para n\u00e3o prejudicar o SEO.<\/p>\n\n\n\n\"Substituir\n\n\n\n

7. Inserir muito texto em imagens<\/h3>\n\n\n\n

J\u00e1 explicamos que os motores de busca n\u00e3o conseguem interpretar as imagens da mesma maneira que s\u00e3o capazes de analisar conte\u00fado textual \u2014 que fa\u00e7a parte do c\u00f3digo HTML da p\u00e1gina. <\/p>\n\n\n\n

Por isso, \u00e9 uma m\u00e1 pr\u00e1tica ter imagens constitu\u00eddas basicamente de texto em vez de reproduzir essas passagens com elementos de fato textuais na p\u00e1gina.<\/p>\n\n\n\n

Ainda que o atributo alt text possa ser \u00fatil nesses casos, o ideal \u00e9 criar um texto complementar ou manter imagem e texto separados<\/strong>. Outra alternativa seria criar uma camada de sobreposi\u00e7\u00e3o com texto, usando recursos de CSS<\/a>.<\/p>\n\n\n\n

Veja o exemplo do infogr\u00e1fico \u201cComo ganhar muitos seguidores no Instagram: descubra com essas 27 dicas infal\u00edveis<\/a>\u201d, aqui do Blog da Rock. Em vez de publicar apenas a arte, foi elaborado um texto complementar para expandir cada uma das dicas.<\/p>\n\n\n\n

8. Criar menus excessivamente sofisticados<\/h3>\n\n\n\n

J\u00e1 sabemos como a navega\u00e7\u00e3o \u00e9 pertinente para usu\u00e1rios e buscadores. Ent\u00e3o, nada melhor do que criar menus simples e que sigam o padr\u00e3o que j\u00e1 se espera desses elementos na Web <\/strong>(uma lista n\u00e3o ordenada na vertical ou na horizontal, por exemplo).<\/p>\n\n\n\n

A navega\u00e7\u00e3o precisa ser organizada e jamais gerar confus\u00e3o na sua persona. Ent\u00e3o, mantenha o equil\u00edbrio. Capriche na apresenta\u00e7\u00e3o dos menus, mas evite ser inovador demais.<\/p>\n\n\n\n

O Blog da Rock \u00e9 um excelente exemplo, com a lista de Categorias no menu superior e com a op\u00e7\u00e3o para o usu\u00e1rio acessar tamb\u00e9m do rodap\u00e9.<\/p>\n\n\n\n\"seo\n\n\n\n\"seo\n\n\n\n

9. Usar recursos que dificultam o acesso ao conte\u00fado<\/h3>\n\n\n\n

Quando o usu\u00e1rio chega ao seu site por meio de uma ferramenta de pesquisa como o Google, a ideia \u00e9 que ele encontre o que est\u00e1 procurando, certo? Se colocarmos pop-ups, avisos, an\u00fancios e outros elementos na frente do conte\u00fado principal, dificultamos esse acesso.<\/p>\n\n\n\n

Tomemos o site de not\u00edcias<\/a> da imagem a seguir como exemplo. Note como, ao abrir a p\u00e1gina principal, o espa\u00e7o dedicado \u00e0s informa\u00e7\u00f5es que o leitor quer de fato ver \u00e9 muito pequeno diante da quantidade de an\u00fancios.<\/p>\n\n\n\n\"site\n\n\n\n

Os buscadores s\u00e3o inteligentes o suficiente para detectar esse tipo de coisa, que \u00e9 sim motivo para afetar o seu posicionamento.<\/p>\n\n\n\n

10. Desconsiderar testes e mensura\u00e7\u00e3o de resultados<\/h3>\n\n\n\n

A melhor maneira de saber se o web design est\u00e1 influenciando negativamente o SEO \u00e9 realizar testes e avaliar os resultados.<\/p>\n\n\n\n

Uma medida interessante \u00e9 incluir anota\u00e7\u00f5es na plataforma de analytics<\/a>. Sempre que mudan\u00e7as significativas no design do site forem ao ar, registre a data e monitore se houve alguma altera\u00e7\u00e3o consider\u00e1vel no tr\u00e1fego org\u00e2nico<\/strong>.<\/p>\n\n\n\n\"seo\n\n\n\n

\u00c9 importante lembrar que uma queda na aquisi\u00e7\u00e3o de visitantes via pesquisa org\u00e2nica pode ter outros motivos, como problemas no servidor ou mesmo mudan\u00e7as no algoritmo do Google<\/a>.<\/p>\n\n\n\n

Que ferramentas ajudam a ver se SEO e web design est\u00e3o devidamente alinhados?<\/h2>\n\n\n\n

Confira agora algumas ferramentas que todo web designer que deseja aperfei\u00e7oar seus sites<\/a> tamb\u00e9m sob a perspectiva do SEO deveria conhecer.<\/p>\n\n\n\n

Screaming Frog<\/h3>\n\n\n\n

O Screaming Frog<\/a> \u00e9 usado para rastrear um site, quase como os rob\u00f4s dos mecanismos de busca fariam<\/strong>. Depois de instalado no seu computador, basta colocar a URL e clicar em Start para come\u00e7ar o processo chamado de crawl, em ingl\u00eas.<\/p>\n\n\n\n

Terminado o procedimento, conseguimos ver informa\u00e7\u00f5es como:<\/p>\n\n\n\n