Skip to content

Handling of dynamic images #258

Description

@deankroker

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 :)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions