 Qual a importância do SEO? A primeira posição tem uma taxa de cliques de 34,36%. Essa pesquisa que é do ano passado, para vocês terem a noção, é uma oportunidade muito grande. Imaginem, se você está na primeira posição do Google, você vai ter uma taxa de views muito maior, o que provavelmente vai corresponder em vendas e conversões muito maiores. Esse outro ponto aqui é bem importante, porque 60% dos cliques vão para os 3 primeiros sites. Imaginem, se você não está entre os 3 primeiros sites, então seja a parte de 40% só da chance da pessoa entrar no seu site. E esse aqui é pior ainda, 75% dos usuários nunca clicam em sites, não estão na primeira página do Google. Imaginem, se você tem um site que é uma loja online e você precisa desviver visualizações para vender um produto, só que você faz essa métrica partindo do ponto que você tem 100% de visualizações. Imaginem, se você está na segunda página do Google, você tem só 25%. Então essa dificuldade vai ficar muito maior. E essa parada de estar na segunda página do Google é muito comum, porque muita gente não faz a utilização para SEO e acaba ficando na segunda página e nem percebe isso. E daí tem que, sei lá, optar por outros meios, como fazer anúncio pago, que vai gastar uma grana bem maior que seria um investimento em um cara para fazer uma SEO massa do seu site. O intuito da palestra hoje é fazer um pouquinho diferente. Não é fazer um checklist gigantesco com 1.000 coisas para resolver a SEO, você nem sabe se o seu site tem esse problema ou não. Então o rolê aqui vai ser meio que dar umas ferramentas, ferramentas boas e principalmente de graça, porque muita gente que não é especialista não vale a pena investir em uma ferramenta porque realmente são caras. E aí pegar os principais problemas que geralmente os ferramentas apontam em sites que não são otimizados e resolveram, ver uma forma fácil e rápida de resolver. Primeiro ponto, aqui são as ferramentas. Sei lá, quando você está em um lugar sem internet, óbvio do tipo, você quer dar uma analisada no código para ver como é que o SEO o control básico, se você for no código SEG, tem o SEO Analyzer, o Free SEO Report, se o SEO certo, que basicamente todos fazem a mesma coisa, eles analisam o seu site por completo, verificam tags que estão faltando e coisas do tipo, e o search console. Eu coloquei ele na embrita porque ele é um cara muito foda e o pessoal não usa ele porque acha que ele não é foda. O, sei lá, o pessoal não coloca no site, ou sei lá, coloca o site map lá, mas não entende ele e não tenta entender. Fazer até sentido porque não tem quase nada de conteúdo na internet como você procura sobre ele de curso, o acidente, muito que pela documentação do próprio Google. Mas ele é muito importante, tipo, você consegue ver muitas métricas e parâmetros sobre o que os usuários estão pesquisando e como o seu site está se comportando em relação a isso. Aqui do outro lado, tem umas ferramentas que são mais focadas em performance. O MVP de test, o PingDal, o GTMetric, o PageSpeed. Eles fazem basicamente a mesma coisa, só que, tipo, o PageTest, o PingDal é um pouquinho mais complexo. Tem uns nomes diferentes e aí você precisa entender um pouquinho mais para assacar. O PageSpeed é um pouquinho mais intuitivo, que dá até uma reguizinha, uma nota, e ele te diz os egos que você está cometendo e também te dá uma solução de como corrigir eles. E aqui no final tem no Instar que o Google Lighthouse, que é uma ferramenta nova que o Google lançou agora e que é muito foda, é uma extensão que você instala no seu navegador e ele pega e faz uma análise completa do seu site. Essa ferramenta foi feita por causa dos PWAs. Só que além de verificar PWI, ele verifica acessibilidade, performance e SEO e é muito massa, tipo, ele faz uma análise bem completa do site e dá um help bem legal. Vamos lá, o primeiro ponto. O primeiro ponto é HTTPS. HTTPS antes era meio que, ah, você só usa se você tiver uma loja virtual, ou algo assim, mas hoje não. Hoje já é algo bem básico. Você tem que adotar para qualquer aplicação que você for fazer, seja um site com uma página, uma lenda em Page, ou um site gigantesco. O ano agora, mês passado, o Google Free fez um post dizendo que com a nova atualização do Chrome 68, ele vai passar a marcar todos os sites que não tem HTTPS como não seguro. Então, imagina isso, é muito ruim. Uma pessoa que comprar uma parada no seu site, ela vai ter que, sei lá, dar um perto de crédito, dar um monte de informações se o seu site não tem HTTPS e tem uma paradinha do lado escrito não seguro. Provavelmente a pessoa não vai comprar e vai no seu concorrente. Outro ponto. O Google beneficia sites que tem HTTPS. Então, se você estiver disputando posição com um concorrente, os dois tiverem um SEO parecido e você tiver HTTPS e ele não, você vai ficar na frente. Outro ponto é Free. Tem até uma palestra depois do functional que vai ensinar como fazer isso. É simples para caralho e é bem importante. O site map. O site map é bem importante e muita gente não faz. Como a gente usa o vôo de presa, a gente já tem tipo, passeio de facilidade. Provavelmente vocês, quem aqui não, não usa o plugin da Yoshi para SEO. Todo mundo usa então. Então, tipo, ele já gera o site map para vocês e ele gera o site map muito massa porque ele gera o site map dividido. Ele divida o site map em posts, em pages, em tags e isso é muito bom para quando você precisa escalar porque um site map tem meio que um limite que é de 50 mil itens. Para você chegar lá, você tem que ter um site muito grande mas o Yoshi já pega e já deixa pronto para você espelar isso. Para quem não usa o Yoshi, que é o local de ninguém aqui, tem o Google xml site map, que ele faz a mesma coisa e tem que sempre lembrar que não adianta só criar o site map. Ele adiciona o site map no search console porque senão o Google não vai conseguir encontrar o site map de seu site e qual que é a função do site map. É o Google entrar no site e não precisa ficar indo de link em link para achar as páginas porque tem muito site que tem uma estrutura de link muito ruim. Então ele acaba demorando muito para indexar as páginas ou no index, a index é errado e o site map serve exatamente para isso. Ele é um mapa que o robô do Google vai chegar e já vai começar a indexar as páginas. Além de você poder definir no site map a prioridade das páginas, sei lá, a páginas x é mais prioridade que a y. Então o Google vai entender isso e vai indexar a parte das x antes da y e as duas caírem na mesma pesquisa. O site responsivo, esses lá de união é colocar porque eu não sei se existia alguém ainda que faz um site que não é responsivo, mas isso não é mais aceito. O site responsivo é básico do básico. Hoje o Google tem até um algoritmo diferente para as pesquisas do mobile. Então se você tem um site que não proporciona uma experiência legal para o usuário em qualquer dispositivo o Google não vai curtir seu site e vai penalizar você. Outro ponto que sempre dá problema é a meta description no title. Muita gente não coloca meta description nas páginas, ou quando coloca uma meta description que copia para todas as páginas só que isso não faz nenhum sentido e a meta description é uma breve descrição da página para o Google. Então você vai estar dizendo para o Google que todas as páginas têm a mesma coisa, têm o mesmo conteúdo. Outro cara é o title. Muita gente queria um title só para o criar mas não foca em colocar a palavra-chave ou tentar otimizar. E esses dois caras são muito importantes porque o robô do Google, quando busca uma palavra-chave que o usuário pesquisou, ele pega e verifica nesses dois caras. Outro ponto aqui que são os tamanhos é legal tentar manter esses tamanhos porque quando você vê na estágia em lá, se vê sites grandes ele chega e corta um pedaço. Essa cortada que dá é quando não respeita esse tamanho e por que isso é ruim? O usuário pode estar pesquisando alguma coisa e pode ser que a palavra que ele esteja querendo encontrar esteja nessa parte que ficou cortada. Então pode ser bem ruim não respeitar esses dois caras. Outro ponto, as techs de cabeçade O que são as techs de cabeçade? São as techs de tito é o H1, o H2, o H3, o H4 muita gente faz o uso delas erradas e a gente tem muita gente usando tipo A eu coloquei um H1 aqui porque eu queria que a font size desse cara fosse grande. Não faz sentido que é um font size grande você pega e estiliza com um CSS. Você tem que entender que as font que as techs de cabeçade tem uma funcionalidade. Usem apenas um H1 por página. Aí vocês vão dizer que existe um HTML5 e ele deixa usar um H1 por sessão sei lá, section, art. 5 você pode usar com HTML5 só que quando você vai usar isso aí hoje tem uma não rola que tem um grande problema com a acessibilidade. Tipo, se uma pessoa com deficiência visual for acessar o seu site utilizando um software e vai auxiliar ele, ele não consegue entender ainda que aquele H1 dentro da section e o outro H1 dentro da outra section é referente só pela sessão ele meio que se perde e acaba atrapalhando ele. Então, é até um um específico uma especificação do guideline do Google usar apenas uma tag H1. Você pode usar mais, mas é tipo em casos muito específicos. Outra parada é respeitar a hierarquia. Tipo, essas tags tem até um númerozinho, tipo H1, H2 H3, H4, você tem que respeitar isso. Você pode usar mais tipo, o H2 você pode usar mais de 1 H3 você pode usar mais de 1 H4 também, então você tem que respeitar a hierarquia deles. Aqui tem um bom exemplo olha só esse primeiro cara aqui já abriu um H1, abriu um H2 abriu um H4 e abriu um H2 se ele não tá certo porque ele pulou do H2 pro H4 ele não seguiu a hierarquia. Aqui na parte de baixo você pode ver o H1, o H2, H3 e é o H4 e aí depois ele pode abrir um H2 porque ele tá falando que ele terminou aquele subtítulo do subtítulo do H2 e continuou pro próximo então tipo, tem que sempre prestar bastante atenção nisso porque esses caras são são pontos bem importantes que o Google dá relevança pra encontrar palavras-chaves e as pesquisas que as pessoas fazem. O próximo ponto é a tag out Quem é que coloca tag out em todas as imagens do site é muito importante colocar toda a imagem é tag out por que? Vocês já viram aquele cara lá que quando você pesquisa no Google tem umas abrinhas em cima e tem o web e imagens de vídeos quando você vai na tag images é através da tag out também que ele encontra a imagem ou não Outro ponto muito importante da tag out é em relação a acessibilidade de uma pessoa com deficiência visual entrando no seu site é a tag out que o software que vai auxiliar ela vai ler então se você tiver uma imagem que não tem tag out e o cara entrando no site o software vai ler, isso aqui é uma imagem o software não vai dizer o que é essa imagem e o cara vai ficar sem saber isso se tiver tag out, ele vai ler tag out e vai informar pro cara do que ela se refere do que se trata a imagem sempre que eu falava isso a mesma resposta na hardpad tem o site, tem um monte de página já e eu não sei se tem out ou não eu não vou sair especionando elemento por elemento para saber se a imagem está com out ou não está com out então tem um códigozinho da CSS que é muito massa você consegue pegar todas as tags em g que dão o out vazio ou que não tem o out e aí você pode pegar e estilizar essas imagens no caso aqui eu coloquei uma borda e aí não tem mais essa desculpa de se falar eu não sei se essa imagem está ou não está com out se ela não tiver com out, ela vai estar com a borda vermelha tipo bem explícito e não tem mais desculpa bem claro isso outro ponto bem importante que é totalmente ligado ao SEO performance não adianta você ter um site com SEO foda, conteúdo foda mas que seja lento o usuário não vai ficar segundo esperando o seu site carregar ou ele carrega pela metade não é otimizado e vai proporcionar uma experiência ruim para ele o Google não verbo de isso e o seu usuário também não tipo vocês podem ver o que vocês dizem entre um site que é lento vocês já vão deixar por umas duas, três abas a aba que ficou lendo vocês feste e vocês vão na outra é bem natural isso então você tem que fazer a linear SEO bom um site bem performático e otimizado então agora que eu tenho tem muita técnica para falar de performance só que não ia dar tempo então eu coloquei as principais e geralmente se tornam gargados quando não são feitas primeiro dela é otimizar imagens o que é essa otimização de imagem para a gente que está construindo o site e não te precisa únicamente que a imagem seja visualizada quando a gente coloca imagem no site e vem um monte de tag junto a imagem foi criada a câmera, a paleta de cores vem um monte de coisa que é inútil e só faz peso junto na imagem a gente precisa só que a imagem seja vista tem um monte de plugin que faz essa otimização de imagem para quem usa test runners como Google e o gruante já tem testes que fazem isso tem um site da Titan.pdg que é bem legal você fazer o upload da imagem e ele te dá uma imagem para fazer da loja otimizada e tem um plugin para o outpress que é esse cara aqui que otimiza 500 imagens de graça por mês no seu site ou seja, você fez um piloto de uma imagem na mídia e ele pega e otimiza para você você tem um número máximo de 500 por mês fazer o upload esse número você paga, só apagar por uso mas é bem vantajoso pelo do gruante performance que você vai ter no site quantas vezes você pega do designer imagem de 2 mega você não pode pôr o designer ele quer fazer o upload bonito você tem que chegar e dar uma otimizada nisso você consegue muitas vezes passar de 2 mega para 300k é muita coisa e muitas pesquisas apontam hoje que a maior parte que faço o peso no site que vira um gargalo são sempre as imagens e são sempre imagens que não são otimizadas então é sempre muito importante otimizar todas as imagens do site o próximo ponto é o cache o cache é muito básico, o que é o cache se você entra em um site e a primeira vez você entra no site você vai baixar o logotipo a segunda vez você entra no site se não tiver cache, ele vai baixar o logotipo de novo mas se tiver cache, ele vai pegar um eu já tenho esse logotipo aqui ele vai só mostrar o logotipo que ele baixou da outra vez, que estava guardado e vai economizar bastante tempo o pegamento e também o peso do seu site para gente que usa o logotipo press tem esses dois plugins aqui que são bem massa e resolvem super cache, ele é um pouquinho menos configurado, mas ele é mais fácil de configurar e o W3C te dá mais liberdade para fazer outras coisas só que ele é um pouquinho mais chato de configurar mas os dois fazem a mesma coisa tem outros plugins também bons mas eu não coloquei porque eu não lembro o problema é bastante o próximo ponto é adiar o carregamento do JavaScript o que é adiar o carregamento do JavaScript? muita gente coloca as tags scripts no cabeçalho e quando o browser chega para renderizar essa tag script, ele para nela e abre em paralelo e carrega ela inteira então se você tem um script grande, ele vai ficar um segundo carregando aquele script e depois ele volta e continua renderizando o seu site que isso é muito ruim uma alternativa para fazer isso é colocar todos os JavaScript no roda-pé que é uma coisa muito básica e espero que todo mundo faça isso já caso você queira colocar deixando a tag não sei por qual motivo tem um atributo que é o atributo assim que o que ele faz quando o browser chega para carregar aquele JavaScript e ele vê que tem um atributo assim que ele pega, entra, começa a carregar o script só que ao mesmo tempo ele vai carregando o site principalmente só que aí tem um problema tem que tomar muito cuidado porque se você utilizar alguma função quando está carregando o site que depende daquele script ele vai dar palco porque não vai existir ainda essa função e vai dar um define ela vai dar um efe e vai ser lá vai quebrar um slider ou algo assim então tem que tomar bastante cuidado nisso caso você se depare com um caso que tenha um monte de plugin quando você reestrutura tudo ele coloca um monte de CSS JavaScript, tem esse pluginzinho que ele é bem massa, que ele pega e minifica todos os javascript e o CSS tudo no mesmo arquivo e a dia é o carregamento deles é uma baita ajuda quando você não tem muito o que fazer e você precisa ter um ganho de performance aqui a gente cai no outro ponto que é eframe eu trabalho em uma empresa que o principal produto é visual então não tem como você não acabar fazendo páginas sei lá com test, 15 eframes e eframe é uma parada que tipo tranca, trava muito o carregamento do site e torna a experiência dele muito ruim então tem uma manhãzinha que dá para fazer um carregamento do eframe que é o seguinte a gente pega, deixa a tag esse rc vazia e coloca um atributo que é o dat o rc e a gente faz o seguinte a gente pega e faz uma função em javascript e vai pegar todos os atributos iframe do nosso site a gente vai pegar o dat esse rc, o atributo e vai passar para esse rc ou seja, a gente vai fazer o caminho contrário que a gente fez em cima e a gente que está a organização toda é ali, a gente vai chamar esse cara só depois que a parte a gente vai carregada ou seja, o site vai carregar de boas vai ficar um espacinho branco ali onde tinha um eframe mas a gente fica muito pouco se o site carrega rápido e aí depois que o site estiver carregado ele vai pegar vai carregar todos os os iframes e vai setando o atributo do dat, esse rc para esse rc e vai mostrando eles de uma maneira bem normal que vai tornar tipo a experiência do site bem melhor do que deixar eles na realização normal é isso aí, pessoal obrigado