Handling of dynamic images
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:
iMessage, FB tools, and opengraph.xyz returns correct image for URL:
Thanks in advance for your help, this is my first time using your API :) hopefully this is just a pebkac error :)
Hello. This is working as design. https://cdn.loom.com/assets/img/og/loom-banner.pn is the og:image of that page.
I'm guessing those other tools have something hardcoded for this website to point to the other image instead of the og tag.
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?