Getting Started: Metadata and OG images | Next.js

Getting Started: Metadata and OG images | Next.js

Learn how to add metadata to your pages and create dynamic OG images.

Getting Started: Metadata and OG images | Next.js

Learn how to add metadata to your pages and create dynamic OG images.

summary_large_image

Getting Started: Metadata and OG images

Learn how to add metadata to your pages and create dynamic OG images.

<!-- 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">

{
  "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
      }
    }
  }
}

{
  "@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"
}