Para front-end
Sobre mim
Gabriel Nege
SEO é a sigla para "Search Engine Optimization", que
significa "otimização para mecanismos de busca", ou
otimização de sit...
SEO dá resultado?
gabrielnege.com.br/trabalhos
/seo/trabalho-seo-delivery-
em-sorocaba
Antes do Google
Leitura recomendada:
conversion.com.br/blog/o-dia-em-que-o-dono-da-amazon-fez-seo/
Antes do Google
Surge o Google!
Primeira SERP
A evolução
Conceitos
básicos
A SERP
O título ou <title>, como é mais falado e conhecido no meio da programação, é
considerado no SEO um dos fatores “on Page” ...
A função da meta description é controlar o texto de descrição
que irá aparecer nas SERP (páginas de resultados de busca).
...
Como validar isso?
No mundo do gerenciamento de conteúdo e sistemas de compra on-
line, é comum que o mesmo conteúdo seja acessado por meio d...
Muitos websites oferecem a usuários de todo o mundo
conteúdo traduzido ou segmentado a usuários em uma
determinada região....
<html lang="pt-br">
<head>
<title>Google Developers Group (GDG) de São Paulo</title>
<meta name="description" content="O G...
Meta keywords
As meta keywords surgem num contexto em que os algoritmos de busca ainda
engatinhavam e não eram suficientem...
Um robots.txt é um arquivo na raiz do seu site. O arquivo
indica as partes do site que você não deseja que sejam
acessadas...
User-agent: *
Disallow: /search
Allow: /search/about
Noindex: /search
Sitemap: https://www.google.com/sitemap.xml
Estrutura
Testar robots.txt
Para um processamento e uma indexação ideais, sempre
permita que o Googlebot acesse o JavaScript, o CSS e os
arquivos de i...
Outra maneira de se conseguir algo semelhante é através de
Meta Tags, colocadas estrategicamente nos cabeçalhos de
páginas...
Black Hat vs White hat
Dica sobre black hat
O lado negro
mancha tudo.
Impossível de
ver o futuro é.
Algoritmos do Google
Leitura recomendada: https://moz.com/google-algorithm-change
Penaliza sites com conteúdo de baixa qualidade, para
não ser penaliza siga esses passos:
• Não copie conteúdo de outros si...
O Google Penguin focou no desencorajamento dos links
spam, ou seja, páginas construídas para privilegiar um
determinado do...
Impactos das atualizações
Se você teve uma reação
assim....
Recomendamos que você preste muita atenção às Diretrizes de
qualidade abaixo, que definem algumas práticas ilegais que
pod...
o Texto traduzido por uma ferramenta automática sem revisão humana antes
da publicação
o Texto gerado por processos automa...
o Comprar ou vender links que passam o PageRank. Isso inclui trocar dinheiro
por links, ou postagens com links, trocar ben...
o Anúncios de texto que passam o PageRank
o Publieditoriais ou publicidade nativa em que o pagamento é
recebido por artigo...
O "nofollow" oferece uma maneira para que os webmasters
digam aos mecanismos de pesquisa "Não siga links desta
página" ou ...
Impedir que os mecanismos de pesquisa sigam TODOS
os links em uma determinada página:
<head>
...
<meta name="robots" conte...
Impedir que os mecanismos de pesquisa sigam um
determinado link:
<p>O <a href="http://gabrielnege.com.br/"
rel="nofollow">...
Redirecionar é o ato de enviar um visitante a um URL diferente do que foi
solicitado inicialmente. Existem várias boas raz...
Ocultar texto ou links em seu conteúdo para manipular as classificações de
pesquisa do Google pode ser visto como enganoso...
Doorways são sites ou páginas criadas para melhorar a classificação em consultas de
pesquisa específicas. Elas são inconve...
• Sites que copiam e republicam conteúdo de outros sites sem adicionar
conteúdo original ou valor
• Sites que copiam o con...
“Excesso de palavras-chave” refere-se à prática de encher uma página
da Web com palavras-chave ou números na tentativa de ...
o Apresentar para os mecanismos de pesquisa uma página
em HTML com texto e, ao mesmo tempo, exibi-la para os
usuários como...
SEO sem alterar o site
Rich Snippets
Os Rich Snippets são informações inseridas na estrutura
HTML. O objetivo dessas informações é organizar e classificar
o co...
Produto - Informação sobre um produto, incluindo preço, disponibilidade e avaliações.
Receita - Receitas que podem ser exi...
Exemplos
Exemplos
Exemplos
Sitelinks Search Box
Marcações por Json
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name" : "Yo...
Marcações por Json
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Organization",
"name...
Breadcrumb - tradicional
<ol>
<li>
<a href="https://example.com/dresses">Dresses</a>
</li>
<li>
<a href="https://example.c...
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schem...
Produto
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" alt="A Dell Ult...
Principais histórias com o AMP
Websites compatíveis com dispositivos móveis
Criar páginas 404 úteis
Otimização de imagens
...
https://www.facebook.com/groups/seobr/
http://www.conversion.com.br/
http://www.agenciamestre.com/
http://searchengineland...
Obrigado
gabrielnege.com.br
contato@gabrielnege.com.br
linkedin.com/in/negegabriel
Próximos SlideShares
Carregando em…5
×

