Open Graph SEO
Overview
When a user pastes your website's URL into iMessage, Twitter/X, LinkedIn, or Slack, those platforms instantly generate a rich 'Preview Card' displaying an image, title, and description. This isn't magic; they are scraping your <head> for a specific standard of meta tags called the Open Graph protocol (originally created by Facebook). Implementing Open Graph (and Twitter Cards) is arguably the single highest ROI task you can do for your marketing, as rich preview cards massively increase click-through rates.
Syntax
<head>
<!-- Standard HTML SEO -->
<title>Mastering HTML5 | Underrated Coder</title>
<meta name="description" content="The ultimate guide to modern web structure.">
<!-- Facebook & LinkedIn Open Graph (og:) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://underratedcoder.com/html">
<meta property="og:title" content="Mastering HTML5">
<meta property="og:description" content="The ultimate guide to modern web structure.">
<meta property="og:image" content="https://underratedcoder.com/og-banner.jpg">
<!-- Twitter Specific Cards (twitter:) -->
<!-- 'summary_large_image' forces Twitter to show a massive hero banner -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="underratedcoder.com">
<meta name="twitter:title" content="Mastering HTML5">
<meta name="twitter:description" content="The ultimate guide to modern web structure.">
<meta name="twitter:image" content="https://underratedcoder.com/og-banner.jpg">
</head>Common Pitfalls
- Using relative URLs for the
og:image(e.g.,content="/images/banner.jpg"). External platforms like Twitter have absolutely no idea what your domain is when scraping this tag. You MUST provide a 100% absolute URL (e.g.,https://mywebsite.com/images/banner.jpg). - Using massive image files for the Open Graph image. Most social scrapers will simply time out or refuse to download images larger than 5MB, resulting in a broken preview card. Keep it under 1MB.
Interview Questions
og: tags and twitter: tags?While Twitter has started falling back to og: tags if their proprietary tags are missing, explicitly providing twitter:card with summary_large_image is the only guaranteed way to force Twitter to display a large, high-conversion hero image instead of a tiny thumbnail.
Real-World Example
How Next.js 14 handles Open Graph generation via the metadata API.
// In a Next.js layout.tsx or page.tsx
export const metadata = {
title: 'My SaaS Product',
description: 'The best product ever.',
openGraph: {
title: 'My SaaS Product',
description: 'The best product ever.',
url: 'https://mysaas.com',
siteName: 'MySaaS',
images: [
{
url: 'https://mysaas.com/og.png', // Absolute URL
width: 1200,
height: 630,
}
],
type: 'website',
},
};Check Your Knowledge
Test your understanding of Open Graph SEO with these quick questions.