Next.js Discord

Discord Forum

sitemap question (languages)

Answered
Ruwbix posted this in #help-forum
Open in Discord
Avatar
This is my current sitemap. I have my default route which basically auto redirects to the language. Is this the correct way of doing things (never set up a sitemap before)? or am i supposed to define the languages as well? Also, the content is static, that means i shouldn't define a lastModified, should I?
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://immotogo.be/nl</loc>
</url>
<url>
<loc>https://immotogo.be/fr</loc>
</url>
<url>
<loc>https://immotogo.be/en</loc>
</url>
<url>
<loc>https://immotogo.be/nl/destination/gern</loc>
</url>
<url>
<loc>https://immotogo.be/fr/destination/gern</loc>
</url>
<url>
<loc>https://immotogo.be/en/destination/gern</loc>
</url>
<url>
<loc>https://immotogo.be/nl/destination/la-douane</loc>
</url>
<url>
<loc>https://immotogo.be/fr/destination/la-douane</loc>
</url>
<url>
<loc>https://immotogo.be/en/destination/la-douane</loc>
</url>
</urlset>
Answered by fuma 💙 joulev
Alright I've just read the whole docs again
You can either generate one via Route Handler, with an XML generator (find a library), or manually write a sitemap.xml

If you directly list urls without locale (for example, /my-blog/name), ensure that each page has alternate tags (alternates.languages and alternates.canoncal) so that Google know all variants of your page. In this case, you can directly use the built-in Sitemap Route API
View full answer

28 Replies

Avatar
should i define somewhere that my base url redirects to the language?
Avatar
You should add a xhtml:link element with hreflang attribute according to their docs:
https://developers.google.com/search/docs/specialty/international/localized-versions#sitemap
it's similar to the alternate meta tag
Avatar
I don't think nextjs MetadataRoute.Sitemap has a built-in feature for that, does it?

import { siteConfig } from '@/config/site';
import { i18n } from '@/i18n-config';
import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  const BASE_URL = siteConfig.url || 'https://immotogo.be';

  const defaultRoutes: MetadataRoute.Sitemap = i18n.locales.map((locale) => ({
    url: `${BASE_URL}/${locale}`,
  }));

  const gernRoutes: MetadataRoute.Sitemap = i18n.locales.map((locale) => ({
    url: `${BASE_URL}/${locale}/destination/gern`,
  }));

  const laDouaneRoutes: MetadataRoute.Sitemap = i18n.locales.map((locale) => ({
    url: `${BASE_URL}/${locale}/destination/la-douane`,
  }));

  return [...defaultRoutes, ...gernRoutes, ...laDouaneRoutes];
}
probably easier to just manually make a sitemap.xml in this case?
or does it auto do that when I set it up in metadata?
Image
Avatar
Google docs didn't describe that, defining alternates in page level might be supported.

Assume you're using https://github.com/iamvishnusankar/next-sitemap, I think it can be implemented with the alternateRefs option
Avatar
Avatar
I haven't checked this new API before, surely it doesn't support langhref attribute for now
Avatar
and perhaps Next.js won't be that smart, since sitemap is at the root directory of your website, it isn't able to get metadata from url and generate alternates for you
Avatar
i think you can actually put a sitemap in a non-root path, at least some canarys ago you could (so as it isn't mentioned in docs, i wouldn't trust that much)
Avatar
that's by Google's docs
Avatar
ohhhhhh i was meaning the nextjs docs where it mentioned only root sitemap.ts was used
Avatar
Google only look for xxx.com/sitemap.xml, subdirectories are not considered
Avatar
yeah, i think you may have success importing them through the sitemap or robots.. but i don't know that much SEO (so best to just use root imo)
Avatar
Alright I've just read the whole docs again
You can either generate one via Route Handler, with an XML generator (find a library), or manually write a sitemap.xml

If you directly list urls without locale (for example, /my-blog/name), ensure that each page has alternate tags (alternates.languages and alternates.canoncal) so that Google know all variants of your page. In this case, you can directly use the built-in Sitemap Route API
Answer
Avatar
so like this

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://immotogo.be/</loc>
        <xhtml:link rel="alternate" hreflang="nl" href="https://immotogo.be/nl"/>
        <xhtml:link rel="alternate" hreflang="fr" href="https://immotogo.be/fr"/>
        <xhtml:link rel="alternate" hreflang="en" href="https://immotogo.be/en"/>
    </url>
    <url>
        <loc>https://immotogo.be/destination/gern</loc>
        <xhtml:link rel="alternate" hreflang="nl" href="https://immotogo.be/nl/destination/gern"/>
        <xhtml:link rel="alternate" hreflang="fr" href="https://immotogo.be/fr/destination/gern"/>
        <xhtml:link rel="alternate" hreflang="en" href="https://immotogo.be/en/destination/gern"/>
    </url>
    <url>
        <loc>https://immotogo.be/destination/la-douane</loc>
        <xhtml:link rel="alternate" hreflang="nl" href="https://immotogo.be/nl/destination/la-douane"/>
        <xhtml:link rel="alternate" hreflang="en" href="https://immotogo.be/en/destination/la-douane"/>
        <xhtml:link rel="alternate" hreflang="fr" href="https://immotogo.be/fr/destination/la-douane"/>
    </url>
</urlset>
Avatar
it looks good
Avatar
doesn't seem to like the <xhtml:link />
Image
Avatar
xmlns:xhtml="http://www.w3.org/1999/xhtml"
at urlset
Avatar
alright, it doesn't return it in a formatted list anymore. That an issue?
Image
Image
looks fine in source code though, just doesn't seem to like those xhtml:link element. is there like tools to check if my sitemap is valid?
Avatar
it's fine
Avatar
i have it rendering weird often
Avatar
alright awesome. Thanks a lot guys