I am having an issue with creating a sitemap in image:loc. When I view my xml in the browser, loc is showing as undefined. The goal is to display images present in blogs. Additionally, when I use console.log, the link displays in the terminal but shows as undefined in the browser.
Currently, in the code, I have inserted a string in loc just for testing purposes. Once loc is displayed correctly in the browser, I will update it accordingly.
Note: I attempted using the custom Transform function (next-sitemap.config.js) provided by the next-sitemap library but encountered the same issue of image: loc showing up as undefined.
Blogs Sitemap: enter image description here
Blogs Object: (need the image shown in the data object)
{
status: 200,
data: [
{
_id: '6511c2cbc3ae7d1923a19a52',
slug: 'buying-gold-in-toronto:-tips-for-local-investors',
status: 'Publish',
meta: [Object],
image: 'Chapters_GTA-Page.png',
title: 'Buying Gold in Toronto: Tips for Local AU Bullion',
categories: [Array],
createdAt: '2023-09-25T17:26:35.580Z'
},
{
_id: '6511d646c3ae7d1923a19f5f',
slug: 'the-2024-1-oz-gold-kangaroo-coin-from-the-perth-mint',
status: 'Publish',
meta: [Object],
image: '024-kangaroo-gold-coin.jpeg',
title: 'The 2024 1 Oz Gold Kangaroo Coin from The Perth Mint',
categories: [Array],
createdAt: '2023-09-25T18:49:42.943Z'
},
],
totalBlogs: 3
}
Index.js
import { getServerSideSitemapLegacy } from "next-sitemap";
import { GetServerSideProps } from "next";
import axiosInstance from "../../helper";
import { siteUrl, transform } from "../../next-sitemap.config";
export const getServerSideProps = async (ctx) => {
const response = await fetch(
`${axiosInstance.defaults.baseURL}/getallblogs`,
{ next: { revalidate: 3600 } }
);
const blogs = await response.json();
console.log(blogs);
const fields = blogs.data.map(({ slug }) => {
return {
loc: `${siteUrl}/blogs/${slug}`,
lastmod: new Date().toISOString(),
images: [{ loc: "image.jpg" }],
};
});
return getServerSideSitemapLegacy(ctx, fields);
};
// Default export to prevent next.js errors
export default function Sitemap() {}
next-sitemap.config.js
// const siteUrl = "http://localhost:3000";
module.exports = {
siteUrl: process.env.SITE_URL || "http://localhost:3000",
generateRobotsTxt: true,
sitemapSize: 7000,
exclude: [
"/blogs-sitemap.xml",
"/products-sitemap.xml",
"/checkout",
"/cart",
"/account",
"/orderplaced",
"/profile",
],
transform: async (config, path) => {
return {
loc: path, // => this will be exported as http(s)://<config.siteUrl>/<path>
lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
images: [{ loc: "image.jpg" }],
};
},
sitemapSize: 7000,
robotsTxtOptions: {
policies: [
{
userAgent: "*",
allow: "/",
},
{
userAgent: "test-bot",
allow: ["/path", "/path-2"],
},
{
userAgent: "black-listed-bot",
disallow: ["/sub-path-1", "/path-2"],
},
],
},
};
If you can provide guidance on how to properly display the image in image:loc in the sitemap, that would be greatly appreciated.