Skip to content

adamhwang/next-static-og-images

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

next-static-og-images

Generate static Open Graph images for Next.js at build time

Getting started

Installation

npm i -D next-static-og-images

or

yarn add -D next-static-og-images

Building Open Graph images

Add next-static-og-images to your postbuild script

{
  "build": "next build",
  "postbuild": "next-sitemap && next-static-og-images"
}

The sitemap.xml is used to identify pages that need Open Graph images generated. next-static-og-images works best with a sitemap generator like next-sitemap and assumes that a sitemap.xml file is created in the public directory.

Add og:image meta tags

Add the og:image tags to your _app.js or to reference the generated images.

<meta property="og:image" content="{`${host}/open-graph${asPath == "/" ? "/index" : asPath}.png`}" />
<meta property="og:image:alt" content="..." />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Configuration options

property description type
saveLocation Directory where images should be saved. This directory will be cleared on each build. Default "./public/open-graph" string
sitemapFilename File path to the sitemap.xml location. Default "./public/sitemap.xml" string
screenshotType Specify screenshot type, can be either jpeg or png. Defaults to "png". string
width Page width used to create screenshot. Default 1200 number
height Page height used to create screenshot. Default 630 number
deviceScaleFactor Page device scale factor used to create screenshot. See devicePixelRatio for more info. Default 1 number
ogImageSelector If specified, screenshot will be based on the first instance a matching instance. If no elements match, the page will be used. Default undefined string
waitUntil When to consider navigation succeeded. See waitUntil for more info. Default "networkidle2" string

Image sizes will match the page height and width unless an image selector is used.

Contribution

PRs welcome