Getting Started: Metadata and OG images | Next.js
Meta tags
Title
Getting Started: Metadata and OG images | Next.js
Description
Learn how to add metadata to your pages and create dynamic OG images.
Open graph meta tags
Title
Getting Started: Metadata and OG images | Next.js
Description
Learn how to add metadata to your pages and create dynamic OG images.
Image
Twitter meta tags
Card
summary_large_image
Title
Getting Started: Metadata and OG images
Description
Learn how to add metadata to your pages and create dynamic OG images.
Image
Resources
HTML
<!-- HTML Meta Tags --> <title>Getting Started: Metadata and OG images | Next.js</title> <meta name="description" content="Learn how to add metadata to your pages and create dynamic OG images."> <!-- Open Graph Meta Tags --> <meta property="og:title" content="Getting Started: Metadata and OG images | Next.js"> <meta property="og:description" content="Learn how to add metadata to your pages and create dynamic OG images."> <meta property="og:image" content="https://nextjs.org/api/docs-og?title=Getting%20Started:%20Metadata%20and%20OG%20images"> <!-- Twitter Meta Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Getting Started: Metadata and OG images"> <meta name="twitter:description" content="Learn how to add metadata to your pages and create dynamic OG images."> <meta name="twitter:image" content="https://nextjs.org/api/docs-og?title=Getting%20Started:%20Metadata%20and%20OG%20images">
JSON
{ "title": "Getting Started: Metadata and OG images | Next.js", "description": "Learn how to add metadata to your pages and create dynamic OG images.", "keywords": null, "themeColor": null, "author": null, "generator": null, "publisher": null, "creator": null, "og": { "title": "Getting Started: Metadata and OG images | Next.js", "description": "Learn how to add metadata to your pages and create dynamic OG images.", "url": null, "siteName": null, "locale": null, "type": null, "image": { "url": "https://nextjs.org/api/docs-og?title=Getting%20Started:%20Metadata%20and%20OG%20images", "width": null, "height": null, "alt": null }, "video": { "url": null, "type": null, "width": null, "height": null }, "audio": { "url": null, "type": null } }, "twitter": { "card": "summary_large_image", "site": null, "creator": null, "title": "Getting Started: Metadata and OG images", "description": "Learn how to add metadata to your pages and create dynamic OG images.", "image": { "url": "https://nextjs.org/api/docs-og?title=Getting%20Started:%20Metadata%20and%20OG%20images", "width": null, "height": null, "alt": null }, "player": { "url": null, "width": null, "height": null, "stream": null }, "app": { "iphone": { "name": null, "id": null, "url": null }, "ipad": { "name": null, "id": null, "url": null }, "googleplay": { "name": null, "id": null, "url": null } } } }
Application schema
Schema
{ "@context": "https://schema.org", "author": { "@type": "Organization", "name": "Vercel" }, "headline": "Getting Started: Metadata and OG images", "description": "Learn how to add metadata to your pages and create dynamic OG images.", "url": "https://nextjs.org/docs/app/getting-started/metadata-and-og-images", "image": "https://nextjs.org/api/docs-og?title=Getting Started: Metadata and OG images", "@type": "TechArticle" }
Social Card Preview
Getting Started: Metadata and OG images | Next.js
Learn how to add metadata to your pages and create dynamic OG images.
https://nextjs.org/docs/app/building-your-application/optimizing/metadata