How to get Tweet preview image

Question

I'm trying to get a Tweet's meta tags from its link. I can get the meta tags using a module called html-metadata-parser. My problem is when I look at Twitter's meta tags I don't see a tag for image on the tweet. But when I post the link in chats such as Discord, Instagram and Whatsapp it shows me the image of the Tweet too. Anyone know how can I get the link to the preview image?

 require('dotenv').config();

    const router = require('express').Router();
    const Meta = require('html-metadata-parser');
    const axios = require('axios');
    const Jimp = require('jimp');

    router.post('/webhooks/discounts', async (res, req) => {
    const { link, provider, oauth } = req.body;

    if (
        oauth === process.env.IFTTTOAUTH
    ) {

        var response = await Meta.parser(link);
        const metaTags = JSON.stringify(response, null, 3);

        let hasImage;
        let ProviderNameURL;

        await metaTags.og.images[0] ? hasImage = true : hasImage = false;
        provider === "Steam" ? ProviderNameURL = "steam" : provider === "Ubisoft" ? ProviderNameURL = "ubisoft" : provider === "EpicGames" ? ProviderNameURL = "epic_games" : provider === "GOG.com" ? ProviderNameURL = "gog_com" : provider === "Humble Bundle" ? ProviderNameURL = "humble_bundle" : "unknown";

        const text = await metaTags.og.description;
        const image = hasImage === true ? await metaTags.og.images[0].url : null;
        const icon = `https://cdn.syfac.xyz/images/game_markets/${ProviderNameURL}.png`;
        const urlToDiscount = link;

        try {
            axios.post(requesterURL, {
                text,
                image,
                provider,
                icon,
                urlToDiscount,
                hasImage,
            })
        } catch (err) {
            console.log(err)
        }
    } else {return;}
    })

    module.exports = router;

This is my code. og:image is not what I'm looking for since it respresents the profile image.

When I was checking Twitter's meta tags I saw a link tag with preconnect and one with dns-prefetch and they both go to //pbs.twimg.com and when I checked the şmage source from the embed in Discord it was a link from pbs.twimg.com so I think I have some progress but I still don't know how to get the image.

Answer 1

So if I get it right, what you are looking for is the preview image generated for a Tweet. You can use Twitter API for such an operation. Over time I found out that working with Twitter's API is much better compared to parse/scrape it. Please see: https://developer.twitter.com/en/docs/twitter-api/data-dictionary/object-model/media

What you need to do is:

• Get a Twitter Developer account. This will help you access the Twitter API.
• Use the API and get detailed information about Tweets and/or Twitter users.

Here is an example:

Sample Tweet URL: https://twitter.com/TravelVida/status/1380913486931361794 so the ID is: 1380913486931361794.

I used this ID to create a request and used it with Postman. In your case, you should adapt this call to your JavaScript code. Here is the request URL:

https://api.twitter.com/2/tweets/:id?expansions=attachments.media_keys&media.fields=duration_ms,height,media_key,preview_image_url,public_metrics,type,url,width

And the response:

{
    "data": {
        "attachments": {
            "media_keys": [
                "3_1380913484095963145",
                "3_1380913484456718339"
            ]
        },
        "id": "1380913486931361794",
        "text": "Amankila, Bali, Indonesia 🇮🇩\nvia: bennyjurdi 
    },
    "includes": {
        "media": [
            {
                "height": 1537,
                "width": 1242,
                "media_key": "3_1380913484095963145",
                "url": "https://pbs.twimg.com/media/Eyn9f1UWQAkLAFe.jpg",
                "type": "photo"
            },
            {
                "height": 1540,
                "width": 1242,
                "media_key": "3_1380913484456718339",
                "url": "https://pbs.twimg.com/media/Eyn9f2qW8AMbC0-.jpg",
                "type": "photo"
            }
        ]
    }
}

The last image's preview URL is what you need. Image URL: https://pbs.twimg.com/media/Eyn9f2qW8AMbC0-.jpg

Preview: