SEO & Meta
Open Graph & Meta Tag Previewer
Preview your page on Google, Twitter/X, and LinkedIn. Generate HTML meta tags and a Next.js Metadata export in one click. Live SERP, light/dim Twitter card, and Facebook feed previews.
Load preset:
Meta fields
44/60
Shown in search results, social cards, browser tabs.
129/160
Search snippet and social card blurb.
1200×630 for best compatibility.
Google - DesktopSERP
A
Acme Engineering Blog
blog.example.com/modern-css-animations-gpu-performance
Modern CSS Animations: GPU Performance Guide
How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers.
Google - Mobile~360px
blog.example.com/modern-css-animations-gpu-performance
Modern CSS Animations: GPU Performance Guide
How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers.
Twitter / X - Large Summary Card
Acme Engineering Blog
Modern CSS Animations: GPU Performance Guide
How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers.
Facebook / LinkedIn Feedog:image
Acme Engineering Blog
Modern CSS Animations: GPU Performance Guide
How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers.
<title>Modern CSS Animations: GPU Performance Guide</title>
<meta name="description" content="How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers." />
<link rel="canonical" href="https://blog.example.com/modern-css-animations-gpu-performance" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Modern CSS Animations: GPU Performance Guide" />
<meta property="og:description" content="How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers." />
<meta property="og:url" content="https://blog.example.com/modern-css-animations-gpu-performance" />
<meta property="og:site_name" content="Acme Engineering Blog" />
<meta property="og:image" content="https://cdn.example.com/blog/css-animations-hero.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Modern CSS Animations: GPU Performance Guide" />
<meta name="twitter:description" content="How to keep CSS animations buttery smooth by leaning on the compositor. A practical, example-driven guide for frontend engineers." />
<meta name="twitter:site" content="@acme_eng" />
<meta name="twitter:creator" content="@acme_eng" />
<meta name="twitter:image" content="https://cdn.example.com/blog/css-animations-hero.jpg" />
Advertisement
How to use
- 1Fill in the meta fields on the left: title, description, canonical URL, featured image, site name, and Twitter handle. The previews on the right update in real time.
- 2Watch the Google SERP, Twitter (light & dim themes), and Facebook/LinkedIn previews. Title and description bars turn red when they exceed the recommended 60 / 160 character limits - Google truncates beyond those.
- 3Switch between the HTML Meta Tags tab and the Next.js Metadata tab in the code section. Both reflect exactly what is in the form.
- 4Copy the snippet with the Copy button. For Next.js, drop the export into the layout.tsx, page.tsx, or route segment where you want it to apply.
Frequently asked questions
What is the Open Graph protocol and why does it matter?
Open Graph (OG) is the metadata standard originally created by Facebook and now used by LinkedIn, Slack, Discord, Telegram, WhatsApp, and most social platforms. When you share a URL, the platform fetches the page, reads the og:title, og:description, og:image, and og:url meta tags, and renders a rich card. Without OG tags, the platform falls back to a generic title and a blank box, and the click-through rate drops dramatically. The most important OG tags are og:title, og:description, og:image, og:url, og:site_name, and og:type.
What are the best image dimensions for og:image?
The universally safe size is 1200×630 pixels at roughly 1.91:1 aspect ratio. This renders cleanly on Facebook, LinkedIn, Twitter (summary_large_image), Slack, Discord, and iMessage. Larger images are accepted by some platforms but get downscaled. Avoid text in the bottom 100px of the image - Facebook crops differently than Twitter, and you want critical content in the central 1100×550 region. PNG or JPEG, file size under 5 MB, and ideally under 200 KB so the page loads fast when unfurled.
How do I generate dynamic OG images in Next.js?
In the App Router, create app/og/route.ts (or any route segment) and export a GET function that returns a new ImageResponse from next/og. ImageResponse uses Satori to render JSX (a subset of HTML) into a PNG at the edge, which means your og:image is a static asset cached at the CDN. You can pass the page title, author, and other dynamic data via the search params or by fetching from your CMS. The default Next.js blog starter ships with an implementation you can copy. Use it for blog posts, product pages, and any route where the headline is the primary reason someone clicks.
How do I make a static og:image in Next.js?
Put a 1200×630 PNG (or JPG) in the app/ or public/ directory and reference it from your Metadata export: images: [{ url: "/og-home.png", width: 1200, height: 630 }]. For routes that all share a hero image this is the simplest path. The trade-off is that one image is used for every page in that segment - fine for marketing pages, less fine for blog posts or product listings where the title should be on the image.
Why is my Twitter card not showing up?
Twitter uses the twitter:card meta tag to decide which card layout to render. summary_large_image is the one with the big image. If you see a small image, you are probably on summary or you forgot the twitter:card meta tag entirely. Validate the card with the Twitter Card Validator (https://cards-dev.twitter.com) - paste the URL after deploy, click Preview card, and inspect what Twitter actually fetched. Note that the validator caches for a few minutes; use the Cache Buster feature if you are iterating.
How long should my title and description be?
For SEO, the practical limit is what Google actually renders on a desktop SERP: about 60 characters for the title and about 160 for the description. Beyond those numbers Google truncates with an ellipsis. On mobile, the limits are tighter (around 50 / 130). Some CMS templates pad titles with the site name (using a | or - separator) - keep the primary keyword in the first 50 characters so the most important words are never truncated. The length meters in this tool turn amber and red to make over-limit copy obvious at a glance.
What factors most influence search snippet ranking?
The SERP snippet is a function of (1) the title tag, (2) the meta description, (3) structured data on the page (FAQ, HowTo, Product, Article schema), and (4) on-page content Google rephrases when the meta description is missing or low quality. Google does not promise to use your meta description verbatim - it may rewrite it to match the search query. The takeaway: write a great meta description for the default case (cold visitor, no query context), and add FAQ / Article structured data so the SERP can render rich results above and below your snippet.
Do I need a separate og:image and twitter:image?
Not necessarily. If you only ship a 1200×630 og:image, both Facebook / LinkedIn and Twitter will use it (Twitter will crop a 2:1 region from the centre for summary_large_image). The cases where a separate twitter:image makes sense are: (1) you want a slightly different crop optimised for the smaller Twitter card, (2) you want a different design that includes the Twitter handle, (3) you want to A/B test social card designs. For most sites one well-designed 1200×630 image is enough.
The Senior Full-Stack Production Kit (2026)
Checklists, Docker recipes, and SSR error fixes in one dense PDF.