{"id":14970002,"url":"https://github.com/ryanhefner/next-meta","last_synced_at":"2026-01-05T04:44:35.151Z","repository":{"id":209724716,"uuid":"724699821","full_name":"ryanhefner/next-meta","owner":"ryanhefner","description":"🗣️ Easily compose and manage meta and open graph tags in your Next.js app/site.","archived":false,"fork":false,"pushed_at":"2024-05-15T02:06:45.000Z","size":819,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T18:28:51.474Z","etag":null,"topics":["metadata","next","nextjs","opengraph-images","opengraph-tags","react"],"latest_commit_sha":null,"homepage":"https://pkgstats.com/pkg:next-meta","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ryanhefner","patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-11-28T16:04:07.000Z","updated_at":"2024-05-15T02:06:48.000Z","dependencies_parsed_at":"2023-11-28T21:57:48.110Z","dependency_job_id":"44237444-fb5d-41df-b7d3-d2160bc019eb","html_url":"https://github.com/ryanhefner/next-meta","commit_stats":{"total_commits":81,"total_committers":1,"mean_commits":81.0,"dds":0.0,"last_synced_commit":"ef79461c7e4210c3deecba0ce81aa7bebbc9d1ec"},"previous_names":["ryanhefner/next-meta"],"tags_count":11,"template":false,"template_full_name":"ryanhefner/package-template-rollup-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-meta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-meta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-meta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fnext-meta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/next-meta/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238310367,"owners_count":19450845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["metadata","next","nextjs","opengraph-images","opengraph-tags","react"],"created_at":"2024-09-24T13:42:50.366Z","updated_at":"2025-10-26T10:31:35.324Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryanhefner","https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"readme":"# 🗣️ next-meta\n\n[![npm](https://img.shields.io/npm/v/next-meta?style=flat-square)](https://www.pkgstats.com/pkg:next-meta)\n[![NPM](https://img.shields.io/npm/l/next-meta?style=flat-square)](LICENSE)\n[![npm](https://img.shields.io/npm/dt/next-meta?style=flat-square)](https://www.pkgstats.com/pkg:next-meta)\n[![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/next-meta?style=flat-square)](https://coveralls.io/github/ryanhefner/next-meta)\n[![codecov](https://codecov.io/gh/ryanhefner/next-meta/branch/main/graph/badge.svg)](https://codecov.io/gh/ryanhefner/next-meta)\n[![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/next-meta?style=flat-square)](https://circleci.com/gh/ryanhefner/next-meta)\n![Known Vulnerabilities](https://snyk.io/test/github/ryanhefner/next-meta/badge.svg)\n![Twitter Follow](https://img.shields.io/twitter/follow/ryanhefner)\n\nA composable React component for managing meta tags, Open Graph, and Twitter cards in Next.js applications.\n\n**NOTE:** This package is for use with Next.js' Pages Router. Some App Router\nhelpers are in the works and will live here in the future as well.\n\n## Why next-meta?\n\nManaging meta tags, Open Graph, and Twitter cards in Next.js applications can be tedious and error-prone. next-meta provides a simple, composable solution that:\n\n- Reduces boilerplate code for meta tag management\n- Ensures consistent meta tag structure across your application\n- Provides TypeScript support out of the box\n- Handles all major social media platforms (Open Graph, Twitter Cards)\n- Supports dynamic meta tags based on page content\n- Maintains SEO best practices\n\n## Install\n\nVia [npm](https://npmjs.com/package/next-meta)\n\n```sh\nnpm install next-meta\n```\n\nVia [Yarn](https://yarn.pm/next-meta)\n\n```sh\nyarn add next-meta\n```\n\n## How to use\n\n### Basic Setup\n\nSetting defaults within the Next.js App with `MetaProvider`.\n\n```js\nimport { ReactElement, ReactNode } from 'react'\nimport { NextPage } from 'next'\nimport { AppProps } from 'next/app'\nimport Head from 'next/head'\nimport { usePathname } from 'next/navigation'\nimport { MetaProvider } from 'next-meta'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type NextPageWithLayout\u003cP = {}, IP = P\u003e = NextPage\u003cP, IP\u003e \u0026 {\n  getLayout?: (page: ReactElement) =\u003e ReactNode\n}\n\ntype AppPropsWithLayout = AppProps \u0026 {\n  Component: NextPageWithLayout\n}\n\nconst BASE_URL = 'https://test.com'\nconst SITE_NAME = 'Example Site'\nconst DEFAULT_TITLE = 'An example title for using next-meta in your _app file.'\nconst DEFAULT_DESCRIPTION = 'Hopefully this makes things a little easier with adding good meta/og tags to your site.'\nconst DEFAULT_IMAGE_URL = '/social-share.png'\n\nfunction CustomApp({ Component, pageProps }: AppPropsWithLayout) {\n  const getLayout = Component.getLayout ?? ((page) =\u003e page)\n\n  const metaUrl = usePathname()\n\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003clink rel=\"icon\" type=\"image/png\" href=\"/favicon.ico\" /\u003e\n      \u003c/Head\u003e\n      \u003cMetaProvider\n        baseUrl={BASE_URL}\n        canonical={metaUrl}\n        description={DEFAULT_DESCRIPTION}\n        imageUrl={DEFAULT_IMAGE_URL}\n        imageWidth={1200}\n        imageHeight={630}\n        siteName={SITE_NAME}\n        title={DEFAULT_TITLE}\n        twitterCard=\"summary_large_image\"\n        twitterSite=\"@exampleSite\"\n        url={metaUrl}\n      \u003e\n        {getLayout(\u003cComponent {...pageProps} /\u003e)}\n      \u003c/MetaProvider\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default CustomApp\n```\n\n### Page-Specific Meta Tags\n\nSpecifying page specific meta tags using the `SiteMeta` component.\n\n```js\nimport Head from 'next/head'\nimport { SiteMeta } from 'next-meta'\n\nconst ExamplePage = () =\u003e (\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003cSiteMeta\n          imageUrl=\"/share/about-social.png\"\n          title=\"About\"\n          siteName=\"Example Site\"\n          url=\"/about\"\n        /\u003e\n      \u003c/Head\u003e\n      {...page code...}\n    \u003c/\u003e\n  )\n)\n```\n\n### Advanced Usage\n\nHere's an example showing more advanced features:\n\n```js\nimport Head from 'next/head'\nimport { SiteMeta } from 'next-meta'\n\nconst BlogPost = ({ post }) =\u003e (\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003cSiteMeta\n          title={post.title}\n          description={post.excerpt}\n          imageUrl={post.featuredImage}\n          imageWidth={1200}\n          imageHeight={630}\n          url={`/blog/${post.slug}`}\n          twitterCard=\"summary_large_image\"\n          twitterCreator=\"@authorHandle\"\n          audioUrl={post.audioUrl}\n          audioType=\"audio/mpeg\"\n          videoUrl={post.videoUrl}\n          videoType=\"video/mp4\"\n          locale=\"en_US\"\n          determiner=\"the\"\n        /\u003e\n      \u003c/Head\u003e\n      {...post content...}\n    \u003c/\u003e\n  )\n)\n```\n\n## TypeScript Support\n\nnext-meta is written in TypeScript and provides type definitions out of the box. The package exports the following types:\n\n- `MetaProviderProps`: Props for the MetaProvider component\n- `SiteMetaProps`: Props for the SiteMeta component\n\n## Properties\n\n| Prop                            | Description                                   | Example |\n|---------------------------------|-----------------------------------------------|---------|\n| `audioUrl?: string`             | URL to audio file.                            | `\"/podcast/episode1.mp3\"` |\n| `audioType?: string`            | Mimetype of audio file.                       | `\"audio/mpeg\"` |\n| `baseUrl?: string`              | Base URL for all `xUrl` props.                | `\"https://example.com\"` |\n| `canonical?: string`            | Canonical URL for the page.                   | `\"/blog/post-1\"` |\n| `debug?: boolean`               | Enable debug mode (in development).           | `true` |\n| `description?: string`          | Page description for meta tags.               | `\"Learn about our company\"` |\n| `determiner?: string`           | Word before object's title in a sentence.     | `\"the\"` |\n| `image?: Image`                 | Image object for social sharing.              | `{ url: \"/images/share.png\", alt: \"Description\", width: 1200, height: 630 }` |\n| `locale?: string`               | Locale of site/page.                          | `\"en_US\"` |\n| `localeAlternates?: string[]`   | Alternate locales for the page.               | `[\"en_CA\", \"fr_CA\"]` |\n| `siteName?: string`             | Site name for meta tags.                      | `\"My Blog\"` |\n| `siteNameDelimiter?: string`    | Delimiter between title and site name.        | `\"|\"` |\n| `title?: string`                | Page title.                                   | `\"About Us\"` |\n| `twitter?: Twitter`             | Twitter card configuration object.            | `{ card: \"summary_large_image\", site: \"@site\", creator: \"@author\" }` |\n| `type?: string`                 | Open Graph type of the page.                  | `\"website\"` |\n| `url?: string`                  | URL of page.                                  | `\"/about\"` |\n| `videoUrl?: string`             | URL to video file.                            | `\"/videos/tutorial.mp4\"` |\n| `videoType?: string`            | Mimetype of video file.                       | `\"video/mp4\"` |\n\n### Deprecated Properties\n\nThe following properties are deprecated and should be replaced with their new counterparts:\n\n| Deprecated Prop      | New Prop                |\n|---------------------|------------------------|\n| `imageUrl`          | `image.url`            |\n| `imageAlt`          | `image.alt`            |\n| `imageWidth`        | `image.width`          |\n| `imageHeight`       | `image.height`         |\n| `twitterCard`       | `twitter.card`         |\n| `twitterCreator`    | `twitter.creator`      |\n| `twitterSite`       | `twitter.site`         |\n\n### Twitter Card Types\n\nWhen using the `twitter.card` property, you can use one of the following values:\n\n- `\"summary\"` - Default card type\n- `\"summary_large_image\"` - Large image card type\n- `\"app\"` - App card type\n- `\"player\"` - Player card type\n\n### Image Object\n\nThe `image` object supports the following properties:\n\n| Property  | Type                | Description                |\n|-----------|---------------------|----------------------------|\n| `url`     | `string`            | URL of the image           |\n| `alt`     | `string`            | Alt text for the image     |\n| `width`   | `number \\| string`  | Width of the image         |\n| `height`  | `number \\| string`  | Height of the image        |\n\n### Twitter Object\n\nThe `twitter` object supports the following properties:\n\n| Property  | Type                | Description                |\n|-----------|---------------------|----------------------------|\n| `card`    | `string`            | Twitter card type          |\n| `site`    | `string`            | Twitter username for site  |\n| `creator` | `string`            | Twitter username for author|\n| `player`  | `Player`            | Player card configuration  |\n\n### Player Object\n\nThe `player` object supports the following properties:\n\n| Property      | Type                | Description                |\n|---------------|---------------------|----------------------------|\n| `url`         | `string`            | URL of the player          |\n| `width`       | `number \\| string`  | Width of the player        |\n| `height`      | `number \\| string`  | Height of the player       |\n| `stream`      | `Stream`            | Stream configuration       |\n\n### Stream Object\n\nThe `stream` object supports the following properties:\n\n| Property      | Type     | Description                |\n|---------------|----------|----------------------------|\n| `url`         | `string` | URL of the stream          |\n| `contentType` | `string` | Content type of the stream |\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Fnext-meta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Fnext-meta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Fnext-meta/lists"}