{"id":16529358,"url":"https://github.com/cometkim/gatsby-plugin-head-seo","last_synced_at":"2025-03-16T19:31:32.173Z","repository":{"id":59957832,"uuid":"538449435","full_name":"cometkim/gatsby-plugin-head-seo","owner":"cometkim","description":"A Gatsby Plugin to support SEO, built-on top of the Gatsby Head API. No react-helmet required.","archived":false,"fork":false,"pushed_at":"2024-10-25T15:59:26.000Z","size":3861,"stargazers_count":4,"open_issues_count":7,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T14:40:51.240Z","etag":null,"topics":["gatsby","gatsby-plugin","seo"],"latest_commit_sha":null,"homepage":"https://www.gatsbyjs.com/plugins/gatsby-plugin-head-seo","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/cometkim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-09-19T10:33:22.000Z","updated_at":"2024-08-30T01:36:04.000Z","dependencies_parsed_at":"2024-01-06T11:23:45.951Z","dependency_job_id":"ad9ab34a-5150-4ba9-9a70-d4539abb11c6","html_url":"https://github.com/cometkim/gatsby-plugin-head-seo","commit_stats":{"total_commits":55,"total_committers":2,"mean_commits":27.5,"dds":0.4,"last_synced_commit":"9b62a0d368959bde7290605b2347dad01f26a317"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cometkim%2Fgatsby-plugin-head-seo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cometkim%2Fgatsby-plugin-head-seo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cometkim%2Fgatsby-plugin-head-seo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cometkim%2Fgatsby-plugin-head-seo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cometkim","download_url":"https://codeload.github.com/cometkim/gatsby-plugin-head-seo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826780,"owners_count":20354220,"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":["gatsby","gatsby-plugin","seo"],"created_at":"2024-10-11T17:44:36.041Z","updated_at":"2025-03-16T19:31:31.748Z","avatar_url":"https://github.com/cometkim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-head-seo\n\n[![NPM package version](https://img.shields.io/npm/v/gatsby-plugin-head-seo)](https://www.npmjs.com/package/gatsby-plugin-head-seo)\n[![NPM package monthly downloads](https://img.shields.io/npm/dm/gatsby-plugin-head-seo)](https://www.npmjs.com/package/gatsby-plugin-head-seo)\n[![License - MIT](https://img.shields.io/github/license/cometkim/gatsby-plugin-head-seo)](#LICENSE)\n\nA Gatsby plugin to support SEO, built-on top of the [Gatsby Head API]. No react-helmet required.\n\n## Requirements\n\nIt is intended to be used with the [Gatsby Head API].\n\nSupport for the [Gatsby Head API] was added in `gatsby@4.19.0`.\n\n## Usage\n\n### Basic Metadata\n\n```ts\n// gatsby-config.ts\n\nimport { type GatsbyConfig } from 'gatsby';\n\nconst config: GatsbyConfig = {\n  siteMetadata: {\n    siteUrl: 'https://my-hoempage.com',\n    title: 'My Homepage',\n    description: 'This is my hoempage',\n  },\n  plugins: [\n    'gatsby-plugin-head-seo',\n  ],\n};\n```\n\nThe `\u003cHeadSeo /\u003e` use siteMetadata you defines in gatsby-config.\n\nIt automatically builds basic meta tags for title, description, and canonical url for the page.\n\n```tsx\n// in the page\nimport { type HeadProps } from 'gatsby';\nimport { HeadSeo } from 'gasby-plugin-head-seo/src';\n\nexport function Head({ location }: HeadProps) {\n  return (\n    \u003cHeadSeo location={location} /\u003e\n  );\n}\n```\n\nYou can overrides the passing properties.\n\n```tsx\n// in the page\nimport { type HeadProps } from 'gatsby';\nimport { HeadSeo } from 'gasby-plugin-head-seo/src';\n\nexport function Head({ location }: HeadProps) {\n  return (\n    \u003cHeadSeo\n      location={location}\n      title=\"This is New Title\"\n    /\u003e\n  );\n}\n```\n\n### Social Media\n\nThere are utility components for [Open Graph](https://ogp.me/) and [Twitter Card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards).\n\nTwitter Card indirectly reference the Open Graph standard, so I recommend always using them together.\n\n```tsx\n// in the page\nimport { type HeadProps } from 'gatsby';\nimport { HeadSeo, OpenGraph, TwitterCard, Facebook } from 'gasby-plugin-head-seo/src';\n\nexport function Head({ location }: HeadProps) {\n  return (\n    \u003cHeadSeo location={location}\u003e\n      {({ url, title, description }) =\u003e (\n        \u003c\u003e\n          \u003cOpenGraph\n            locale=\"ko\"\n            og={{\n              type: 'website',\n              url,\n              title,\n              description,\n            }}\n          /\u003e\n          \u003cTwitterCard\n            card={{\n              type: 'summary'\n              site: '@handle',\n              title,\n              description,\n            }}\n          /\u003e\n          \u003cFacebook appId=\"my_facebook_app_id\" /\u003e\n        \u003c/\u003e\n      )}\n    \u003c/HeadSeo\u003e\n  );\n}\n```\n\n### Robots Directives\n\nThere are utilities for [robots meta tags](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag).\n\n```tsx\n// in the page\nimport { type HeadProps } from 'gatsby';\nimport { HeadSeo, Robots } from 'gasby-plugin-head-seo/src';\n\nexport function Head({ location }: HeadProps) {\n  return (\n    \u003cHeadSeo location={location}\u003e\n      \u003cRobots noindex /\u003e\n      \u003cRobots name=\"googlebot\" noSnippet /\u003e\n      \u003cRobots name=\"googlebot-news\" maxSnippet={20} /\u003e\n    \u003c/HeadSeo\u003e\n  );\n}\n```\n\n### JSON-LD\n\nThere are utilities for JSON-LD markup. It refers to the [schema.org](https://schema.org/) standard, and some extensions for [Google Search's rich content schema](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data).\n\n```tsx\nimport {\n  // schema.org standard schema\n  ArticleJsonLd,\n  BlogJsonLd,\n  BlogPostJsonLd,\n  BookJsonLd,\n  BreadcrumbListJsonLd,\n  CourseJsonLd,\n  FAQPageJsonLd,\n  JobPostingJsonLd,\n  LocalBusinessJsonLd,\n  ProductJsonLd,\n  WebSiteJsonLd, // Supports Google's Sitelinks Search Box extension\n\n  // extensions\n  SocialProfileJsonLd, // Person or Organization\n} from 'gasby-plugin-head-seo/src/jsonld';\n```\n\nSee [code](src/jsonld) for more detail.\n\n### Composition of Multiple `\u003cHeadSeo\u003e`\n\n```tsx\n\u003cHeadSeo location={location}\u003e\n  {({ title: siteTitle }) =\u003e (\n    \u003cHeadSeo location={location} title={`Category | ${siteTitle}`}\u003e\n      {({ title: categoryTitle }) =\u003e (\n        \u003ctitle\u003e{`Content | ${categoryTitle}`}\u003c/title\u003e\n        // So the result will be `Content | Category | Site`\n      )}\n    \u003c/HeadSeo\u003e\n  )}\n\u003c/HeadSeo\u003e\n```\n\nFYI, this plugin uses [gatsby-plugin-dedupe-head](https://github.com/cometkim/gatsby-plugin-dedupe-head) for deduplication of tags.\n\n## Acknowledgement\n\nThis plugin was inspired by [https://github.com/ifiokjr/gatsby-plugin-next-seo](https://github.com/ifiokjr/gatsby-plugin-next-seo), which was originally forked from [next-seo](https://github.com/garmeeh/next-seo)\n\n## LICENSE\n\nMIT\n\n[Gatsby Head API]: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcometkim%2Fgatsby-plugin-head-seo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcometkim%2Fgatsby-plugin-head-seo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcometkim%2Fgatsby-plugin-head-seo/lists"}