Olá, tudo ok?

Este é artigo especialmente criado para quem quer expandir horizontes e oferecer algo a mais para seus clientes e quiçá também para seus projetos.

O assunto hoje é SEO. Não espere deste artigo algo como o “SUPER-ULTRA-HIPER-MEGA-MASTER-BLASTER Guia definitivo de SEO”, ou algo que transformará você em um Analista SEO. Para isso seria precisaria escrever um livro que em meses ficaria desatualizado.

O intuito aqui é mostrar um caminho para extrair de suas habilidades de Designer, de Desenvolvedor, e afins, o que é possível para contribuir com o SEO nos seus projetos, mas que muitas vezes não é explorado.

Mas enfim… O que veremos neste artigo:

• Definição rápida de SEO
• Por que você precisa entender SEO?
• Como sua atividade profissional pode contribuir para os aspectos técnicos de SEO em um projeto?
• Aplicando práticas SEO “porretas” a partir dos seus conhecimento
• Quero conhecer mais. O que preciso fazer?

Definição rápida de SEO

SEO significa Search Engine Optimization, e se baseia em métodos e estudos para fazer o seu site visível para os motores de busca.

Quando trabalhamos pensando em SEO queremos que nossas páginas atinjam os melhores posicionamentos nos resultados dos motores de busca, como Google e Bing, quando as pessoas pesquisam por palavras chaves relevantes nestes sites. E principalmente pensamos em estar mais bem posicionados do que a concorrência.

Entenda-se como “Palavras Chaves” as palavras e/ou frases que os usuários digitam na caixa de pesquisa de sites buscadores,como Google e Bing, para encontrar o que desejam.

Estrategicamente você pode posicionar estas palavras dentro de seu documento HTML de forma que os buscadores possam medir e encontrar relevância e similaridade entre os termos pesquisados na consultas e o documento HTML.

Os resultados que se almeja através de SEO são denominados orgânicos e são representados na imagem acima na área demarcada com cor. Os resultados que você vê nas outras áreas são decorrentes de anúncios pagos.

Por que você precisa entender SEO?

Estou tentando ler sua mente agora e você deve estar pensando:

O que é que eu tenho a ver com isso? Para que raios eu tenho que entender de SEO?

Primeiro, porque é fundamental para seus clientes.

Segundo, se com suas habilidades de Designer ou de Desenvolvedor você não se esforçar um pouco para que o site do seu cliente esteja bem alinhado, ela já nascerá com a alta probabilidade de se perder para sempre no labirinto das últimas posições do Google.

E olha que você nem precisa ser um expert em SEO para evitar que isso aconteça. É o que veremos no próximo tópico. Preparado?

Como sua atividade profissional pode contribuir para os aspectos técnicos de SEO em um projeto?

Eu sugiro para todo profissional que trabalhe com web que procure gradativamente estar se atualizando sobre este tema. Certamente que ele não é o único método responsável por trazer tráfego aos seus sites (existem os pagos, por exemplo), mas quando bem planejado e desenvolvido garante audiência gratuita.

Entretanto para que tudo der certo, e este “der certo” significa resultados, vendas, cadastros, conversões, ou seja, cumprimento dos objetivos do site, você deve contribuir com sua parte em SEO. E sabe como?

Conhecendo e praticando todos os aspectos em que sua função possa contribuir para que um site seja “encontrável”. E quando encontrado que mantenha o visitante o tempo necessário no site, e que a experiência seja tão agradável que faça que ele retorne sempre.

Acredito que agora estou falando mais sobre sua praia. Captou a sacada? Você pode, e eu sugiro, pesquisar a fundo sobre SEO, porém com certas práticas corriqueiras aliadas a que vou passar a seguir você já estará em um bom caminho.

Vamos a elas?

Aplicando práticas SEO “porretas” a partir dos seus conhecimentos

Existem “trocentos” fatores que influenciam nos resultados de buscas. Não se sabe quantos. Os especialistas em SEO procuram trabalhar com o máximo de variáveis imagináveis. E existem algumas que outros profissionais envolvidos (isso, estou falando de você) no projeto de um site podem estar direta e indiretamente ligadas.

E aí que entram suas habilidades. Seguem algumas:

Planejamento da estrutura do site

Parece que não, mas quando você se preocupa com a organização da estrutura de um website você está trabalhando em fatores importantes para SEO.

Pode ser que você já faça isso. Caso não, se preocupe desde já em categorizar, hierarquizar a informação, em organizar o conteúdo e ligar suas páginas de forma lógica.

Um layout lógico e funcional, com codificação limpa que facilita o rastreamento, faz os motores de buscas considerarem seu site saudável e criado de uma forma que atribui valor.

