understanding how sitemap and canonical meta tag combination work

If i have a website that has 2 locales for example www.example.com/en and www.example.com/es, are these considered duplicates therefore canonical meta tag should be used for one of them so that search engines can focus on crawling and indexing the most valuable one ? and when using sitemap should both urls be put like this, i'm new to SEO and im not sure how sitemap and canonical meta tags should be used


export default async function sitemap() {

  return [
    {
      url: `www.example.com/en`,
      ...
    },
    {
      url: `www.example.com/es`,
      ...
    },
  ];
}

Solution

Localized versions of a website are not considered duplicate, because their content is different (English vs Spanish in your case) and they are targeting different demographics. To help Google understand this, you can set up Hreflang tags, as described in Google's documentation for localized versions.

For example:

www.example.com/en should have the following Hreflang tags:

    <link rel="alternate" hreflang="en" href="https://www.example.com/en">
    <link rel="alternate" hreflang="es" href="https://www.example.com/es">

www.example.com/en/example should have the following Hreflang tags:

    <link rel="alternate" hreflang="en" href="https://www.example.com/en/example">
    <link rel="alternate" hreflang="es" href="https://www.example.com/es/ejemplo">

www.example.com/es should have the following Hreflang tags:

    <link rel="alternate" hreflang="en" href="https://www.example.com/en">
    <link rel="alternate" hreflang="es" href="https://www.example.com/es">

www.example.com/es/ejemplo should have the following Hreflang tags:

    <link rel="alternate" hreflang="en" href="https://www.example.com/en/example">
    <link rel="alternate" hreflang="es" href="https://www.example.com/es/ejemplo">

Because the /en and /es versions are not duplicate, you do not need to canonicalize one to the other. Instead, each version should be "self-canonical", i.e:

www.example.com/en should have the following Canonical tag:

    <link rel="canonical" href="https://www.example.com/en">

www.example.com/en/example should have the following Canonical tag:

    <link rel="canonical" href="https://www.example.com/en/example">

www.example.com/es should have the following Canonical tag:

    <link rel="canonical" href="https://www.example.com/es">

www.example.com/es/ejemplo should have the following Canonical tag:

    <link rel="canonical" href="https://www.example.com/es/ejemplo">

Self-canonical tagging will protect your pages from being duplicated by tracking parameters, among others. See "Reasons to specify a canonical URL" in Google's documentation on Canonical tags.

Likewise, because the /en and /es versions are not duplicate, each language version should appear in the XML sitemap, which means the sample code you've provided is correct.