Latest / Entre Chaves / Snippet #10 Melhores práticas de Next.js para otimização de SEO

Transcript

Snippet #10 Melhores práticas de Next.js para otimização de SEO · Entre Chaves

• 0:09
  OPA, e aí, pessoal? Bom dia, boa tarde ou boa noite,
• 0:13
  dependendo da hora. Você está me escutando?
• 0:14
  Meu nome é Felipe Guimarães. Sou desenvolvedor, líder na DTIE
• 0:18
  como todo deve, que vive construindo produtos digitais.
• 0:21
  Eu passo boa parte do tempo pensando em como eu posso fazer
• 0:25
  um site, performar melhor, carregar mais rápido e aparecer
• 0:29
  para quem? E realmente precisa encontrar
• 0:32
  aquele site. E é por conta disso que nos
• 0:34
  últimos anos o so, também conhecido como o search engin
• 0:39
  optimization, ou otimização para mecanismos de busca de chute, se
• 0:44
  só uma preocupação do time de marketing.
• 0:46
  E passou também a ser uma responsabilidade do time
• 0:49
  técnico, do time de desenvolvimento.
• 0:52
  E foi nesse contexto que em 2016 foi criado o next GS, que é um
• 0:57
  framework para desenvolvimento. De aplicações web capazes de
• 1:02
  realizar otimizações principalmente voltadas para SO.
• 1:07
  Então eu vim aqui hoje trazer um pouquinho desse conhecimento
• 1:10
  para vocês entenderem, né? O básico do SOE mostrar como
• 1:13
  utilizar o nexo de IS de uma forma eficiente para
• 1:17
  potencializar os resultados de busca de um site.
• 1:20
  Primeiramente, como o seu site é indexado no mecanismo de busca,
• 1:25
  o Google, ele tem um robô que fica visitando as páginas ele.
• 1:30
  Ele visita a sua página, ele pega o conteúdo dela e então ele
• 1:34
  cria um ranking baseado em alguns fatores, como por
• 1:37
  exemplo, o quão relevante seu conteúdo é para uma certa
• 1:40
  pesquisa, o quão bem estruturado ele está, a performance do seu
• 1:44
  site, Acessibilidade e afins. Por que que isso é importante?
• 1:47
  Porque isso te traz tráfego orgânico, então seu site ele vai
• 1:50
  aparecer mais quando pessoas pesquisarem em termos relevantes
• 1:54
  para o seu tópico, para a sua área.
• 1:57
  E como que esse robô enxerga os seus?
• 2:00
  Site, né? O robô ele enxerga o seu site
• 2:02
  primeiro em HTML, ele lê OHTMLE, depois ele lê o JavaScript.
• 2:07
  Porém, se uma boa parte do seu site depende do JavaScript para
• 2:11
  carregar, então essa indexação ela atrasa e a performance do
• 2:16
  seu site também cai. Por isso, esse tempo de
• 2:19
  renderização é importante para melhorar o ranking do seu site
• 2:23
  num mecanismo de busca como que o next DS.
• 2:27
  Pode te ajudar nisso. ONRGS, ele tem algumas
• 2:30
  ferramentas que auxiliam principalmente na parte de
• 2:33
  renderização. O mais prático e o mais simples
• 2:37
  é o estetic site generation ou geração de site estático, onde
• 2:42
  você constrói um site que ele não demanda de tanta interação
• 2:45
  com o cliente, ele não tem tantos componentes dinâmicos e o
• 2:48
  servidor pega o seu código que foi escrito em react, compila em
• 2:52
  uma única página. HTMLE disponibiliza diretamente
• 2:55
  do servidor, então sua página. Fica muito leve, muito rápida,
• 2:59
  ela carrega instantaneamente para OSOE.
• 3:02
  Fica perfeito para páginas que demandam de baixa interação com
• 3:06
  o seu público alvo, então, por exemplo, um blog, uma página de
• 3:09
  produto, uma página de documentação e afins.
• 3:13
  Porém, se você precisa ter ainda uma certa interação, o ideal é
• 3:17
  você utilizar da capacidade do next para dividir componentes
• 3:22
  que devem ser renderizados no servidor e componentes que devem
• 3:25
  ser renderizados no lado do cliente que é famosos.
• 3:27
  Serverside handring e o client scient handring o serverside,
• 3:31
  ele vai gerar aquele HTML e já deixar ele preparado no
• 3:36
  background do sistema para assim que você fizer uma requisição
• 3:39
  para abrir aquele site, ele já conseguir enviar aqueles
• 3:42
  componentes pré montados para você.
• 3:44
  E aquilo que depende da interação do usuário, aquilo que
• 3:48
  depende de um conteúdo que é gerado por um JavaScript, ele é
• 3:52
  renderizado no lado do cliente, então ele é renderizado no
