openGraphScraper icon indicating copy to clipboard operation
openGraphScraper copied to clipboard

Handling of dynamic images

Open deankroker opened this issue 1 year ago • 2 comments

I'm trying to get open-graph-scraper to return OG images for a Loom video.

E.g.: if I call the below function with the URL https://www.loom.com/share/473fad25ebd24b5ea8091503253dfecf,

'use server'

import ogs from 'open-graph-scraper'

export async function fetchOgData(url: string) {
    try {
        const { result } = await ogs({ url })
        console.log('URL:', url)
        console.log('Full OG Result:', JSON.stringify(result, null, 2))

        return {
            success: true,
            data: {
                title: result.ogTitle,
                description: result.ogDescription,
                image: result.ogImage?.[0]?.url,
                url: result.ogUrl
            }
        }
    } catch (error) {
        console.error('OG Scrape Error:', error)
        return { success: false, error: 'Failed to fetch OG data' }
    }
}

data.image returns https://cdn.loom.com/assets/img/og/loom-banner.png, whereas if I paste the same URL on opengraph.xyz, you'll see the og:image property returns https://cdn.loom.com/sessions/thumbnails/473fad25ebd24b5ea8091503253dfecf-1650653926695.gif.

Is this expected behavior for dynamic routes or is there a way to properly parse OG images for sites like Loom?

open-graph-scraper returns static placeholder:

Image

iMessage, FB tools, and opengraph.xyz returns correct image for URL:

Image

Thanks in advance for your help, this is my first time using your API :) hopefully this is just a pebkac error :)

deankroker avatar Jan 17 '25 23:01 deankroker

Hello. This is working as design. https://cdn.loom.com/assets/img/og/loom-banner.pn is the og:image of that page.

Image

I'm guessing those other tools have something hardcoded for this website to point to the other image instead of the og tag.

jshemas avatar Jan 18 '25 03:01 jshemas

thanks for the reply @jshemas -- but most of the OG generators don't reference the static HTML, for example, if you paste that loom video URL into iMessage or the OG checker that I linked above that Meta provides, you'll see it loads the dynamic OG Image. Lots of services like Vercel have OG runtime support. Does open-graph-scraper support dynamic runtimes?

deankroker avatar Jan 18 '25 20:01 deankroker