I'm leveraging Notion as the backend for a SPA-style blog built using Next.js and the Nobelium framework. This setup offers exceptional speed and functionality. However, I've encountered an issue with implementing dynamic open graph images (og-image). Currently, my setup restricts me to using a single, preset image for all posts when shared on social media. The challenge arises because the images within each Notion post have URLs that are unpredictably generated by Notion, and these images are embedded within the post content itself. Unlike other post properties (such as title, description, and slug), which are predefined fields in a form I complete for each post, the image URLs cannot be predetermined or statically set. Below is the code illustrating this setup. Is there a way to dynamically identify and use these Notion-generated image URLs as the og-image for each post when shared on social media?
import Footer from '@/components/Footer'
import Head from 'next/head'
import Header from '@/components/Header'
import PropTypes from 'prop-types'
import cn from 'classnames'
import { useConfig } from '@/lib/config'
const Container = ({ children, layout, fullWidth, ...customMeta }) => {
const BLOG = useConfig()
const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
const meta = {
title: BLOG.title,
type: 'website',
...customMeta
}
// URL of your static image
const staticImageUrl = "STATIC URL";
return (
<div>
<Head>
<title>{meta.title}</title>
<meta name="robots" content="follow, index" />
<meta charSet="UTF-8" />
{/* Other meta tags... */}
<meta name="description" content={meta.description} />
<meta property="og:locale" content={BLOG.lang} />
<meta property="og:title" content={meta.title} />
<meta property="og:description" content={meta.description} />
<meta property="og:url" content={meta.slug ? `${url}/${meta.slug}` : url} />
{/* Updated og:image meta tag */}
<meta property="og:image" content={staticImageUrl} />
<meta property="og:type" content={meta.type} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content={meta.description} />
<meta name="twitter:title" content={meta.title} />
{/* Updated twitter:image meta tag */}
<meta name="twitter:image" content={staticImageUrl} />
{meta.type === 'article' && (
<>
<meta property="article:published_time" content={meta.date} />
<meta property="article:author" content={BLOG.author} />
</>
)}
</Head>
<div className={`wrapper ${BLOG.font === 'serif' ? 'font-serif' : 'font-sans'}`}>
<Header navBarTitle={layout === 'blog' ? meta.title : null} fullWidth={fullWidth} />
<main className={cn('flex-grow transition-all', layout !== 'blog' && ['self-center px-4', fullWidth ? 'md:px-24' : 'w-full max-w-2xl'])}>
{children}
</main>
<Footer fullWidth={fullWidth} />
</div>
</div>
)
}
Container.propTypes = {
children: PropTypes.node
}
export default Container
Thanks in advance