• Share
  • Email
  • Embed
  • Like
  • Private Content
SEO para Front-End - BeagaJS
 

SEO para Front-End - BeagaJS

on

  • 3,580 views

Palestra oferecida em BH no evento BeagaJS.

Palestra oferecida em BH no evento BeagaJS.

Nesta palestra tive a oportunidade de mostrar 10 dicas pontuais para que os front-ends consigam aplicar SEO.

Statistics

Views

Total Views
3,580
Views on SlideShare
3,358
Embed Views
222

Actions

Likes
20
Downloads
188
Comments
2

5 Embeds 222

http://www.fabioricotta.com 102
https://twitter.com 67
http://joseadolfo.com.br 49
http://lanyrd.com 3
https://abs.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SEO para Front-End - BeagaJS SEO para Front-End - BeagaJS Presentation Transcript

    • SEO para Front-End Dicas para construir sites melhoresPor Fábio Ricotta, Co-Fundador da MestreSEOBeagaJS - Março de 2013
    • Fábio RicottaCo-Fundador da MestreSEOContatoTwitter: @fabioricottaEmail: fabioricotta@mestreseo.com.brWebsite: www.mestreseo.com.br
    • Elias e Fábio, em Boston, Abril de 2012
    • slideshare.net/fabioricottaVocê pode baixar esta e todas as outras palestras...
    • O MercadoO cenário do profissional de Front End
    • Antes de começarGostaria de mostrar comoestá o nosso mercado...
    • http://digitaisdomarketing.com.br/o-analista-de-redes-sociais
    • Engraçado não é?Parece piada...
    • Mas e no mercado defron-end?
    • Nos dias de hojeQuando as empresasbuscam por front-ends...
    • Elas especificam a vaga deuma forma curiosa...
    • Praticamente todasAs empresas querem umfront-end comconhecimentos em SEO!
    • Que talAprender um pouco deSEO? Vamos lá?
    • Entendendo Princípios Como o Google funciona
    • http://www.youtube.com/watch?v=BNHR6IQJGZs
    • http://www.youtube.com/watch?v=BNHR6IQJGZs
    • http://www.youtube.com/watch?v=BNHR6IQJGZs
    • http://www.youtube.com/watch?v=BNHR6IQJGZs
    • http://www.youtube.com/watch?v=BNHR6IQJGZs
    • Fórmula Secreta = 200 fatores (PageRank e outros).
    • O Brasil fala “Googlês”
    • No BrasilDe cada 100 buscas, oGoogle é o mediador de 86
    • http://www.serasaexperian.com.br/release/noticias/2012/noticia_00883.htm
    • Market Share – Buscas no Brasil 14% Google Outros 86%
    • Explicando o SEO O que é esta sopa de letrinhas?
    • Links Patrocinados
    • Resultados Orgânicos
    • É na área de resultadosorgânicos quetrabalhamos...
    • Pois, em média, osresultados orgânicosrecebem cerca de 70%dos cliques.
    • 30% dos cliques70% dos cliques
    • Resumindo um pouco ahistória...
    • Estando melhorposicionado, eu consigomais visitantes.
    • 10 Dicas de SEOpara Front-End
    • 1. Webmaster Tools
    • O Google Webmaster Toolsplataforma do Google paraajudar os webmasters
    • https://www.google.com/webmasters/tools/
    • Fica a dicaA Microsoft (Bing) tambémpossui uma plataformapara ajudar os webmasters
    • http://www.bing.com/toolbox/webmaster
    • Elas te dãoAvisos sobre como vocêpode melhorar o seu site...
    • E aindaMostram quando vocêpossui algum problemasério.
    • 2. Títulos
    • Guarde como um mantraCada página deve possuirum <title> único
    • Saiba queO <title> é a informaçãoque o Google vai exibir napágina de resultados
    • 3. Imagens
    • É importante você saber queO Google adora imagens!
    • http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=114016
    • Coloque sempreNomes detalhados einformativos,como servico-hospedagem-cloud.jpge fuja de DSC00281.jpg
    • Forneça sempreUm atributo ALTinformativo,como <img src=“” alt=“Máquina virtual noIBM SmartCloud Enterprise+”>
    • E sempreForneça contexto para asua imagem, não adeixando-a sozinha napágina.
    • 4. URLs
    • Para o Google as URLs indicamO que vamos encontrarnaquela página
    • Por exemplo,O que você entende poruma URL como:www.meusite.com/?p=1234
    • É simples.Nada.
    • Agora,O que você entende poruma URL como:www.meusite.com/servicos/servidor-cloud
    • É simples.Que aquela página é de“serviços” e falará de“servidores cloud”.
    • Na nossa áreaChamamos isto de URLsamigáveis.
    • O GooglePrivilegia URLs que contémpalavras sobre o assuntoque elas tratam.
    • Uma dica...No Wordpress...
    • 5. Tempo deCarregamento
    • http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
    • A essência éAs pessoas desejamacessar sites maisrápidos
    • EntãoO Google adotou istocomo fator derankeamento!
    • LogoVocê pode otimizar otempo de carregamentopor etapas...
    • Comece por aqui...Nas imagens do seu site,através de compressão...
    • Para facilitarUse ferramentas comojpegtran, Jpegoptim, OptiPNGou PNGOUT.
    • Nos arquivosJavascript e CSS atravésde versões reduzidas,sem comentários eespaços...
    • Para facilitarUse ferramentas comoClosure Compiler, JSMin,CSSmin ou YUI Compressor.
    • No servidorHabilite a compressãogzip...
    • O que ele fazÉ fornecer uma versãocompactada dos seusarquivos.
    • Faça otimizaçõesIndicadas pelaferramenta PageSpeed
    • https://developers.google.com/speed/pagespeed/insights
    • Ou aindaPela ferramentaWebPageTest
    • http://www.webpagetest.org/result/121015_HH_EFY/
    • No WordpressPodemos usar o pluginW3 Total Cache
    • http://wordpress.org/extend/plugins/w3-total-cache/
    • Se você quiserPode utilizar o serviçoCloudFlare
    • https://pt-br.cloudflare.com/
    • É bem simples ofuncionamento...
    • Ainda existeO serviço do Google,chamado PageSpeed
    • https://developers.google.com/speed/pagespeed/service?hl=pt-BR
    • AssimO seu site irá carregarmuito mais rápido
    • 6. Rich Snippets
    • Em 2009O Google fez um anúncioque mudaria muitoswebsites
    • http://googlewebmastercentral.blogspot.com.br/2009/05/introducing-rich-snippets.html
    • Um exemplo bem simples...
    • Mas desde 2009O Google melhorou emuito o suporte àsmarcações
    • http://www.google.com/webmasters/tools/richsnippets
    • ExistemVários tipos derich snippets
    • A mais simplesÉ a de Breadcrumb
    • <body>...<div> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a></div>
    • <body itemscope itemtype="http://schema.org/WebPage">...<div itemprop="breadcrumb"> <a href="/eletronicos/">Eletrônicos</a> > <a href ="/eletronicos/tv/">TVs</a> > <a href ="/eletronicos/tv/led">TVs LED</a></div>
    • http://schema.org/WebPage
    • Uma bem utilizadaÉ a Reviews
    • http://schema.org/Review
    • Uma em ascensãoÉ a Receitas
    • http://schema.org/Recipe
    • Aprenda maisUse o Schema.org eaprenda mais sobre estasnovas formatações
    • http://www.schema.org/docs/schemas.html
    • E vale lembrarQue existem diretrizes paraas rich snippets
    • http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2722261
    • 7. Rel Author
    • Você já se perguntouComo faço para aparecermeu rosto no Google?
    • Você pode conseguirAumento de 30% devisitas apenas por exibirsua foto
    • Você deve pensarE como posso usar nomeu site?
    • É simples, olha só...
    • http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1408986
    • Você front-endJá pode criar isto emdois passos simples
    • Primeiro passoCada página do site devepossuir um link<a href="[profile_url]?rel=author">Google</a>
    • Segundo passoO autor, em seu perfil doGoogle+, deve adicionarum link para o site.
    • Em seguidaBasta validar utilizando aferramenta de RichSnippets
    • http://www.google.com/webmasters/tools/richsnippets
    • 8. Sitemap.XML
    • Em 2008Os grandes mecanismosde busca adotaram umpadrão...
    • http://www.sitemaps.org/
    • Este padrãoÉ uma forma de informaraos mecanismos de buscaas páginas existentes emum site.
    • E o padrãoTem mais ou menos esta“cara”:
    • No WordpressVocê precisará doWordpress SEO instalado...
    • Será algo como:http://www.meusite.com.br/sitemap_index.xml
    • Com esta URL em mãos...
    • Todo mundoO Google vai descobrir asminhas páginas rapidamente!
    • AtençãoUm detalhe importante!
    • Não usemGeradores que descobrem assuas URLs!
    • O problema é queEles podem cometer erros deleitura de URLs e isto pode lheprejudicar
    • 9. AJAX
    • Um dosGrandes problemas doGoogle é ler AJAX.
    • Isto acontencePois o Googlebot é um“navegador” comJavascript desabilitado
    • https://developers.google.com/webmasters/ajax-crawling/
    • De forma sequencial...
    • O GooglebotEncontra uma URL comoesta:www.example.com/page? query#!mystake
    • www.example.com/page?query#!mystake O robô de busca (crawler) encontra a URLSeu Servidor Crawler
    • www.example.com/page?query#!mystake www.example.com/page?query&_escape_fragment=mystakeSeu Servidor Crawler Ele transforma a URL e uma URL “feia”
    • www.example.com/page?query&_escape_fragment=mystakeSeu Servidor Crawler O robô faz a consulta da URL no seu servidor
    • O servidor vê que é uma URL “feia” e mapeia ela para a URL AJAXwww.example.com/page? query#!mystake Seu Servidor Crawler
    • O servidor invoca o “Headless Browser” Seu Servidor Crawler Headless Browser
    • O “Headless Browser” executa o javascript e gera um Snapshot do HTML Seu Servidor Crawler Headless Snapshot Browser do HTML
    • O servidor envia ao robô o Snapshot do HTML Seu Servidor Crawler Headless Snapshot Browser do HTML
    • O robô processa o Snapshot de HTML e extrai as URLs normais.Seu Servidor Crawler Headless Snapshot Browser do HTML
    • AssimO Google é capaz de ler oconteúdo que seriacarregado em AJAX.
    • 10. Flash
    • Assim como no AJAXO Google tem sériosproblemas em ler Flash.
    • http://www.pierpaulista.com.br/
    • Olhando por cimaParece tudo bem, correto?Hummmmm....
    • Fica a dicaSempre veja a “versãosomente texto”.
    • Em branco...É desta forma que o Google“enxerga” o site em Flash.
    • E olhandoO código fonte, notamos...
    • QueNunca este código será omesmo que um conteúdono HTML.
    • Extra
    • Seu futuroQuer aprender mais?
    • http://groups.google.com/a/googleproductforums.com/forum/#!forum/webmaster-pt
    • http://www.mestreseo.com.br/artigos-seo
    • http://digitaisdomarketing.com.br/
    • http://inbound.org/
    • https://www.facebook.com/mestreseo
    • https://twitter.com/fabioricotta
    • https://twitter.com/marthagabriel
    • http://www.mestreseo.com.br/newsletter
    • Fórmula mágicaPara ter sucesso, bastaimplementar...
    • Rumo ao sucesso! Agora é dominar o mundo!
    • Muito Obrigado!Dúvidas?ContatoTwitter: @fabioricottaEmail: fabioricotta@mestreseo.com.brWebsite: www.mestreseo.com.br