SEO para Front-End

SEO para Front-End

Olá leitores da Agência Mestre,

No último final de semana estive no FrontIn Sampa, um evento voltado a front-ends, onde palestrei sobre SEO, oferecendo dicas específicas para os profissionais da área. Os slides da palestra você confere agora e os comentários sobre o conteúdo estão logo após os slides. Espero que gostem!

Vídeo da Palestra

Slides da Palestra

Na oportunidade, lancei 10 dicas principais, as quais qualquer profissional front-end deva conhecer, para assim melhorar os seus projetos profissionais e pessoais. Vamos lá?

Webmaster Tools

O Google Webmaster Tools é uma plataforma do Google criada para ajudar os webmasters a encontrarem erros e problemas em seus sites. Já o Bing, que é da Microsoft, também possui a sua plataforma de ajuda a webmasters.

Títulos

Ainda que pareça uma dica muito básica, é fundamental relembrar que os títulos das páginas devam ser descritivos e que eles existam. Tanto o Webmaster Tools do Google, quanto do Bing, lhe ajudam na tarefa de identificar títulos ruins ou páginas sem títulos. Vale a pena conferir as dicas presentes neste artigo sobre títulos.

Imagens

É importante você saber que o Google, assim como nós humanos, adora imagens! Como profissional da área, lembre-se de que suas imagens devam ter nomes amigáveis, possuir sempre o atributo ALT e sejam sempre incluídas com contexto. Vale conferir este guia super interessante sobre imagens e SEO que temos aqui na Agência Mestre.

URLs

Para URLs, o que vale lembrar é que o Google as usa para entender sobre o que se trata um documento na Internet. Por conta disto, quanto mais amigável é a sua URL, melhor as suas chances de aparecer bem posicionado nos resultados de busca. Este guia que temos aqui na Agência Mestre trata sobre todos os aspectos de otimização de URLs para SEO.

Tempo de Carregamento

Desde 2010 o Google adicionou o tempo de carregamento de uma página como fator de rankeamento e por isto devemos nos preocupar com o que fornecemos aos usuários. É extremamente recomendável que você compacte os seus arquivos CSS, Javascript e quando possível, habilite a compactação gZip do seu servidor. Tudo isto contribui para que o seu site carregue mais rapidamente.

Em outra frente, recomendamos o uso da ferramenta PageSpeed e WebPageTest para avaliarem o desempenho das suas páginas e, com as sugestões, você poderá melhorar diversos elementos presentes em cada página.

Rich Snippets

Em 2009 o Google anunciou suporte aos microdados para enriquecerem os resultados de busca. É altamente recomendado que todos os profissionais de front-end saibam quais os padrões adotados pelo Google assim como conhecerem a ferramenta oficial do Google para testes de rich snippets.

Rel Author

As famosas “carinhas” que aparecem no Google tem um grande sentido. Para o usuário, é uma identificação com o autor da matéria. Para o Google é uma atribuição de quem realmente escreveu aquela matéria. Tudo isto culmina em aumentos de até 30% neste tipo de resultado rico. Aqui mesmo na Agência Mestre você encontra um artigo explicando detalhadamente como implementar o Rel Author.

Sitemap.XML

Outro padrão adotado pelos mecanismos de busca é o chamado Sitemap.XML. Ele é um arquivo XML que contém uma listagem de todas, ou ao menos das principais, URLs do seu site. Você encontra um guia sobre Sitemap.XML aqui mesmo na Agência Mestre.

AJAX

O Ajax é uma tecnologia sensacional que vem ajudando diversos sites serem mais interessantes aos usuários. Apesar disto, o Google tem sérios problemas em ler as requisições deste tipo de desenvolvimento. Aqui mesmo na Agência Mestre temos um guia de como tornar o Ajax indexável ao Google e vale a pena você conferir mais detalhes.

Flash

A dica final é com relação ao Flash. Apesar de ser uma tecnologia sensacional, o Flash é uma “caixa preta” e o Google consegue extrair poucas informações deste tipo de arquivo. Conversamos há tempos aqui no blog da Agência Mestre sobre a criação ou não de sites em Flash e continuamos com a mesma recomendação: utilize Flash onde realmente é necessário. Sempre que puder evite criar um site completo utilizando Flash pois o Google não irá extrair muito bem a informação.

