Page Title – Fundamental – Dicas de SEO, pt. 5

20-01-2010

Voltando às nossas velhas e boas dicas de SEO, hoje comentaremos brevemente sobre um atributo muito importante, e que muitos ainda negligenciam quando constroem sites para a web: o atributo title de uma página.

Folheando uma obra antiga, mas ainda boa fonte de referência, o livro “Homepage Usabilidade: 50 Websites Desconstruídos” (em inglês Homepage Usability: 50 Websites Deconstructed) de Jacob Nielsen e Marie Tahir, percebemos que o título das páginas deveria ser otimizado para uma melhor usabilidade do usuário. Colocar em primeiro lugar o nome do site ou empresa era fundamental, para que os sites aparecessem listados em ordem alfabética na lista de favoritos, e um slogan descritivo seria importante para indicar do que se tratava o site em consultas posteriores. Bom, dessas lições, podemos tirar valiosas contribuições para os dias de hoje, quando a disputa por um espaço nas primeiras posições dos mecanismos de pesquisa está cada vez mais acirrada.

Nielsen não errou quando disse que o título deve ser descritivo. Ser claro nesse ponto pode contribuir para uma melhor posição no Google, Bing e outros buscadores. A questão é: como fazer isso?

Veja abaixo alguns tópicos bacanas para entender como melhorar os títulos das páginas dos seu(s) site(s).

1. Não esquecer da tag title.

É, parece piada, mas não é. Muitos webmasters não se preocupam em atribuir títulos às suas páginas. Duvida que isso seja possível nos dias de hoje? Então veja aqui e aqui.

2. Única por página.

A tag title deve ser única para cada uma das páginas do seu site, e deve buscar descrever sucintamente seu conteúdo. Isso ajudará a posicionar sua página para os assuntos ou palavras-chave contidos nela.

3. Respeite a ordem do código.

Inclua a tag title entre as tags head de seu documento, e faça com que ela esteja sempre acima de outras tags.

4. Respeite uma limitação de caracteres.

Os mecanismos de pesquisa exibem em seus resultados páginas encontradas com o atributo title em destaque, e esse resultado possui um limite de caracteres a ser exibido. Se você cria uma página com uma tag title muito longa, pode perder palavras-chave importantes (ou seja, elas podem ser “cortadas” no resultado da pesquisa). Mas quantos caracteres, você deve perguntar? Tente não ultrapassar um limite de 70 caracteres, para uma boa otimização.

5. Use keywords. Mas evite o spam.

A tag title pode e deve conter palavras-chave, mas não apenas isso. Crie frases curtas e descritivas para o assunto de suas páginas mas evite o keyword spamming.

Uma busca no Google pode ajudar você a construir títulos de página mais eficientes para seus sites. Lembramos que, além de pequenas “regras”, a criatividade e a clareza aqui são essenciais, e fazem parte do trabalho de todo bom SEO.

Um abraço e até a próxima! :)

HTML5: As tags “mágicas”

15-01-2010

Como já comentamos em outros artigos, o HTML5 vem (na verdade, já veio) para facilitar a vida do desenvolvedor. Um site escrito em HTML5 tem seu código enxuto, muito mais leve e suas tags permitem delimitar áreas do site muito mais facilmente, além da inclusão de novos elementos.

Vamos comentar algumas das tags novas e mais interessantes! Para uma referência mais completa, visite o Pinceladas da Web, que preparou uma tabela com todas as tags de referência.

Mais simples impossível! Ela insere um vídeo em uma página. A tag promete aposentar de vez os embed players (vídeos em flash) para inclusão de vídeos em sites. No entanto, o HTML5 tem encontrado obstáculos nesta etapa, uma vez que encontra-se esbarrando em problemas diversos com licenciamento de codecs. A saída é continuar acompanhando o processo e aguardar um Youtube inteiro em HTML5!

A tag cria uma seção de navegação na página. Não há muito o que comentar sobre ela, apenas que é restrita ao HTML5 e facilita a organização do código: em vez de definir menus com divs, deixe seu código arrumadinho com seções navegáveis específicas.

Insere em sua página um grupo composto por uma imagem (foto, desenho, etc) e sua respectiva legenda. A diferença entre esta tag e a tag <img> está justamente na incorporação da legenda, o que facilita absurdamente a diagramação de páginas de notícias, por exemplo.

O elemento <canvas> permite adicionar às páginas gráficos vetoriais dinâmicos ou mesmo imagens bitmap. Inicialmente, o elemento foi desenvolvido pela Apple para uso em aplicativos do Mac OSX, como o Dashboard e mesmo no navegador Safari. Posteriormente, a tecnologia foi adotada por navegadores como Firefox e Opera, e entrou como parte da padronização para futuras tecnologias.

Como você, leitor, já pode deduzir, insere um arquivo de som em uma página. Assim como a tag <video>, dispensa recursos adicionais. Confira aqui seus principais atributos.

Enquanto alguns navegadores já se encontram dez passos a frente, fornecendo suporte completo a toda e qualquer tag do HTML5, outros ainda estão caminhando a passos curtos e parando para um cafezinho. Por enquanto, o que nos resta fazer, é aguardar o suporte completo e torcer para que em breve todos estejamos desfrutando dos benefícios desta nova linguagem!

