When creating sitemap in image:loc, I am getting loc as undefined in browser when I view my xml. I need to show images present in blogs. Also when I console.log it the link shows in terminal but shows as undefined in the browser.
Also, right now in the code I have just placed a string in loc just to see the results. I will change it once this loc is shown correctly in the browser.
Note: I have also tried using the custom Transform function(next-sitemap.config.js that comes in the library next-sitemap but it still had same results showing image: loc as undefined.
blog 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"],
},
],
},
};
Could you please let me know how I can get the image to show properly in image:loc in sitemap
