Princípios de SEO que todo webdesigner precisa saber

A otimização para melhorar o posicionamento de um site nos mecanismos de busca começa na fase de criação e não depois. Saiba quais princípios de SEO você pode começar a utilizar em seu trabalho como webdesigner para ter sucesso no Google!

Como alguém que trabalha no dia-a-dia com criação de websites, blogs, lojas de e-commerces e etc, tenho visto que muitas vezes alguns conceitos básicos de SEO são deixados de lado pelos webdesigners. Talvez eles pensem que o SEO só começa quando o design e a codificação terminam, ou simplesmente desconhecem seu papel em relação a otimização de um site.

As dicas que vou compartilhar são na maioria coisas simples, mas que podem ter um grande reflexo em como suas páginas serão vistas pelos mecanismos de buscas e principalmente pelos usuários.

Aqui eu gostaria de fazer uma pausa para explicar um conceito importante! Como você deve ter percebido, destaquei a palavra “usuários”, pois é muito comum, principalmente aos novatos em SEO, ficarem mais preocupados com os mecanismos de buscas do que com as pessoas. Esquecem que a grande preocupação de empresas como o Google é oferecer a melhor experiência possível aos visitantes, e essa deve ser sua preocupação também.

Mas como agradar ao usuário e aos mecanismos de busca ao mesmo tempo? É simples, sigam a regra da luta romana! É isso mesmo que você leu. Vou explicar: Na luta romana para derrubar um adversário você pode mirar as pernas dele, mas se este der um passo atrás, você provavelmente arrebentará os dentes no chão. Mas se focalizar um ponto bem além de seu oponente, automaticamente o “atropelará” no caminho.

estratégia seo

Moral da história, mantenha o foco no usuário e os requisitos dos mecanismo de busca vao ser “atendidos” no processo (ou pelo menos grande parte). Chega de história e vamos à ação:

O SEO no processo de Design e Codificação

Bons designers fazem sites bonitos. Excelentes designers fazem sites bonitos e funcionais tanto para usuários quanto para mecanismos de buscas. Eis aqui alguns pontos que podem tornar o design de um site mais funcional no que tange ao SEO:

Logomarca

Utilize sempre o logo com um link para a sua homepage. Entretanto, aqui vale uma dica e também uma opinião pessoal. Muita gente gosta de utilizar a tag h1 (título principal) para a logomarca. Eu particularmente acho isso errado, afinal de contas, esse não é o uso correto semanticamente falando. Acredito que o ideal seja utilizar simplesmente uma imagem e nela inserir o atributo alt ou mesmo title.

Título da Página e Meta Description

Crie Títulos e Meta Descriptions únicos e bem escritos para cada página. Vale a pena o esforço. Essas são as informações que o Google geralmente utiliza para listar seu site nas SERP’s (Search Engine Result’s Page) e isso pode ajudar a atrair mais visitantes. Também não esqueça de utilizar sempre o nome do site no título, de preferência no fim.

Menu de Navegação

Os links são as “pontes” que levam as spiders (ou bots) a cada página de nosso site. Se o menu não possui links para as principais categorias, ou se é feito utilizando flash (que não é “lido” pelo Google) estaremos implodindo essas “pontes” e isolando páginas ou regiões inteiras do site.

Ao montar seu menu, pense em uma pirâmide de taças. Ao encher a primeira, lá em cima, esperamos que ao transbordar ela encha as duas de baixo e estas encham as próximas, sucessivamente. Se o “líquido” estiver fluindo da sua homepage (primeira taça da pirâmide) passando pelas categorias, subcategorias e chegando até os artigo (últimas taças), então seu site estará sendo bem indexado e o usuário bem servido.

link juice seo

Essa passagem de “líquido” entre os links também é conhecida em SEO como Link Juice. Ou seja, a reputação (page authority) que uma página possui é passada às demais através do link que as conecta, aumentando o ranqueamento de quem recebe o link. Resumindo, uma boa estrutura de links melhora a navegabilidade, a indexação e a “reputação” das páginas do site.

Tipografia e Hierarquia

Um aspecto muito frequentemente esquecido na hora de fazer o layout de um novo projeto é em relação à hierarquia e consequentemente tamanho dos textos. Vemos que muitas vezes os aspectos estéticos constituem a única base de decisão para se optar por esta ou aquela fonte.

Não estou dizendo que não devemos pensar no visual, mas temos que pensar também no funcional. Algo que pode nos ajudar é recorrer aos bons exemplos de uso de tipografia na indústria de material impresso. Quando você lê um livro, mesmo que não tenha percebido, vai ver que o título do capítulos possui o maior tamanho de texto. Dentro de cada capítulo temos subtítulos. Estes subtítulos possuem fontes menores que as usadas no título do capítulo, o mesmo se aplicando aos tópicos destacados dentro destes. Nota-se uma hierarquia, que neste caso se dá pela diferença de tamanhos.

A hieraraquia pode ser criada de diversas maneiras, como tamanho do texto, peso, cor etc. Mas seja como for, precisa existir, pois quando o design for codificado ficará mais fácil identificar o que é h1, h2, h3, h4 etc (tags de títulos do HTML). E falando em codificação, não esqueça de utilizar as tags corretas  para os títulos e subtítulos. Afinal de contas, diferente dos humanos, os mecanismos de buscas utilizam estas tags (h1, h2, h3, h4… ) para identificar onde estão os títulos e subtítulos de seu conteúdo. De preferência, tenha apenas um h1 por página e utilize as demais tags para melhor “dividir” e categorizar o texto. Se tiver dúvidas, lembre-se dos livros, comparando cada capítulo a uma página do site.

