In our visually-dominated digital landscape, Open Graph images are more than just aesthetic enhancements; they are crucial for making your web content stand out on social media platforms. Here is a preview of Open Graph image of a Quotion post:
However, implementing them in Vercel platforms starter kit (multi-tenancy platform), can be a bit tricky since it lacks out-of-the-box support for this feature. This post is your guide through this challenge, offering a practical solution to effectively integrate Open Graph images.
Understanding the Challenge with Multi-Tenancy Platforms
Before diving into the technicalities, let's clarify what we mean by a 'multi-tenancy platform.' In simple terms, it allows multiple users or 'tenants' to operate within the same application, each within their isolated segment of the platform. This architecture, while efficient, can complicate certain functionalities, such as the correct routing of Open Graph images.
The Core Issue
A multi-tenancy platform usually rewrites a request to a specific route, e.g. https://emma.quotion.co -> app/blog/[domain]/page.tsx, per Next.js doc, you should be able to build an open-graph image for it, for example you have this file :
import { ImageResponse } from 'next/og'
export const runtime = 'edge'
export const alt = 'About Acme'
export const size = {
width: 1200,
height: 630,
}
export const contentType = 'image/png'
export default async function Image() {
return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
About Acme
</div>
),
{
...size,
}
)
}
Based on Next.js doc, this file should generate the open-graph image for your page automatically. However, this didn’t work, because the generated image points to the http://localhost:3000/blog/qing.quotion.co/opengraph-image due to URL rewrite, Next.js can’t find the correct route, which causes 404.
The root cause is Next.js doesn’t know the open-graph image should be rewritten to another route. Luckily, we can mitigate this issue with another open-graph approach:
A Viable Solution: Leveraging Metadata
Here's where metadata comes into play. By customizing your Open Graph image through metadata, you sidestep the URL misdirection issue. This function allows for more control and precision in how your Open Graph images are generated and displayed. Let's look at how this is achieved in the code:
export async function generateMetadata({
params,
}: PostContext): Promise<Metadata> {
const { post } = await getBlogPostData(params);
const openGraph: OpenGraph = {
title: post.title,
description: post.excerpt,
type: 'article',
images: [
{
// Specify an API route
url: `/api/blog/og?domain=${params.domain}&slug=${params.slug}`,
width: 1200,
height: 630,
alt: post.title,
},
],
};
return {
title: post.title,
openGraph,
twitter: {
card: 'summary_large_image',
...openGraph,
},
};
}
import { ImageResponse } from 'next/og';
const size = {
width: 1200,
height: 630,
};
// Generate the image in the API route
export async function GET() {
return new ImageResponse(
(
<div
style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
About Acme
</div>
),
{
...size,
}
)
}
Since /api/blog/og is a valid API path, this issue is resolved perfectly!
🙏 Thanks for reading, let me know if you have a better solution!
Engineering
Nextjs
Create your blogs directly from Apple Notes.
Say goodbye to complex CMS updates and management issues!
You focus on creating quality content while Quotion takes care of the rest.
Latest
More from the blog
Qing
Launch your blog from Apple Notes in 4 simple steps
Do you know that you can turn Apple Notes into web pages? With Quotion, it's not only possible, but also surprisingly simple! In this tutorial, I'll walk you through the process of transforming your notes into blog posts using Quotion. TLDR 1. Sign up with Quotion First of all, you'll need a Quotion account.
Read post
Qing
ProductUpdate
Password protection
We're so excited to introduce a highly request feature: password protection! You can protect your whole site with a single password. Your site visitors must enter the password, then they can access all pages until they refresh the page, which will ask them to enter the password again. Demo Check out this live demo: How
Read post
Qing
ProductUpdate
Custom CSS is available in the Lite plan
Previously, custom CSS was only available in the Pro+ plan. Since many of our customers are coming from WordPress, which includes custom CSS in the entry-level plan, they expect Quotion to have a similar feature. Therefore, we have included this feature in the Lite plan to help them migrate to Quotion more smoothly. If
Read post