{"id":17862075,"url":"https://github.com/catnose99/next-head-seo","last_synced_at":"2025-04-05T08:09:48.090Z","repository":{"id":43357072,"uuid":"414487210","full_name":"catnose99/next-head-seo","owner":"catnose99","description":"A light-weight SEO plugin for Next.js.","archived":false,"fork":false,"pushed_at":"2023-03-03T06:12:33.000Z","size":332,"stargazers_count":218,"open_issues_count":1,"forks_count":10,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-04T20:51:41.230Z","etag":null,"topics":["nextjs","seo","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/catnose99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2021-10-07T06:31:58.000Z","updated_at":"2024-12-22T06:02:14.000Z","dependencies_parsed_at":"2024-06-18T19:49:53.127Z","dependency_job_id":"ce0d3053-40f8-42f1-a7f4-37f1800d341d","html_url":"https://github.com/catnose99/next-head-seo","commit_stats":{"total_commits":35,"total_committers":7,"mean_commits":5.0,"dds":"0.19999999999999996","last_synced_commit":"3ed0837055d542bf03d9c1219225d86ce640406b"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catnose99%2Fnext-head-seo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catnose99%2Fnext-head-seo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catnose99%2Fnext-head-seo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catnose99%2Fnext-head-seo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catnose99","download_url":"https://codeload.github.com/catnose99/next-head-seo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305935,"owners_count":20917208,"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":["nextjs","seo","typescript"],"created_at":"2024-10-28T08:50:25.517Z","updated_at":"2025-04-05T08:09:48.070Z","avatar_url":"https://github.com/catnose99.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# next-head-seo\n\n[![Testing](https://github.com/catnose99/next-head-seo/actions/workflows/test.yml/badge.svg)](https://github.com/catnose99/next-head-seo/actions/workflows/test.yml)\n[![Gzipped size](https://badgen.net/bundlephobia/minzip/next-head-seo)](https://badgen.net/bundlephobia/minzip/next-head-seo)\n\nA simple and light-weight SEO plugin for Next.js applications.\n\n- ⚡️ \u003c 1kb gzipped\n- ✨ Zero dependencies\n- ✍️ Designed based on [Google Webmaster Guidelines](https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines)\n- 🦄 TypeScript support\n\nAlthough `next-head-seo` supports only essential SEO properties, it would be enough for most websites.\n\nIf you need advanced SEO settings such as [structured data](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data), use [next-seo](https://github.com/garmeeh/next-seo) instead.\n\n\n## Install\n```bash\n$ npm install next-head-seo\n# or with yarn\n$ yarn add next-head-seo\n```\n\n## Usage\n\nImport `next-head-seo` on each page component and add the desired properties.\n\nExample:\n\n```tsx\n// pages/example.tsx\nimport NextHeadSeo from 'next-head-seo';\n\nconst Page = () =\u003e (\n  \u003c\u003e\n    \u003ch1\u003eHello!\u003c/h1\u003e\n    \u003cNextHeadSeo\n      title=\"Hello!\"\n      description=\"Some description\"\n      canonical=\"https://example.com/hello\"\n      og={{\n        title: \"Open graph title\",\n        image: \"https://example.com/og.png\",\n      }}\n    /\u003e\n  \u003c/\u003e\n);\n\nexport default Page\n\n// Output:\n// \u003chead\u003e\n//   \u003ctitle\u003eHello!\u003c/title\u003e\n//   \u003cmeta name=\"description\" content=\"Some description\" /\u003e\n//   \u003clink rel=\"canonical\" href=\"https://example.com/hello\"/\u003e\n//   \u003cmeta property=\"og:title\" content=\"Open graph title\"/\u003e\n//   \u003cmeta property=\"og:image\" content=\"https://example.com/og.png\"/\u003e\n// \u003c/head\u003e\n```\n\n\n## Default SEO Settings\n\nThere are 2 options to configure default SEO properies.\n\n### Place default `\u003cNextHeadSeo /\u003e` on `_app.tsx`\n\nFirst option is to place `\u003cNextHeadSeo /\u003e` with default values on `_app.tsx`.\n\n```tsx\n// pages/_app.tsx\nimport type { AppProps } from 'next/app'\nimport NextHeadSeo from 'next-head-seo';\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003c\u003e\n      {/* Default SEO configuration */}\n      \u003cNextHeadSeo\n        og={{\n          image: \"https://example.com/default-og.png\",\n          type: 'article',\n          siteName: 'Your app name',\n        }}\n        twitter={{\n          card: \"summary\"\n        }}\n      /\u003e\n      {/* Place \u003cComponent /\u003e after \u003cNextHeadSeo /\u003e */}\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default MyApp\n```\n\nMake sure `\u003cNextHeadSeo /\u003e` is placed before `\u003cComponent {...pageProps} /\u003e` since next-head-seo respects the latter value for same property name.\n\n\n\n### Create Wrapper Component for next-head-seo\n\nAlternatively, just create a wrapper component which can be used on each page component. This is more flexible and reliable way to set default values.\n\nHere is an example of wrapper component:\n\n```tsx\n// components/MyPageSeo.tsx\nimport NextHeadSeo from 'next-head-seo';\n\n// types\nexport type MyPageSeoProps = {\n  path: string;\n  title?: string;\n  description?: string;\n  ogImagePath?: string;\n  noindex?: boolean;\n  noTitleTemplate?: boolean;\n};\n\nexport const MyPageSeo: React.FC\u003cMyPageSeoProps\u003e = (props) =\u003e {\n  const {\n    path,\n    title = \"Default title\",\n    description = \"Default description\",\n    ogImagePath = \"/default-og.png\",\n    noindex,\n    noTitleTemplate,\n  } = props;\n\n  // Set APP_ROOT_URL on enviroment variables\n  // e.g. APP_ROOT_URL=https://example.com\n  // https://nextjs.org/docs/basic-features/environment-variables\n  const APP_ROOT_URL = process.env.NEXT_PUBLIC_APP_ROOT_URL;\n\n  // Absolute page url\n  const pageUrl = APP_ROOT_URL + path\n  // Absolute og image url\n  const ogImageUrl = APP_ROOT_URL + ogImagePath\n\n  return (\n    \u003cNextHeadSeo\n      title={noTitleTemplate ? title : `${title} - MyAppName`}\n      canonical={pageUrl}\n      description={description}\n      robots={noindex ? 'noindex, nofollow' : undefined}\n      og={{\n        title,\n        description,\n        url: pageUrl,\n        image: ogImageUrl,\n        type: 'article',\n        siteName: 'MyAppName',\n      }}\n      twitter={{\n        card: \"summary_large_image\",\n      }}\n    /\u003e\n  );\n};\n```\n\nThen, place `\u003cMyPageSeo /\u003e` in each page component.\n\n```tsx\n// pages/example.tsx\nimport { MyPageSeo } from \"../components/MyPageSeo\"\n\nconst Page = () =\u003e (\n  \u003c\u003e\n    \u003ch1\u003eHello!\u003c/h1\u003e\n    \u003cMyPageSeo\n      path=\"/example\"\n      title=\"Hello!\"\n      noindex={true}\n    /\u003e\n  \u003c/\u003e\n);\nexport default Page\n\n// Output:\n// \u003chead\u003e\n//   \u003ctitle\u003eHello! - MyAppName\u003c/title\u003e\n//   \u003cmeta name=\"robots\" content=\"noindex, nofollow\"/\u003e\n//   \u003cmeta name=\"description\" content=\"Default description\" /\u003e\n//   \u003clink rel=\"canonical\" href=\"https://example.com/example\"/\u003e\n//   \u003cmeta property=\"og:url\" content=\"https://example.com/example\"/\u003e\n//   \u003cmeta property=\"og:title\" content=\"Hello!\"/\u003e\n//   \u003cmeta property=\"og:description\" content=\"Default description\"/\u003e\n//   \u003cmeta property=\"og:image\" content=\"https://example.com//default-og.png\"/\u003e\n//   \u003cmeta property=\"og:type\" content=\"article\"/\u003e\n//   \u003cmeta property=\"og:site_name\" content=\"MyAppName\"/\u003e\n//   \u003cmeta name=\"twitter:card\" content=\"summary_large_image\"/\u003e\n// \u003c/head\u003e\n```\n\n\n## Options\n\nAll the props for `next-head-seo` are optional.\n\n| Prop           | Description                                                                                                                                                                 | Type                                                                         |\n|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|\n| title          | ✅ *Recommended to set on all pages.*\u003cbr/\u003ePage title.                                                                                                                        | string                                                                       |\n| canonical      | ✅ *Recommended to set on all pages.*\u003cbr /\u003eCanonical URL of the page.                                                                                                        | string                                                                       |\n| robots         | Set `noindex, nofollow` only when you don't want the page to be indexed on search engines. Otherwise you don't have to use this prop.                                       | `\"noindex, nofollow\"`\u003cbr/\u003e`\"index, follow\"`\u003cbr/\u003e`\"noindex\"`\u003cbr/\u003e`\"nofollow\"` |\n| description    | ✅ *Recommended to set on all pages.*\u003cbr/\u003ePage description. Text after 150 characters will be truncated as [Google do](https://moz.com/learn/seo/meta-description).          | string                                                                       |\n| twitter.card   | Twitter card image type. Set along with `og:image` prop.\u003cbr/\u003eSee detail: [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary) | `\"summary\"`\u003cbr/\u003e`\"summary_large_image\"`\u003cbr/\u003e`\"player\"`\u003cbr/\u003e`\"app\"`           |\n| twitter.site   | Twitter username starting with `@`                                                                                                                                          | string                                                                       |\n| og.title       | For og:title. Automatically use `title` value if blank. \u003cbr/\u003eSee detail: [Open Graph protocol](https://ogp.me/)                                                             | string                                                                       |\n| og.description | For og:description. Automatically use `description` value if blank.                                                                                                         | string                                                                       |\n| og.url         | For og:url. Automatically use `canonical` value if blank.                                                                                                                   | string                                                                       |\n| og.image       | For og:image. Set image url.                                                                                                                                                | string                                                                       |\n| og.type        | For og:type.                                                                                                                                                                | `\"article\"`\u003cbr/\u003e`\"book\"`\u003cbr/\u003e`\"website\"`\u003cbr/\u003e`\"profile\"`                     |\n| og.siteName    | For og:site_name                                                                                                                                                            | string                                                                       |\n| customMetaTags | Array of object for custom meta tags. See [customMetaTags](#custom-meta-tags) section.                                                                                      | An array of objects                                                          |\n| customLinkTags | Array of object for custom link tags. See [customLinkTags](#custom-link-tags) section.                                                                                      | An array of objects                                                          |\n\n\n### Custom Meta Tags\n\nYou can set additional meta tags.\nExample:\n\n```tsx\n\u003cNextHeadSeo\n  customMetaTags={[\n    {\n      name: 'foo',\n      content: 'foo-content'\n    },\n    {\n      property: 'bar',\n      content: 'bar-content'\n    }\n  ]}\n/\u003e\n// Output:\n// \u003chead\u003e\n//   \u003cmeta name=\"foo\" content=\"foo-content\"/\u003e\n//   \u003cmeta name=\"bar\" content=\"bar-content\"/\u003e\n// \u003c/head\u003e\n```\n\nIf you want to override custom meta tags from another page component, use same keys for both component.\n\nExample:\n\n```tsx\n// in /pages/_app.tsx\n\u003cNextHeadSeo\n  customMetaTags={[\n    {\n      key: \"custom-meta\",\n      name: 'foo',\n      content: 'foo-content'\n    }\n  ]}\n/\u003e\n\n// in /pages/example.tsx\n\u003cNextHeadSeo\n  customMetaTags={[\n    {\n      key: \"custom-meta\",\n      name: 'bar',\n      content: 'bar-content'\n    }\n  ]}\n/\u003e\n\n// Output:\n// \u003chead\u003e\n//   \u003cmeta name=\"bar\" content=\"bar-content\"/\u003e\n// \u003c/head\u003e\n```\n\n### Custom Link Tags\n\n\nYou can set additional link tags.\nExample:\n\n```tsx\n\u003cNextHeadSeo\n  customLinkTags={[\n    {\n      rel: 'foo',\n      href: 'https://example.com/foo'\n    },\n     {\n      rel: 'bar',\n      type: 'bar-type',\n      href: 'https://example.com/bar'\n    },\n  ]}\n/\u003e\n// Output:\n// \u003chead\u003e\n//   \u003clink rel=\"foo\" content=\"https://example.com/foo\"/\u003e\n//   \u003clink rel=\"bar\" type=\"bar-type\" content=\"https://example.com/bar\"/\u003e\n// \u003c/head\u003e\n```\n\nIf you want to override custom link tags from another page component, use same keys for both component.\nExample:\n\n```tsx\n// in /pages/_app.tsx\n\u003cNextHeadSeo\n  customLinkTags={[\n    {\n      key: \"custom-link\",\n      rel: 'foo',\n      content: 'https://example.com/foo'\n    }\n  ]}\n/\u003e\n\n// in /pages/example.tsx\n\u003cNextHeadSeo\n  customLinkTags={[\n    {\n      key: \"custom-link\",\n      rel: 'bar',\n      type: 'bar-type',\n      ccontent: 'https://example.com/bar'\n    }\n  ]}\n/\u003e\n\n// Output:\n// \u003chead\u003e\n//   \u003clink rel=\"bar\" type=\"bar-type\" content=\"https://example.com/bar\"/\u003e\n// \u003c/head\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatnose99%2Fnext-head-seo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatnose99%2Fnext-head-seo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatnose99%2Fnext-head-seo/lists"}