Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Building project with default metadataBase will result with broken path #56210

Closed
1 task done
BeroBurny opened this issue Sep 29, 2023 · 4 comments
Closed
1 task done

Building project with default metadataBase will result with broken path #56210

BeroBurny opened this issue Sep 29, 2023 · 4 comments
Labels
bug Issue was opened via the bug report template. locked

Comments

@BeroBurny
Copy link

Link to the code that reproduces this issue

https://github.com/BeroBurny/metadata-url

To Reproduce

  1. setup (the is some additional information in readme)
  2. build project vercel build
  3. deploy it vercel deploy --prebuilt
    This will produce a build that contains metadata paths with localhost:300 that cannot be deployed anywhere as it will result 404 for users

to fix this behavior you can literally remove http://localhost:3000 from all places where is used and will work fine

Current vs. Expected behavior

Current

Currently, page will contain the full URL but is not needed

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" href="/_next/static/chunks/webpack-bf1a64d1eafd2816.js" as="script" fetchpriority="low">
    <script src="/_next/static/chunks/fd9d1056-bdbc21787612b876.js" async=""></script>
    <script src="/_next/static/chunks/864-2c350c1e805e4a45.js" async=""></script>
    <script src="/_next/static/chunks/main-app-162fd94f9d2a73de.js" async=""></script>
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1838">
    <meta property="og:image:height" content="931">
    <!--     Check This URL Here             👇 -->
    <meta property="og:image" content="http://localhost:3000/opengraph-image.png?b133443553340dc8">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image:type" content="image/png">
    <meta name="twitter:image:width" content="1838">
    <meta name="twitter:image:height" content="931">
    <!--     Check This URL Here             👇 -->
    <meta name="twitter:image" content="http://localhost:3000/twitter-image.png?b133443553340dc8">
    <script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" nomodule=""></script>
    <meta name="d41d8cd98f00b204e9800998ecf8427e_lib_detect" id="d41d8cd98f00b204e9800998ecf8427e_lib_detect">
</head>

You can find a deployed site here https://metadata-1kebb4lao-beroburny.vercel.app/

Expected

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" href="/_next/static/chunks/webpack-bf1a64d1eafd2816.js" as="script" fetchpriority="low">
    <script src="/_next/static/chunks/fd9d1056-bdbc21787612b876.js" async=""></script>
    <script src="/_next/static/chunks/864-2c350c1e805e4a45.js" async=""></script>
    <script src="/_next/static/chunks/main-app-162fd94f9d2a73de.js" async=""></script>
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1838">
    <meta property="og:image:height" content="931">
    <!--     Check This URL Here             👇 -->
    <meta property="og:image" content="/opengraph-image.png?b133443553340dc8">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image:type" content="image/png">
    <meta name="twitter:image:width" content="1838">
    <meta name="twitter:image:height" content="931">
    <!--     Check This URL Here             👇 -->
    <meta name="twitter:image" content="/twitter-image.png?b133443553340dc8">
    <script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" nomodule=""></script>
    <meta name="d41d8cd98f00b204e9800998ecf8427e_lib_detect" id="d41d8cd98f00b204e9800998ecf8427e_lib_detect">
</head>

You can find a deployed site here https://metadata-973uqdhi2-beroburny.vercel.app/

Additional

Result URL used on discord
image

Or this tool can be used to preview https://www.opengraph.xyz/

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #33~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Sep  7 10:33:52 UTC 2
Binaries:
  Node: 16.19.1
  npm: 8.19.3
  Yarn: 3.4.1
  pnpm: N/A
Relevant Packages:
  next: 13.5.4-canary.6
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata (metadata, generateMetadata, next/head)

Additional context

Found similar issues
@BeroBurny BeroBurny added the bug Issue was opened via the bug report template. label Sep 29, 2023
@BeroBurny BeroBurny mentioned this issue Sep 29, 2023
Open
1 task
@huozhi
Copy link
Member

huozhi commented Sep 29, 2023

You need to specify the metadataBase when you deploy the app, it's required for social platform to resolve the social images, relative path won't work well on every app.

You should see the warning metadata.metadataBase is not set for resolving social open graph or twitter images

@huozhi huozhi closed this as completed Sep 29, 2023
@BeroBurny
Copy link
Author

Enforcing localhost:300 will cause problems that definitely would work on every app.

What if I do not know the metadataBase URL beforehand?
In the case of manually building and deploying with a local machine or CI/CD
for example vercel build && vercel deploy --prebuilt will get a URL at the end of the deployment

@huozhi
Copy link
Member

huozhi commented Oct 2, 2023

You can set the metadataBase to VERCEL_URL for preview env, checkout the metadataBase docs

metadataBase: new URL(`https://${process.env.VERCEL_URL}`)

In this case the url is dynamic, but still provided through env variable

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. locked
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@huozhi @BeroBurny