# react-metamanager-plugin

> Meta tag update & schema markup/structured data deployment

Latest version **0.7.0** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-metamanager-plugin
pnpm add react-metamanager-plugin
yarn add react-metamanager-plugin
bun add react-metamanager-plugin
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2023-05-29 |
| First published | 2023-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 393.1 KB |
| Known vulnerabilities | 0 (+31 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | metamanager.io & Bhargav Patel |
| Maintainers | bhargav-patel |
| Keywords | metamanager, seo, meta tag, schema markup, structured data, react, javascript, typescript |

## Links

- npm: https://www.npmjs.com/package/react-metamanager-plugin
- Repository: https://github.com/metamanager/metamanager-react-seo
- Homepage: https://metamanager.io
- Issues: https://github.com/metamanager/metamanager-react-seo/issues
- npm.io page: https://npm.io/package/react-metamanager-plugin

## Dependencies (6)

- [next](https://npm.io/package/next.md) ^13.4.4
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [shallowequal](https://npm.io/package/shallowequal.md) ^1.1.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.5
- [react-fast-compare](https://npm.io/package/react-fast-compare.md) ^3.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.7.0 (latest) — 2023-05-29
- 0.6.9 — 2023-05-29
- 0.6.8 — 2023-05-29
- 0.6.7 — 2023-05-29
- 0.6.6 — 2023-05-29
- 0.6.5 — 2023-05-29
- 0.6.4 — 2023-05-29
- 0.6.3 — 2023-05-29
- 0.6.2 — 2023-05-29
- 0.6.1 — 2023-05-29
- 0.6.0 — 2023-05-29
- 0.5.9 — 2023-05-29
- 0.5.8 — 2023-05-29
- 0.5.7 — 2023-05-29
- 0.5.6 — 2023-05-29
- … 49 more at https://npm.io/package/react-metamanager-plugin/versions

## README

<a href="https://metamanager.io" target="_blank" title="Go to metamanager.io"><img width="251" height="24" src="https://metamanager.io/logo/metamanager-logo-dark-sm.svg" alt="Metamanager.io" /></a>

# **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)
- &lt;title /&gt; & &lt;meta description /&gt; inserted within HTML tag
- &lt;script application/ld+json /&gt; 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.tsx*
```javascript
import { HelmetProvider } from '@metamanager/react-seo';
import { metaManagerContext } from '../context';

export default function App({ Component, pageProps }) {
    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*
```javascript
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*
```javascript
import { HelmetContextData } from "@metamanager/react-seo";
import { metaManagerContext } from "../context";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ReactNode } from "react";

class MyDocument extends Document<{ metaManagerContext: HelmetContextData }> {
    static async getInitialProps(ctx: any) {
        const initialProps = await Document.getInitialProps(ctx);
        /** Use this logic to wait for API call */
        const data = new Promise((resolve, _) => {
            let timeOut = 7;
            let interval_time = 5000;
            const interval = setInterval(() => {
                timeOut -= 1;
                if (metaManagerContext.apiData || !(timeOut > 0)) {
                    resolve(metaManagerContext);
                    clearInterval(interval);
                }
            }, interval_time);
        });

        const _hc = await data;

        /** return initialProps along with the context data */
        return { ...initialProps, metaManagerContext: _hc };
    }

    render() {
        return (
            <Html>
                {/** Use the data to display meta tags */}
                {
                    this.props.metaManagerContext?.helmet?.title?.toComponent() as ReactNode
                }
                {
                    this.props.metaManagerContext?.helmet?.meta?.toComponent() as ReactNode
                }
                {
                    this.props.metaManagerContext?.helmet?.script?.toComponent() as ReactNode
                }
                <Head></Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;
```

### 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*
```javascript
import { Helmet } from '@metamanager/react-seo';

export default function Home() {
  return (
    <>
      {/** meta tags inside the Helmet wrapper will be updated automatically by metamanager API */}
      <Helmet path="/" />

      <main>Add your components here...</main>
    </>
  );
}
```

## License

[MIT](https://choosealicense.com/licenses/mit/)

## 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**.

---
_Source: https://npm.io/package/react-metamanager-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._