Olá pessoal de SEO! Em junho/2017, palestrei no 3º Meetup Front-End SP que aconteceu no escritório da Sprinklr em São Paulo. Profissional front-end, confira conteúdo apresentado!
SEO – Search Engine Optimization
A sigla SEO representa otimização para os resultados orgânicos – ou seja, gratuitos – do Google, que não se posicionam a partir de pagamento, mas através de técnicas que envolvem tanto conhecimento de TI quanto questões de conteúdo, marketing e usabilidade para atender as necessidades do usuário e as recomendações para webmasters do Google.
Os resultados orgânicos da SERP – Search Engine Results Page – não são apenas resultados em texto – não podemos esquecer dos resultados em vídeo, imagens e locais para endereços físicos que são também exibidos nos resultados gratuitos.
Lembrando que os resultados locais necessitam de cadastro no serviços Google Meu Negócio. Se você deseja otimizar endereços físicos no Google, confira os artigos abaixo:
O universo de SEO vai muito além do conteúdo abaixo, o intuito foi expor na palestra recomendações mínimas para profissionais front-end.
As 3 Visões de SEO e Palavras-Chave
Ao estudar e pesquisar sobre palavras-chave que geram ou irão gerar tráfego SEO para o seu site, devemos sempre lembrar das 3 visões de SEO:
- A nossa visão técnica/profissional
- A visão do usuário/cliente
- A visão do Google
E isso é importante principalmente para sites que atraem tráfego de todo Brasil – cada região, estado podem ter termos próprios, gírias e maneiras diferentes de pesquisar para um mesmo produto, serviço ou dúvida.
Cito nos exemplos acima o caso de um produto que eu, natural do interior de São Paulo, sempre chamei de velotrol. Algumas pessoas de São Paulo capital me afirmaram que não, esse produto se chama triciclo. Mas qual é o termo ideal? Há um termo “certo”?
Ao consultar volume de buscas na Ferramenta de Palavras-Chave do Google Adwords (visão do usuário), vemos que triciclo possui mais buscas do que velotrol. Mas quando buscamos no Google por triciclo…. vemos resultados para motos de 3 rodas! É isso que comercializamos e desejamos atrair tráfego? Não! Por isso é preciso conferir se de fato corresponde ao que o Google retornará nos resultados. Chegamos à conclusão de que triciclo infantil correspondia no Google ao produto que desejamos divulgar e possui mais buscas do que velotrol, termo que aparecerá de forma secundária na descrição do produto, de forma a atender a procura de usuários de regiões que buscam desta maneira.
Outra situação acontece com o termo jaguar: lembrando que os resultados mudam conforme histórico do usuário, quem tem hábito de pesquisar por carro verá certamente resultados relacionados ao carro Jaguar, mas quem pesquisa animais verá o animal jaguar.
Outro caso muito interessante foi quando pesquisei por manga – meu intuito era ver a fruta, mas os resultados predominaram no tradicional desenho japonês. Eu não costumo ver e pesquisar por esse tipo de desenho, o que de fato me surpreendeu e mostrou que, no geral da procura dos usuários, o mangá japonês é predominante nas buscas, quase que anulando os resultados pela fruta. O intuito do Google é suprir o que o usuário quer, portanto exibir mangá diretamente tem grandes chances de atender a maioria das pesquisas, mesmo que não haja histórico de busca por mangá. Se você tem um site que citará a fruta manga, todo o contexto do conteúdo deverá remeter e ter o termo fruta associado.
Buscas de Cauda Longa
O termo cauda longa é proveniente da Estatística, relacionado ao formato da curva de Pareto. Porém, a expressão cauda longa foi popularizada por Chris Anderson ao expor em seu livro a importância dos comércios de nicho na Internet.
Trazendo para o universo de SEO, as pesquisas de cauda de longa representam os termos de busca mais específicos – os “termos de cabeça” são as palavras-chave mais sucintas que possuem muita busca, portanto alta concorrência. Os “termos cauda longa” possuem menor concorrência e menor busca, porém, somando todos os termos de cauda longa, o volume se torna tão relevante quanto os termos de cabeça, além de serem mais fáceis de se alcançar resultados em SEO em razão da menor concorrência.
O que todo profissional Front-End DEVE saber e FAZER
As estratégias de SEO são divididas em SEO On-Page/On-Site e SEO Off-Page. Isso significa que as atividades de SEO On-Page devem ser conhecidas por quem atua com Front-End, seja para colaborar com o trabalho do profissional de SEO ou para quem está envolvido com ambas as áreas.
Conteúdo
Seja o conteúdo o rei ou não, o fato é que o conteúdo ainda tem suma importância para SEO. Confira abaixo alguns cuidados a seguir:
- Fale a língua do usuário: use as palavras-chave certas
- Utilize sinônimos para abranger termos de busca secundários
- Cuidado com excesso de pronomes que eliminam palavras-chave (melhor usar sinônimos do que “ele”, “ela” a todo tempo para referenciar a palavra-chave principal)
- Explore termos de cauda longa
- Não copie texto de outros sites – elabore seu próprio conteúdo
- Cuidado com inchaço de palavras-chave
Foco no usuário! A leitura do seu texto soa coerente e natural? Agrega valor ao usuário?
URL amigável
Use URLs amigáveis e estáticas, não muito longas e com uso de palavras-chave. Exemplos:
- http://g1.globo.com/pop-arte/noticia/beyonce-da-a-luz-seus-filhos-gemeos.ghtml
- https://www.submarino.com.br/categoria/acessorios-de-informatica/peca/placa-mae
Veja abaixo um exemplo de URL dinâmica, em que o conteúdo da página muda conforme parâmetro. A URL não possui palavras-chave, portanto nada diz sobre o conteúdo que cada página contém:
- http://www.siteexemplo.com.br/produtos.aspx?ct=63
- http://www.siteexemplo.com.br/detproduto.aspx?id=436
Observação: mudará a URL preservando o conteúdo? Utilize redirecionamento 301 no servidor para não perder seu posicionamento no Google!
Tags H
Organize e estruture seu conteúdo em tags H. Confira neste próprio artigo através da visualização de código-fonte como está estruturado.
Uma das perguntas da palestra foi sobre uso de Tag H1 no logo, adotado por alguns sites. Não recomendo essa prática pois o H1 estará repetido em todas as páginas – essa tag é única e deverá aparecer apenas 1x na página. Se a tag H1 estiver no logo, como ficará o título do conteúdo? Inclusive, o conteúdo da tag H1 em texto com palavra-chave é mais relevante do que inserir em imagem.
Meta-Tags Title e Description
Sempre preencha meta-tags Title e Description dentro do cabeçalho <head></head> da página com palavras-chave e termos de cauda longa. É o conteúdo dessas tags que será exibido nos resultados orgânicos do Google. A descrição do site poderá ser personalizada na SERP pelo Google para atender à busca do usuário, mas no geral o conteúdo informado através da meta-tag é utilizado.
<title>SEO: Seus sites estão no Google? | SEO News</title> <meta name="description" content="Palestra de SEO apresentada no 3º Meetup Front-End SP na Sprinklr São Paulo. Recomendações front-end para manter seu site nos resultados orgânicos do Google."/>
- Não deixe em branco
- Não use títulos e descrições repetidas
- Insira a palavra-chave principal no começo do título e da descrição
Links para páginas internas e externas
Os links são muito importantes, inserir links para páginas internas de seu site ajudam o Google a descobrir páginas novas para indexar, principalmente links de cabeçalho, como links em menu.
Observe neste próprio artigo que recomendo leituras complementares para outros artigos do site SEO News. Porém, é importante que o texto do link diga ao Googlebot do que se trata a página indicada no link – evite links em termos que nada representam, como “clique aqui” ou “veja mais”, procure sempre inserir o link em texto com palavra chave que faça sentido, mas seguindo a recomendação de conteúdo: sem exageros.
Ao inserir links para conteúdos externos, opte pelo uso do atributo rel=nofollow na tag A do html. Se houver a boa intenção de recomendar e fortalecer um conteúdo de algum site ou blog, não use o atributo rel=nofollow, pois assim o Google irá seguir o link para indexação e considerá a relevância de seu site para calcular a relevância do site destino do link. E para links externos vale a dica acima: link sempre em texto que faça sentido ao Googlebot.
Otimização de imagens
Além do Google Imagens, as imagens também são exibidas nas páginas de resultados orgânicos da pesquisa Web do Google. Portanto, confira algumas recomendações básicas e fáceis para otimizar as imagens de seu site:
- Otimize as imagens para Web: tamanho em bytes reduzido sem perder a qualidade
- Utilize palavras-chave no nome do arquivo separadas por hífen
- Preencha sempre o atributo alt da tag <img> descrevendo a imagem utilizando palavras-chave
- Use atributos width e height na tag <img> para otimizar renderização
<img src=“casal-de-namorados.jpg” alt=“Casal de Namorados” width=“400” height=“200”>
Dados estruturados e Rich Snippets
Insira semântica ao seu código! Ao informar do que se trata cada elemento da página, os resultados orgânicos de pesquisa Google poderão ser personalizados, pois o Googlebot lerá cada marcação e terá conhecimendo do que se tratam as informações. Embora o Google diz não ser um fator de ranking, os resultados mais destacados na SERP tendem a chamar mais a atenção do usuário para o clique.
A marcação atual de dados estruturados recomendada é o padrão Schema, disponível no site schema.org. Você pode dar mais semântica ao seu html através de marcação por microdados (microdata), RDFa ou JSON-LD (Json Linked Data). As marcações por Microdados e RDFa são inseridas diretamente no html – se preferir não editar diretamente no código da página, opte pelo formato JSON-LD.
Você poderá adotar mais de uma marcação de dados estruturados em sua página, como por exemplo marcação de produtos e ofertas de um e-Commerce ao mesmo tempo que o endereço no rodapé também tem marcação de local (que, inclusive, é um fator para posicionamento local, confira o artigo: Local SEO: Schema Local Business e NAP Consistency).
Mobile
O Google quer oferecer o melhor para os usuários, portanto ter um site para mobile é fundamental para atender as pesquisas em smartphones. Abaixo, recomendações básicas para garantir seu sites nos resultados orgânicos de pesquisa em dispositivos móveis, seja para sites responsivos (aqueles que adaptam o layout a qualquer dispositivo) ou seja para sites que possuem versão desktop e versão mobile.
Design responsivo
Insira dentro de <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dois sites – um para desktop e outro para mobile
Insira dentro de <head></head> no site desktop:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.seusite.com.br">
Insira dentro de <head></head> no site mobile:
<link rel="canonical" href="http://www.meusite.com.br">
Deeplink para App
Se você possui aplicativo, é possível abrir o app através da pesquisa Google. Para isso, necessário informar ao Google o deeplink do app correspondente à página de seu site. Para saber qual deeplink, consulte o desenvolvedor do aplicativo. Insira no <head></head> da página:
<link rel="alternate" href="android-app://seusite.android/page"> <link rel="alternate" href="ios-app://3748209831/seusite/page">
Porém, importante deixar claro que a questão mobile para SEO vai além das recomendações mínimas acima. Saiba mais sobre SEO para mobile nos artigos abaixo:
- Mobile: Quem Dita as Regras é o Google
- Mobile-First Indexing: Indexação Mobile é Prioridade
- 10/Janeiro/2017: Intersticiais Intrusivos como Fator Negativo
Google Web Light
O recurso Google Web Light começou em 2015 com finalidade de otimizar sites em conexão lenta a partir do tráfego proveniente das pesquisas Google realizadas no Google Chrome. O problema é que a otimização envolve não carregar alguns recursos da página, como código javascript, eliminando ações e podendo comprometer a navegação do usuário até prejudicar uma venda de loja virtual.
Saiba mais detalhes e como eliminar essa otimização através dos artigos abaixo:
AJAX
Cuidado com conteúdos alimentados dinamicamente – se, ao consultar o código-fonte no navegador, você não conseguir visualizar alguns conteúdos (ex.: conteúdo das meta-tags), o Googlebot também poderá não vê-los. O Google recomendava uso da tag abaixo dentro de <head></head> da página:
<meta name="fragment" content="!">
Mesmo adotando as recomendações do Google, eu tive problemas em 2015 com essa questão. Há alguns códigos prontos de javascript que tratam talvez de forma mais efetiva e garantida – você profissional front-end pesquise por SEO.js e Prerender.js – não testei esses códigos para afirmar que resolvem o problema de AJAX para SEO, mas se você tem esse problema descrito acima, não deixe de pesquisar em fóruns de javascript sobre esses códigos.
Porém, essa recomendação foi substituída em outubro de 2015 por outra recomendação: carregamento progressivo. Saiba mais na documentação oficial sobre AJAX Crawling.
PWA – Progressive Web App
A sensação atual em desenvolvimento Web são os PWA – Progressive Web App. Já se fala em SEO para PWA, mas na verdade as recomendações são praticamente as mesmas para um site não PWA:
- HTTPS
- Design responsivo
- Tag canonical para evitar conteúdo duplicado
- Robots.txt liberando rastreamento e indexação pelos bots do Google
- Carregamento rápido
AMP – Accelerated Mobile Pages
Os resultados AMP são aqueles que destacam o resultado em box nas pesquisas em dispositivos móveis, que pode conter imagem ou não, e o conteúdo é carregado como uma “camada” sobre os resultados Google, numa URL Google – não do site – sendo esse conteúdo mais leve para carregar em em conexão mobile.
Para você que deseja ter seus resultados orgânicos do Google em formato AMP, é necessário criar uma outra página mais enxuta seguindo as recomendações do Projeto AMP. Depois, assim como fazemos com deeplink de app, é preciso indicar ao Google qual versão AMP correspondente da página.
Insira dentro do cabeçalho <head></head> da página AMP:
<link rel="canonical" href="https://www.site.com.br/pagina">
Insira dentro do cabeçalho <head></head> da página NÃO AMP:
<link rel="amphtml" href="https://www.site.com.br/amp/pagina">
Google Page Speed
Se o Google quer oferecer a melhor experiência ao usuário, isso significa que ter um site rápido é fundamental, principalmente em buscas mobile. Confira o quanto seu site está otimizado através da ferramenta Google Page Speed e quais etapas ainda precisam ser implementadas para garantir pontuação acima de 85 pontos (resultado considerado bom).
Além disso, quanto mais rápido for seu site, maior será a taxa de rastreamento do Googlebot, descobrindo páginas novas para indexar nos resultados orgânicos do Google.
Ferramentas Úteis para SEO
Abaixo, algumas ferrramentas fundamentais e outras complementares para o trabalho de SEO:
- Google Search Console – fundamental!
- Google Analytics – fundamental!
- Google Meu Negócio – apenas para resultados locais de estabelecimentos
- Google Page Speed
- Planejador de Palavras-Chave do Google Adwords
- SEM Rush
- Ahrefs
- Screaming Frog
- Majestic SEO
- SEO Mofo
Também confira Referências de Aprendizado de SEO caso queira se aprofundar mais em SEO.
Black Hat x Black White
Black Hat são técnicas que vão contra as recomendações do Google associadas a outras ações que geram posicionamento rápido nos resultados orgânicos, mas após serem detectados, serão penalizados pelo Google e removidos do índice de pesquisas.
Sou totalmente contra Black Hat, os resultados são rápidos e a queda também. Seguir as recomendações, ou seja – ser White Hat – pode levar mais tempo para dar resultados, mas gera vida longa no Google. Jogue limpo! Seja correto e duradouro nos resultados orgânicos do Google! #WhiteHat
Mensagem Final
- Usabilidade importa: retenção do usuário
- Resultados de SEO levam tempo – semanas, meses para começar a ter resultado
- É impossível garantir o 1º lugar nos resultados orgânicos
- Ao testar, utilize sempre guia anônima – o Google considera seu histórico ao compor os resultados
- Os resultados variam conforme localização e histórico de pesquisas do usuário
- Sinais sociais são importantes, não deixe de divulgar seu site em mídias sociais
- SEO é mais do que o recomendado nesta página – confira mais nos outros artigos do blog
Conclusão
Espero que tenham gostado da palestra! 🙂
Créditos de imagens
http://www.midiatismo.com.br/wp-content/uploads/cauda-longa-seo.png
https://1.bp.blogspot.com/-LsEkbOqW0q8/VBxv9XT4kaI/AAAAAAAAAhE/cP_RoSp3yjM/s1600/more-app-engagement.png
http://altsolutions.es/wp-content/uploads/2017/03/black-hat-vs-white-hat-seo.png