Hello, I want to generate url previews

Hello, I want to generate url previews with opengraph meta tags but is using the browser rendering api the right approach for dynamic websites?
2 Replies
Unknown User
Unknown User3mo ago
Message Not Public
Sign In & Join Server To View
gegi
gegiOP3mo ago
Hello, I started to try it but for some websites its not working. Instagram works, but x.com or Tiktok aren't returning the meta elements and if I return the html of it, they dont exist
try {
const html = await cloudflareClient.browserRendering.content.create({
account_id: process.env.CLOUDFLARE_ACCOUNT_ID!,
url,
rejectResourceTypes: ["image", "media", "font", "stylesheet"],
actionTimeout: 6000,
waitForSelector: {
selector: "meta[property='og:title'], meta[name='twitter:title']",
timeout: 3000,
},
});

const $ = cheerio.load(html);
const image =
$('meta[name="twitter:image"]').attr("content") ||
$('meta[property="og:image"]').attr("content") ||
$('meta[property="og:image:url"]').attr("content");

const imageAlt =
$('meta[name="twitter:image:alt"]').attr("content") ||
$('meta[property="og:image:alt"]').attr("content");

const title =
$('meta[name="twitter:title"]').attr("content") ||
$('meta[property="og:title"]').attr("content");

const description =
$('meta[name="twitter:description"]').attr("content") ||
$('meta[property="og:description"]').attr("content");

const site =
$('meta[name="twitter:site"]').attr("content") ||
$('meta[property="og:site_name"]').attr("content") ||
$('meta[name="application-name"]').attr("content");

const type =
$('meta[name="twitter:card"]').attr("content") ||
$('meta[property="og:type"]').attr("content");

previewLinkMeta = { image, title, description, site, url, imageAlt, type };

if (previewLinkMeta?.title || previewLinkMeta?.image) {
return await setupClient(token).mutation(
api.utils.setPreviewLinkMeta,
previewLinkMeta,
);
}
} catch (error) {
console.error("Both OpenGraph and fallback failed:", error);
throw new Error("Failed to fetch fallback data");
}
try {
const html = await cloudflareClient.browserRendering.content.create({
account_id: process.env.CLOUDFLARE_ACCOUNT_ID!,
url,
rejectResourceTypes: ["image", "media", "font", "stylesheet"],
actionTimeout: 6000,
waitForSelector: {
selector: "meta[property='og:title'], meta[name='twitter:title']",
timeout: 3000,
},
});

const $ = cheerio.load(html);
const image =
$('meta[name="twitter:image"]').attr("content") ||
$('meta[property="og:image"]').attr("content") ||
$('meta[property="og:image:url"]').attr("content");

const imageAlt =
$('meta[name="twitter:image:alt"]').attr("content") ||
$('meta[property="og:image:alt"]').attr("content");

const title =
$('meta[name="twitter:title"]').attr("content") ||
$('meta[property="og:title"]').attr("content");

const description =
$('meta[name="twitter:description"]').attr("content") ||
$('meta[property="og:description"]').attr("content");

const site =
$('meta[name="twitter:site"]').attr("content") ||
$('meta[property="og:site_name"]').attr("content") ||
$('meta[name="application-name"]').attr("content");

const type =
$('meta[name="twitter:card"]').attr("content") ||
$('meta[property="og:type"]').attr("content");

previewLinkMeta = { image, title, description, site, url, imageAlt, type };

if (previewLinkMeta?.title || previewLinkMeta?.image) {
return await setupClient(token).mutation(
api.utils.setPreviewLinkMeta,
previewLinkMeta,
);
}
} catch (error) {
console.error("Both OpenGraph and fallback failed:", error);
throw new Error("Failed to fetch fallback data");
}
Thats the api i created for doing so sometimes it works, sometimes it doesnt its not running into a server time out for sure but it takes sometimes up to 5 seconds to retrieve the data, which is quiet long? Anyone can help me furthere here please? Push

Did you find this page helpful?