Skip to content

Set metadataBase in every app so OG/social image URLs are absolute #2

Description

@rep0x

🎯 Goal

Set metadataBase in every Next.js app across the fleet so social/OG and Twitter card image URLs resolve to absolute URLs. Today it's unset everywhere, so each build prints:

⚠️ metadataBase property in metadata export is not set ... using "http://localhost:3000"

and the canonical/OG image URLs in production HTML are wrong (localhost-relative), which breaks link unfurls on Slack/iMessage/social.

🧭 Background

Surfaced during the @mind-studio/ui 0.7.0 brand-refresh Wave 2 rollout (ui#29), which added opengraph-image.tsx + manifest.ts to many apps. The OG routes render fine, but without metadataBase Next can't build absolute URLs for them. It predates the brand work (landing had the same warning) — calling it out as its own fleet follow-up rather than scope-creeping the brand PRs.

🔧 Fix (per app)

In each app's root src/app/layout.tsx metadata export, set metadataBase to the app's canonical production origin, read from env with a sensible default:

export const metadata: Metadata = {
  metadataBase: new URL(
    process.env.NEXT_PUBLIC_SITE_URL ?? "https://<app>.mindpods.org",
  ),
  // ...existing title/description/etc.
};
  • Use each app's real production host (e.g. drive.mindpods.org, slides.mindpods.org, dock.mindpods.org, apex mindpods.org for landing).
  • Prefer an env var (NEXT_PUBLIC_SITE_URL or the existing convention in src/lib/links.ts where present) so non-prod deploys resolve correctly.
  • Verify the build warning is gone and the emitted <meta property="og:image"> is an absolute URL.

📋 Apps to update

All Next.js consumers — at minimum the ones with OG/manifest routes: landing, drive, slides, chat, calendar, builder, videos, shell (+ any other app that ships opengraph-image/manifest). Apps without OG metadata can be skipped or done for consistency.

✅ Acceptance criteria

  • Every app sets metadataBase to its canonical origin (env-driven where possible).
  • No metadataBase ... not set warning in any app's build.
  • Production OG/Twitter image URLs are absolute and unfurl correctly.

🔗 Related

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions