1
resposta

Angular - Meta tags para o telegram

Olá!

Eu possuo uma aplicação em Angular e gostaria que ao copiar o link de uma página (por exemplo o perfil de alguém) e colasse no Telegram, automaticamente apareceria um card com a imagem de perfil da pessoa, nome de titulo e a descrição dele.

Metatags que ele usa:

<meta property="og:title" content="Title" />
<meta property="og:site_name" content="Site name"/>
<meta property="og:description" content="Description" />
<meta property="og:image" content="Link to your logo" />

Procurei em alguns locais sobre e dinamicamente falando não funcionou, pois parece que o Telegram não carrega a página para pegar os metatags e acaba pegando o que está hardcoded no HTML.

Há alguma forma de dinamicamente ir trocando os metatags conforme o link copiado em minha aplicação?

Agradeço quem puder me ajudar!!!

1 resposta

Fala ai Ana, tudo bem? Esse tipo de preview é feito utilizando as meta tags sim, no caso, o telegram também as uso, vou te mandar um exemplo das meta tags do meu blog:

<head>
    <meta charset=utf-8>
    <meta content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" name=viewport>
    <meta content="ie=edge" http-equiv=x-ua-compatible>
    <meta content=unsafe-url name=referrer>
    <meta content=#0099ff name=theme-color>
    <meta content="Desenvolvimento,desenvolvimento front-end,front-end,programação,css3,html5,javascript,java,php,adroid" name=keywords>
    <meta content=_75dHIyh0o2uKMOuK3hX15MxRFDJaal-sjq1b3omfXI name=google-site-verification>
    <meta content=https://blog.matheuscastiglioni.com.br/ property=article:publisher>
    <meta content=pt_BR property=og:locale>
    <meta content="Blog do Matheus Castiglioni&nbsp;|&nbsp;Memorizar vs Aprender" property=og:site_name>
    <meta content=summary_large_image name=twitter:card>
    <meta content=@mahenrique94 name=twitter:site>
    <meta content=@mahenrique94 name=twitter:creator>
    <meta content=@mahenrique94 name=twitter:site>
    <meta content=143110269653288 property=fb:app_id>
    <meta content="Memorizar vs Aprender" name=title>
    <title>Blog do Matheus Castiglioni&nbsp;|&nbsp;Memorizar vs Aprender</title>
    <meta content="Matheus Castiglioni" property=article:author>
    <meta content="Diariamente enfrentamos situações das quais não sabemos o que fazer e provavelmente nosso primeiro passo é acessar um famoso site: www.google.com (ou derivados) e realizar algum tipo de pesquisa para dado o nosso problema." name=description>
    <meta content="Memorizar vs Aprender" property=og:title>
    <meta content=https://blog.matheuscastiglioni.com.br/memorizar-vs-aprender property=og:url>
    <meta content=article property=og:type>
    <meta content="Diariamente enfrentamos situações das quais não sabemos o que fazer e provavelmente nosso primeiro passo é acessar um famoso site: www.google.com (ou derivados) e realizar algum tipo de pesquisa para dado o nosso problema." property=og:description>
    <meta content=https://res.cloudinary.com/mahenrique94/image/upload/v1570579759/diferenca-entre-aprender-e-memorizar_1_pwxsct.jpg property=og:image>
    <meta content="Memorizar vs Aprender" name=twitter:title>
    <meta content="Diariamente enfrentamos situações das quais não sabemos o que fazer e provavelmente nosso primeiro passo é acessar um famoso site: www.google.com (ou derivados) e realizar algum tipo de pesquisa para dado o nosso problema." name=twitter:description>
    <meta content=https://res.cloudinary.com/mahenrique94/image/upload/v1570579759/diferenca-entre-aprender-e-memorizar_1_pwxsct.jpg name=twitter:image>
    <meta content=https://res.cloudinary.com/mahenrique94/image/upload/v1570579759/diferenca-entre-aprender-e-memorizar_1_pwxsct.jpg name=twitter:image:src>
    <meta content="Memorizar vs Aprender" name=twitter:image:alt>
    <meta itemscope itemtype=http://schema.org/Article>
    <meta content="Memorizar vs Aprender" itemprop=headline>
    <meta content="Diariamente enfrentamos situações das quais não sabemos o que fazer e provavelmente nosso primeiro passo é acessar um famoso site: www.google.com (ou derivados) e realizar algum tipo de pesquisa para dado o nosso problema." itemprop=description>
    <meta content=https://res.cloudinary.com/mahenrique94/image/upload/v1570579759/diferenca-entre-aprender-e-memorizar_1_pwxsct.jpg itemprop=image>
    <meta content="Memorizar vs Aprender" itemprop=og:headline>
    <meta content="Diariamente enfrentamos situações das quais não sabemos o que fazer e provavelmente nosso primeiro passo é acessar um famoso site: www.google.com (ou derivados) e realizar algum tipo de pesquisa para dado o nosso problema." itemprop=og:description>
    <meta content="Matheus Castiglioni" property=author>
    <link href=/assets/img/favicon.ico rel=icon>
    <link href=https://blog.matheuscastiglioni.com.br/memorizar-vs-aprender rel=canonical>
    <meta content=Outros property=article:section>
    <meta content="2019-10-08 21:03:01 -0300 -0300" property=article:published_time>
    <meta content="Estudo, Aprendizado, Conhecimento," property=article:tag>
</head>

Repare que tem bastante, uma para cada "site" e plataforma.

Espero ter ajudado.