CODEWITHSUNDEEP
reactjstwitter-cardreact-helmet
user11661871
user11661871

Reputation:

Twitter card meta tags work in index.html, not in React Helmet

I have used below React Helmet code in App.js for rending Twitter card meta. 

          <Helmet>
              <meta charSet="utf-8" />
              <title>
                {`xxxxx`}
              </title>
              <meta
                name="description"
                content={`xxxxx.`}
              />
              <meta name="twitter:card" content="summary_large_image" />
              <meta
                name="twitter:title"
                content="xxxxx"
              />
              <meta
                name="twitter:description"
                content="xxxx."
              />
              <meta name="twitter:site" content="@xxxx" />
              <meta
                name="twitter:image"
                content="https:xxxx"
              />
              <meta name="twitter:creator" content="@xxxx" />
            </Helmet>

The meta tags do show up while I do a browser inspect. But in twitter card validator(https://cards-dev.twitter.com/validator), I am getting ERROR: No card found (Card error).

If I add the same meta tags in index.html, it works. But, I would like the twitter card to work in Helmet so that I can change it dynamically. Is it possible without Server-Side Rendering?

Upvotes: 4

Views: 4508

Answers (2)

Noah Jeffrey
Noah Jeffrey

Reputation: 119

Twitter now appears to be rendering JavaScript when crawling webpages for meta tags! At least as far as React Helmet is concerned.

We're using Twitter's summary_large_image along with twitter:image via Helmet on our React website and it's confirmed working in the Twitter Card Validator and in live Twitter posts!

Please note that a URL protocol (https://) was required for Twitter to use the image specified in our twitter:image meta tags. We originally had those meta tags built without the URL protocol, and images were not being pulled in by Twitter to display with the tweet.

Upvotes: 1

Brandon Durham
Brandon Durham

Reputation: 7727

Facebook/Twitter/etc. crawlers do not render JavaScript, so unless you are rendering Helmet content on the server OR including the card meta tags in the index.html file, they will never pick up your client-side updates.

Upvotes: 3

Related Questions