# Next.js ## Getting Started ## Create a connection 1. Sign in to [OpenGraph+](/) 2. Go to your website's **Meta Tags** page 3. Create a new connection and copy your connection URL Your connection URL looks like `https://$OGPLUS_KEY.ogplus.net`. ## Find your layout **App Router:** `app/layout.tsx` is the root layout. All pages inherit its metadata. **Pages Router:** `pages/_app.tsx` wraps every page. ## Add Open Graph meta tags Use `generateMetadata` in your root layout to set default Open Graph tags site-wide. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms. ```tsx // app/layout.tsx import type { Metadata } from 'next' import { headers } from 'next/headers' export async function generateMetadata(): Promise { const headersList = await headers() const pathname = headersList.get('x-invoke-path') || '/' return { openGraph: { title: 'My Site', description: 'Welcome to my site', url: `https://mysite.com${pathname}`, siteName: 'My Site', type: 'website', images: [`https://$OGPLUS_KEY.ogplus.net${pathname}`], }, twitter: { card: 'summary_large_image', }, } } ``` Replace `https://$OGPLUS_KEY.ogplus.net` with your connection URL, and `"My Site"` with your actual site name. ### What each tag does | Tag | Purpose | |-----|---------| | `og:title` | The title shown in the link preview | | `og:description` | The description shown below the title | | `og:url` | The canonical URL of the page | | `og:site_name` | Your website's name | | `og:type` | Content type (`website`, `article`, `product`) | | `og:image` | The social card image (powered by OpenGraph+) | | `twitter:card` | Tells Twitter to show a large image card | ## Dynamic tags for pages Page-level `generateMetadata` overrides the layout defaults. Use this to set tags from your data. ### Blog posts ```tsx // app/posts/[slug]/page.tsx import { getPost } from '@/lib/posts' export async function generateMetadata({ params }) { const post = await getPost(params.slug) return { openGraph: { title: post.title, description: post.excerpt, type: 'article', images: [`https://$OGPLUS_KEY.ogplus.net/posts/${params.slug}`], }, twitter: { card: 'summary_large_image', }, } } ``` ### Products ```tsx // app/products/[id]/page.tsx import { getProduct } from '@/lib/products' export async function generateMetadata({ params }) { const product = await getProduct(params.id) return { openGraph: { title: product.name, description: `${product.price} — ${product.description}`, type: 'product', images: [`https://$OGPLUS_KEY.ogplus.net/products/${params.id}`], }, twitter: { card: 'summary_large_image', }, } } ``` ## Static metadata for simple pages For pages with known paths, use the static `metadata` export: ```tsx // app/about/page.tsx import type { Metadata } from 'next' export const metadata: Metadata = { openGraph: { title: 'About Us', description: 'Learn more about our company', images: ['https://$OGPLUS_KEY.ogplus.net/about'], }, twitter: { card: 'summary_large_image', }, } ``` ## Pages Router (legacy) If you're using the Pages Router, add meta tags via `next/head`: ```tsx // pages/_app.tsx import Head from 'next/head' import { useRouter } from 'next/router' export default function App({ Component, pageProps }) { const router = useRouter() return ( <> ) } ``` Override tags in individual pages by adding another `` block with page-specific values. ## Verify Start your development server and view the page source. Check that all `og:` meta tags are present with the correct values. Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image. ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your layout and CSS in your stylesheets. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page shows how to wire them into a Next.js app. ## Meta tags Add these to your layout's metadata alongside your `og:image` tag. They're all optional. ```tsx // app/layout.tsx export async function generateMetadata(): Promise { const headersList = await headers() const pathname = headersList.get('x-invoke-path') || '/' return { openGraph: { images: [`https://$OGPLUS_KEY.ogplus.net${pathname}`], }, twitter: { card: 'summary_large_image', }, other: { // Render at 800px wide instead of the default 'og:plus:viewport:width': '800', // Only capture this element instead of the full page 'og:plus:selector': '.post-header', // Inject inline styles on the captured element 'og:plus:style': 'padding: 60px; background: #0f172a; color: white;', }, } } ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` element during capture. Use it in your stylesheets to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site. ```css /* app/globals.css */ html[data-ogplus] { nav { display: none; } footer { display: none; } .hero { padding: 60px; } } ``` If you're using Tailwind, there's a plugin that gives you `ogplus:` variants like `ogplus:hidden` and `ogplus-twitter:bg-sky-500`. See [CSS Styling](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `