{"id":13724908,"url":"https://github.com/squer-solutions/gatsby-plugin-open-graph-images","last_synced_at":"2025-07-24T15:12:21.773Z","repository":{"id":47709179,"uuid":"269984537","full_name":"squer-solutions/gatsby-plugin-open-graph-images","owner":"squer-solutions","description":" 🖼  Open-Graph Images derived and generated from React Components","archived":false,"fork":false,"pushed_at":"2023-07-13T05:19:17.000Z","size":3708,"stargazers_count":17,"open_issues_count":8,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-10T16:49:43.506Z","etag":null,"topics":["gatsby","gatsby-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/squer-solutions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-06T13:08:58.000Z","updated_at":"2023-05-12T16:59:15.000Z","dependencies_parsed_at":"2024-01-10T22:09:51.236Z","dependency_job_id":"a330726d-50ec-4ffd-97fb-3acd9d2c36ac","html_url":"https://github.com/squer-solutions/gatsby-plugin-open-graph-images","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squer-solutions%2Fgatsby-plugin-open-graph-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squer-solutions%2Fgatsby-plugin-open-graph-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squer-solutions%2Fgatsby-plugin-open-graph-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/squer-solutions%2Fgatsby-plugin-open-graph-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/squer-solutions","download_url":"https://codeload.github.com/squer-solutions/gatsby-plugin-open-graph-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225470800,"owners_count":17479367,"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"],"created_at":"2024-08-03T01:02:06.308Z","updated_at":"2024-11-20T22:26:23.461Z","avatar_url":"https://github.com/squer-solutions.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![gatsby-plugin-open-graph-images](./logo.png)\n\n# Gatsby Plugin: Open Graph Images\n\n![Publish](https://github.com/squer-solutions/gatsby-plugin-open-graph-images/workflows/Publish/badge.svg)\n[![npm version](http://img.shields.io/npm/v/gatsby-plugin-open-graph-images.svg?style=flat)](https://npmjs.org/package/gatsby-plugin-open-graph-images \"View this project on npm\")\n\nA [Gatsby](https://github.com/gatsbyjs/gatsby) plugin to derive and generated\nImages for the [Open Graph Protocol](https://ogp.me/) directly from React Components.\n\n## How to install\n\n1.  `yarn add gatsby-plugin-open-graph-images` or `npm i gatsby-plugin-open-graph-images`\n2.  Place the plugin in your main `gatsby-config.js`:\n\n```js\nplugins: [`gatsby-plugin-open-graph-images`];\n```\n\n## How to use\n\nThe creation of Open Graph images is done by `createOpenGraphImage()` within your `gatsby-node.js` file.\n\n```js\nexports.createPages = async ({ actions }) =\u003e {\n  const { createPage } = actions;\n\n  const openGraphImage = createOpenGraphImage(createPage, {\n    path: \"/og-image/index.png\",\n    component: path.resolve(`src/templates/index.og-image.js`),\n    size: {\n      width: 400,\n      height: 50,\n    },\n    waitCondition: \"networkidle0\",\n    context: {\n      description: \"a image created with gatsby-plugin-open-graph-images\",\n    },\n  });\n};\n```\n\nYou can than simply include your open-graph image within your page. For example by using [react-helmet](https://github.com/nfl/react-helmet):\n\n```jsx\n\u003cHelmet\u003e\n  \u003cmeta property=\"og:image\" content={domain + \"/og-image/index.png\"} /\u003e\n  \u003cmeta property=\"og:image:width\" content=\"400\" /\u003e\n  \u003cmeta property=\"og:image:width\" content=\"50\" /\u003e\n\u003c/Helmet\u003e\n```\n\n**A more advanced usage** of `createOpenGraphImage()` is described in this [dev.to article](https://dev.to/duffleit/bridging-the-gap-between-gatsby-and-open-graph-images-52gh).\n\n## Options\n\n| option                 | type       | description                                                                                                                          |\n| ---------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| `defaultSize`            | _optional_ | The default size for the generated image if not explicitly specified.\u003cbr\u003e_default:_ `{ width: 1200, height: 630}`                    |\n| `componentGenerationDir` | _optional_ | The directory where the rendered gatsby components are temporarily stored, to be later saved as images\u003cbr\u003e_default:_ `\"__generated\"` |\n\nIf you use plugins that iterate over your pages, like `gatsby-plugin-sitemap`, exclude the `componentGenerationDir`:\n\n```js\n{\n  resolve: `gatsby-plugin-sitemap`,\n  options: {\n    exclude: [`/__generated/*`],\n  },\n},\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsquer-solutions%2Fgatsby-plugin-open-graph-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsquer-solutions%2Fgatsby-plugin-open-graph-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsquer-solutions%2Fgatsby-plugin-open-graph-images/lists"}