Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
og-images-generator
Advanced tools
Generate OG images from a static folder. Extract metadata from HTML pages. No headless browser involved.
Generate OG images from a static folder. Extract metadata from HTML pages. No headless browser involved. Comes as a CLI, API or plugins.
npm i og-images-generator
Create a og-images.config.js
in your current workspace root.
See demos/vanilla/og-images.config.js for a full working example.
The gist is:
// ./og-images.config.js
import { html, styled, OG_SIZE, FONTS } from 'og-images-generator';
const style1 = styled.div`
display: flex;
`;
/** @type {import('og-images-generator').PathsOptions} */
export const paths = {
// DEFAULTS:
base: './dist',
out: './dist/og',
json: './dist/og/index.json',
};
/** @type {import('og-images-generator').Template} */
export const template = ({ page }) =>
html` <!-- Contrived example -->
<div style=${style1}>
${page.meta?.tags['og:title']} - ${page.meta?.tags['og:description']}
</div>`;
/** @type {import('og-images-generator').RenderOptions} */
export const renderOptions = {
satori: { fonts: [await FONTS.sourceSans()], ...OG_SIZE },
};
You need to export renderOptions
and template
from your og-images-generator
configuration file.
[!NOTE]
Helpersstyled.div
is a dummy strings concatenation literal (to get syntax highlighting).
div
is the only needed (and available) tag, as it makes no difference anyway.Also, you don't need to wrap interpolated HTML attributes with quotes (e.g.
style="${foo}"
).
<foo-bar style=${styles.baz}></foo-bar>
just works.
As a preamble, don't forget to add the appropriate meta for your OGs, there is plenty on ressources on the web on how to setup your SEO with your favorite environment.
By default:
https://example.com/
gives https://example.com/og/index.png
https://example.com/my-page/
gives https://example.com/og/my-page.png
[!WARNING]
/
→index.png
is an exception.
We don't wanthttps://example.com/og.png
, as to keep this library output well segregated from the rest of yourdist
.
That's why so we need to disambiguate the root path.
For https://example.com
:
<meta property="og:image" content="https://example.com/og/index.png" />
<meta property="og:image" content="https://example.com/og/nested/my-page.png" />
It's a contrived example. Fine-tuning SEO tags is an ancient, dark art.
You'll need the twitter:
stuff and other massaging,
but that's really out of the scope of this library, which does not mess with your HTML.
[!NOTE]
Additional ressources
[!TIP]
Recommended VS Code extensions
- Styled Components for inline CSS highlighting:
styled-components.vscode-styled-components
- HTML highlighting:
bierner.lit-html
npx generate-og
# defaults to
npx generate-og --base dist --out dist/og --json dist/og/index.json
It will parse all the meta tags (in head) and JSON LDs script content (in head and body).
import { generateOgImages } from 'og-images-generator/api';
await generateOgImages(/* options */);
import { connectOgImagesGenerator } from 'og-images-generator/connect';
app.use(await connectOgImagesGenerator(/* pathPrefix: string */));
import { rollupOgImagesGenerator } from 'og-images-generator/rollup';
/** @type {import('rollup').RollupOptions} */
export default {
plugins: [
//
rollupOgImagesGenerator(),
],
};
import { defineConfig } from 'vite';
import { viteOgImagesGenerator } from 'og-images-generator/vite';
export default defineConfig({
plugins: [
//
viteOgImagesGenerator(),
],
build: {
rollupOptions: {
input: {
foo: 'pages/foo.html',
bar: 'pages/bar.html',
},
},
},
});
import { defineConfig } from 'astro/config';
import { astroOgImagesGenerator } from 'og-images-generator/astro';
export default defineConfig({
integrations: [
//
astroOgImagesGenerator(),
],
});
You could use a CDN proxy to handle on the fly image optimizations.
Also AFAIK, all major social networks crawlers are transforming and caching assets themselves.
It's their job to normalize optimizations in order to serve assets to their users.
Other projects 👀…
github
→ ✅ GitHub
.FAQs
Generate OG images from a static folder and / or a middleware. Extract metadata from HTML pages. No headless browser involved. Comes as a CLI, API or plugins.
The npm package og-images-generator receives a total of 24 weekly downloads. As such, og-images-generator popularity was classified as not popular.
We found that og-images-generator demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.