← Blog

Open Graph Merki í Next.js: The 2026 Developer Guide

Next.js auðveldar OG merki með Metadata API. Hér er allt sem þú þarft að vita — frá kyrrstæðum til kraftmikilla OG-mynda.

Ertu ekki viss um hvort Next.js OG merkin þín séu rétt?

Athugaðu Open Graph merkin þín ókeypis með Proovd — límdu vefslóð og sjáðu nákvæmlega hvernig hún lítur út á X, LinkedIn, Slack, Discord, WhatsApp og Reddit.

Fljótt svar

  • Next.js 13+ notar Metadata API fyrir OG merki
  • Statískar síður: flytja út lýsigögn hlut
  • Kvikar síður: notaðu generateMetadata()
  • Dynamic OG myndir: notaðu @vercel/og

Next.js App leið - Static lýsigögn

Í Next.js 13+ (App Router) er einfaldasta leiðin til að stilla OG merki útflutningur lýsigagna í útlitinu þínu eða síðuskránni:

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

Þetta myndar sjálfkrafa rétt merki á síðunni þinni . Next.js sér um afganginn.

Next.js Forritsbeini — Kvik lýsigögn

Fyrir kraftmiklar síður (bloggfærslur, vörusíður), notaðu generateMetadata():

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Dynamic OG myndir með @vercel/og

Notaðu @vercel/og fyrir sérsniðnar OG-myndir (með vörumerkjalitum þínum, pósttitlum osfrv.):

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Vísaðu síðan til þessa API leið í lýsigögnunum þínum:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js Síður leið

Ef þú ert að nota eldri Pages Router, notaðu next/head eða next-seo pakkann:

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

Eða notaðu next-seo fyrir hreinni API:

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

Gátlisti til fljótlegra laga

  1. Notaðu Metadata API fyrir kyrrstæðar síður
  2. Notaðu generateMetadata() fyrir kraftmiklar síður
  3. Stilltu bæði eiginleikana openGraph og twitter
  4. Notaðu @vercel/og fyrir kraftmiklar OG myndir
  5. Prófaðu með Proovd til að staðfesta á öllum kerfum

Algengar spurningar

Birtir Next.js OG merki sjálfkrafa í HTML?

Já. Next.js dælir inn lýsigögnunum sem merki í HTML-tengda þjóninum, svo skriðlar sjá þau án JavaScript.

Get ég notað kraftmikla OG myndir með Vercel Edge Functions?

Já. @vercel/og keyrir á Vercel Edge og býr til myndir á flugi. Vísað er til myndslóðarinnar í lýsigögnunum þínum og vettvangar sækja hana þegar þeir skríða síðuna þína.

Tengdar greinar

Staðfestu Next.js OG merkin þín á öllum kerfum

Athugaðu Open Graph merkin þín ókeypis með Proovd — límdu vefslóð og sjáðu forskoðunina á X, LinkedIn, Slack, Discord, WhatsApp og Reddit.