Skip to content

talentlessguy/react-ogp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

16 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

react-ogp

Vulnerabilities Version Last commit Minified size Downloads

The ultimate React OpenGraph component.

Features

  • Automatically sets url / secure_url for 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-ogp

Usage

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>
    </>
  )
}
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>
    </>
  )
}