SEOHelper (Pages Router)
Renders SEO meta tags, structured data (ld+json), and loads the SEO Manager in-page editor. This component is for the Pages Router only.
If you are using the App Router, use AppSEOHelper from nextjs-seo-manager/metadata instead.
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| data | object | Yes | The SEO data object returned by fetchSEO. Contains page-level and global SEO data. |
| head | function | Yes | A function that receives the meta tag elements and wraps them in your head component. For Next.js, use (data) => <Head>{data}</Head>. |
Complete Pages Router Example
// pages/index.js
import SEOInit from "nextjs-seo-manager/init";
import { fetchSEO } from "nextjs-seo-manager";
import SEOHelper from "nextjs-seo-manager/seohelper";
import Head from "next/head";
SEOInit({
projectId: process.env.SEO_MANAGER_PROJECT_ID,
secretKey: process.env.SEO_MANAGER_SECRET_KEY,
projectKey: process.env.NEXT_PUBLIC_SEO_MANAGER_PROJECT_KEY,
});
export default function HomePage({ seo }) {
return (
<>
<SEOHelper data={seo} head={(data) => <Head>{data}</Head>} />
<h1>Welcome</h1>
</>
);
}
export async function getStaticProps() {
const seo = await fetchSEO("/");
return {
props: { seo: seo || {} },
revalidate: 300,
};
}
Open SEO Manager Component
The SEO Manager UI is lazy-loaded by SEOHelper. You can open it programmatically with:
<button
onClick={() => {
document.getElementById("open-seo-manager")?.click();
}}
>
Open SEO Manager
</button>
The button may not respond immediately on first click because the manager code loads after the initial page render.