react-ogp
The ultimate React OpenGraph component.
Features
- Automatically sets
url/secure_urlfor images and videos. - TypeScript support
- Forcing to complete all properties for an object not to forget to fill some fields
Install
pnpm i react react-ogpUsage
Next.js
import React from 'react'
import { OGP } from 'react-ogp'
import Head from 'next/head'
export default function Index() {
return (
<>
<Head>
<OGP
url="https://example.com"
title="My website"
description="This is my website"
siteName="example.com"
image="http://example.com/cover.jpg"
/>
</Head>
</>
)
}React Helmet
import React from 'react'
import { OGP } from 'react-ogp'
import { Helmet as Head } from 'react-helmet'
export default function Index() {
return (
<>
<Head>
<OGP
url="https://example.com"
title="My website"
description="This is my website"
siteName="example.com"
image="http://example.com/cover.jpg"
/>
</Head>
</>
)
}