Dynamic Twitter Card Images

user_2751125 0
Viewed 2402

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.

twitter-card meta twitter html javascript
3 Answers

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
    }
?>
user_96929960
Related