4

I have a Twitter share button on an application I'm building. I am using the Twitter card <meta> tags (documentation) to define the image that shows up on Twitter. The application is dynamic and allows you to share individual 'reports'. When you share an individual report, I have a query parameter ?report=1608 (see example).

The problem: I can only define one Twitter card for the entire site. I would love to dynamically change the card information (title, text, image) for each individual report that is shared.

Can this be done? Any ideas?

I was thinking about just updating the meta tags dynamically with JavaScript, but I don't think this would work as a solution.

jOshT
  • 1,525
  • 1
  • 11
  • 15

3 Answers3

4

No, this is not possible. Twitter's card crawler (Twitterbot) does not support executing Javascript in the page and requires that the meta tags are static. There's no way to do this dynamically.

Andy Piper
  • 11,422
  • 2
  • 26
  • 49
  • 1
    Thanks Andy, that was my impression. I wish there was a way to add a custom card as query parameters to the share URL. – jOshT Jul 19 '17 at 18:21
  • @AndyPiper, Hi Andy, after I set twitter card image meta tags in the head of my blog. Whenever I share a new article on my blog, that image will show up. However, before I set a twitter card image, twitter seems to display the first image in my blog article. Is that how it works? – Jun Feb 22 '18 at 19:11
  • If that's how your blog is set up, yes. – Andy Piper Feb 23 '18 at 15:47
0

It is possible, you can dynamically load in the title, text and the image. I tried it and it worked... but it takes a little time to populate on the browser/website, but it works perfectly/instantly on the twitter app... need a workaround for that... Let me know if you find any solution for that. This is how I used it:


<?php
    if (isset($_GET['code'])) {
    ?>

        <meta name="twitter:card" content="summary_large_image">
        <meta property="og:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png" />
        <meta name="twitter:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png">
        <meta name="twitter:image:alt" content="image_alt">

    <?php
    }
?>
Mohamed Arkib
  • 53
  • 6
-1

I think you can do the SSR. good luck

J.Zong
  • 9
  • 1