SEO para font-end

234 visualizações

Publicada em

Apresentação sobre SEO para fron-end no GDG SP no dia 09/05/2016, apresentação pode ser assistida pelo link: https://www.youtube.com/watch?v=L10tfs35So0&feature=youtu.be

Publicada em: Marketing
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
234
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

SEO para font-end

  1. 1. Para front-end
  2. 2. Sobre mim Gabriel Nege
  3. 3. SEO é a sigla para "Search Engine Optimization", que significa "otimização para mecanismos de busca", ou otimização de sites. SEO é o conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca. O que é SEO? Fonte: http://www.significados.com.br/seo/
  4. 4. SEO dá resultado? gabrielnege.com.br/trabalhos /seo/trabalho-seo-delivery- em-sorocaba
  5. 5. Antes do Google Leitura recomendada: conversion.com.br/blog/o-dia-em-que-o-dono-da-amazon-fez-seo/
  6. 6. Antes do Google
  7. 7. Surge o Google!
  8. 8. Primeira SERP
  9. 9. A evolução
  10. 10. Conceitos básicos
  11. 11. A SERP
  12. 12. O título ou <title>, como é mais falado e conhecido no meio da programação, é considerado no SEO um dos fatores “on Page” mais importantes de qualquer website. Ele se encontra dentro da <head> do HTML e sua edição, quando bem feita para um grupo de palavras ou frases-chaves, pode trazer a otimização que faltava para deixar aquela página nas primeiras posições do Google – para uma palavra-chave importante. Recomendações: o Um title deve ser utilizado em apenas uma página; o O tamanho máximo deve ser por volta de 65 caracteres; o Deve conter a palavra-chave Title Fonte: http://www.conversion.com.br/blog/titulos-no-seo-otimizacao-tamanho-e-dicas/
  13. 13. A função da meta description é controlar o texto de descrição que irá aparecer nas SERP (páginas de resultados de busca). Recomendações: o Ela deve descrever de forma clara o conteúdo da página; o Deve conter por volta de 140 caracteres; o Deve se única; o Deve conter um call-to-action; Descritption Fonte: conversion.com.br/blog/meta-description-otimizacao-e-impactos-em-seo/
  14. 14. Como validar isso?
  15. 15. No mundo do gerenciamento de conteúdo e sistemas de compra on- line, é comum que o mesmo conteúdo seja acessado por meio de vários URLs. Com a distribuição de conteúdo, também é fácil que este seja distribuído para URLs e domínios completamente diferentes. Por exemplo: o https://www.example.com/products?category=dresses&color= green o https://example.com/dresses/cocktail?gclid=ABCD o https://www.example.com/dresses/green/greendress.html Usar URLs canônicos Fonte: https://support.google.com/webmasters/answer/139066?hl=pt-BR
  16. 16. Muitos websites oferecem a usuários de todo o mundo conteúdo traduzido ou segmentado a usuários em uma determinada região. Quando você tem em uma versão mobile, utilize a real alternate para determinar qual a URL desta versão. Rel Alternate
  17. 17. <html lang="pt-br"> <head> <title>Google Developers Group (GDG) de São Paulo</title> <meta name="description" content="O Google Developers Group de São Paulo é um grupo aberto de entusiastas em tecnologias Google. Acesse e conheça os nossos projetos!” /> <link href="http://gdgsp.org/" rel="canonical" > <link rel="alternate" media="only screen and (max-width: 640px)“ href="http://m.gdgsp.org/" > <link rel="alternate" hreflang="en" href="http://en.gdgsp.org/" /> </head> ...... Aplicação
  18. 18. Meta keywords As meta keywords surgem num contexto em que os algoritmos de busca ainda engatinhavam e não eram suficientemente inteligentes para saber identificar quais eram realmente as palavras-chave mais relevantes para aquela página ser encontrada. Por isso, criou-se a solução de oferecer ao webmaster a possibilidade de ele definir como gostaria de ser encontrado. O Google, ignora pois prioriza o que é visível para os usuários. Fonte: http://www.conversion.com.br/blog/meta-keywords-2-bons-motivos-para-nao-usar/
  19. 19. Um robots.txt é um arquivo na raiz do seu site. O arquivo indica as partes do site que você não deseja que sejam acessadas por indexadores de mecanismos de pesquisa. O arquivo usa o Protocolo de Exclusão de Robôs padrão, um pequeno conjunto de comandos que podem ser usados para indicar o acesso ao site por seção e tipos específicos de rastreadores da Web (como rastreadores de dispositivos móveis ou computadores). Robots.txt Fonte: https://support.google.com/webmasters/answer/6062608?hl=pt-BR
  20. 20. User-agent: * Disallow: /search Allow: /search/about Noindex: /search Sitemap: https://www.google.com/sitemap.xml Estrutura
  21. 21. Testar robots.txt
  22. 22. Para um processamento e uma indexação ideais, sempre permita que o Googlebot acesse o JavaScript, o CSS e os arquivos de imagem usados no seu website para que ele possa visualizar o website como um usuário comum. Se o arquivo robots.txt do seu site bloquear o rastreamento desses elementos, o processamento e a indexação do conteúdo feitos por nossos algoritmos serão diretamente prejudicados. Isso pode resultar em classificações inferiores. Não bloqueie CSS e JavaScripts Fonte: https://developers.google.com/webmasters/mobile-sites/mobile- seo/common-mistakes/blocked-resources?hl=pt-br
  23. 23. Outra maneira de se conseguir algo semelhante é através de Meta Tags, colocadas estrategicamente nos cabeçalhos de páginas HTML. <META NAME="ROBOTS" CONTENT="NOINDEX "> Ela é útil quando uma página não deve indexar por uma determinada condição, como por exemplo, uma categoria temporariamente sem itens. Tag noindex
  24. 24. Black Hat vs White hat
  25. 25. Dica sobre black hat O lado negro mancha tudo. Impossível de ver o futuro é.
  26. 26. Algoritmos do Google Leitura recomendada: https://moz.com/google-algorithm-change
  27. 27. Penaliza sites com conteúdo de baixa qualidade, para não ser penaliza siga esses passos: • Não copie conteúdo de outros sites; • Não pratique otimização excessiva; • Não cometa erros de ortografia; • Tenha um conteúdo único e de qualidade! Atualizações: Panda Leia mais em: https://en.wikipedia.org/wiki/Google_Panda
  28. 28. O Google Penguin focou no desencorajamento dos links spam, ou seja, páginas construídas para privilegiar um determinado domínio ao direcionar uma quantidade muito grande de links para o mesmo. Geralmente os links spam são usados de forma comercial. Atualizações: Pinguim Fonte: http://www.estrategiadigital.com.br/blog/posicionamento-de-sites/google-penguin-update-o- que-e-o-que-muda-seo-empresas-internet/
  29. 29. Impactos das atualizações
  30. 30. Se você teve uma reação assim....
  31. 31. Recomendamos que você preste muita atenção às Diretrizes de qualidade abaixo, que definem algumas práticas ilegais que podem levar à remoção completa de um site do índice do Google ou fazer com que um site seja afetado por um algoritmo ou uma ação de spam manual. Se um site é afetado por uma ação de spam, ele não é mais exibido nos resultados de "google.com.br" nem em qualquer site parceiro do Google. Fonte: https://support.google.com/webmasters/answer/35769?hl=pt-BR Diretrizes para webmasters
  32. 32. o Texto traduzido por uma ferramenta automática sem revisão humana antes da publicação o Texto gerado por processos automatizados, como Cadeias de Markov o Texto gerado usando sincronização automatizada ou técnicas de ocultamento o Texto gerado copiando feeds Atom/RSS ou resultados de pesquisa o Agrupamento ou combinação de conteúdos de diferentes páginas da Web sem acréscimo de valor suficiente Conteúdo gerado automaticamente Fonte: https://support.google.com/webmasters/answer/2721306?hl=pt-BR
  33. 33. o Comprar ou vender links que passam o PageRank. Isso inclui trocar dinheiro por links, ou postagens com links, trocar bens ou serviços por links ou enviar um produto "gratuito" a alguém e, em troca, esse alguém escrever a respeito e incluir um link o Fazer muitas trocas de links ("Adicione um link para mim, e eu adiciono um link para você") ou criar páginas de parceiros com o objetivo único de criar links cruzados. o Fazer o marketing de artigos em grande escala ou de campanhas de guest posting (postagem de convidados) com links de texto âncora contendo muitas palavras-chave. o Usar programas ou serviços automatizados a fim de criar links para seu site Esquemas de links Fonte: https://support.google.com/webmasters/answer/66356?hl=pt-BR
  34. 34. o Anúncios de texto que passam o PageRank o Publieditoriais ou publicidade nativa em que o pagamento é recebido por artigos com links que passam o PageRank o Links com texto âncora otimizado em artigos ou comunicados à imprensa distribuídos em outros sites. o Links de baixa qualidade para sites de diretórios ou favoritos o Links distribuídos nos rodapés de vários sites Esquemas de links Fonte: https://support.google.com/webmasters/answer/66356?hl=pt-BR
  35. 35. O "nofollow" oferece uma maneira para que os webmasters digam aos mecanismos de pesquisa "Não siga links desta página" ou "Não siga este link específico". O atributo nofollow é recomendado para os seguintes casos: o Conteúdo não confiável o Links pagos o Priorização de rastreamento Links nofollow Fonte: https://support.google.com/webmasters/answer/96569
  36. 36. Impedir que os mecanismos de pesquisa sigam TODOS os links em uma determinada página: <head> ... <meta name="robots" content="nofollow" /> ... </head> Links nofollow Fonte: https://support.google.com/webmasters/answer/96569
  37. 37. Impedir que os mecanismos de pesquisa sigam um determinado link: <p>O <a href="http://gabrielnege.com.br/" rel="nofollow">Consultor de SEO</a> que escreveu o artigo sobre <a href="/artigos/seo-para-front-end">SEO para front-end</a>....</p> Links nofollow Fonte: https://support.google.com/webmasters/answer/96569
  38. 38. Redirecionar é o ato de enviar um visitante a um URL diferente do que foi solicitado inicialmente. Existem várias boas razões para redirecionar um URL para outro, por exemplo, ao transferir seu site para um novo endereço ou consolidar diversas páginas em uma. o Os mecanismos de pesquisa mostram um tipo de conteúdo, enquanto os usuários são redirecionados para algo totalmente diferente. o Os usuários de computador recebem uma página normal, enquanto os usuários de dispositivos móveis são redirecionados para um domínio de spam completamente diferente. Redirecionamentos não autorizados Fonte: https://support.google.com/webmasters/answer/2721217?hl=pt-BR
  39. 39. Ocultar texto ou links em seu conteúdo para manipular as classificações de pesquisa do Google pode ser visto como enganoso, sendo uma violação das diretrizes para webmasters do Google. O texto (por exemplo, palavras-chave em excesso) pode ser ocultado de diversas formas, incluindo: o Uso de texto com fonte branca em fundo branco o Localização de texto atrás de imagens o Como usar CSS para posicionar texto fora da tela o Configuração do tamanho da fonte para zero o Ocultar um link vinculando apenas um pequeno caractere, por exemplo, um hífen no meio de um parágrafo Texto e links ocultos Fonte: https://support.google.com/webmasters/answer/66353?hl=pt-BR
  40. 40. Doorways são sites ou páginas criadas para melhorar a classificação em consultas de pesquisa específicas. Elas são inconvenientes aos usuários, pois podem levar a várias páginas semelhantes nos resultados de pesquisa, e cada resultado os levará basicamente ao mesmo destino. Elas também podem levar os usuários a páginas intermediárias que não são tão úteis quanto o destino final. Estes são alguns exemplos de doorways: o Ter várias páginas ou muitos nomes de domínio segmentados por regiões ou cidades específicas que direcionam os usuários a uma página o Páginas geradas para direcionar os visitantes à parte utilizável ou relevante dos seus sites o Páginas consideravelmente semelhantes, mais próximas dos resultados de pesquisa do que uma hierarquia claramente definida e navegável Doorways Fonte: https://support.google.com/webmasters/answer/2721311?hl=pt-BR
  41. 41. • Sites que copiam e republicam conteúdo de outros sites sem adicionar conteúdo original ou valor • Sites que copiam o conteúdo de outros sites, fazem pequenas modificações (por exemplo, usando sinônimos ou técnicas automatizadas) e o publicam novamente • Sites que reproduzem feeds de conteúdo de outros sites sem fornecer qualquer tipo de organização ou benefício ao usuário • Sites voltados à incorporação de conteúdo, como vídeos, imagens ou mídias diversas de outros sites sem acrescentar valor significativo para o usuário. Conteúdo copiado Fontes: https://support.google.com/webmasters/answer/2721312?hl=pt-BR
  42. 42. “Excesso de palavras-chave” refere-se à prática de encher uma página da Web com palavras-chave ou números na tentativa de manipular a classificação do site em um resultado de pesquisa do Google. Com frequência, útil, rico em informações e que utilize palavras-chave apropriaessas palavras-chave aparecem em uma lista ou grupo, ou fora de contexto (não como texto natural). Encher páginas com palavras- chave ou números resulta em uma experiência negativa para o usuário e pode prejudicar a classificação do site. O foco deve ser sempre criar um conteúdo das e dentro do contexto. Excesso de palavras-chave Fontes: https://support.google.com/webmasters/answer/66358?hl=pt-BR
  43. 43. o Apresentar para os mecanismos de pesquisa uma página em HTML com texto e, ao mesmo tempo, exibi-la para os usuários como uma página de imagens ou Flash o Inserir texto ou palavras-chave em uma página apenas quando o user-agent, que solicita a página, for um mecanismo de pesquisa, não um usuário que visita o site. Técnicas de cloaking Fonte: https://support.google.com/webmasters/answer/66355?hl=pt-BR
  44. 44. SEO sem alterar o site
  45. 45. Rich Snippets
  46. 46. Os Rich Snippets são informações inseridas na estrutura HTML. O objetivo dessas informações é organizar e classificar o contéudo na web. Com eles podemos dar uma ajudinha aos buscadores na hora de indexar nosso site, dizendo a ele que tipo de conteúdo nossas páginas trazem. O Google (o buscador mais utilizado no mundo), “lê” os rich snippets através de três tipos de marcação: microdados (recomendado), microformats e RDFa. O que são? Fonte: http://imasters.com.br/design-ux/arquitetura-da-informacao/como-usar-rich-snippets/
  47. 47. Produto - Informação sobre um produto, incluindo preço, disponibilidade e avaliações. Receita - Receitas que podem ser exibidos em pesquisas na web. Avaliação – Avaliação de um item, como um restaurante, um filme ou loja. Evento - Um evento organizado, tais como concertos musicais ou festivais de arte, que as pessoas podem participar em um determinado tempo e lugar. SoftwareApplication - Informações sobre um aplicativo de software, incluindo a sua URL, revisão classificações e preço. Vídeo - Um vídeo on-line, incluindo uma descrição e uma miniatura. Notícias - Um artigo de notícias, incluindo título, imagens e informações Principais utilizações Fonte: https://developers.google.com/structured-data/rich-snippets/
  48. 48. Exemplos
  49. 49. Exemplos
  50. 50. Exemplos
  51. 51. Sitelinks Search Box
  52. 52. Marcações por Json <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name" : "Your WebSite Name", "alternateName" : "An alternative name for your WebSite", "url": "https://www.example.com/", "potentialAction": { "@type": "SearchAction", "target": "https://query.example.com/search?q={search_term_string}", "query-input": "required name=search_term_string" } } </script>
  53. 53. Marcações por Json <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "name" : "Exemplo", "url": "http://www.example.com", "logo": "http://www.example.com/images/logo.png", "sameAs" : [ "http://www.facebook.com/your-profile", "http://www.twitter.com/yourProfile", "http://plus.google.com/your_profile" ], "contactPoint" : [{ "@type" : "ContactPoint", "telephone" : "+1-401-555-1212", "contactType" : "customer servisse” }] } </script>
  54. 54. Breadcrumb - tradicional <ol> <li> <a href="https://example.com/dresses">Dresses</a> </li> <li> <a href="https://example.com/dresses/real">Real Dresses</a> </li> </ol> Fonte: https://schema.org/BreadcrumbList
  55. 55. <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/dresses"> <span itemprop="name">Dresses</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/dresses/real"> <span itemprop="name">Real Dresses</span></a> <meta itemprop="position" content="2" /> </li> </ol> Breadcrumb – com marcações Fonte: https://schema.org/BreadcrumbList
  56. 56. Produto <div itemscope itemtype="http://schema.org/Product"> <img itemprop="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor"/> <span itemprop="name">Dell UltraSharp 30" LCD Monitor</span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">87</span> out of <span itemprop="bestRating">100</span> based on <span itemprop="ratingCount">24</span> user ratings </div> <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">$1250</span> to <span itemprop="highPrice">$1495</span> from <span itemprop="offerCount">8</span> sellers Sellers: <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <a itemprop="url" href="save-a-lot-monitors.com/dell-30.html"> Save A Lot Monitors - $1250</a> </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <a itemprop="url" href="jondoe-gadgets.com/dell-30.html"> Jon Doe's Gadgets - $1350</a> </div> </div> ... </div> Fonte: https://schema.org/Product
  57. 57. Principais histórias com o AMP Websites compatíveis com dispositivos móveis Criar páginas 404 úteis Otimização de imagens Leia também
  58. 58. https://www.facebook.com/groups/seobr/ http://www.conversion.com.br/ http://www.agenciamestre.com/ http://searchengineland.com/ https://moz.com/blog Para saber mais sobre SEO
  59. 59. Obrigado gabrielnege.com.br contato@gabrielnege.com.br linkedin.com/in/negegabriel

×