Uso correto de imagens

Nome de arquivos

Nomeie corretamente seus arquivos. Não utilize apenas números, carateres especiais ou textos em caixa alta. Não esqueça também de utilizar o atributo alt em cada imagem. Essa descrição indica ao mecanismo de busca do que se trata a imagem. Seja claro e descreva o que é exibido na imagem.

Tamaho e otimização

O Photoshop tem um excelente recurso para salvar imagens, “Save for Web and Devices”. Ao salvar um arquivo desta maneira você terá a possibilidade de otimizar a imagem diminuindo consideravelmente o tamanho dela. Imagens mais leves diminuem o tempo de carregamento do website e melhoram a experiência do usuário.

Outro ponto importante é trabalhar apenas com imagens já no tamanho (em pixels) em que elas serão exibidas e não deixar para redimensioná-las dentro do WordPress, Joomla ou por CSS. Reduzir-las online não é bom e não diminui de verdade o tamanho do arquivo.

Quando possível utilize sprites para fazer os efeitos de hover que utilizem imagens, desta maneira reduzimos o número de requisições ao servidor e aumentamos a velocidade do site. Falando ainda sobre otimização, evite utilizar grandes quantidades de imagens na página. Se não for possível utilize thumbnais com links para as imagens completas.

Imagens que substituem textos

Por fim, não utilize imagens para substituir textos. Mesmo que hoje existam alguns recursos, uma imagem não tem as mesmas propriedades de um texto e isso piora a experiência do usuário. Quando for utilizar fontes diferentes daquelas que conhecemos como “websafe”, utilize técnicas como @font-face ou Cufón ao invés do uso de imagens. O site Fontsquirrel disponibiliza excelentes fontes livres de direitos e em kits @font-face prontos para usar. Vale a pena conferir.

Ah, e não esqueça de verificar se a fonte que você quer utlizar possui algum tipo de restrição.

Javascript x Flash

Tenho visto a utilização desta tecnologia diminuir consideravelmente na agência onde trabalho. Os clientes que antes exigiam o uso de animações flash, hoje preterem a tecnologia para que seus sites possam ser vistos em dispositivos móveis como o iPad, iPod e iPhone. A frase: “o site vai abrir no iPad?” é uma das mais ouvidas. Talvez este seja um dos efeitos colaterais que ocorreu com a chegada do tablet da Apple, mas seja como for, tem sido de grande valia para quem atua com web, visto que com isso estamos conseguindo convencer nossos clientes a não fazer uso de uma tecnologia péssima em termos de indexação de conteúdo.

A melhor opção disponível hoje para criar slideshows, animações e outros efeitos é o javascript e mais comumente a biblioteca jQuery.  Por ser de fácil implementação, customização e manutenção eu aconselho fortemente que você, se ainda não o fez, se familiarize com essa poderosa ferramenta. Inclusive temos um post muito legal no site sobre os 10 melhores slideshows para usar em seus projetose a maioria deles são em Javascript. Não deixe de conferir.

Validação de Código

Valide seu código. Talvez algumas pessoas torçam o nariz em relação a esse ponto e digam que o Google cosegue indexar qualquer tipo de código, inclusive sites feitos em tabelas. Mas vou tentar justificar o meu pensamento.

Mais do que uma marcação estrutural o HTML também possui aspectos semânticos que atribuem significado ao conteúdo que ele estrutura. Esses significados ajudam o mecanismo de busca a entender melhor o conteúdo e o tipo de informação que ele contém. Se for estruturado corretamente o HTML identificará de forma clara o que é um título, o que é uma lista, o que são citações no texto, parágrafos e assim por diante. Validar nos ajuda a ver onde estão os erros e como melhorar nosso código.

Conclusão

Espero neste post ter conseguido transmitir a você algumas dicas simples e práticas que se bem executadas, melhorarão significativamente seu trabalho como webdesigner. Diminuirão o tempo gasto pelos analistas de SEO com correções on-page e fornecerão uma melhor experiência ao usuário. Pode-se dizer que seu site nascerá com DNA de SEO! Um forte abraço e deixem seus comentários.

3 Comentários

  1. Jonathan Prieto

    Nossa, simples mais poderosos! Abordou muito bem os pontos importantes, com ótimos exemplos, e sempre uma dica que advém da experiência.

    Bom gostei bastante! Parabéns!

    Responder
  2. Edmar Daniel

    A experiência de trabalhar com SEO é algo que tem mudando o posicionamento dos sites que temos desenvolvido na Webbe. Tem alguns projetos que ainda não passaram por uma análise refinada de search, mas a tendência é colocar todos os sites em um posicionamento melhor. Gostei do Texto, muito objetivo.
    Obrigado!

    Responder
    • Ubiratan Cunha

      Obrigado pelos elogios e comentários. Sem dúvida vivemos em um mercado muito competitivo onde já não é mais possível imaginar projetos de sucesso sem SEO.

      Responder

Deixe uma Resposta

  • (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=""> <s> <strike> <strong>

© 2017 Mochileiro Digital.

Compartilhe: