Docs
When Social Platform Life Happens

When Social Platform Life Happens

Don't Fret, Adapt w/Open Source 🤠

When Social Platform Life Happens

Sometimes social media platforms make changes like this which can adversely impact (or limit) the way we share webpages and surface their corresponding metadata to folks, e.g. title, byline, etc.

When these type of things happen (or even before they do), don't sweat it — we can leverage dynamic image generation with some snazzy open source tools and packages, like Open Graph, MDX and vercel/og to find a pretty decent solution to the problem.

Dynamic image generation allows us to superimpose an article or blog post's title, for instance, on top of a relevant image to create a final shareable link and contextual open graph image. Here's an example of what that might look like:

An Example Dynamically Generated Image

Fig.1 - An Example of a Dynamically Generated Image

The following are a few partial code snippets of how one might leverage a combination of Open Graph Protocol, MDX (via Contentlayer) and vercel/og to generate dynamic images, like the one above.

Leveraging vercel/og and frontmatter ala Contentlayer, one can do sommething like the following:

post-1.mdx
---
title: Your Title
description: Your Description
image: some-image-path.jpg // internal or external
---
 
Your content...

This step also defines the custom generateMetadata function which is used to generate the dynamic open graph image.

app/posts/[[...slug]].tsx
// For brevity, this is only part of the file
export async function generateMetadata({
  params,
}: DocPageProps): Promise<Metadata> {
  const doc = await getDocFromParams({ params });
 
  if (!doc) {
    return {};
  }
 
  return {
    title: doc.title,
    description: doc.description,
    openGraph: {
      title: doc.title,
      description: doc.description,
      type: "article",
      url: absoluteUrl(doc.slug),
      images: [
        {
          url: `${siteConfig.ogImage}?title=${doc.title}&description=${doc.description}&image=${doc.image}`,
          alt: `${doc.title} - ${doc.description}`,
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      creator: "@mannybreno",
      title: doc.title,
      description: doc.description,
      images: [
        {
          url: `${siteConfig.ogImage}?title=${doc.title}&description=${doc.description}&image=${doc.image}`,
          alt: `${doc.title} - ${doc.description}`,
          width: 1200,
          height: 630,
        },
      ],
    },
  };
}
// ... remaining code

app/api/og.tsx
import { ImageResponse, type NextRequest } from "next/server";
 
// Complete API and examples at: https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-api
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title");
  const description = searchParams.get("description");
  const image =
    searchParams.get("image") ?? "path-to-fallback-image-if-desired...";
 
  if (!title) {
    return new ImageResponse(<>Visit with &quot;?title=vercel&quot;</>, {
      width: 1200,
      height: 630,
    });
  }
 
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          fontSize: 60,
          color: "black",
          background: "#f6f6f6",
          width: "100%",
          height: "100%",
          paddingTop: 50,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <img
          width="256"
          height="256"
          src={`https://github.com/${image}.png`}
          style={{
            borderRadius: 128,
            // ... other styles
          }}
        />
        <h1>{title}</h1>
        <h2>{description}</h2>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

When social platform life happens, don't fret, adapt w/open source 🤠

Shoutout to the good folks at Vercel and the wider open source community for making solutions like dynamic image generation possible.

Check out the following resources for more information on the topics discussed in this post.

Example Post 2