Nuxt Content Open Graph Tags: Auto-Generate OG from Markdown

How to automatically generate og:title, og:image, og:description from Nuxt Content markdown frontmatter. Covers Nuxt Content v2, useContentHead, and dynamic OG images.

Why Nuxt Content needs special OG treatment

Nuxt Content is a file-based CMS that turns your Markdown files into a full-featured content layer. It powers thousands of documentation sites, blogs, and marketing pages. The challenge with OG tags is that your content metadata lives in Markdown frontmatter, but social crawlers need it as HTML meta tags in the <head>.

Nuxt Content v2 provides useContentHead(), a composable that automatically maps frontmatter fields to head metadata. But getting OG images, Twitter cards, and canonical URLs working correctly requires understanding the full pipeline from Markdown → Nuxt → rendered HTML.

Setting up frontmatter for OG tags

Structure your Markdown frontmatter to include all the fields needed for complete OG coverage:

---
title: "How to Deploy Nuxt 3 to Production"
description: "Step-by-step guide to deploying Nuxt 3 apps to Vercel, Netlify, and Cloudflare Pages."
image: "/images/blog/deploy-nuxt-3.png"
head:
  meta:
    - name: "twitter:card"
      content: "summary_large_image"
    - property: "og:type"
      content: "article"
    - property: "article:published_time"
      content: "2026-03-15T10:00:00Z"
author: "Jane Developer"
date: "2026-03-15"
---

Using useContentHead() for automatic OG tags

In your [...slug].vue catch-all page, useuseContentHead() to automatically map frontmatter to meta tags:

<!-- pages/blog/[...slug].vue -->
<script setup>
const route = useRoute();
const { data: page } = await useAsyncData(
  `content-${route.path}`,
  () => queryContent(route.path).findOne()
);

// Auto-maps title, description, and image to og: meta tags
useContentHead(page);
</script>

<template>
  <article>
    <ContentRenderer v-if="page" :value="page" />
  </article>
</template>

useContentHead() automatically generates:

og:title from title
og:description from description
og:image from image
Any custom meta tags from head.meta

Custom OG image generation with Nuxt Content

For dynamic OG images based on article content, create a server route that generates images from frontmatter:

// server/routes/og/[...slug].png.ts
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug');
  const article = await serverQueryContent(event, `/blog/${slug}`).findOne();
  
  const svg = await satori(
    {
      type: 'div',
      props: {
        style: {
          display: 'flex',
          flexDirection: 'column',
          background: 'linear-gradient(135deg, #0a0a0a, #1a1a2e)',
          width: '100%',
          height: '100%',
          padding: '60px',
        },
        children: [
          {
            type: 'div',
            props: {
              style: { fontSize: 56, fontWeight: 900, color: '#ffffff' },
              children: article.title,
            },
          },
          {
            type: 'div',
            props: {
              style: { fontSize: 24, color: '#a1a1aa', marginTop: 20 },
              children: article.description,
            },
          },
        ],
      },
    },
    { width: 1200, height: 630, fonts: [/* your font */] }
  );

  const png = new Resvg(svg).render().asPng();
  return new Response(png, {
    headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=86400' },
  });
});

Then reference the generated image in your frontmatter using the server route URL:

---
title: "My Blog Post"
image: "https://mysite.com/og/my-blog-post.png"
---

Verifying Nuxt Content OG tags

Run nuxi build && nuxi preview and view page source
Check that og:title, og:description, and og:image are in the HTML
Deploy and test with OGFixer to see real previews across all platforms
Ensure images use absolute URLs (not relative paths)

Common Nuxt Content OG mistakes

Using relative image paths — crawlers need absolute URLs with https://
Forgetting twitter:card: summary_large_image in frontmatter
Not adding og:image:width and og:image:height — some platforms won't render the image without dimensions
Relying only on useContentHead() without checking the actual rendered HTML

Check your Nuxt Content site's OG tags

Paste any URL from your Nuxt Content site to see exactly how it renders on Twitter, Slack, Discord, and LinkedIn — with actionable fixes.

Check your Nuxt Content OG tags →