Adição de meta tags para descrição e pré-visualização ao compartilhar o link do site

[Azanniel]

Descrição ✨

Uma boa funcionalidade a ser adicionada é uma pré-visualização customizada quando um usuário compartilhar o link do site com alguém, seja pelo discord ou por qualquer rede social.

Normalmente, quando compartilhamos um link no discord, temos a seguinte visualização:

Então é esperado que quando compartilharmos o site tenhamos uma visualização parecida mostrando descrições e prévia de uma imagem.

Links úteis 🔗

Pensando nisso fiz uma pesquisa rápida e encontrei alguns conteúdos que podem ser implementados usando as estratégias dos links:

• Fixing the Preview Image, Title and Description for Shared Links
• Meta tags for URL with description and image (In Skype, Discord)

⚠️ Deve-se manter uma conversa com o time de Design para se chegar a um consenso dos textos de descrição e imagem de pré-visualização

Objetivos 🎯

• [ ] Criação de meta tags para compartilhamento do link do site
• [ ] Adição de uma imagem de pré-visualização fornecida pelo time de deisgn
• [ ] Adição de textos de descrição consultando (consenso) @thaty-maru e @gabrovskii

[Azanniel]

Consegui encontrar esse gerador -> https://metatags.io/

Com ele consegui gerar as seguintes meta-tags:

<!-- Primary Meta Tags -->
<title>Python Norte 2023</title>
<meta name="title" content="Python Norte 2023">
<meta name="description" content="O Python Norte 2023 é o evento da linguagem de programação Python direcionada à região Norte do país organizado pela própria comunidade para difundir a linguagem e criar a conexão de diversas áreas e culturas através da tecnologia.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://pynorte.github.io/pynorte2023-site/">
<meta property="og:title" content="Python Norte 2023">
<meta property="og:description" content="O Python Norte 2023 é o evento da linguagem de programação Python direcionada à região Norte do país organizado pela própria comunidade para difundir a linguagem e criar a conexão de diversas áreas e culturas através da tecnologia.">
<meta property="og:image" content="">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://pynorte.github.io/pynorte2023-site/">
<meta property="twitter:title" content="Python Norte 2023">
<meta property="twitter:description" content="O Python Norte 2023 é o evento da linguagem de programação Python direcionada à região Norte do país organizado pela própria comunidade para difundir a linguagem e criar a conexão de diversas áreas e culturas através da tecnologia.">
<meta property="twitter:image" content="">

[Azanniel]

https://shivamethical.medium.com/creating-web-page-preview-while-sharing-url-via-social-applications-like-whats-app-fb-cd2e19b11bf2

Mais uma referência para quando essa atividade for para progresso.