create a new api route called "og.tsx" at src/pages/api/
create a handler which extracts page name from url params and returns an ImageResponse (with the help of @vercel/og package)
research on some sleek, minimal OG image templates and use it here
it should contain
website URL (finiteloop.co.in)
our logo (can be found on /public/assets/, compress if needed)
our club's name 'Finite Loop Club'
page name (extracted from URL params)
anything else you'd want to add but keep it minimalistic, not too crowded
once API is completed, use it at the right place to pass on page path extracted usePathname hook from 'next/navigation' to the OG API you created. how you will do this is upto your choice, for eg: you can make a shared SEO layout which wraps all incoming pages and attaches the OG info (image, meta desc, page title etc.)
motivation: enhance social sharing options
Note
you can refer /src/pages/api/certificate.tsx for an example. we have created an OG image generator there, for digital certificates issued on our website. you can also refer official docs of @vercel/og package to understand more.
src/pages/api/
@vercel/og
package)usePathname
hook from 'next/navigation' to the OG API you created. how you will do this is upto your choice, for eg: you can make a shared SEO layout which wraps all incoming pages and attaches the OG info (image, meta desc, page title etc.)