nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.76k stars 484 forks source link

Ability to Disable SEO Features Without Warnings #3186

Closed MariaAndreyeva closed 3 weeks ago

MariaAndreyeva commented 1 month ago

Hello,

I am using the Nuxt i18n module in my project and I have come across an issue regarding SEO features. According to the documentation, to leverage SEO benefits, the locales option must be configured as an array of objects with each object having a language option set to the locale language tags: SEO Requirements Documentation.

However, I do not intend to use the SEO benefits such as hreflang alternate link generation and canonical link generation. Therefore, I have removed the language options from my configuration. Despite this, I still receive the following warning in the console:

WARN  Locale language ISO code is required to generate alternate link

Expected Behavior:

I would expect that if SEO features are not needed or explicitly disabled, there should be no warnings related to SEO in the console.

Actual Behavior:

Even after removing language options, I still receive warnings in the console related to SEO features.

Steps to Reproduce:

  1. Configure the locales option without language in the Nuxt i18n module.
  2. Run the application.
  3. Observe the warning in the console.

Example Configuration:

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    locales: [
      { code: 'en', name: 'EN' },
      { code: 'fr', name: 'FR' }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: './lang',
    strategy: 'prefix',
    // enables localised routes
    customRoutes: 'config',
    pages: LocalisedRoutes,
    // adds `vueI18n` option to `@nuxtjs/i18n` module options
    vueI18n: 'vue-i18n.config.ts',
  }
}

Console Warning:

WARN  Locale language ISO code is required to generate alternate link

Environment Information:

Nuxt Version: 3.13.2 Nuxt i18n Module Version: 8.5.5 Node.js Version: 20.10.0 Operating System: macOS

Feature Request:

Is it possible to provide a way to completely disable SEO features, including the suppression of any related warnings, when they are not needed? This would help in keeping the console clean and avoid any unnecessary warnings.

Thank you for considering this request. I appreciate the work that has gone into this module and look forward to any updates or guidance on this matter.

Best regards, Maria

BobbieGoede commented 1 month ago

These warnings should only be triggered when either localeHead or setI18nParams features are used, if you're not using these features could you provide a minimal reproduction? πŸ™

github-actions[bot] commented 1 month ago

Would you be able to provide a reproduction? πŸ™

More info ### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: πŸ‘‰ [Reproduction starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) πŸ‘‰ [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. πŸ‘Œ Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)
MariaAndreyeva commented 1 month ago

We are using the useSetI18nParams function to set translated parameters for the current route. Our application supports five languages: Dutch (nl), German (de), French (fr), Portuguese (pt), and English (en). However, for certain routes, only specific languages are available.

For example, for the /home route (where "home" is a dynamic slug parameter), only English (en) and Dutch (nl) are available. Therefore, we call setI18nParams({ nl: { slug: 'home' }, en: { slug: 'home' } }).

Expected Behavior: The application should only generate hreflang and og:locale tags for the available languages, which in this case are "en" and "nl".

Current Behavior: Despite specifying only "en" and "nl", the HTML generated includes hreflang and og:locale tags for all five languages. Here are the problematic links:

<link id="i18n-alt-en" rel="alternate" href="/en/home" hreflang="en">
<link id="i18n-alt-en-NL" rel="alternate" href="/en/home" hreflang="en-NL">
<link id="i18n-alt-nl" rel="alternate" href="/nl/home" hreflang="nl">
<link id="i18n-alt-nl-NL" rel="alternate" href="/nl/home" hreflang="nl-NL">
<link id="i18n-alt-pt" rel="alternate" href="/pt/home" hreflang="pt">
<link id="i18n-alt-pt-BR" rel="alternate" href="/pt/home" hreflang="pt-BR">
<link id="i18n-alt-de" rel="alternate" href="/de/home" hreflang="de">
<link id="i18n-alt-de-DE" rel="alternate" href="/de/home" hreflang="de-DE">
<link id="i18n-alt-fr" rel="alternate" href="/fr/home" hreflang="fr">
<link id="i18n-alt-fr-FR" rel="alternate" href="/fr/home" hreflang="fr-FR">
<link id="i18n-xd" rel="alternate" href="/en/home" hreflang="x-default">
<link id="i18n-can" rel="canonical" href="/nl/home">
<meta id="i18n-og-url" property="og:url" content="/nl/home">
<meta id="i18n-og" property="og:locale" content="nl_NL">
<meta id="i18n-og-alt-en-NL" property="og:locale:alternate" content="en_NL">
<meta id="i18n-og-alt-pt-BR" property="og:locale:alternate" content="pt_BR">
<meta id="i18n-og-alt-de-DE" property="og:locale:alternate" content="de_DE">
<meta id="i18n-og-alt-fr-FR" property="og:locale:alternate" content="fr_FR">

As seen above, tags for "pt", "de", and "fr" are included even though these languages are not available for the /home route.

Steps to Reproduce:

  1. Configure the app with 5 languages
  2. Configure the route with useSetI18nParams({ nl: { slug: 'home' }, en: { slug: 'home' } }).
  3. Inspect the HTML generated for the /home route.

We need to ensure that only the specified languages ("en" and "nl") have corresponding hreflang and og:locale tags in the HTML. The tags for unavailable languages ("pt", "de", "fr") should not be generated. Alternative is to disable seo without a warning.

If you feel that our configuration is wrong or we are missing something, please, let us know. Any guidance or suggestions would be greatly appreciated.

MariaAndreyeva commented 1 month ago

@BobbieGoede , please, check the comment above. Let me know if reproduction is still needed.

BobbieGoede commented 3 weeks ago

So the warnings are not the issue since you are using SEO features. The issue you're describing sounds similar to https://github.com/nuxt-modules/i18n/issues/2782 so I'm closing this to track it there instead, let me know if this is issue is not quite the same in which case I'll reopen.