• 3:54
  navegador da pessoa que está acessando aquele site.
• 3:57
  Quando? Você faz isso?
• 3:58
  Você tem consequentemente um custo imperformance No No seu
• 4:03
  servidor porque você está pré processando essas páginas, porém
• 4:06
  esse custo ele é revertido em uma performance melhor para o
• 4:10
  seu usuário final que vai abrir o seu site vai ter um desempenho
• 4:13
  mais rápido de carregamento e a indexação vai ser realizada de
• 4:18
  forma mais eficiente. Seu ranking ele vai aumentar
• 4:21
  porque a sua página ela vai carregar mais rápido e com o
• 4:24
  desenvolvedor você tem total controle sobre quais os.
• 4:27
  Componentes serão renderizados no servidor e quais componentes
• 4:31
  serão renderizados no client? Fora que a própria estrutura do
• 4:34
  net GS, ela já te guia a entender quais componentes
• 4:38
  precisam ser renderizados no lado do cliente baseado em
• 4:41
  fatores como interação com armazenamento ou chamadas e
• 4:44
  afins. Falando em chamadas, o next, ele
• 4:47
  também possui uma capacidade chamada happy i roads, que
• 4:52
  basicamente a requisição, ela deixa de ser realizada pelo lado
• 4:56
  do cliente e ela. Passa a ser realizado pelo lado
• 4:59
  do servidor. Então ao invés de eu acessar uma
• 5:02
  PI diretamente, eu sinalizo para o servidor da minha página que
• 5:07
  eu preciso de uma determinada informação e o servidor vai
• 5:11
  realizar essa chamada diretamente e então retornar o
• 5:14
  dado para o meu usuário. Agora, por que fazer isso?
• 5:17
  Primeiro de tudo, como o servidor é o responsável por
• 5:20
  fazer esse intermédio da rota de API, se torna possível realizar
• 5:25
  o Cash de informações baseadas em chaves.
• 5:28
  Então, se o conteúdo que eu preciso entregar para o meu
• 5:32
  cliente ele é previsível, eu posso realizar um Cash e somente
• 5:36
  revalidá lo quando necessário. Desta forma, ainda que eu esteja
• 5:40
  utilizando um componente do meu cliente, eu ainda tenho uma
• 5:43
  experiência mais rápida de utilização.
• 5:45
  No meu site, fora isso, o next, ele também traz pequenos
• 5:48
  artifícios que me auxiliam a ter um excelente ganho com uma baixa
• 5:53
  necessidade de implementação. Então, por exemplo, eu num react
• 5:56
  um dia eu normalmente iria renderizar uma imagem utilizando
• 6:00
  uma tag de imagem, o next. Ele disponibiliza um componente
• 6:03
  chamado Nash barra Imad, que realiza uma otimização de forma
• 6:08
  automática em todas as imagens que eu estou consumindo no meu
• 6:10
  site, para que elas já fiquem mais leves de serem carregadas.
• 6:13
  Elas já fiquem preparadas no meu q.
• 6:15
  Este pra na hora que o usuário acessar aquela imagem, ela está
• 6:18
  disponível o mais rápido possível, tanto para o usuário
• 6:21
  quanto para o robô do Google que é responsável por fazer o
• 6:25
  ranking de páginas. Além disso, também temos opção
• 6:28
  de realizar o mesmo processo, porém com Fontes além de
• 6:32
  imagens, então já pré processar Fontes e o clássico metadata π
• 6:36
  onde você disponibiliza informações relevantes da sua
• 6:40
  página de forma facilitada. No hader onde eu disponibilizo
• 6:43
  por exemplo, um título, uma descrição.
• 6:45
  Informações adicionais de produto ou de uma loja e afins,
• 6:49
  coisas que são relevantes para que o meu sistema de indexação
• 6:53
  consiga entender de forma rápida qual o conteúdo daquela página e
• 6:58
  para quem ela é relevante. Bom, pra encerrar, queria deixar
• 7:02
  uma reflexão no final. Entender como utilizar o
• 7:06
  potencial do next GS não é só sobre como aparecer melhor no
• 7:10
  Google, é sobre você também entender como desenvolver com
• 7:13
  mais maturidade. Quando você começa a prestar
• 7:15
  atenção em como sua página é entregue, no piso que o seu
• 7:20
  JavaScript tem no carregamento, na experiência final do usuário,
• 7:24
  no impacto disso tudo, é aí que você começa a elevar o nível do
• 7:27
  que você constrói como desenvolvedor.
• 7:29
  Isso transparou. No detalhe, na performance, na
• 7:33
  qualidade de código e na qualidade do produto que você
• 7:36
  entrega. E é esse tipo de cuidado que com
• 7:38
  o tempo muda completamente. O jeito de desenvolver é isso.
• 7:42
  Obrigado por escutar e até a próxima.