← Blog

Open Graph Tunnisteet kohteessa Next.js: Vuoden 2026 kehittäjäopas

Next.js tekee OG-tunnisteista helppoa Metadata API:n avulla. Tässä on kaikki mitä sinun tulee tietää – staattisista dynaamisista OG-kuvista.

Etkö ole varma, ovatko Next.js OG-tunnisteet oikein?

Tarkista Open Graph-tunnisteet vapaana koodilla Proovd — liitä URL-osoite ja katso tarkalleen, miltä se näyttää kohdissa X, LinkedIn, Slack, Discord, WhatsApp ja Reddit.

Pikavastaus

  • Next.js 13+ käyttää metatietosovellusliittymää OG-tageille
  • Staattiset sivut: vie metadata-objekti
  • Dynaamiset sivut: käytä generateMetadata()
  • Dynaamiset OG-kuvat: käytä @vercel/og

Next.js Sovellusreititin — Staattiset metatiedot

Next.js 13+ (App Router) -käyttöjärjestelmässä yksinkertaisin tapa asettaa OG-tunnisteet on metadata-vienti asettelussasi tai sivutiedostossasi:

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'],
  },
};

Tämä luo automaattisesti oikeat -tunnisteet sivullesi . Next.js hoitaa loput.

Next.js Sovellusreititin — Dynaamiset metatiedot

Käytä dynaamisille sivuille (blogiviestit, tuotesivut) 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],
    },
  };
}

Dynaamiset OG-kuvat @vercel/og:lla

Käytä mukautettuja OG-kuvia (brändisi väreillä, viestien otsikoilla jne.) @vercel/og:

// 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,
    }
  );
}

Käytä sitten tätä API-reittiä metatiedoissasi:

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 Sivujen reititin

Jos käytät vanhempaa Pages Routeria, käytä next/head tai next-seo-pakettia:

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>
  );
}

Tai käytä koodia next-seo puhtaamman API:n saamiseksi:

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',
  }}
/>

Pikakorjauksen tarkistuslista

  1. Käytä metatietosovellusliittymää staattisille sivuille
  2. Käytä generateMetadata() dynaamisille sivuille
  3. Aseta sekä openGraph- että twitter-ominaisuudet
  4. Käytä @vercel/og dynaamisille OG-kuville
  5. Testaa Proovd varmistaaksesi kaikilla alustoilla

Usein kysytyt kysymykset

Muodostaako Next.js automaattisesti OG-tunnisteet HTML:ssä?

Kyllä. Next.js lisää metatiedot -tunnisteina palvelimen hahmontamaan HTML-koodiin, joten indeksointirobotit näkevät ne ilman JavaScriptiä.

Voinko käyttää dynaamisia OG-kuvia Vercel Edge Functions -toimintojen kanssa?

Kyllä. @vercel/og toimii Vercel Edgessä ja luo kuvia lennossa. Kuvan URL-osoitteeseen viitataan metatiedoissasi, ja alustat hakevat sen indeksoidessaan sivuasi.

Aiheeseen liittyvät artikkelit

Vahvista Next.js OG-tagisi kaikilla alustoilla

Tarkista Open Graph-tunnisteet vapaana koodilla Proovd — liitä URL-osoite ja katso esikatselu kohdissa X, LinkedIn, Slack, Discord, WhatsApp ja Reddit.