seo para font-end
TRANSCRIPT
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 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/
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” 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/
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/
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 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
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
<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
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/
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
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 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
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
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 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
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/
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
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
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
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 guestposting (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
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
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
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
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
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
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
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
• 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
“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
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
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 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/
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/
Exemplos
Exemplos
Exemplos
Sitelinks Search Box
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>
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>
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
<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
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
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
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
