search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.85k stars 26.86k forks source link

Localized Sitemap Does Not Work #67813

Open Barzi-Ahmed opened 3 months ago

Barzi-Ahmed commented 3 months ago

Link to the code that reproduces this issue

https://github.com/Barzi-Ahmed/my-app

To Reproduce

  1. Start application with pnpm run dev or pnpm run dev --turbo (issue is present in both).
  2. In the URL of the browser, go to sitemap.xml page by writing /sitemap.xml

STORY: When creating sitemap.ts and using this same code from docs, this is the result I get: image

I have searched through GitHub issues and found https://github.com/vercel/next.js/issues/63764, and there it is mentioned that you should use Next 14.2, but I already use the latest version of Next.js (details below), and this means it is still not fixed.

Current vs. Expected behavior

Obviously the mentioned sitemap sample doesn't render correctly at all as a normal XML page.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 8043
  Available CPU cores: 8
Binaries:
  Node: 20.15.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Internationalization (i18n)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

I use Chrome Version 126.0.6478.127 (Official Build) (64-bit)

archanaagivale30 commented 3 months ago

@Barzi-Ahmed, the sitemap generation looks fine if you look at it in the network tab. The issue is not with NextJs sitemap generation it's with tags in the browser. You can refer to the discussion for the same issue https://support.google.com/webmasters/thread/161147229/will-google-still-recognize-my-sitemap-if-i-change-the-declaration-protocol?hl=en

Barzi-Ahmed commented 3 months ago

I didn't understand. Please tell me how do I solve this issue.

icyJoseph commented 2 months ago

I don't think there'a anything to fix? Are worried that the browser renders it like that?

Your file outputs:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://acme.com</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://acme.com/es" />
<xhtml:link rel="alternate" hreflang="de" href="https://acme.com/de" />
<lastmod>2024-07-22T12:44:55.131Z</lastmod>
</url>
<url>
<loc>https://acme.com/about</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://acme.com/es/about" />
<xhtml:link rel="alternate" hreflang="de" href="https://acme.com/de/about" />
<lastmod>2024-07-22T12:44:55.131Z</lastmod>
</url>
<url>
<loc>https://acme.com/blog</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://acme.com/es/blog" />
<xhtml:link rel="alternate" hreflang="de" href="https://acme.com/de/blog" />
<lastmod>2024-07-22T12:44:55.131Z</lastmod>
</url>
</urlset>

And I think that's fine... You can do:

new DOMParser().parseFromString(`<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://acme.com</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://acme.com/es" />
<xhtml:link rel="alternate" hreflang="de" href="https://acme.com/de" />
<lastmod>2024-07-22T12:44:55.131Z</lastmod>
</url>
<url>
<loc>https://acme.com/about</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://acme.com/es/about" />
<xhtml:link rel="alternate" hreflang="de" href="https://acme.com/de/about" />
<lastmod>2024-07-22T12:44:55.131Z</lastmod>
</url>
<url>
<loc>https://acme.com/blog</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://acme.com/es/blog" />
<xhtml:link rel="alternate" hreflang="de" href="https://acme.com/de/blog" />
<lastmod>2024-07-22T12:44:55.131Z</lastmod>
</url>
</urlset>
`, 'text/xml')

And it will parse it correctly. I think the issue is just that the styling Chrome is giving to the page, is a bit jarring.

This is because the Chrome stylesheet for some of your tags, has display: none;, but that's for humans, not robots

I think it is more appropriate to test your sitemap using cURL, or other means more similar to how it'd be consumed, not a browser...

archanaagivale30 commented 2 months ago

Well as already noted, you dont really need the sitemap to 'render' nicely in a browser.

A browser is not the intended audience for a sitemap.

The sitemap is for consumption by a special bot. It readsy the XML directly, it doesnt care about trying to render it. The sitemap works. You need to go to your sitemap at localhost:3000/sitemap.xml, right-click to save the page, and open it in a text editor. Alternatively, you can check it in your browser’s console.

kilias07 commented 2 months ago

I have the same issue, yes I agree that the page source is correct, but I've checked sitemap (download sitemap.xml and upload) via sitemap checker and it's not valid.

icyJoseph commented 2 months ago

I have the same issue, yes I agree that the page source is correct, but I've checked sitemap (download sitemap.xml and upload) via sitemap checker and it's not valid.

What is that checker raising as issue(s)?

mamlzy commented 2 months ago

Well as already noted, you dont really need the sitemap to 'render' nicely in a browser.

A browser is not the intended audience for a sitemap.

The sitemap is for consumption by a special bot. It readsy the XML directly, it doesnt care about trying to render it. The sitemap works. You need to go to your sitemap at localhost:3000/sitemap.xml, right-click to save the page, and open it in a text editor. Alternatively, you can check it in your browser’s console.

You are correct, thank you for the explanation.