Refactor metadata architecture for SEO with dynamic OpenGraph images

[Copilot]

Current metadata is minimal and lacks OpenGraph images. About pages have inconsistent implementations, diff pages have no social preview, and app-wide metadata isn't properly inherited.

Changes

Reusable OpenGraph Component

• Created src/app/_components/OpenGraphImage.tsx accepting tag, title, and icon props
• Standardizes 1200×630 images with consistent branding and grid background
• Used across all about pages for uniform social previews

Root Layout Metadata Enhancement

• Added dynamic metadataBase that adapts to environment (Vercel preview, localhost development, or production)
• Expanded description with SEO keywords (provenance, trusted publishing, bundle analysis)
• Configured default OpenGraph and Twitter card metadata inherited throughout app

About Pages

• /about: Info icon with feature overview
• /about/api: Code brackets icon for API documentation
• /about/source-trust: Refactored to use new component (shield icon)

Dynamic Diff Page OpenGraph

• API route at /api/-/og generates images with diff statistics
• Displays package name, version comparison, file count, additions/deletions
• Shows "Provenance" and "Trusted Publisher" badges when attestation data available
• Metadata references dynamic image: /api/-/og?parts=react@18.0.0...react@18.3.0

Example dynamic image for ini@5.0.0...6.0.0 shows:

ini
5.0.0 → 6.0.0
1 files  +4 additions  -4 deletions
[Provenance] [Trusted Publisher]

Metadata Rationale

metadataBase: Resolves relative URLs to absolute URLs for social media crawlers. Now dynamic to support testing in development (http://localhost:3000), preview deployments (process.env.VERCEL_URL), and production (https://npm-diff.app).

description: Expanded with SEO keywords like "bundle size changes", "provenance", "trusted publishing", and "safer dependency upgrades" for improved search engine visibility.

keywords: Array of relevant search terms (npm, diff, package comparison, dependency audit, provenance, trusted publishing) for better search engine indexing.

authors & creator: Attribution metadata for search engines and social platforms.

openGraph: Default metadata with type, locale, url, siteName for rich social sharing previews across all pages.

twitter: Twitter-specific metadata with card: "summary_large_image" for large preview cards and creator: "@oBusk" for attribution.

All page-specific metadata includes tailored descriptions and OpenGraph images for targeted SEO and optimal social media presentation.

Technical Notes

• All <div> and <span> elements require explicit display: flex for Next.js ImageResponse
• Dynamic route OG images not supported in catch-all routes; implemented as API handler instead
• Removed runtime = "nodejs" export (incompatible with Next.js 16 cacheComponents)
• metadataBase uses environment detection for seamless testing across deployment environments

Original prompt

let's make a major refactor of metadata to improve seo for the application.

break the open graph image that exists into a reusable component that takes in a tag, title and icon and then use that for the about pages.

make sure the app wide description data is defined in the layout so it's inherited throughout the application.

for the main [...parts] page, flesh out the metadata and create some kind of dynamic opengraph image which shows the numer of additions and removals, maybe some badges for provenance and trusted publisher too.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
npm-diff	Ready	Preview, Comment	Jan 26, 2026 11:49pm

[oBusk]

@copilot in trying to evaluate if the og image for the diff page is working, but it's hard because its hardcoded to npm-diff.app, which is probably good once we merge it, but until then, it would be good if the url for the og image was relative. Not sure if the diffpage is hardcoding or if it is metadata base, but please look into it.

Furthermore, can you explain all the metadata you've added, and motivating why.

[Copilot]

@copilot in trying to evaluate if the og image for the diff page is working, but it's hard because its hardcoded to npm-diff.app, which is probably good once we merge it, but until then, it would be g...

Fixed the hardcoded URL issue in commit 26769cc. The metadataBase is now dynamic and uses:

• process.env.VERCEL_URL for preview deployments
• http://localhost:3000 for local development
• https://npm-diff.app as fallback for production

This ensures OpenGraph images resolve to the correct environment URL for testing.

Metadata Explanation:

Root Layout (src/app/layout.tsx):

• metadataBase: Resolves relative URLs in OpenGraph images to absolute URLs. Required for social media crawlers to fetch OG images.
• description: Expanded from "Inspect changes between npm packages in a webapp" to include SEO keywords like "bundle size changes", "provenance", "trusted publishing", and "safer dependency upgrades" for better search visibility.
• keywords: Array of relevant terms for search engine indexing (npm, diff, package comparison, dependency audit, provenance, trusted publishing, etc.).
• authors & creator: Attribution metadata for search engines and social platforms.
• openGraph: Default metadata inherited by all pages - includes type: "website", locale, url, siteName for rich social sharing.
• twitter: Twitter-specific metadata with card: "summary_large_image" for large preview cards and creator: "@oBusk" for attribution.

About Pages:

• Enhanced description and added openGraph/twitter metadata with page-specific descriptions for better social sharing and SEO.

Diff Pages (src/app/[...parts]/page.tsx):

• Dynamic title and description with actual package names for targeted SEO.
• openGraph.type: "article" since diffs are content pages.
• openGraph.images: References dynamic OG image API showing visual diff stats.
• twitter.images: Same OG image for Twitter cards.

All metadata follows OpenGraph Protocol and Twitter Card specs for optimal social media presentation and search engine indexing.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /home/REDACTED/work/npm-diff.app/npm-diff.app/node_modules/.pnpm/node@runtime+24.13.0/node_modules/node/bin/node /home/REDACTED/work/npm-diff.app/npm-diff.app/node_modules/.pnpm/node@runtime+24.13.0/node_modules/node/bin/node /home/REDACTED/work/npm-diff.app/npm-diff.app/node_modules/.pnpm/next@16.1.4_@babel+core@7.28.6_babel-plugin-react-compiler@1.0.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/server/lib/start-server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)