How to generate sitemap?

[Inna-Mykytiuk]

I have a list of questions:
How to generate sitemap?
How to add robots, canonical, hreflang
How to generate schema.org?

As I understand it, it's simply not possible to do a normal SEO without NEXT settings. Why then is there an SEO section in the payload at all?

[revnelson]

The SEO plugin adds standard fields that are most commonly needed for SEO, but does nothing for the implementation of such data. For this you will need to check with your frontend's documentation. For Next.JS, here are some:

• Sitemap
• Robots
• Canonical
• Internationalization
• JSON-LD schema

Here is a utility we use to generate metadata in the Next.JS frontend from the meta fields created with the Payload SEO plugin, in case it's useful for you as a starting point:

import type { Metadata as NextMetadata } from "next"
import type { Metadata } from "@/lib/api/types"

export const buildMetadata = ({
	meta,
	title: titleOverride,
	description: descriptionOverride
}: {
	meta?: Metadata | null
	title?: string
	description?: string
}): NextMetadata | undefined => {
	const title = titleOverride || meta?.title || undefined

	if (!title) {
		return
	}

	const description = descriptionOverride || meta?.description || undefined

	const metadata = {
		title,
		description,
		robots: meta?.noIndex ? { index: false, follow: false } : undefined,
		alternates: meta?.canonical ? { canonical: meta.canonical } : undefined,
		openGraph:
			title && description
				? {
						title,
						description,
						locale: "en_US",
						type: "website",
						siteName: "YOUR_SITE_NAME",
						images: meta?.image?.url
							? [
									{
										url: meta.image.url,
										alt: meta.image.alt || "",
										width: meta.image.width || 1200,
										height: meta.image.height || 630
									}
								]
							: undefined
					}
				: undefined,
		twitter:
			title && description
				? {
						card: "summary_large_image",
						title,
						description,
						images: meta?.image?.url ? [meta.image.url] : undefined,
						creator: "@YOUR_TWITTER_HANDLE",
						creatorId: "YOUR_CREATOR_ID",
						siteId: "YOUR_SITE_ID"
					}
				: undefined
	}

	return metadata
}

In our Next.JS routes, we use this utility like this:

export const generateMetadata = async ({ params }: Props) => {
	const pageData = await getPageData((await params).slug, 0)

	const meta: Metadata | null | undefined = pageData?.meta

	const metadata = buildMetadata({ meta })

	return metadata
}

---

Слава Україні!

[Inna-Mykytiuk]

Thank You!
Glory to Heroes😎