Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akr4/gatsby-plugin-og-image
A gatsby plugin that generates og:image
https://github.com/akr4/gatsby-plugin-og-image
gatsby-plugin seo
Last synced: about 1 month ago
JSON representation
A gatsby plugin that generates og:image
- Host: GitHub
- URL: https://github.com/akr4/gatsby-plugin-og-image
- Owner: akr4
- License: mit
- Created: 2020-01-31T02:19:05.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-31T08:23:38.000Z (almost 5 years ago)
- Last Synced: 2024-08-09T12:18:14.116Z (3 months ago)
- Topics: gatsby-plugin, seo
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @akr4/gatsby-plugin-og-image
[](https://www.npmjs.com/package/@akr4/gatsby-plugin-og-image)
## Description
Generates images for og:image for pages and set `` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.
The image below is an example.
## How to install
```
npm install @akr4/gatsby-plugin-og-image
```
## Examples of usage
```javascript:title=gatsby-config.js
module.exports = {
plugins: [{
resolve: `@akr4/gatsby-plugin-og-image`,
options: {
siteUrl: `https://example.com`,
render: renderOgImage,
concurrency: 10,
}
]
};
```
| property | default | description |
| ----------- | ------- | -------------------------------------------------------------------------------------------- |
| siteUrl | | your site URL |
| render | | a function to render og:image that takes `ogImagePlugin` property value in the page context. |
| concurrency | 3 | the number of instances of Headless Chrome |
| width | 1200 | view port width of Headless Chrome |
| height | 630 | view port height of Headless Chrome |
The following is an example `render` function. It takes `title` and render it at the center of the page.
```javascript
const renderOgImage = ({ title }) => {
return `
${title}
example.com
`;
};
```
The `title` argument comes from the `ogImagePlugin` property of the page context. For example, you can configure it by `createPage`.
```javascript
createPage({
path: '/my-first-page',
component: blogPost,
context: {
ogImagePlugin: {
title: 'My first page',
},
},
});
```
You can set whatever you want to `ogImagePlugin` property and use them in the `render` function. `ogImagePlugin` property will be removed after generating an image.
The following function is an example of how to configure when the source is markdown.
```javascript:title=gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const blogPost = path.resolve(`./src/templates/blog-post.tsx`);
const result = await graphql(
`
{
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, limit: 1000) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`,
);
if (result.errors) {
throw result.errors;
}
const posts = result.data.allMarkdownRemark.edges;
posts.forEach((post, index) => {
let ogImagePluginContext;
if (post.node.frontmatter && post.node.frontmatter.title) {
ogImagePluginContext = {
title: post.node.frontmatter.title,
};
}
createPage({
path: post.node.fields.slug,
component: blogPost,
context: {
ogImagePlugin: ogImagePluginContext,
},
});
});
};
```