Nuxt•3mo ago

How to make sure hreflangs contain domain?

Google Lighthosue complains about SEO on my Nuxt3 page. The reason being is, they are not absolute URLs. This are the links generated in source:

<link rel="alternate" href="/en" hreflang="en" data-hid="7fcee50">
<link rel="alternate" href="/de-DE" hreflang="de" data-hid="5d718b2">
<link rel="alternate" href="/de-DE" hreflang="de-DE" data-hid="26cc44a">
<link rel="alternate" href="/en-DE" hreflang="en-DE" data-hid="64015ce">
<link rel="alternate" href="/en" hreflang="x-default" data-hid="6527e7a">

<link rel="alternate" href="/en" hreflang="en" data-hid="7fcee50">
<link rel="alternate" href="/de-DE" hreflang="de" data-hid="5d718b2">
<link rel="alternate" href="/de-DE" hreflang="de-DE" data-hid="26cc44a">
<link rel="alternate" href="/en-DE" hreflang="en-DE" data-hid="64015ce">
<link rel="alternate" href="/en" hreflang="x-default" data-hid="6527e7a">

and this is my nuxt.config i18n part:

i18n: {
    defaultLocale: 'en',
    detectBrowserLanguage: false,
    langDir: 'i18n/',
    locales: [
      {
        code: 'en',
        iso: 'en',
        file: 'en.json',
        domain: 'https://www.example.com',
      },
      {
        code: 'de-DE',
        iso: 'de-DE',
        file: 'de.json',
        domain: 'https://www.example.com',
      },
      {
        code: 'en-DE',
        iso: 'en-DE',
        file: 'en.json',
        domain: 'https://www.example.com',
      },
    ],
    strategy: 'prefix',
    vueI18n: './nuxt-i18n.js',
    seo: true,
}

i18n: {
    defaultLocale: 'en',
    detectBrowserLanguage: false,
    langDir: 'i18n/',
    locales: [
      {
        code: 'en',
        iso: 'en',
        file: 'en.json',
        domain: 'https://www.example.com',
      },
      {
        code: 'de-DE',
        iso: 'de-DE',
        file: 'de.json',
        domain: 'https://www.example.com',
      },
      {
        code: 'en-DE',
        iso: 'en-DE',
        file: 'en.json',
        domain: 'https://www.example.com',
      },
    ],
    strategy: 'prefix',
    vueI18n: './nuxt-i18n.js',
    seo: true,
}

7 Replies

wszymanskiOP•3mo ago

is there an obvious config missing that makes hreflang relative instead of absolute?

Cue•3mo ago

You need to set the differentDomains flag if you want to utilize locale domains

wszymanskiOP•3mo ago

Thanks for reply! I have a single domain, locales are just subpath. I got it to work in useHead() and manually adding domain to href

head.value = {
    ...head.value,
    link: head.value.link.map((link) => ({
      ...link,
      ...(link.href.startsWith('/') && {
        href: `https://www.example.com${link.href}`,
      }),
    })),
  }

head.value = {
    ...head.value,
    link: head.value.link.map((link) => ({
      ...link,
      ...(link.href.startsWith('/') && {
        href: `https://www.example.com${link.href}`,
      }),
    })),
  }

hacky, but works and SEO checks pass

Cue•3mo ago

What purpose does the domain key have in your locale config then?

wszymanskiOP•3mo ago

I was just trying to get hreflang to work, this was one of the suggestions from... mr GPT 😉 it is gone now from config

Cue•3mo ago

Right. Wouldn’t it be easier to configure the baseUrl in i18n than using useHead? As per the docs.

You must also set the baseUrl option to your production domain in order to make alternate URLs fully-qualified

wszymanskiOP•3mo ago

🤦 this was the config bit that was missing from nuxt.config thanks a lot!

Gaming

Programming

How to make sure hreflangs contain domain?