Tipo de conteúdo nas Tags para SEO

filipedeschamps commented 2 years ago

@gabrnunes depois seria interessante analisarmos se website é o melhor og:type para os conteúdos do TabNews, pois talvez o article seja melhor.

https://github.com/filipedeschamps/tabnews.com.br/blob/d4d8717c8973df1786ec4a3329065ba1601ce72d/pages/interface/components/BaseLayout/index.js#L15

Mas quanto mais eu pesquiso aqui, mais perdido eu estou, por exemplo:

https://stackoverflow.com/questions/29748013/what-is-the-correct-implementation-of-the-open-graph-article-type

E aí comecei a testar umas coisas com essa ferramenta e ela gerou umas tags muito interessantes com prefixo article, olha só:

<meta property="og:type" content="article">
<meta property="og:title" content="Título">
<meta property="og:url" content="https://www.tabnews.com.br/">
<meta property="og:image" content="https://www.tabnews.com.br/img.js">
<meta property="og:description" content="Descrição">
<meta property="article:author" content="filipedeschamps">
<meta property="article:published_time" content="2022-05-26T14:32:00.000-08:00">
<meta property="article:modified_time" content="2022-05-27T14:32:00.000-08:00">
<meta property="article:section" content="tecnologia">

No objeto de content nós temos o que seria o article:published_time pela propriedade content.published_at e article:modified_time pela propriedade updated_at. O article:author daí seria o content.username.

Já no article:section eu chutei tecnologia.

O que acha de lapidarmos isso?

gabrnunes commented 2 years ago

Legal demais, acho que dá pra fazer isso sim. Mas e os links únicos de comentários, também seriam classificados como artigos?

filipedeschamps commented 2 years ago

Acredito que sim @gabrnunes 👍 eu já escrevi algumas respostas ali no TabNews que são mini artigos, por exemplo: https://www.tabnews.com.br/filipedeschamps/82830059-7733-4a11-80da-47533557df69

E a gente sempre deveria mirar para que cada resposta tenha algum valor concreto 🤝

gabrnunes commented 2 years ago

E dai como ficaria o title? Pq isso é importante pra um artigo né? Será que colocamos algo genérico como "Comentário de Filipe Deschamps"? Hoje o título tá meio confuso, pq só tem o nome do usuário e aquela hash gigante.

filipedeschamps commented 2 years ago

Ahhh ponto interessantíssimo! Sim, eu senti isso na hora de criar as páginas e não sabia muito como resolver.

O curioso é que um content child pode ter uma propriedade title, isso está disponível na API mas a interface web não dá chance disso ser injetado. Bom, dado a isso, o que acha de:

Se tiver title, mostra o title e se não tiver, pegar os 100 primeiros caracteres do corpo, por exemplo. Vai ficar muito melhor o resultado que aparece no buscador (ou não, porque daí talvez teremos que limpar um pouco alguns caracteres do corpo?). Talvez podemos começar com eles sujos para ver o que acontece.

gabrnunes commented 2 years ago

Ainda parece estranho 🤔 E se a gente pegar sempre o título do post de maior level? Aqui no GitHub, por exemplo, o link direto pro comentário é só uma âncora https://github.com/filipedeschamps/tabnews.com.br/issues/393#issuecomment-1139116157

filipedeschamps commented 2 years ago

Ainda parece estranho 🤔 E se a gente pegar sempre o título do post de maior level?

Puts seria perfeito, algo como: Em resposta a "...." mas hoje infelizmente o model content não tem um método para pegar o conteúdo root, mas vai ter mais para frente, até para conseguir usar isso na página da resposta para dar mais contexto.

Aqui no GitHub, por exemplo, o link direto pro comentário é só uma âncora

Correto, eles não tem uma página para a resposta, então seria algo como um Tweet respondendo outro Tweet, exemplo:

https://twitter.com/mhmdou1/status/1528841400850296834

