Example 5: Social Image Card

This article is translated from the Chinese original.

What is a social image card?

A social image, also called an OG (OpenGraph) image,

is the card image you may see automatically generated by the site when you share an article to a social platform.

Add a custom social image

In the front matter (the section wrapped in --- at the top), add an ogImage property and set its path. (The root for relative paths is the src/public folder.)

---
title: "Example 5: Social Image Card"
publishDate: "1998-07-26"
description: "A detailed explanation of how to add a custom social image card in frontmatter"
tags: ["Example"]
ogImage: "/social-card.avif"
---

If you do not add the ogImage property (not recommended)

If ogImage is not set, the project will generate a social image during the build process based on the article title and tags.

You can control the generation rules by editing src/pages/og-image/[...slug].png.ts.

This increases build time and significantly increases the build size.

It is recommended that all articles use one image as the default social image.