skills.rest
sdcorejs
sdcorejsCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-build-website-og-preview

Generate and verify Open Graph and Twitter Card preview images for Next.js App Router websites.

2|Updated Apr 18, 2026
Search Tags:#nextjs#open graph#og image#twitter card#zalo#social preview#vercel og
One-click install
npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill nextjs-build-website-og-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-build-website-og-preview
Source: https://github.com/sdcorejs/sdcorejs-agent/tree/main/plugin/skills/nextjs-build-website-og-preview
Command: npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill nextjs-build-website-og-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vercel/og, and includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill prevents broken or missing social preview images on Zalo, Messenger, Facebook, and Twitter by setting up a reliable Open Graph and Twitter Card image pipeline with a static fallback and optional dynamic per-page generation.

Core Features & Use Cases

  • Static OG fallback: Provides public/og-default.png (1200×630, <=200 KB) to guarantee a baseline preview when a page does not override metadata.
  • Dynamic per-page OG rendering: Generates route-specific images via opengraph-image.tsx using @vercel/og in the Next.js App Router.
  • Vietnamese-ready typography: Loads a diacritic-capable font for Vietnamese OG titles to avoid boxed glyphs in previews.
  • Platform verification workflow: Steps to validate previews after deploy using Facebook Sharing Debugger and Zalo-specific cache/absolute-URL requirements.

Quick Start

Use the skill to create public/og-default.png, wire opengraph-image.tsx (root and per-route as needed), then verify the production URL preview in Zalo and Facebook before marking the build complete.

Frequently Asked Questions about nextjs-build-website-og-preview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix broken Open Graph images in Next.js App Router?▼

Fix broken Open Graph images in Next.js App Router by setting a static `og-default.png` fallback and wiring `opengraph-image.tsx` files per route. This ensures shared links render correct 1200×630 PNG previews across Zalo, Messenger, Facebook, and Twitter.

Why does my Twitter card preview show missing or boxed Vietnamese characters?▼

Twitter card previews show boxed Vietnamese characters when the OG image lacks a diacritic-capable font. Loading a Vietnamese-ready typography file into your dynamic OG rendering pipeline prevents missing glyphs and displays titles correctly.

How do I verify social preview images on Zalo and Facebook after deploying?▼

Verify social preview images on Zalo and Facebook by validating production URLs with the Facebook Sharing Debugger and checking Zalo-specific absolute URL requirements. This cache-safe validation workflow runs post-deploy to confirm correct rendering.

Do I need absolute URLs for Open Graph metadata to work on Zalo?▼

Yes, you need absolute URLs for Open Graph metadata to work reliably on Zalo. Using `buildMetadata` to generate correct absolute paths ensures Zalo can locate and cache your 1200×630 PNG preview images without rendering failures.

What is the best way to set a default OG image fallback in Next.js?▼

The best way to set a default OG image fallback in Next.js is placing a 1200×630 PNG under 200 KB in the `public` directory. This static `og-default.png` guarantees a baseline social preview when route-specific metadata is missing.

Related Skills

Explore More Marketing & Sales Skills→
megahomewebmegahomeweb

seo-patterns

Configure SEO metadata patterns for Next.js 16 App Router pages.

Community
Advanced
SylphxAISylphxAI
4

pwa

Guide service worker caching strategies for offline-capable Next.js PWAs on Vercel.

Official
Intermediate
iadr-deviadr-dev
2

fixing-metadata

Fix incorrect or missing HTML metadata for SEO and social sharing.

Community
Intermediate
NagyViktNagyVikt
2

satori

Convert JSX-based HTML and CSS into SVG or PNG images for Open Graph metadata.

Community
Intermediate