Open Graph

BetterStarter generates Open Graph (OG) images dynamically so every blog post and doc page has a proper social media preview.

What's Included

• Dynamic OG image generation at build/request time
• OG meta tags set automatically via generateSEO() on every page
• Blog posts get post-specific OG images with title and description
• Custom images supported per page via frontmatter image field

How It Works

Use generateSEO() in your route's head function:

import { generateSEO } from '@/features/seo'

export const Route = createFileRoute('/my-page')({
  head: () => ({
    meta: generateSEO({
      title: 'My Page',
      description: 'Page description',
    }),
  }),
})

This sets og:title, og:description, og:image, og:url, and twitter:card automatically.

Custom OG Image

Pass a custom image URL to override the default:

generateSEO({
  title: 'My Blog Post',
  description: 'Summary',
  image: 'https://betterstarter.dev/blog-assets/post.jpg',
})

Image recommendations: 1200×630px, JPG or PNG, under 5 MB.