Planejando a arquitetura do site você facilita a vida dos usuários e permite que os motores de busca rastreiem as páginas com mais fluidez.

Procure atender a diferentes resoluções de tela através do Design Responsivo

Não é propriamente uma técnica SEO, mas as consequências de sua aplicação influenciam com benefícios e é até indicado pelo Google.

Isso porque a URL de uma página responsiva é única para o usuário independente do dispositivo usado e facilita a vida dos buscadores quanto às propriedades de indexação para o conteúdo.

Se o projeto for bem executado os tempos de carregamento de páginas serão reduzidos porque nenhum redirecionamento é necessário.

Planeja um site que carregue rápido

Velocidade do site pode ser um fator responsável por angariar algumas posições nos resultados de buscas. Sem contar que ninguém gosta de navegar em um site lento.

Milésimos de segundo são valiosos. Portanto ao desenhar sua interface considere eliminar muitos detalhes que exige uma implementação mais complexa no desenvolvimento.

Procure também otimizar as imagens. Arquivos de imagens como jpeg e png carregam consigo informações extras. É possível eliminar estes dados sem diminuir a qualidade visual. Ferramentas como tinypng e compressjpeg podem executar esta tarefa.

Ainda com as imagens, durante o desenvolvimento, referencie o tamanho correto das imagens dentro do HTML.

Só este tópico sobre performance daria um post inteiro que ainda será tratado no blog.

Entretanto só para adiantar, você que é desenvolvedor considere diminuir as requisições em suas páginas para recursos externos como arquivos JS, CSS, imagens, vídeos, etc. E também diminuir os tamanhos dessas requisições através de compressão de arquivos CSS, JS e HTML e habilitação de GZIP ^↓.

Você pode conferir algumas ferramentas para isso nesse artigo sobre ferramentas de front-end.

HTML + SEO Onpage

Fatores internos bem aplicados em um site através da utilização dos padrões W3C alinhada as técnicas de SEO Onpage ^↓ são princípios básicos para otimização de site para os buscadores.

No passado isso já teve mais influencia nos resultados de busca, mas por causa de abusos de otimização perdeu-se um pouca de força. Entretanto é um desperdício de oportunidades deixar uma página sem otimização Onpage.

O processo se baseia em usar o HTML de forma semântica (olha o HTML5 aí gente!) e distribuir com parcimônia palavras chaves em tags HTML ^↓ específicas.

Veja a relação de tags que contribuem para os fatores Onpage:

• Títulos das páginas (tag title) – Por favor, não repita o mesmo título em todas as páginas do site. Por acaso o conteúdo destas páginas são iguais? Não né! Então os títulos devem corresponder aos assuntos tratados em cada página.
• Meta tag description – Não melhora a posição de uma página nos resultados do Google, porém trás a possibilidade de oferecer trechos atraentes nas SERPs ^↓ para aumentar a taxa de cliques.
• Heading tags (tags h1, h2, h3, h4, h5, h6) – Desde que não em excesso é interessante usar palavras chaves pelo menos em h1 e h2.
• Atributo alt em imagens – Este atributo é indicado para especificar uma alternativa em texto abreviado que descreva a imagem. É uma questão de acessibilidade.
  Porém pensando em SEO procure uma imagem que reflita o conteúdo e que também ajude usuários especiais. E que de quebra permita a inserção da palavras chave conforme o contexto.
• Nome do arquivo de imagem – Nomeie da melhor forma possível seu aquivo de imagem antes de inserir em seu HTML. Utilize palavras chaves separadas por hífen. Simplesmente assim: “palavra-chave.jpg”.
• Linkagem interna – Uma das preocupações dos especialistas em SEO e obter links externos de qualidade, pois eles indicam um voto de confiança vindo de outro site e isso pode proporcionar ganho de posições nos buscadores.
  Deve-se fazer o mesmo para as páginas internas de seu site. Fazendo referência as suas páginas você mostra aos buscadores que elas tem importância.

Outros fatores Onpage

Utilização da Meta tag robots

Ela possibilita que os motores de busca rastreiam ou não, e indexem ou não suas páginas. Exemplos práticos:

<meta name="robots" content="index, follow"> – Sintaxe bastante usada. Ela orienta os buscadores a indexar o conteúdo da página e seguir todos os links para descobrir outras páginas.

<meta name="robots" content="noindex, nofollow"> – Esta sintaxe executa o inverso. Ela orienta os buscadores a não indexar o conteúdo da página e impede-a de seguir os links para descobrir novas páginas.

Rich Snippets

