i18n Multilingual Nuxt Website - The right way - rel-alternate-hreflang

NicolasGiuristante
3
NicolasGiuristante
commented 4 months ago

What problem does this feature solve?

Hello! 👋🏼

Proposition : Automatically generate adequate sitemap with the concept rel-alternate-hreflang proposed by Google itself when using nuxt-i18n paths feature.

Why : Multilingual website cannot benefit from this plugin's automatic sitemap generation at the moment without heavy modifications/custom code. It would greatly help newcomers that doesn't know how to code this properly AND devs who do not know SEO's current best practices towards multilingual websites.

Source : Tell Google about localized versions of your page[https://support.google.com/webmasters/answer/189077?hl=en]

I am sure this can be implemented easily. nuxt-i18n is already supporting this rel-alternate-hreflang concept with link tags in the head.

What does the proposed changes look like?

Exemple

// contact.vue
nuxtI18n: {
    paths: {
        en: '/contact-us',
        fr: '/contactez-nous',
    },
},

Would generate

// generated sitemap.xml
<url>
    <loc>https://example.ca/en/contact-us/</loc>
    <xhtml:link rel="alternate" hreflang="fr-ca" href="https://example.ca/fr/contactez-nous/" />
    <xhtml:link rel="alternate" hreflang="en-ca" href="https://example.ca/en/contact-us/" />
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
</url>

Root page x-default when all locales are prefixed
Bonus point if you could support for the newest x-default value on root when i18n's option strategy = prefix

// generated sitemap.xml
<url>
    <loc>https://example.ca/</loc>
    <xhtml:link rel="alternate" hreflang="fr-ca" href="https://example.ca/fr/" />
    <xhtml:link rel="alternate" hreflang="en-ca" href="https://example.ca/en/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.ca/" />
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
</url>
idea
1
JacekZakowicz
0
JacekZakowicz
commented 2 months ago

Hi! If not translated URLs, at least it should use language suffixes like /de, /fr, etc.

0
NicolasGiuristante
3
NicolasGiuristante
commented 2 months ago

Hi! If not translated URLs, at least it should use language suffixes like /de, /fr, etc.

I am not sure I get what you mean. Do you mind rephrasing?

0
JacekZakowicz
0
JacekZakowicz
commented 2 months ago

Hi,

I mean that instead of this:

<url> <loc>https://my-domain.com/about</loc> </url> <url> <loc>https://my-domain.com/de/about</loc> </url> <url> <loc>https://my-domain.com/fr/about</loc> </url>

we should at least have:

<url> <loc>https://my-domain.com/about</loc> <xhtml:link rel=”alternate” hreflang=”en” href=”https://my-domain.com/about”/> <xhtml:link rel=”alternate” hreflang=”de” href=”https://my-domain.com/de/about”/> <xhtml:link rel=”alternate” hreflang=”fr” href=”https://my-domain.com/fr/about”/> </url>

But you can consider it as two separate issues probably.

0
NicolasGiuristante
3
NicolasGiuristante
commented 2 months ago

@JacekZakowicz That is one main aspect of my proposition. (:

You explicitly displayed the root problem. So thank you for that. Right now, every locale is its own, which is technically bad for SEO. My proposition above would fix that. And without canonical nonsense as a bonus (which are now not recommended between translated pages).

0
Informations
Feature RequestOpen
#c73 - Created 4 months ago