Nuxt Sitemap does not include the images even though the Nuxt content pages contain many images

[Aravinda93]

I am developing a Nuxt content website for documentation purposes and using the Nuxt Sitemap in it.

I have created a similar repo as my original project on CodeSandBox. Can someone please have a look and provide some solutions on the automatic generation of sitemap for images in the Nuxt Content project?

I am adding the sitemap information to my /content/docs with all the markdown or .md files such as:

/content/docs/introduction/index.md:

---
title: "Introduction"
description: My Introduction to content website
sitemap:
  loc: /docs/introduction
  lastmod: 2024-08-30
  changefreq: quaterly
  priority: 0.9
___

I can generate the sitemap.xml file during the npm run generate but this generates the url only for the routes that are present in /content/docs where I have added the sitemap information to my index.md files such as this in:

<url>
    <loc>https://example.io/docs/introduction</loc>
    <lastmod>2024-08-30</lastmod>
    <changefreq>quaterly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" href="https://example.io/docs/introduction" hreflang="x-default" />
    <xhtml:link rel="alternate" href="https://example.io/docs/introduction" hreflang="en" />
</url>

I have many images within this index.md file but these images are for some reason not included in the sitemap.xml file. I don't want to specify each image in my all .md files rather want a dynamic approach where Nuxt Content/Sitemap can automatically scan and include all images in my /content/docs so it's all included in sitemap.xml file.

I added the following:

sitemap: {   
  urls: [
    {
      loc: '/docs',
      images: [
        {
          loc: 'https://example.io/docs/introduction/image1.png',
          caption: 'My image caption',
          geoLocation: 'My image geo location',
          title: 'My image title',
          license: 'My image license',
        }
      ]
    }
  ]
},

This will add only the specified image here to my sitemap.xml file. However, I have a lot of images in different .md files within my Nuxt content /content/docs. How to include all dynamically and directly without specifying each of them here in nuxt.config.js file?

1. I added the following by looking into the Nuxt Content Documentation

//To support and display the .md files from /content using @nuxt/content
content: {
  documentDriven: true,
  sitemap: true,
  //To get the reading time for each .md file in /content
  markdown: {
    remarkPlugins: ["remark-reading-time"],
  },
  //To build the sitemap for SEO automatically using @nuxt/sitemap
  strictNuxtContentPaths: true
},

sitemap: {
  sources: [
    '/api/__sitemap__/urls'
  ]
},

And a file in /server/api/__sitemap__/urls.ts but this also does not make any difference and I do not get my images or videos in sitemap.xml file:

import { defineEventHandler } from 'h3'
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
import { serverQueryContent } from '#content/server'
import { asSitemapUrl, defineSitemapEventHandler } from '#imports'

export default defineSitemapEventHandler(async (e) => {
  const contentList = (await serverQueryContent(e).find()) as ParsedContent[]
  return contentList
    .filter(c => c._path.startsWith('docs'))
    .map((c) => {
      return asSitemapUrl({
        loc: `/blog/${c._path.replace('docs', '')}`,
        lastmod: updatedAt
      })
    })
})

2. As per mentioned in the Nuxt SiteMap Automatic Image Discovery i wrapped my layouts/default.vue with <main> something like this:

<!-- Page Content -->
<div class="w-full flex flex-col flex-grow">
  <main>
    <slot />
  </main>
</div>

Previously I was just using the <slot />. Even after adding the <main> when I generate the .output I don't see image-related things in sitmap.xml.

References:

1. Nuxt Sitemap
2. Nuxt Sitemap images
3. CodeSandBox Reproduction of the issue

Is there any way to achieve this?