← Blog

Open Graph תיוגים בNext.js: המדריך למפתחים לשנת 2026

Next.js מקל על תגיות OG עם ממשק ה-API של Metadata. הנה כל מה שאתה צריך לדעת - מתמונות סטטיות ועד תמונות OG דינמיות.

לא בטוח אם תגי ה- Next.js OG שלך נכונים?

בדוק את התגיות Open Graph בחינם עם Proovd - הדבק כתובת URL וראה בדיוק איך היא נראית ב-X, LinkedIn, Slack, Discord, WhatsApp ו-Reddit.

תשובה מהירה

  • דפים סטטיים: ייצא אובייקט metadata

ב-Next.js 13+ (נתב אפליקציות), הדרך הפשוטה ביותר להגדיר תגיות OG היא ייצוא metadata בפריסה או בקובץ הדף שלך:

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

זה יוצר אוטומטית את התגים הנכונים בדף שלך . Next.js מטפל בשאר.

Next.js נתב אפליקציות - מטא נתונים דינמיים

עבור דפים דינמיים (פוסטים בבלוג, דפי מוצר), השתמש ב-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],
    },
  };
}

תמונות OG דינמיות עם @vercel/og

לתמונות OG מותאמות אישית (עם צבעי המותג שלך, כותרות פוסטים וכו'), השתמש ב-@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,
    }
  );
}

לאחר מכן עיין במסלול API זה במטא נתונים שלך:

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 נתב דפים

אם אתה משתמש בנתב Pages הישן יותר, השתמש ב-next/head או בחבילת next-seo:

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

או השתמש ב-next-seo עבור ממשק 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',
  }}
/>

רשימת רשימת תיקון מהירה

  1. השתמש ב-Metadata API עבור דפים סטטיים
  2. השתמש ב-generateMetadata() עבור דפים דינמיים
  3. הגדר גם את המאפיינים openGraph וגם twitter
  4. השתמש ב-@vercel/og לתמונות OG דינמיות
  5. בדוק עם Proovd כדי לאמת בכל הפלטפורמות

שאלות נפוצות

האם Next.js מעבד אוטומטית תגיות OG ב-HTML?

כֵּן. Next.js מזריק את המטא נתונים כתגי ב-HTML שעובד בשרת, כך שהסורקים רואים אותם ללא JavaScript.

האם אוכל להשתמש בתמונות OG דינמיות עם פונקציות Vercel Edge?

כֵּן. @vercel/og פועל על Vercel Edge ומייצר תמונות תוך כדי תנועה. כתובת האתר של התמונה מופנית במטא נתונים שלך, ופלטפורמות מאחזרות אותה כשהן סורקות את הדף שלך.

מאמרים קשורים

אמת את Next.js תגיות OG בכל הפלטפורמות

בדוק את התגיות Open Graph בחינם עם Proovd - הדבק כתובת URL וראה את התצוגה המקדימה ב-X, LinkedIn, Slack, Discord, WhatsApp ו-Reddit.