Interessante que nesse caso eles fazem uma mistura das ideias (um prefixo com o corpo):

Corpo:

It contains lot of changes
But sincerely one of the best updates i have seen 
Like wow holy moly🙄🥺
I swear i keep adoring next more and more
Segment routes are amazing 
Nested layouts

Making our lives easier❤️

Eles não possuem uma tag no source da página (???), mas por JavaScript (imagino) definiram o título como:</p> <pre><code>document.title > 'Mohammad AlOulabi on Twitter: "@vercel It contains lot of changes But sincerely one of the best updates i have seen Like wow holy moly🙄🥺 I swear i keep adoring next more and more Segment routes are amazing Nested layouts Making our lives easier❤️" / Twitter'</code></pre> <p>Mas acho que usar o corpo inteiro seria ruim porque pode ficar um mega título 😂 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gabrnunes"><img src="https://avatars.githubusercontent.com/u/9409763?v=4" />gabrnunes</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hahahaha, boa! Pois é, vi que no Dev.to é assim também, eles colocam o conteúdo do comentário no título. Acho que vamos seguir dessa forma mesmo.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gabrnunes"><img src="https://avatars.githubusercontent.com/u/9409763?v=4" />gabrnunes</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@filipedeschamps desculpa, mas eu acabei tendo que focar na criação do novo site pra Codecon e não to conseguindo ajudar aqui :(</p> <p>Assim que eu der um tempo posso resolver essa Issue, mas fica livre se outra pessoa quiser resolver também!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/filipedeschamps"><img src="https://avatars.githubusercontent.com/u/4248081?v=4" />filipedeschamps</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Sem problema algum @gabrnunes foco total nas tarefas do seu trabalho e de quebra se quiser mais para frente, não deixe de fazer uma publicação com <code>Pitch:</code> lá no TabNews contando um pouco sobre esse implementação do novo site e se tem algo a destacar que tenha valor pra turma, e com isso trazer mais pessoas para a Codecon. Acho um Pitch super válido, pois você teve envolvimento direto com o projeto.</p> <hr /> <p>Em paralelo o @rodrigoKulb na issue #433 perguntou se ele podia ajudar em algo. Rodrigo, talvez iterar nessa implementação seja interessante. É algo que faz parte da Milestone 4, que já foi executada pelo @gabrnunes mas que podemos ajustar para algo mais refinado a "artigos". E como lida com SEO, todo carinho é pouco ❤️ 🤝 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/filipedeschamps"><img src="https://avatars.githubusercontent.com/u/4248081?v=4" />filipedeschamps</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Antes de fecharmos essa issue, sugiro criarmos uma função que limpe todo o markdown do <code>body</code> para ser usado nas tags de <code>description</code>.</p> <p>Pegando como exemplo essa <a href="https://www.tabnews.com.br/filipedeschamps/seal-ferramenta-para-comprovacao-da-autoria-de-suas-ideias-baseada-na-verificacao-de-timestamps">última publicação que fiz</a>:</p> <pre><code class="language-html"><meta name="description" content="[Seal](https://docs.planet.ink/data/seal/) faz parte de uma ferramenta chamada [Planet](https://planet.ink/product) (um aplicativo de gerenciamento de conhecimento) que consegue comprovar em"/></code></pre> <p>O melhor seria gerar algo como:</p> <pre><code class="language-html"><meta name="description" content="Seal faz parte de uma ferramenta chamada Planet (um aplicativo de gerenciamento de conhecimento) que consegue comprovar em"/></code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rodrigoKulb"><img src="https://avatars.githubusercontent.com/u/5334261?v=4" />rodrigoKulb</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Temos a opção de utilizar essa dependência ou fazer na unha. <a href="https://www.npmjs.com/package/markdown-to-text">https://www.npmjs.com/package/markdown-to-text</a> Qual sugestão?</p> <p>Edit: Pensando aqui você não acha legal a API do content retornar 2 body's com markdown e somente texto? Dependendo da utilização já vem direto da content essa opção.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/filipedeschamps"><img src="https://avatars.githubusercontent.com/u/4248081?v=4" />filipedeschamps</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Sugiro usar uma lib, porque tem várias regrinhas chatas, mas a dúvida é qual lib, pois tem essa sua, e tem outras:</p> <ul> <li><a href="https://www.npmjs.com/package/strip-markdown">https://www.npmjs.com/package/strip-markdown</a> (mais popular)</li> <li><a href="https://www.npmjs.com/package/remove-markdown-and-html">https://www.npmjs.com/package/remove-markdown-and-html</a> (mão na roda, pois tira HTML junto, mas está abandonada)</li> </ul> <p>E remover HTML também é importante, porque dá pra inserir no <code>body</code> coisas como <code><img></code>.</p> <p>Sobre retornar isso limpo na API, não sei, por enquanto acho que não. Mas seguindo sua idéia, o <code>model</code> content poderia ter um método para limpar o body. Mas nesse caso em específico, pelo uso ser somente no Layout, primeiro eu resolveria lá e depois com a necessidade real eu transportaria para o model (e daí expor na API). Esse tipo de refatoração é o tipo mais fácil e é uma delícia de fazer, ou não fazer porque o futuro nos provou que não foi necessário antecipar uma abstração assim 🤝 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rodrigoKulb"><img src="https://avatars.githubusercontent.com/u/5334261?v=4" />rodrigoKulb</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@filipedeschamps na verdade o objetivo inicial dessa Issue foi realizado na ultima #453 PR, mas venho fazer uma sugestão de uma nova implementação para SEO:</p> <p><a href="https://developers.google.com/search/docs/advanced/structured-data/article?hl=pt-br">https://developers.google.com/search/docs/advanced/structured-data/article?hl=pt-br</a> <img src="https://user-images.githubusercontent.com/5334261/177356743-bd15315a-b3c2-4468-b8f5-4bbeb8a89a6b.png" alt="Captura de tela em 2022-07-05 11-53-00" /></p> <p><a href="https://developers.google.com/search/docs/advanced/structured-data/article?hl=pt-br#amp-sd">AMP com dados estruturados:</a> as páginas AMP com dados estruturados podem ser exibidas no carrossel das Principais notícias, no carrossel de host da pesquisa aprimorada, nas histórias visuais e em resultados da pesquisa aprimorada em dispositivos móveis. Esses resultados podem incluir imagens, logotipos de páginas e outros recursos interessantes de resultados da pesquisa.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/filipedeschamps"><img src="https://avatars.githubusercontent.com/u/4248081?v=4" />filipedeschamps</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Show Rodrigo! Não entendo muito bem de AMP, mas sei que o Next possui suporte para isso de alguma forma (acho), mas lembro que no passado o Google anunciou que iria parar de dar atenção ao AMP, olha só: <a href="https://plausible.io/blog/google-amp">https://plausible.io/blog/google-amp</a></p> <p>É sobre o mesmo assunto?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rodrigoKulb"><img src="https://avatars.githubusercontent.com/u/5334261?v=4" />rodrigoKulb</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@filipedeschamps realmente parece que o Google vai descontinuar o AMP principalmente para notícias / artigos. Tentei achar alguns artigos com APM não consegui simular nenhum caso, Achei somente para receitas e livros. Então podemos cancelar a missão.</p> <p>Vamos finalizar essa Issue?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/filipedeschamps"><img src="https://avatars.githubusercontent.com/u/4248081?v=4" />filipedeschamps</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Vamos finalizar essa Issue?</p> </blockquote> <p>Vamos 🤝 mas obrigado por trazer esse ponto para cá, SEO é algo fundamental para o tipo de site que é o TabNews 🤝 👍 </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

filipedeschamps / tabnews.com.br

Tipo de conteúdo nas Tags para SEO #393