Easily compose and manage meta and open graph tags in your Next.js app/site.
Easily compose and manage meta and open graph tags in your Next.js app/site.
NOTE: This package is for use with Next.js’ Pages Router. Some App Router helpers are in the works and will live here in the future as well.
Via npm
npm install next-meta
Via Yarn
yarn add next-meta
Setting defaults within the Next.js App with MetaProvider.
import { ReactElement, ReactNode } from 'react'
import { NextPage } from 'next'
import { AppProps } from 'next/app'
import Head from 'next/head'
import { usePathname } from 'next/navigation'
import { MetaProvider } from 'next-meta'
// eslint-disable-next-line @typescript-eslint/ban-types
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
const BASE_URL = 'https://test.com'
const SITE_NAME = 'Example Site'
const DEFAULT_TITLE = 'An example title for using next-meta in your _app file.'
const DEFAULT_DESCRIPTION = 'Hopefully this makes things a little easier with adding good meta/og tags to your site.'
const DEFAULT_IMAGE_URL = '/social-share.png'
function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page)
const metaUrl = usePathname()
return (
<>
<Head>
<link rel="icon" type="image/png" href="/favicon.ico" />
</Head>
<MetaProvider
baseUrl={BASE_URL}
canonical={metaUrl}
description={DEFAULT_DESCRIPTION}
imageUrl={DEFAULT_IMAGE_URL}
imageWidth={1200}
imageHeight={630}
siteName={SITE_NAME}
title={DEFAULT_TITLE}
twitterCard="summary_large_image"
twitterSite="@exampleSite"
url={metaUrl}
>
{getLayout(<Component {...pageProps} />)}
</MetaProvider>
</>
)
}
export default CustomApp
Specifying page specific meta tags using the SiteMeta component.
import Head from 'next/head'
import { SiteMeta } from 'next-meta'
const ExamplePage = () => (
return (
<>
<Head>
<SiteMeta
imageUrl="/share/about-social.png"
title="About"
siteName="Example Site"
url="/about"
/>
</Head>
{...page code...}
</>
)
)
| Prop | Description |
|---|---|
audioUrl?: string | URL to audio file. |
audioType?: string | Mimetype of audio file. |
baseUrl?: string | Used specify base url to use for all xUrl props, allowing you to simply pass in url="/about" vs. url="https://yourdomain.com/about". |
description?: string | You know, <meta name="description" content="You know, a description" /> |
determiner?: string | The word that appears before this object's title in a sentence.An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank). |
imageUrl?: string | URL to image. |
imageWidth?: number | string | Width of the image. (Typically: 1200px) |
imageHeight?: number | string | Height of the image. (Typically: 630px) |
locale?: string | Locale of site/page |
siteName?: string | Use for og:site_name and appended to <title> |
title?: string | Title of page. Generates: <title> + og:title + twitter:title tags |
twitterCard?: string | Twitter card display type. |
twitterCreator?: string | Username to associate with a page/post. |
twitterSite?: string | Username to associate with the site/app. |
url?: string | URL of page/site. |
videoUrl?: string | URL to video file. |
videoType?: string | Mimetype of the video file. |
FAQs
Easily compose and manage meta and open graph tags in your Next.js app/site.
We found that next-meta demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.