useHead doubling the baseURL only when served from that domain

Question

useHead doubling the baseURL only when served from that domain

boulderwebdev opened this issue a month ago · comments

boulderwebdev commented a month ago

Environment

Operating System: Windows_NT
Node Version: v20.11.1
Nuxt Version: 3.11.2
CLI Version: 3.11.1
Nitro Version: 2.9.6
Package Manager: npm@10.2.4
Builder: -
User Config: devtools, runtimeConfig, app, ssr, modules, nitro, devServer, content, googleFonts, experimental
Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxtjs/tailwindcss@6.11.4, unplugin-icons/nuxt, @nuxt/content@2.12.1
Build Modules: -

Reproduction

How I'm configuring this

For my index.vue page, I have the following code

import _ogImage from '~/assets/img/open-graph-banner.jpg'
const config = useRuntimeConfig()

const ogImageUrl = new URL(config.public.baseUrl) // could also use https://mydomain.com/ as a string here
ogImageUrl.pathname = _ogImage
const ogImage = ogImageUrl.toString()

useHead({
  meta: [
    { property: 'og:image', content: ogImage },
  ]
})

I describe the bug in detail below, but in short, if I access the rendered page on https://mydomain.com, and only on this page, will I get a meta tag like

<head>
  <meta property="og:image" content="https://mydomain.com/https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg" />
</head>

Note on both localhost and the view-source pages the meta tag is rendered correctly.

Describe the bug

Short description

Okay, so I want to have open graph tags which include my domain in the path when using useHead both in my page's pre-render and when the page is rendered after being served. What I mean is I should have in my <head>

<head>
  <meta property="og:image" content="https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

for both the pre-render, so it should display this tag on view-source:https://mydomain.com, on https://mydomain.com, and when I'm running it locally on http://localhost:3000. Unfortunately, this is not what's happening. Let me give you the displayed HTML for each of the cases

view-source:https://mydomain.com

<head>
  <meta property="og:image" content="https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

https://mydomain.com <- problems here

After the page finishes loading and I look in the console, I get

<head>
  <meta property="og:image" content="https://mydomain.com/https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

http://localhost:3000

This tag holds both in the view-source and in the dev tools console

<head>
  <meta property="og:image" content="https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

Additional comments

This inconsistent behavior is so frustrating, and I cannot guarantee my open graph tags will be loaded in the same way every time. On twitter, sometimes the open graph tag loads correctly, other times it will not.

Additional context

No response

Logs

No response