Open Graph JavaScript Implementation
How to implement Open Graph meta tags in JavaScript frameworks like React, Vue, Svelte, Next.js, Nuxt, and Astro with server-side rendering.
Modern web applications built with JavaScript frameworks face a unique Open Graph challenge: social media crawlers do not execute JavaScript. If your OG tags are rendered client-side, crawlers see an empty <head> and cannot generate preview cards.
This guide covers how to correctly implement Open Graph tags in every major JavaScript framework.
The Core Problem
When Facebook, LinkedIn, or Twitter’s crawler visits your URL, it downloads the HTML response and parses it immediately. It does not:
- Execute JavaScript
- Wait for API calls to resolve
- Render React/Vue/Svelte components
This means any OG tags injected via document.head.appendChild(), React Helmet, or Vue Meta after hydration are invisible to social crawlers.
Solution: Server-Side Rendering (SSR)
The only reliable way to deliver OG tags to social crawlers is to include them in the initial HTML response from the server.
Next.js (App Router)
Next.js provides native metadata support through the metadata export:
export const metadata = {
openGraph: {
title: 'Page Title',
description: 'Page description',
url: 'https://example.com/page',
images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
},
};For dynamic pages, use generateMetadata:
export async function generateMetadata({ params }) {
const post = await fetchPost(params.slug);
return {
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: post.ogImage }],
},
};
}For a complete walkthrough, see Next.js Open Graph Metadata Guide.
Nuxt 3
Nuxt provides the useHead and useSeoMeta composables:
<script setup>
useSeoMeta({
ogTitle: 'Page Title',
ogDescription: 'Page description',
ogImage: 'https://example.com/og.png',
ogUrl: 'https://example.com/page',
twitterCard: 'summary_large_image',
});
</script>Nuxt renders these tags server-side automatically during SSR.
Astro
Astro renders all components server-side by default, making it ideal for OG tags:
---
const title = "Page Title";
const description = "Page description";
const ogImage = "https://example.com/og.png";
---
<head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:url" content={Astro.url.href} />
<meta property="og:type" content="website" />
</head>SvelteKit
SvelteKit uses the <svelte:head> element inside +page.svelte or +layout.svelte:
<svelte:head>
<meta property="og:title" content={data.title} />
<meta property="og:description" content={data.description} />
<meta property="og:image" content={data.ogImage} />
<meta property="og:url" content={$page.url.href} />
</svelte:head>Gatsby
Gatsby uses the <Seo> component pattern with React Helmet:
import { Helmet } from 'react-helmet';
export function SEO({ title, description, image, url }) {
return (
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
</Helmet>
);
}Gatsby pre-renders all pages during build, so Helmet tags are included in the static HTML.
Alternative: Pre-Rendering Services
If you have a client-side SPA that cannot be migrated to SSR, pre-rendering services can serve static HTML snapshots to social crawlers:
- Prerender.io — Detects crawler user-agents and serves cached HTML.
- Rendertron — Google’s open-source headless Chrome rendering service.
- Cloudflare Workers — Intercept crawler requests at the edge and inject OG tags.
Testing Your Implementation
After implementing OG tags in your framework, always verify them using:
- View Page Source (not DevTools Inspect) — OG tags must be in the raw HTML source.
- curl —
curl -s https://your-url | grep og:to confirm server-side rendering. - Open Graph Inspector — Multi-platform preview and validation.
For a complete testing workflow, see How to Test Open Graph Tags.