Um grande abraço e até o próximo post! ;)

Web design – Preview do novo site da GET

12-01-2010

O ano começou corrido. Estamos trabalhando incessantemente em vários projetos novos, além das manutenções em nossos clientes fixos! Um de nossos clientes de longa data, a GET (Global Energy and Telecom) vai ganhar uma nova cara em breve, e a repaginada é apenas uma das “atrações” do perfil web da GET. Quer ver como está ficando?

Preview do site da GET. Lorem ipsum... :)

A ER-BR também ganhará um site novo, seguindo os moldes do site de seu principal produto, o Purifilt. A empresa está lançando uma série de geradores de energia a gás de última geração, e o foco do projeto concentrará todos os itens necessários para a divulgação dos benefícios dos produtos.

Por enquanto, é isso! Em breve, muito mais novidades. Estamos trabalhando em uma apresentação institucional excepcional para um de nossos clientes, e logo logo colocaremos mais detalhes aqui ;)

Lembramos que todas as telas publicadas aqui também estão em nosso Flickr. Você pode conferir através do ícone Galeria de Fotos da barra na base da janela do seu navegador!

Um grande abraço e até o próximo alô! :D

Construindo páginas de entrada (landing pages) para o Google AdWords

07-01-2010

Todos sabemos a importância de construir boas páginas de entrada em um site, e isso já é consenso mundial entre profissionais desde que a web é web. Entretanto, quando o assunto envolve cliques do AdWords, essa importância tende a ganhar um peso ainda maior. Afinal, há dinheiro envolvido, e as conversão do clique em venda depende unicamente da perfeita integração entre o seu anúncio e o que o usuário irá encontrar se decidir clicar nele.

Preparamos algumas dicas para auxiliar o designer a otimizar suas páginas de entrada para os anúncios do AdWords, ou ainda ajudar o dono do site a identificar problemas no design (e descobrir porque as vendas não estão acontecendo…). Lembramos, aqui, que “página de entrada” (landing page) é onde o clique no anúncio nos leva, podendo ser a página inicial do site ou outra preparada exclusivamente para a campanha.

1. Aprenda com quem entende.

Otimização de páginas de entrada é um ramo que possui um alcance muito maior do que você possa imaginar. Existem empresas especializadas apenas em otimizar páginas de entrada, e centenas de artigos e livros que tratam do tema. Portanto, uma boa dica é conferir o que as “vozes da sabedoria” tem a dizer sobre o assunto.

2. Observe sua concorrência.

Observar seus concorrentes diretos pode ser uma boa pista para determinar qual a melhor forma de abordagem para a sua página de entrada.

3. Faça testes.

É impossível algo dar 100% sem testes (claro, sempre há a sorte…). Testar veiculação de mídias na web é absurdamente barato, e você deve se utilizar dessa vantagem e outros recursos para verificar qual o melhor caminho a ser seguido. Nesta parte, sugerimos a boa e velha Ferramenta de Otimização de Sites do Google. Lá, você poderá testar diversas versões de diferentes páginas de entrada e ver qual delas é mais eficiente.

4. Construa designs para o comportamento da maioria dos usuários.

Tenha em mente que a maior parte das pessoas não lê sites, a não ser em casos específicos (estudo e pesquisa). Um comprador, por exemplo, no máximo “escaneia” a página em busca do que deseja; se houver algo similar ao que ele busca, então ele dedicará um pouco mais de atenção ao restante do conteúdo. Construa páginas de entrada que cativem o seu público-alvo ainda nos primeiros segundos. Montes de textos não vão ajudar muito nesse caso.

5.  Foque no cabeçalho, pois é lá que as atenções se concentram.

O cabeçalho de uma página é o seu local mais chamativo. Utilize-o como ponto-chave para as suas informações mais importantes, e foque nele para conquistar as suas conversões.

6. Venda o que o seu anúncio promete.

Uma receita para o fracasso é criar anúncios com keywords que nada tenham a ver com o seu site. Seja objetivo. Trazer visitantes para o seu site, quando eles na verdade procuram por algo totalmente diferente, será decepcionante para você, e não tanto para eles. Afinal, em alguns segundos eles esquecerão o que viram, e você terá perdido o dinheiro do clique. Anúncios objetivos e páginas de entrada de acordo garantem o clique e a conversão do público-alvo de interesse.

Por enquanto é isso! Esperamos que aproveitem estas dicas básicas. Apreciamos comentários, também ;)

Até o próximo post!

E-commerce: Pet Shop – Loja Virtual da Agência!

05-01-2010

Tudo bem que é apenas um protótipo… mas estamos quase finalizando a loja modelo da Agência, conforme comentamos em um post anterior. Trata-se de um pet shop virtual, com público-alvo definido, donos de animais de estimação diversos (cães, gatos, lagartos e tartarugas, roedores, pássaros e peixes) de classes A e B. Hoje, publicaremos um preview da página inicial da loja, projeto interno que há muito tentamos implementar, e que em breve se tornará realidade! Lembramos, claro, que a loja não funcionará de verdade, trata-se apenas de uma demonstração de nosso sistema!

Confira a imagem abaixo, e clique se desejar ver em tamanho real:

Aguarde para mais novidades sobre este projeto em breve :)

Um grande abraço e até o próximo post!