BATMAN_2008
BATMAN_2008

Reputation: 3530

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

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
      })
    })
})
  1. 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? Still unable to solve the issue any fix would be really appreciated. I am using the nuxt sitemap version v6.0.0-beta.4

Upvotes: 1

Views: 189

Answers (0)

Related Questions