OpenGraph, Twitter Card & SERP Live Preview
Simulate your previews live for Google search results, X (Twitter Large Card), LinkedIn, WhatsApp and Facebook. Check character and image limits instantly and copy type-safe Next.js 15+ App Router metadata code.
A Guide to Optimizing OpenGraph, Twitter Cards and SERP Appearance
How often a piece of content is clicked when shared on social networks and messaging apps (CTR) matters as much to its success as its search ranking. OpenGraph (og:) and Twitter Card (twitter:) meta tags turn your link into a card with a high-resolution cover image, an engaging title and a compelling summary when it is shared on X (Twitter), LinkedIn, WhatsApp, Facebook, Slack or Discord.
1. Character and Image Standards for Social Networks and Google SERP
Each platform truncates meta tags with its own limits. The gold standards for cross-platform compatibility:
| Platform | Ideal Title Limit | Ideal Description Limit | Recommended Image Size | Card Type / Format |
|---|---|---|---|---|
| Google SERP (Desktop & Mobile) | 50 - 60 characters | 140 - 158 characters | 1200x675 px (16:9) | Standard SERP Result Card |
| X (Twitter) | ~70 characters | 125 - 150 characters | 1200x630 px (1.91:1) | summary_large_image |
| ~60 characters | ~150 characters | 1200x627 px | Rich Professional Card | |
| WhatsApp & Telegram | ~50 characters | ~100 characters | 1200x630 px (< 300KB) | In-Message Preview Bubble |
| Facebook & Slack | ~65 characters | ~150 characters | 1200x630 px | Standard OG Card |
2. Type-Safe Metadata Architecture in the Next.js 15+ App Router
In the Next.js App Router you can define metadata with export const metadata: Metadata, or with generateMetadata for dynamic pages:
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
const post = await fetchPost(params.slug)
const pageUrl = `https://ismailhakkieren.com/blog/${params.slug}`
const ogImageUrl = post.image || 'https://ismailhakkieren.com/images/default-og.jpg'
return {
title: `${post.title} | İsmail Hakkı EREN`,
description: post.summary,
alternates: {
canonical: pageUrl,
},
openGraph: {
title: post.title,
description: post.summary,
url: pageUrl,
siteName: 'İsmail Hakkı EREN',
images: [
{
url: ogImageUrl,
width: 1200,
height: 630,
alt: post.title,
},
],
type: 'article',
publishedTime: post.publishedAt,
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.summary,
images: [ogImageUrl],
creator: '@ismailhakkieren',
},
}
}3. Resetting Social Network Caches
After you change the cover image or title on your site, platforms may keep showing the old image. The official cache reset tools:
Refreshes the old OG image on LinkedIn’s servers within seconds.
Refreshes Facebook and WhatsApp metadata with the "Scrape Again" button.
Paste the URL into the post composer to confirm the card has updated.