FetchSEO
Fetches SEO data for a given page path from the SEO Manager API. This is a server-side function and should only be called on the server (in getServerSideProps, getStaticProps, or a Server Component).
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| path | string | Yes | The page path to fetch SEO data for. |
| meta | object | No | Used for analytical information. Shape: { request: object } |
Response Shape
fetchSEO returns an object with two keys:
{
page: {
pageId: string,
path: string,
title: string,
description: string,
follow: "follow" | "nofollow",
index: "index" | "noindex",
changeFreq: "daily" | "weekly" | "monthly",
keywords: string,
priority: string,
ldJson: string | null,
image: { url: string } | null,
events: any | null
},
global: {
projectId: string,
canonicalURL: string,
defaultTitle: string,
defaultDescription: string,
favicon: string | null,
themeColor: string | null
}
}
If the page is not found or an error occurs, the response may be null or contain partial data. Always handle this gracefully.
Pages Router Examples
Using getServerSideProps
Fetches SEO data on every request. Allows collecting bot/webcrawler analytics by passing the request object.
import { fetchSEO } from "nextjs-seo-manager";
export async function getServerSideProps(context) {
const seo = await fetchSEO("/your-page-path", { request: context.req });
return {
props: { seo: seo || {} },
};
}
Using getStaticProps
Fetches SEO data at build time and revalidates periodically. Uses fewer API requests but cannot collect bot analytics.
import { fetchSEO } from "nextjs-seo-manager";
export async function getStaticProps() {
const seo = await fetchSEO("/your-page-path");
return {
props: { seo: seo || {} },
revalidate: 60 * 5, // revalidate every 5 minutes
};
}
App Router Example
In the App Router, call fetchSEO directly in a Server Component. For the recommended approach that integrates with generateMetadata, see App Router Metadata.
import SEOInit from "nextjs-seo-manager/init";
import { fetchSEO } from "nextjs-seo-manager";
SEOInit({
projectId: process.env.SEO_MANAGER_PROJECT_ID,
secretKey: process.env.SEO_MANAGER_SECRET_KEY,
});
export default async function MyPage() {
const seo = await fetchSEO("/my-page");
return (
<div>
<h1>{seo?.page?.title || "Default Title"}</h1>
<p>{seo?.page?.description}</p>
</div>
);
}
For App Router projects, we recommend using createPageSEO from nextjs-seo-manager/metadata instead of calling fetchSEO directly. It wraps fetchSEO with React cache() so the metadata generation and page rendering share a single API call. See the App Router Metadata guide.
Follow the Next Step