para front-end - Tópicos essenciais

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/

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/

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

User-agent: *
Disallow: /search
Allow: /search/about
Noindex: /search
Sitemap: https://www.google.com/sitemap.xml
Estrutura

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

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/

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

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

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

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

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

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

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

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

• 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

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/

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

Obrigado
gabrielnege.com.br
contato@gabrielnege.com.br
linkedin.com/in/negegabriel

para front-end - Tópicos essenciais

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à para front-end - Tópicos essenciais

Similaire à para front-end - Tópicos essenciais (20)

para front-end - Tópicos essenciais