Configure your page title, description, Open Graph and Twitter card data. See live previews and copy ready-to-paste code.
<head> of your HTML (server template or static file). For SPAs, use SSR/SSG or a prerender step so social scrapers reliably see these tags.<!-- Basic Meta Tags -->
<title>Your page title</title>
<meta name="description" content="Short and compelling summary for social and search.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/your-page">
<!-- Open Graph / Facebook -->
<meta property="og:title" content="Your page title">
<meta property="og:description" content="Short and compelling summary for social and search.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:site_name" content="Example site">
<meta property="og:image" content="https://vladimirsiedykh.com/api/og">
<meta property="og:image:alt" content="Descriptive image alt text">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@creator">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="Short and compelling summary for social and search.">
<meta name="twitter:image" content="https://vladimirsiedykh.com/api/og">
<meta name="twitter:image:alt" content="Descriptive image alt text">Get answers to common questions about Open Graph, Twitter cards, image sizes, and where to put code in Next.js or React apps.
Use the App Router metadata API. Define site-wide defaults in app/layout.tsx via export const metadata. For page-specific values, add export const metadata (static) or export async function generateMetadata() (dynamic) in each route file, for example app/blog/[slug]/page.tsx.
For reliable Open Graph and Twitter previews, yes. Social scrapers often ignore client-only updates. Use SSR/SSG or a prerender step so your HTML includes tags at request time.
Open Graph: 1200×630 (min width 600px). Twitter summary_large_image: 1200×628; summary card: square ~120×120. Prefer fast CDN URLs over large files.
Uploads are for preview only so you can see how it looks across platforms. The generated code always uses the URLs you enter in the form (og:image and Twitter image).
Preview priority is: uploaded preview (visual only) → Twitter image URL → Open Graph image URL. The code export always uses your form values.
Use summary_large_image for a wide image preview. Use summary for a compact square preview. app and player are advanced types that require additional tags and are used less often.
Loading reviews...
I can wire correct SEO and social tags across your Next.js or React app with SSR/SSG best practices, image automation, and validation.
Free guide: "Essential Web Development Guide"
Explore more guides and tools for social metadata, previews and implementation best practices.
Master meta tags and Open Graph with Next.js Metadata API and React Helmet. Complete guide covering SEO optimization, social sharing validation, and performance best practices.
Explore React Server Components implementation challenges and solutions. Learn about RSC adoption barriers, framework limitations, and practical approaches for Next.js 15 with React 19 integration patterns.
Master JSON-LD schema implementation for rich snippets and SEO dominance. Advanced techniques covering schema types, validation, and the documented impact of structured data.
Get weekly insights on OG/Twitter implementation, correct metadata structure, and preview optimization.