Open Graph images not working on next.js 15.3.1 despite being present in the HTML

[h0ngwon]

I have encountered an issue where my Open Graph images are no appearing when I share my page.

This is My page : https://graphic.fan/p/t360y3XX

import { Metadata } from "next";
import { notFound } from "next/navigation";

import { domain } from "@/global/utils/metadataUtil";

import PostDetailScreen from "@/module/community/detail/PostDetailScreen";

import { CommunityApi } from "@/data/api/communityApi";

interface Props {
  params: Promise<{ serialNumber: string }>;
}

export default async function page({ params }: Props) {
  const { serialNumber } = await params;
  let post;
  try {
    post = await CommunityApi.getPostBySerialNumber(serialNumber);
  } catch (e) {}
  if (!post) notFound();

  return <PostDetailScreen post={post} />;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { serialNumber } = await params;
  const post = await CommunityApi.getPostBySerialNumber(serialNumber);

  let rawImageSrc: string;
  const imgTagRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/i;
  const match = post.html.match(imgTagRegex);

  if (match && match[1]) {
    rawImageSrc = match[1];
  } else {
    rawImageSrc = "/images/logo.png";;
  }

  let ogImageSrc: string;
  if (rawImageSrc.startsWith("http://") || rawImageSrc.startsWith("https://")) {
    ogImageSrc = rawImageSrc;
  } else {
    ogImageSrc = `${domain}${rawImageSrc.startsWith("/") ? rawImageSrc : `/${rawImageSrc}`}`;
  }

  return {
    title: `${post.title} / 그래픽 - GRAPHIC`,
    description: post.htmlText.trim(),
    keywords: post.title,
    authors: [{ name: post.user.nickname }],
    robots: {
      index: true,
      follow: true,
    },
    openGraph: {
      type: "article",
      locale: "ko_KR",
      url: `${domain}/p/${post.serialNumber}`,
      siteName: "그래픽 - GRAPHIC",
      title: post.title,
      description: post.htmlText.trim(),
      images: [
        {
          url: ogImageSrc,
          alt: post.title,
        },
      ],
    },
    alternates: {
      canonical: `${domain}/p/${post.serialNumber}`,
    },
  };
}

here is my Metadata Code.
The domain is set using an environment variable (NEXT_PUBLIC_DOMAIN), so it's the same as the link(graphic.fan) I shared.

[icyJoseph]

You seem to have logic that, looks for the GRAPHIC_UUID cookie on the incoming request, if not present, you redirect with a Set-Cookie header. Bots, crawlers, SEO, and open-graph parsers, won't necessarily store that Cookie, when following the request. That's why they can't "see" your open graph data.

[h0ngwon]

Oh wow so thankful :)
I got a question for you then.

In the middleware, I have logic that checks for both the access token and a UUID_COOKIE. If not found, it redirects and sets a new cookie. But as you mentioned, bots and crawlers like Googlebot or Open Graph parsers don’t retain cookies across redirects, which might explain why OG metadata isn’t picked up.

In that case, how can I safely bypass the token and UUID cookie logic for requests from bots/crawlers?

I'm using middleware.ts like this

import { v4 as uuidv4 } from "uuid";

import { NextRequest, NextResponse } from "next/server";

import JwtUtil from "@/global/utils/jwtUtil";

import { AccountApi } from "./data/api/accountApi";
import Constant from "./global/constants/Constant";
import { UUID_COOKIE } from "./global/utils";

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|fonts|images|logos|svgs|monitoring|robots.txt).*)"],
};

const protectedRoutes = ["/upload", "/profile", "/setting", "/profile-edit", "/collection", "/notifications", "/revenue", "/community/post"];
const publicRoutes = ["/sign-up"];

export async function middleware(request: NextRequest) {
  const token = request.cookies.get("accessToken")?.value;
  const refreshToken = request.cookies.get("refreshToken")?.value;
  const headerToken = request.headers.get("Authorization")?.split(" ")[1];
  const currentPath = request.nextUrl.pathname;
  const url = new URL(request.url);

  if (currentPath.startsWith("/embed") || request.headers.get("referer")?.includes("graphic.fan/embed/")) {
    return NextResponse.next();
  }

  if (url.searchParams.get("health") && currentPath === "/") {
    return NextResponse.next();
  }

  if (request.nextUrl.pathname.startsWith('/robots.txt')) {
    return NextResponse.next();
  }

  const uuid = request.cookies.get(UUID_COOKIE)?.value;
  if (!uuid && !request.nextUrl.searchParams.has('set-cookie')) {
    const newUrl = request.nextUrl.clone();
    if(currentPath.startsWith("/mobile") || currentPath.startsWith("/redirect")) newUrl.searchParams.set('set-cookie', '1');

    const response = NextResponse.redirect(newUrl);
    response.cookies.set(UUID_COOKIE, uuidv4(), { 
      maxAge: 60 * 60 * 24 * 365 * 10,
      sameSite: 'lax',
    });
    return response;
  }

  if ((!token || (token && !JwtUtil.isValidAccessToken(token))) && refreshToken) {
    const auth = await AccountApi.refreshToken({ refreshToken: refreshToken });
    const response = NextResponse.redirect(url);

    if (auth) {
      response.cookies.set("accessToken", auth.accessToken);
      response.cookies.set("refreshToken", auth.refreshToken);
    } else {
      response.cookies.delete("accessToken");
      response.cookies.delete("refreshToken");
    }
    return response;
  }

  if ((currentPath === "/" && token) || currentPath === "/feed") {
    url.pathname = "/digest";
    return NextResponse.redirect(url);
  }

  if (!token && headerToken && JwtUtil.isValidAccessToken(headerToken) && !request.nextUrl.searchParams.has('set-cookie')) {
    const newUrl = request.nextUrl.clone();
    if(currentPath.startsWith("/mobile") || currentPath.startsWith("/redirect")) newUrl.searchParams.set('set-cookie', '1');
    
    const res = NextResponse.redirect(newUrl);
    res.cookies.set("accessToken", headerToken);
    return res;
  }

}

 if (request.nextUrl.pathname.startsWith('/robots.txt')) {
    return NextResponse.next();
  }

This if statement doesn’t seem to prevent cookie logic from running in practice. Should I be checking the User-Agent header to detect bots (e.g., contains “Googlebot”, “Twitterbot”, etc.) and skip this logic accordingly?

Would love your take on how to conditionally bypass this in a robust way.

Thanks again! 🙏

[icyJoseph]

It depends... what's the purpose of this cookie?

You could try this helper, https://nextjs.org/docs/app/api-reference/functions/userAgent, and if so, then allow the render to continue, or rewrite to a page that renders the metadata needed, but no content? so that things are kept safe within your page?

[h0ngwon]

The purpose of the cookie is to insert a uuid when the user first enters the page because the x-device-id is not captured.

I appreciate it! I'll try it by referring to the link