Open Graph Meta Tags: Everything You Need to Know
Open Graph meta tags are deceptively simple. You add a few lines to your HTML head and suddenly your links look great when shared. But getting the details right, especially across frameworks like Next.js, Astro, and Remix, takes more care than most tutorials let on.
Required vs Optional OG Tags
The Open Graph protocol defines four required properties: og:title, og:type, og:image, and og:url. In practice, you should also include og:description because every major platform displays it. The og:type is usually set to 'website' for most pages, though 'article' is appropriate for blog posts and news content because it unlocks additional properties like article:published_time and article:author. Optional but useful tags include og:site_name (your brand name), og:locale (language and region), and og:image:width plus og:image:height, which help platforms render the image faster by avoiding an extra HTTP request to determine dimensions.
Twitter Card Tags and Fallback Behavior
Twitter has its own meta tag system using the twitter: prefix. The most important tag is twitter:card, which accepts values like 'summary', 'summary_large_image', 'app', and 'player'. If you set twitter:card to 'summary_large_image', Twitter will display a large preview image. The good news is that Twitter falls back to OG tags for title, description, and image if Twitter-specific tags are not present. So at minimum, you need twitter:card set and can let OG tags handle the rest. However, providing explicit twitter:title, twitter:description, and twitter:image gives you more control over how your content appears on Twitter specifically.
Implementation in Next.js App Router
Next.js App Router makes OG tags straightforward with the generateMetadata function or the static metadata export. You define your openGraph object with title, description, images (as an array of objects with url, width, and height), and the framework handles rendering the correct meta tags. For Twitter, add a twitter property with card set to 'summary_large_image'. One thing many developers miss is that Next.js requires absolute URLs for OG images in production, so you need to construct the full URL using your domain or the NEXT_PUBLIC_APP_URL environment variable. Dynamic routes can use the params argument to generate page-specific metadata.
Dynamic OG Tags for Content Pages
For blogs, product pages, and user-generated content, you need dynamic OG tags that change per page. This means pulling the page title, excerpt, and featured image from your CMS or database and injecting them into your meta tags at render time. Server-side rendering or static generation both work well for this because social crawlers do not execute JavaScript. If you are using a client-side rendered SPA, social platforms will not see your dynamically injected OG tags unless you implement server-side rendering or use a prerendering service. This is one of the most common reasons OG images fail to appear when sharing links.
Validation and Debugging
After implementing your OG tags, validate them using the Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector. These tools fetch your page and show exactly what metadata they detect, including any warnings or errors. A common issue is caching: Facebook caches OG data aggressively, so if you update your tags, you need to use the Sharing Debugger to force a re-scrape. Another frequent problem is mixed content warnings where your page is HTTPS but the og:image URL is HTTP. Always use HTTPS for your image URLs, and make sure your server responds with correct CORS headers if the image is hosted on a different domain.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Skip the Code, Generate OG Images Instantly