Semelhante a meta descrições, rich snippets são mostrados na página de resultados de busca, e geralmente fornecem informação adicional sobre esse resultado particular.

Você pode, através de formatos de marcação (Microdados, Microformatos, RDFa ^↓ ) inseridas dentro do HTML de uma página, criar rich snippets com informações detalhadas para ajudar os usuários com consultas específicas.

Isso pode resultar em mais cliques nos resultados de busca. Veja abaixo como fica a aparência dos resultados para a pesquisa de uma receita de Strogonoff (Delícia!).

Se você notar bem na imagem acima, o primeiro resultado oferece mais detalhes atraentes que convidam ao clique. A gente tem uma imagem miniatura do prato, a avaliação (4,5 – Boa média), a quantidade de comentários (517) e o tempo preparo.

São dados fornecidos através dos dados estruturados (no caso Microdados). Dá até vontade de imprimir a receita.

Já no segundo resultado não foi executado nenhum trabalho com Rich Snippets. Visualmente em qual você clicaria?

Conteúdo

Tudo o que o usuário procura em sua página é conteúdo. É ele que vai determinar o sucesso e o fracasso de seu site. Uma ótima otimização do site, mas com um conteúdo fraco gera frustração no usuário.

Portanto é indicado usar palavras chaves (com parcimônia) dentro do conteúdo de uma página além das já encontradas nas tags citadas neste artigo. Mas nunca se esqueça que essencialmente você está escrevendo para pessoas e não para um robô de busca.

Use URLs amigáveis

Considero este muito fator importante. Para entender o que são URLs amigáveis a melhor forma é apresentar exemplos não amigáveis. Veja abaixo:

http://www.seusite.com.br/sobre.php

http://www.seusite.com.br/produtos.php?categoria=5

http://www.seusite.com.br/produtos.php?categoria=5&produto=iphone

Os exemplos acima mostram o final da url com caracteres especiais, números e muitas vezes não é possível saber do que se trata.

Além da dificuldade do usuário memorizar os buscadores não gostam deste tipo de url. Muitas vezes a gente nem encontra a palavra chave e em outas casos as URLs são gigantes e complexas.

As URLs amigáveis são simples, de fácil identificação, não possuem caracteres estranhos e vão direto ao ponto. De preferência deve-se (fundamental) usar a palavra chave que corresponde ao assunto do conteúdo tratado na página.

Exemplos de URLs amigáveis:

http://www.seusite.com.br/sobre

http://www.seusite.com.br/ smartphone

http://www. seusite.com.br/smartphone/iphone

Vale ressaltar que além de uma url amigável, você precisa escolher um domínio que tenha a ver com o tema e também uma boa hospedagem, como você pode conferir aqui na MangoMatter.

Quero conhecer mais. O que preciso fazer?

O que foi apresentado aqui só foi a ponta do iceberg. Quis apresentar algumas formas que você no dia-a-dia pode contribuir com a otimização para os motores de busca.

SEO é um assunto vasto com vários aspectos técnicos que não foram tratados aqui pois o artigo já estava ficando extenso. Você pode encontrar técnicas mais avançadas e que surtem melhores resultados.

Existem práticas úteis a se conhecer denominadas White Hat ^↓ e também as más técnicas de SEO conhecidas como Black Hat ^↓ que costumam punir e até banir para sempre sites dos resultados do Google e Bing. E isso ninguém quer.

Mas você quer conhecer mais não é? Você quer ser um profissional diferenciado que ajuda os sites de seus clientes nas primeiras posições? Acredito também que você, por falta de conhecimento, não quer aplicar uma técnica inocentemente que puna ou exclua para sempre os sites de seus clientes do Google, certo?

Então você tem dois caminhos:

O primeiro é passar longas horas e horas pesquisando, compilando para só depois estudar materiais relevantes sobre SEO.

Mas, calma! PeraÍ!! Eu posso te ajudar no aprendizado, pode ser?  Para te ajudar nisso, agilizar o seu tempo e facilitar a vida, eu tenho um outro conteúdo onde te passo um Curso de SEO (CLIQUE AQUI).

O segundo é não estudar e ficar parado no tempo na questão de SEO.

SEO é uma matéria que precisa de constantes estudos, pesquisas, dedicação e paciência da sua parte. Só assim você conseguirá bons resultados.

Espero que tenha gostado do artigo. Peço que contribua com seu comentário e compartilhe com seus amigos.

Abraços!

Referências

webdesignerwall.com
support.houzz.com/hc/en-us
www.agenciamestre.com
searchengineland.com

Ed Francisco

Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.

Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.

Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).

Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.