Metamanager React SEO
Meta tag update & schema markup/structured data deployment for your React/Next.js frontend.
SaaS-solution for search engine optimization (SEO)
metamanager platform is connected to websites in order to update meta tags (title, description...) and insert schema markup/structured data for each internal page/URL.
As a frontend developer your can create your account and manage websites in which you want to implement this plugin... And let webmarketers doing the rest of the job: meta tag & schema markup edition...
Features
- Meta/structured data download (secured operation)
- Server-side rendering (SSR)
- <title /> & <meta description /> inserted within HTML tag
- <script application/ld+json /> inserted within body tag
Installation
You can install Metamanager React SEO via NPM:
npm i @metamanager/react-seo
Usage/Examples
Import @metamanager/react-seo in 4 steps into your React/Next.js project.
1. Wrapping your application in a SEO helmet provider
Set 3 properties for the provider:
- context: Metamanager context
- webSiteId: ID of the website (supplied from the platform)
- authToken: API token (supplied from the platform)
/src/_app.ts
import { HelmetProvider } from "@metamanager/react-seo";
import { metamanagerContext } from "../context";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<HelmetProvider context={metamanagerContext} webSiteId={process.env.MM_WEBSITE_ID} authToken={process.env.MM_TOKEN}>
<Component {...pageProps} />
</HelmetProvider>
);
}
2. Initializing an context object to store the Metamanager data
Initialize the Metamanager context here:
/src/context.ts
import { HelmetContextData } from "@metamanager/react-seo";
export const metamanagerContext : HelmetContextData={};
3. Meta tags & schema markup insertion (SSR)
Fetch & display meta tags & schema markup in the document template:
/src/_document.tsx
import { metamanagerContext } from "../context";
import { Html, Head, Main, NextScript } from "next/document";
import { ReactNode } from "react";
export default function Document() {
render() {
return (
<Html lang="en">
<Head />
{metamanagerContext?.helmet?.title?.toComponent() as ReactNode}
{metamanagerContext?.helmet?.meta?.toComponent() as ReactNode}
{metamanagerContext?.helmet?.script?.toComponent() as ReactNode}
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
4. Page file customization
Import & insert SEO Helmet component from @metamanager/react-seo to display meta tags & schema markups for the relevant page path.
/src/pages/index.tsx
import { withMetaManagerSEO, withMetamanagerStaticProps, MetamanagerNextPage } from "@metamanager/react-seo";
const Home: MetamanagerNextPage<{}> = ({ path, apiData}) => {
return (
<>
<main>Add your components here...</main>
</>
);
}
export default withMetaManagerSEO(Home);
export const getStaticProps = withMetamanagerStaticProps<{}>(
() => {
return { props: { path: "/", } };
}, {
webSiteId: process.env.MM_WEBSITE_ID,
authToken: process.env.MM_AUTH_TOKEN
}
);
/src/pages/[...path].tsx
import { withMetaManagerSEO, withMetamanagerStaticProps, MetamanagerPageProps } from "@metamanager/react-seo";
import { GetStaticProps } from "next";
export default function AnyPage() {
return (
<>
<main>Add your components here...</main>
</>
);
}
export default withMetaManagerSEO(AnyPage);
export const getStaticPaths = () => {
const pageList = new Webpage(process.env.MM_WEBSITE_ID);
const urls = pageList.sort();
return {
paths: urls?.filter(i => i.url !== '/')?.map(i => ({ params: { path: i.url?.startsWith('/') ? i.url.slice(1).split('/') : i.url.split('/') } })) ?? [],
fallback: false
}
};
const retriveStaticProps : GetStaticProps<MetamanagerPageProps<{}>, { path : string[]}> =({ params }) => {
return {
props: {
path: params?.path?.join('/')?.startsWith('/') ? params?.path?.join('/') : '/' + params?.path?.join('/')
}
}
};
export const getStaticProps = withMetamanagerStaticProps<{}>(retriveStaticProps, {
webSiteId: process.env.MM_WEBSITE_ID,
authToken: process.env.MM_AUTH_TOKEN
});
License
Subscription to the service
To make the plugin work, an account must be created in https://metamanager.io.
This platform allows users to work on meta data and schema markup which will be sent to your website. You will also receive the website ID & API token to configure the plugin.