Tags para SEO e Redes Sociais

[filipedeschamps]

Contexto

Essa issue possui dois estágios, o primeiro na qual iremos trabalhar nessa Milestone e envolve apenas texto, e o segundo que iremos trabalhar no futuro e que envolve imagem (tenho umas ideias massa para quando o post não possui imagem). Então o que está acontecendo hoje é que ao compartilhar um link do TabNews, nem toda aplicação está conseguindo ler as informações da página, por exemplo:

Por outro lado e de forma impressionante, o Facebook se virou e pegou tudo sozinho, incluindo a imagem (mas não é interessante contarmos com essa sorte 😂 )

Execução

Tudo isso está acontecendo no componente BaseLayout que é a base para o DefaultLayout e a execução deveria ter duas partes também:

Remover o recebimento do content no BaseLayout

Até adicionei uma linha de TODO: https://github.com/filipedeschamps/tabnews.com.br/blob/850e4317528a4786d1e999a7792fc6a561900cf6/pages/interface/components/BaseLayout/index.js#L3

Não se é certo o BaseLayout saber o que é um content, ele deveria apenas se preocupar puramente com metadata.

Talvez a responsabilidade de massagear os dados é do DefaultLayout e ele deveria passar para o BaseLayout os metadados como title e description através do que receber como content ou o próprio metadata.

Adicionar tags para SEO e Redes Sociais

Sou zero especialista nisso, mas já tive algumas experiências no passado implementando as tags do Open Graph, não sei como está agora. Pesquisei aqui no Google e encontrei isso:

https://rockcontent.com/br/blog/meta-tags-para-redes-sociais/

Deixando o conteúdo por um momento de lado, observa todos os comportamentos da página, todas as técnicas do que chamo de "internet ruim" numa única página (modal que esconde a página inteira, pedido para habilitar cookies, pedindo para habilitar notificações, pedindo para se inscrever na newsletter), chega a ser impressionante e é exatamente isso que precisamos evitar no TabNews, tanto que droppei essa página e procurei outra fonte:

https://css-tricks.com/essential-meta-tags-social-media/

Muito melhor, mas não sei avaliar o quão está atualizado. Mas lembro que no passado, o OG cobria muita coisa já 🤝

[gabrnunes]

Ei @filipedeschamps, eu posso pegar essa issue? Desculpa sou novo aqui, mas devo colocar o Assigment pra mim?

Sobre as metatags, geralmente eu uso o https://metatags.io/, que é um site simples e que já gera o padrão de metatags pros sites.

Sobre as imagens, o que acha de fazer um gerador de imagem estilo o que o GitHub tem? Eu já implementei algo assim usando Next.js e Puppeteer, é tranquilo de fazer.

[filipedeschamps]

@gabrnunes sensacional meu caro!!! 😍

Eu recomendo ninguém pegar uma issue para si, pois isso abre margem para outras pessoas participarem e trazerem uma abordagem diferente (já aconteceu e ainda acontece de misturarmos PRs). Então independente disso, você será muito bem vindo nessa tarefa, ainda mais por ter levantado a bola de como o GitHub resolve o problema de não ter imagens e é a forma mais elegante que já vi até hoje de criar uma thumbnail.

E daí no nosso caso, podemos usar SSR com stale-while-revalidate, ia ficar muito massa!!

E se quiser dividir em dois PRs, primeiro as tags e depois da imagem, show também, quanto antes nos indexarmos com as tags certas, melhor 🤝

[gabrnunes]

Oi @filipedeschamps, eu só não entendi uma coisa... pq vc acha que deveria usar o stale-while-revalidate? Seria pra atualizar a imagem caso necessário? Caso alguém edite o titulo do post, isso?

[filipedeschamps]

Ótima pergunta @gabrnunes, não fui claro na minha resposta. Ao usarmos o SSR, toda vez que o endpoint da imagem for acessado, será necessário fazer uma requisição no backend (que muitas vezes pode retornar sempre os mesmos dados, caso nada mude). Então para evitar esse custo e demora, o stale-while-revalidate se encaixa perfeitamente, pois uma vez renderizada a imagem, ela fica cacheada na CDN e qualquer nova request é respondida instantâneamente. E após passar o valor que definirmos para o cache, a request continua sendo respondida instantaneamente, mas em paralelo o backend corre para atualizar o retorno (e daí isso vai cobrir os casos das informações mudarem como você comentou).

Então temos a flexibilidade dos dados mudarem, sem o custo de renderizar isso a cada request 👍

[gabrnunes]

Boa, fechou :)

[filipedeschamps]

@gabrnunes olha que massinha isso que aconteceu sobre o SEO do TabNews: https://www.tabnews.com.br/rodrigo/fcdc51a9-60c4-43d6-b698-967f3009574a

[gabrnunes]

Massa demais @filipedeschamps, respondi lá! Ainda não consegui mexer nessa issue, mas pretendo abrir alguma PR ainda essa semana, hehe.