Receba Novidades

Insira seu email para receber novidades e dicas exclusivas da Agência Mestre!
Divulgue este artigo

17 Comentários para “SEO para Front-End”

  1. FrontInSampa

    Valeu, ótima palestra!
    Como conversamos… ano que vem será diferente e espero contar com vc novamente brother!
    []´s
    Elvis / Deivid

    Responder
  2. Maurício Silva Teixeira de Nobrega

    Como sempre, ótima apresentação e conteúdo de primeira.

    Responder
  3. Diego Brocanelli

    Ótimo post para desenvolvedores boas dicas, devemos sim ao iniciar o desenvolvimento de um site ou projeto web temos que pensar na sua usabilidade e SEO para colhermos os frutos no futuro.
    Mas sinto resistência por parte de clientes em abandonar alguns conceitos de web antiquados, mas claro que esse é o nosso trabalho em mostrar os melhores métodos e modos de se ter um web site de ótima qualidade.

    Parabéns Fabio pelo artigo e sua contribuição ao mercado de SEO!

    Responder
    • Fábio Ricotta

      Oi Diego,

      Acho que cabe a nós educarmos os clientes e insistir em formas melhores de se produzir material para a web. Aos poucos os clientes vão aderir aos novos modelos. Não podemos deixar a peteca cair nunca.

      Um abraço!

      Responder
  4. Lucas Peperaio

    Olá Fábio, excelente palestra. Acompanhei ela pelo slideshare, e conheci algumas coisas novas como o “rel=’author” que eu não conhecia. Obrigado por disponibilizar, estou usando em meu Blog.

    Responder
  5. Matheus Bedoni

    olá, Fabio!
    partindo do pressuposto que todo projeto deve atender desktop e mobile…. O que vc recomenda para a otimização do front end? O responsive web design ou utilizar redirecionamento e desenvolver um página para cada dispositivo?

    abração!

    Responder
    • Fábio Ricotta

      Olá Matheus,

      Aí é mais opção da empresa do que SEO mesmo. Eu normalmente indico que o responsive design deva ser utilizado para facilitar o uso entre desktop e tablets. Já o mobile deve ser tratado, quando possível, com uma versão própria.

      Nem sempre conseguimos realizar isto, mas na minha cabeça é o melhor a ser seguido.

      Um abraço!

      Responder
  6. Gustavo

    Estou aprendendo sobre SEO e gostei muito dos slides, muito bem explicado, aprendi muita coisa. Muito obrigado Fabio Ricotta.

    Responder
  7. Marco Dantas

    Cara, comecei a fazer um site novo e resolvi deixá-lo bem estruturado para a questão da optimização nos resultados de busca.
    Meu domínio é hospedagemwebsites . com. Tem 60 mil pesquisar no Google por mês no Brasil.

    Você pode me dar alguma dica referente a sites que já tem as palavras chave no próprio domínio?
    Devo usar várias vezes o termo da descrição, nas keywords, no conteúdo?

    Um grande abraço!

    Responder
  8. Alessandro Ramos

    Ótimas dicas Fabio. Iniciei um blog a pouco tempo e aplico algumas técnicas descritas. Mais sei que para ter sucesso e obter um bom posicionamento nos mecanismos de busca tenho que me aprofundar cada vez mais em (SEO), por isso não deixarei de visitar esse blog que conta com muita qualidade e escritores capacitados como você.
    Abracos!!!

    Responder
  9. Marcélio de Olivera

    Muito boa essa introdução ao SEO Fábio meus parabéns!!!

    Algumas destas técnicas todo Front-end deve estar usando, coisas que a gente aprende no dia a dia, mas eu não tinha visto uma apresentação que falasse tudo de maneira sequencial e com informações atualizadas de escrita leve, apenas com títulos e imagens em cada apresentação, assim a nossa leitura não fica cansativa. Valeu abraço!!!

    Responder

Deixar um comentário

  • (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>