seo para font-end

59
Para front-end

Upload: gabriel-nege

Post on 15-Apr-2017

220 views

Category:

Marketing


0 download

TRANSCRIPT

Page 1: SEO para font-end

Para front-end

Page 2: SEO para font-end

Sobre mim

Gabriel Nege

Page 3: SEO para font-end

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/

Page 4: SEO para font-end

SEO dá resultado?

gabrielnege.com.br/trabalhos/seo/trabalho-seo-delivery-

em-sorocaba

Page 5: SEO para font-end

Antes do Google

Leitura recomendada:conversion.com.br/blog/o-dia-em-que-o-dono-da-amazon-fez-seo/

Page 6: SEO para font-end

Antes do Google

Page 7: SEO para font-end

Surge o Google!

Page 8: SEO para font-end

Primeira SERP

Page 9: SEO para font-end

A evolução

Page 10: SEO para font-end

Conceitos básicos

Page 11: SEO para font-end

A SERP

Page 12: SEO para font-end

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/

Page 13: SEO para font-end

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/

Page 14: SEO para font-end

Como validar isso?

Page 15: SEO para font-end

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

Page 16: SEO para font-end

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

Page 17: SEO para font-end

<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

Page 18: SEO para font-end

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/

Page 19: SEO para font-end

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

Page 20: SEO para font-end

User-agent: *

Disallow: /search

Allow: /search/about

Noindex: /search

Sitemap: https://www.google.com/sitemap.xml

Estrutura

Page 21: SEO para font-end

Testar robots.txt

Page 22: SEO para font-end

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

Page 23: SEO para font-end

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

Page 24: SEO para font-end

Black Hat vs White hat

Page 25: SEO para font-end

Dica sobre black hat

O lado negro mancha tudo. Impossível de ver o futuro é.

Page 26: SEO para font-end

Algoritmos do Google

Leitura recomendada: https://moz.com/google-algorithm-change

Page 27: SEO para font-end

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

Page 28: SEO para font-end

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/

Page 29: SEO para font-end

Impactos das atualizações

Page 30: SEO para font-end

Se você teve uma reação assim....

Page 31: SEO para font-end

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

Page 32: SEO para font-end

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

Page 33: SEO para font-end

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

Page 34: SEO para font-end

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

Page 35: SEO para font-end

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

Page 36: SEO para font-end

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

Page 37: SEO para font-end

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

Page 38: SEO para font-end

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

Page 39: SEO para font-end

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

Page 40: SEO para font-end

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

Page 41: SEO para font-end

• 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

Page 42: SEO para font-end

“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

Page 43: SEO para font-end

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

Page 44: SEO para font-end

SEO sem alterar o site

Page 45: SEO para font-end

Rich Snippets

Page 46: SEO para font-end

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/

Page 47: SEO para font-end

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/

Page 48: SEO para font-end

Exemplos

Page 49: SEO para font-end

Exemplos

Page 50: SEO para font-end

Exemplos

Page 51: SEO para font-end

Sitelinks Search Box

Page 52: SEO para font-end

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>

Page 53: SEO para font-end

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>

Page 54: SEO para font-end

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

Page 55: SEO para font-end

<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

Page 56: SEO para font-end

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

Page 58: SEO para font-end

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

Page 59: SEO para font-end

Obrigado

[email protected]/in/negegabriel