diff --git a/packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts b/packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts
index f915bf399990c..cbc574cb00984 100644
--- a/packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts
+++ b/packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts
@@ -83,6 +83,7 @@ function resolveAndValidateImage(
     // devtools.
     const shouldWarn =
       !isUsingVercelSystemEnvironmentVariables &&
+      !metadataBase &&
       (process.env.NODE_ENV === 'production' || !isStaticMetadataRouteFile)
 
     if (shouldWarn) {
diff --git a/test/e2e/app-dir/metadata-warnings/index.test.ts b/test/e2e/app-dir/metadata-warnings/metadata-warnings-missing-metadatabase.test.ts
similarity index 100%
rename from test/e2e/app-dir/metadata-warnings/index.test.ts
rename to test/e2e/app-dir/metadata-warnings/metadata-warnings-missing-metadatabase.test.ts
diff --git a/test/e2e/app-dir/metadata-warnings/metadata-warnings-with-metadatabase.test.ts b/test/e2e/app-dir/metadata-warnings/metadata-warnings-with-metadatabase.test.ts
new file mode 100644
index 0000000000000..4be3e870d1f10
--- /dev/null
+++ b/test/e2e/app-dir/metadata-warnings/metadata-warnings-with-metadatabase.test.ts
@@ -0,0 +1,73 @@
+import { nextTestSetup } from 'e2e-utils'
+
+const METADATA_BASE_WARN_STRING =
+  'metadataBase property in metadata export is not set for resolving social open graph or twitter images,'
+
+describe('app dir - metadata missing metadataBase', () => {
+  const { next, isNextDev, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+    overrideFiles: {
+      'app/layout.js': `
+        export default function Layout({ children }) {
+          return (
+            <div>
+              {children}
+            </div>
+          )
+        }
+        
+        export const metadata = {
+          metadataBase: new URL('https://example.com'),
+        }
+      `,
+    },
+  })
+
+  if (skipped) {
+    return
+  }
+
+  // If it's start mode, we get the whole logs since they're from build process.
+  // If it's development mode, we get the logs after request
+  function getCliOutput(logStartPosition: number) {
+    return isNextDev ? next.cliOutput.slice(logStartPosition) : next.cliOutput
+  }
+
+  it('should not show warning in vercel deployment output in default build output mode', async () => {
+    const logStartPosition = next.cliOutput.length
+    await next.fetch('/og-image-convention')
+    const output = getCliOutput(logStartPosition)
+
+    expect(output).not.toInclude(METADATA_BASE_WARN_STRING)
+  })
+
+  it('should not warn metadataBase is missing and a relative URL is used', async () => {
+    const logStartPosition = next.cliOutput.length
+    await next.fetch('/relative-url-og')
+    const output = getCliOutput(logStartPosition)
+
+    expect(output).not.toInclude(METADATA_BASE_WARN_STRING)
+  })
+
+  it('should warn for unsupported metadata properties', async () => {
+    const logStartPosition = next.cliOutput.length
+    await next.fetch('/unsupported-metadata')
+    const output = getCliOutput(logStartPosition)
+    expect(output).toInclude(
+      'Unsupported metadata themeColor is configured in metadata export in /unsupported-metadata. Please move it to viewport'
+    )
+    expect(output).toInclude(
+      'Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport'
+    )
+  })
+
+  it('should not warn for viewport properties during manually merging metadata', async () => {
+    const outputLength = next.cliOutput.length
+    await next.fetch('/merge')
+    // Should not log the unsupported metadata viewport warning in the output
+    // during merging the metadata, if the value is still nullable.
+    const output = next.cliOutput.slice(outputLength)
+    expect(output).not.toContain('Unsupported metadata viewport')
+  })
+})