Telegram API Question posted in
A comprehensive official documentation can be found here.

ReactJS Helmet meta tags not working forTwitter Cards and Telegram previews – Telegram API

This is my current configuration that adds the meta tags:

 {data? <Helmet>
    <title>Site- {data.name ? data.name : ""}</title>
    <meta charSet="utf-8" />
    <meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
    <meta name="twitter:site" content="@user" data-react-helmet="true" />
    <meta name="twitter:creator" content="@user" data-react-helmet="true" />
    <meta property="og:type" content="website" data-react-helmet="true"/>
    <meta property="og:url" content={document.location.href} data-react-helmet="true" />
    <meta property="og:title" content={data.name ? data.name : ""} data-react-helmet="true" />
    <meta property="og:description" content={data.description?.en?.slice(0, 65) + "..."} data-react-helmet="true" />
    <meta property="og:image" content={data.image?.large} data-react-helmet="true" />
  </Helmet>
    : null}

data is a hook that is populated when the request from the database is done.

Trying on https://cards-dev.twitter.com/validator returns Unable to render Card preview. Any idea how it can be fixed?

Tags:

2

Answers


  1. 0

    I think its issue of CSR (Client Side Rendering). Twitter card fetch meta of link with JavaScript disabled so you need to fill meta on server response in that case you need SSR (Server Side Rendering).I recommend to try to use nextjs.org instead

    Login or Signup to reply.
  2. 0

    I think you need to use different meta tags for twitter and maybe other sites, as link preview can be customized by the sites.

    For example, this is saying that you need to use twitter:title, twitter:description and twitter:image.

    I personally suggest to use react-seo-meta-tags with helmet as they seem to handle those kind of difficulties. You can check their official site.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search