https://github.com/ryanhefner/next-meta
🗣️ Easily compose and manage meta and open graph tags in your Next.js app/site.
https://github.com/ryanhefner/next-meta
metadata next nextjs opengraph-images opengraph-tags react
Last synced: 3 months ago
JSON representation
🗣️ Easily compose and manage meta and open graph tags in your Next.js app/site.
- Host: GitHub
- URL: https://github.com/ryanhefner/next-meta
- Owner: ryanhefner
- License: mit
- Created: 2023-11-28T16:04:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-15T02:06:45.000Z (about 1 year ago)
- Last Synced: 2025-01-31T18:28:51.474Z (4 months ago)
- Topics: metadata, next, nextjs, opengraph-images, opengraph-tags, react
- Language: JavaScript
- Homepage: https://pkgstats.com/pkg:next-meta
- Size: 800 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🗣️ next-meta
[](https://www.pkgstats.com/pkg:next-meta)
[](LICENSE)
[](https://www.pkgstats.com/pkg:next-meta)
[](https://coveralls.io/github/ryanhefner/next-meta)
[](https://codecov.io/gh/ryanhefner/next-meta)
[](https://circleci.com/gh/ryanhefner/next-meta)
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.
## Install
Via [npm](https://npmjs.com/package/next-meta)
```sh
npm install next-meta
```
Via [Yarn](https://yarn.pm/next-meta)
```sh
yarn add next-meta
```
## How to use
Setting defaults within the Next.js App with `MetaProvider`.
```js
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
= NextPage
& {
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 (
<>
{getLayout()}
>
)
}
export default CustomApp
```
Specifying page specific meta tags using the `SiteMeta` component.
```js
import Head from 'next/head'
import { SiteMeta } from 'next-meta'
const ExamplePage = () => (
return (
<>
{...page code...}
>
)
)
```
## Properties
| 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"`. | `debug?: boolean` | Currently not used, but things are in the works.|
| `description?: string` | You know, `` |
| `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?: string` | Title of page. Generates: `` + `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. |
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)