Basics
14 min read
Open Graph Tags: The Complete Developer Reference
Reference the core Open Graph properties, structured image fields, article metadata, multiple images, X card fallbacks, and validation rules.
Learn how link previews work and make yours reliable
Practical, tested guides for choosing image sizes, publishing metadata, fixing broken previews, and automating Open Graph images at scale.
Choose what you need
Follow the path that matches the job in front of you.
10 practical guides
Understand Open GraphLearn what preview metadata does and which tags belong on every public page.3 guidesImplement itPublish reliable image metadata in Next.js and other modern web stacks.1 guideFix a broken previewTrace missing images, stale caches, blocked crawlers, and incorrect metadata.2 guidesAutomate at scaleChoose a repeatable image workflow for growing blogs, catalogs, and docs.4 guides
Start with the foundation
Understand the page contract before choosing tools, templates, or automation.
Basics
What is an Open Graph Image? And Why It Matters for Your Website
Learn what an Open Graph image is, how it controls link previews, and why page-specific previews are easier to understand and trust.
You will learn
- Understand where Open Graph images appear and what they communicate
- Publish the essential metadata without relying on crawler guesswork
- Decide when a shared fallback image is enough and when each page needs its own
Start with this guide
8 min read
Explore the guide library
Move from fundamentals to implementation, then use the troubleshooting and scale guides when your publishing workflow grows.
Basics
Basics
2 guides
Basics
10 min read
Twitter/X Card vs Open Graph: What's the Difference?
Understand how X card metadata and Open Graph differ, where they overlap, and how to publish a clear fallback strategy without duplicating every value.
Best Practices
Best Practices
4 guides
Best Practices
10 min read
og:image Best Practices: Size, Format, and Common Mistakes
Use a practical og:image checklist to choose dependable dimensions, formats, alt text, delivery rules, and update behavior.
Best Practices
10 min read
Open Graph Image Size Guide for Every Platform in 2026
Use a practical 2026 sizing strategy for Open Graph images across social feeds, professional networks, and messaging previews.
Best Practices
11 min read
Static vs Dynamic OG Images: Which Is Right for Your Site?
Compare static and dynamic Open Graph image workflows by content volume, update frequency, ownership, reliability, and maintenance cost.
Best Practices
13 min read
How to Automate Social Preview Images for a Blog with 1,000+ Posts
Plan an automated Open Graph image system for a large publication with reusable templates, bounded content, stable URLs, backfills, and validation.
Next.js
Next.js
1 guide
Next.js
12 min read
How to Add Dynamic OG Images in Next.js: Step-by-Step Guide
Add page-specific Open Graph image metadata to a Next.js App Router route with typed metadata, public URLs, and a reliable validation workflow.
Troubleshooting
Troubleshooting
2 guides
Troubleshooting
10 min read
How to Preview and Test Open Graph Tags Before Publishing
Use a repeatable pre-publish workflow to inspect Open Graph tags, image responses, redirects, and the previews built by social platforms.
Troubleshooting
11 min read
Why Your Link Preview Looks Wrong on LinkedIn and How to Fix It
Diagnose LinkedIn preview problems caused by stale cache, incomplete Open Graph tags, protected images, redirects, or client-only metadata.
See what your page tells social crawlers
Check the title, description, image, and metadata returned by a public URL before you share it.