fix: move homepage preview off the legacy image URL

Author: boojack

DESIGN_SYSTEM.md

@@ -80,7 +80,7 @@ the current code pass.
 
 ### Social preview artwork
 
-At the user's request, generated social previews abstract the Cloud campaign's sky, clouds, and birds through a flat cut-paper composition informed by modern abstract painting. This scope covers `src/shared/content/social-preview-image.tsx`, its artwork, and the default `/og-image.png`. Use a cobalt sky, oversized ivory cloud shapes, and birds reduced to asymmetric wing silhouettes. No eyes, feather detail, outlines, gradients, texture filters, or simulated depth. The original SVG must contain no embedded bitmaps.
+At the user's request, generated social previews abstract the Cloud campaign's sky, clouds, and birds through a flat cut-paper composition informed by modern abstract painting. This scope covers `src/shared/content/social-preview-image.tsx`, its artwork, and the default `/og/home/image.png`. Use a cobalt sky, oversized ivory cloud shapes, and birds reduced to asymmetric wing silhouettes. No eyes, feather detail, outlines, gradients, texture filters, or simulated depth. The original SVG must contain no embedded bitmaps.
 
 Use Fraunces Black for both the title and the text-only Memos wordmark; Inter carries supporting copy at 34px, limited to one or two lines. Keep descriptions subordinate through regular weight and a softer ink color, not tiny type. Entry pages may supply concise image-only copy while retaining their full metadata descriptions. The wordmark sits independently at the lower left, aligned with the title and description. Omit section labels from the image rather than pairing mismatched type next to the brand. Keep the left text column clear of illustration and reserve the right side for an asymmetric, cropped composition. No logo icon or text shadows. This exception to sections 10–11 applies only to the fixed 1200 × 630 social image, not page styles. Serve PNG from the shared template for social crawler compatibility, and keep representative generated images below 300 KB. Verify short and long titles at full and card size.
 

docs/architecture.md

@@ -32,7 +32,7 @@ infrastructure or a committed product roadmap.
 | `(app)` | Overview and connection settings; Clerk provider and account shell | Static client-auth shells, noindex |
 | `api/search` | Public docs search index, searched in the browser | Static |
 | `og/` | Generated Docs, Blog, and Changelog social images | Static, `nodejs` runtime |
-| `og-image.png` | Default social image, using the same SVG sky and text-only wordmark template | Static, `nodejs` runtime |
+| `og/home/image.png` | Default social image, using the same SVG sky and text-only wordmark template | Static, `nodejs` runtime |
 | `llms.txt`, `llms-full.txt`, `llms.mdx/[...slug]` | Public content indexes and Markdown exports | Static |
 
 The site also generates `sitemap.xml` and `/blog/feed.xml`. There is no `(auth)`

next.config.mjs

@@ -288,10 +288,6 @@ const config = {
   },
   async headers() {
     return [
-      {
-        source: "/og-image.png",
-        headers: CORS_HEADERS,
-      },
       {
         source: "/og/:path*",
         headers: CORS_HEADERS,

public/_headers

@@ -23,8 +23,8 @@
   Cache-Control: public,max-age=31536000,immutable
 
 # CORS for OG images: keep in sync with CORS_HEADERS in next.config.mjs,
-# which covers the generated /og-image.png and /og/:path* routes.
-/og-image.png
+# which covers the generated /og/home/image.png and /og/:path* routes.
+/og/home/image.png
   Cache-Control: public,max-age=86400,stale-while-revalidate=604800
   Access-Control-Allow-Origin: *
   Access-Control-Allow-Methods: GET, HEAD, OPTIONS

scripts/smoke-test.mjs

@@ -45,7 +45,8 @@ const checks = [
     cacheControlIncludes: "max-age=31536000",
     openNextCacheAbsent: true,
   },
-  { path: "/og-image.png", type: "png", cacheControlIncludes: "max-age=86400", openNextCache: "HIT" },
+  { path: "/og-image.png", status: 404, type: "html" },
+  { path: "/og/home/image.png", type: "png", cacheControlIncludes: "max-age=86400", openNextCache: "HIT" },
   { path: "/og/blog/best-practices-to-write-tag/image.png", type: "png" },
   { path: "/og/blog/20k-github-stars-in-2-years/image.png", status: 404, type: "html" },
   {

scripts/static-headers.test.mjs

@@ -68,16 +68,14 @@ function matchesRoute(pattern, route) {
   return route.startsWith(prefix) && route.endsWith(suffix);
 }
 
-test("static Open Graph image keeps only its specific cache rule", async () => {
-  const headers = await readHeadersBlock("/og-image.png");
+test("generated homepage Open Graph image keeps its cache rule", async () => {
+  const headers = await readHeadersBlock("/og/home/image.png");
 
   assert.equal(headers.get("cache-control"), "public,max-age=86400,stale-while-revalidate=604800");
-  assert.equal(headers.has("access-control-allow-origin"), false);
-  assert.equal(headers.has("access-control-allow-methods"), false);
 });
 
-test("static Open Graph image allows cross-origin reads from inherited static headers", async () => {
-  const headers = await readEffectiveHeaders("/og-image.png");
+test("generated homepage Open Graph image allows cross-origin reads", async () => {
+  const headers = await readEffectiveHeaders("/og/home/image.png");
 
   assert.equal(headers.get("access-control-allow-origin"), "*");
   assert.equal(headers.get("access-control-allow-methods"), "GET, HEAD, OPTIONS");

src/app/og-image.png/route.tsx src/app/og/home/image.png/route.tsxsrc/app/og-image.png/route.tsx renamed to src/app/og/home/image.png/route.tsx

@@ -2,7 +2,7 @@
 import { readFile } from "node:fs/promises";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
-import { GET as getDefaultImage } from "@/app/og-image.png/route";
+import { GET as getDefaultImage } from "@/app/og/home/image.png/route";
 import { getDocsSocialPreview } from "@/features/docs/lib/social-preview";
 import { BRAND_DESCRIPTION, BRAND_TAGLINE_LINES } from "@/shared/lib/branding";
 import { buildContentMetadata } from "./social-preview";

src/shared/content/social-preview-image.test.tsx

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   absoluteUrl,
   buildBreadcrumbItems,
+  buildDefaultOpenGraphImages,
   buildFaqJsonLd,
   buildSiteNavigationJsonLd,
   SITE_NAV_DEMO,
@@ -10,6 +11,10 @@ import {
 } from "./seo";
 
 describe("seo", () => {
+  it("uses a new homepage image URL instead of the retired static image", () => {
+    expect(buildDefaultOpenGraphImages()[0].url).toBe("https://usememos.com/og/home/image.png");
+  });
+
   it("groups the primary site navigation around visitor tasks", () => {
     expect(SITE_NAV_ITEMS.map((item) => item.name)).toEqual(["Features", "Use Cases", "Docs", "Resources"]);
     expect(SITE_NAV_LINKS.map((item) => item.name)).toEqual([

src/shared/lib/seo.test.ts

@@ -5,7 +5,7 @@ export const BASE_URL = "https://usememos.com";
 export const SITE_NAME = "Memos";
 export const GITHUB_REPO_URL = "https://github.com/usememos/memos";
 export const GITHUB_STAR_COUNT_PLACEHOLDER = "60K+";
-export const DEFAULT_OG_IMAGE = `${BASE_URL}/og-image.png`;
+export const DEFAULT_OG_IMAGE = `${BASE_URL}/og/home/image.png`;
 export const DEFAULT_OG_IMAGE_ALT = BRAND_TITLE;
 
 export interface SiteNavLink {