SEO ב-Next.js: רינדור, מטא-דאטה, מפות אתר ובלוג שמדורג

SEO ב-Next.js הוא בעיקר בחירה נכונה בכל נתיב: מה מרונדר בשרת, מה נשמר במטמון, ומה מגיע ל-HTML לפני שסקריפט כלשהו רץ. Google מסבירה ביסודות ה-SEO ל-JavaScript שהיא מעבדת אפליקציות JavaScript בשלושה שלבים (סריקה, רינדור, הוספה לאינדקס) ושרינדור בצד השרת או רינדור מוקדם "הוא עדיין רעיון מצוין". Next.js עושה זאת כברירת מחדל. המדריך עוסק ב-App Router (מ-Next.js 13 ואילך), עם הערות ל-Pages Router הישן.

האם Next.js טוב ל-SEO?

כן. אפליקציית React רגילה שמרונדרת בצד הלקוח שולחת קובץ HTML כמעט ריק ובונה את העמוד בדפדפן; מנועי החיפוש צריכים לרנדר אותו, ובוטים רבים לא עושים זאת אף פעם. Next.js מרנדר את React בשרת, כך שתגובת ה-HTML כבר כוללת כותרות, טקסט, קישורים ומטא-דאטה. המדריך שלנו ל-SEO ל-JavaScript מסביר למה ההבדל הזה חשוב להוספה לאינדקס.

ב-App Router הרכיבים הם Server Components כברירת מחדל. גם רכיבים שמסומנים ב-'use client' מרונדרים מראש ל-HTML בשרת. נקודת התורפה היא הנתונים: כל מה שנטען בתוך useEffect, או רק אחרי לחיצה, חסר ב-HTML הראשוני. טענו את התוכן ב-Server Components ושמרו את רכיבי הלקוח לאינטראקטיביות.

SSG, SSR, ISR או CSR: איזה מצב רינדור לבחור?

Next.js מאפשר לשלב מצבים שונים בכל נתיב. הבחירה משפיעה על עדכניות, מהירות ועל מה שהסורקים מקבלים.

התיעוד של Next.js על ISR מונה את היתרונות: עדכון תוכן סטטי "בלי לבנות מחדש את כל האתר" וניהול כמויות גדולות של עמודים בלי זמני build ארוכים. נתיב עם export const revalidate = 3600 נוצר מחדש לכל היותר פעם בשעה; לשליטה מדויקת, קראו ל-revalidatePath או ל-revalidateTag כשהתוכן משתנה. ISR לא עובד עם ייצוא סטטי (output: 'export'). לאפליקציות שחייבות להישאר מרונדרות בצד הלקוח, המדריך שלנו ל-SEO לאפליקציות עמוד יחיד מציג את הפתרונות.

איך מגדירים כותרות, תיאורים וקנוניקל עם Metadata API?

Metadata API מחליף את next/head ב-App Router. לפי התיעוד של Next.js על מטא-דאטה, מייצאים אובייקט metadata סטטי מ-layout או מעמוד, או פונקציה generateMetadata כשהערכים תלויים בנתונים, ו-Next.js מייצר את תגיות ה-head. שניהם נתמכים רק ב-Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

חמישה כללים שמונעים את רוב הבעיות:

• הגדירו metadataBase ב-layout הראשי (הדומיין של סביבת הייצור), כדי שקנוניקל יחסי וכתובות Open Graph יהפכו למוחלטים.
• השתמשו בתבנית כותרת ב-layout הראשי, למשל '%s | מותג', כדי שלכל עמוד תהיה כותרת ייחודית עם שם המותג פעם אחת.
• תנו לכל עמוד שניתן לאינדוקס קנוניקל שמפנה לעצמו דרך alternates.canonical; הוא מגן מפני כפילויות שנוצרות מפרמטרים בכתובת ומלוכסנים בסוף. הערך שלנו על תגית קנוניקל מסכם את הכללים.
• כתבו תיאור לכל עמוד, שנוצר מהתוכן בתוך generateMetadata, ולא ברירת מחדל אחת לכל האתר.
• הוסיפו תמונות Open Graph עם קובץ opengraph-image בתיקיית הנתיב, ובדקו את התוצאה עם כלי תצוגה מקדימה ל-Open Graph.

בעמודים דינמיים Next.js משדר את המטא-דאטה בזרם אחרי הבייטים הראשונים כדי להאיץ את הרינדור. לפי התיעוד, השידור בזרם מושבת לבוטים שמצפים למטא-דאטה בתוך ה-head ומזוהים לפי ה-user agent (Bingbot,‏ Twitterbot ו-Slackbot הם חלק מהדוגמאות), והאפשרות htmlLimitedBots מאפשרת להתאים את הרשימה. אם סורק שחשוב לכם לא מופיע בה, הוסיפו אותו. ב-Pages Router המקבילה היא רכיב Head מ-next/head, עם מאפיין key כדי למנוע תגיות כפולות.

איך יוצרים sitemap.xml ו-robots.txt ב-Next.js?

שניהם קבצים מיוחדים בתיקיית app. קובץ sitemap.ts שמייצא פונקציה שמחזירה כתובות הופך ל-/sitemap.xml; קובץ robots.ts הופך ל-/robots.txt. התיעוד של מפת האתר מציין שהקובץ נשמר במטמון כברירת מחדל ושהמגבלה של Google היא 50,000 כתובות למפת אתר; מעבר לכך, generateSitemaps מפצל אותה לכמה קבצים.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

כללו רק כתובות קנוניות, שניתנות לאינדוקס ומחזירות 200, עם תאריך העדכון האמיתי ב-lastModified. מפת האתר מקבלת גם alternates.languages לאתרים רב-לשוניים. ב-robots.ts הפנו למפת האתר והחליטו אילו בוטים של AI רשאים לסרוק את האתר; המאמר שלנו על robots.txt לסורקי AI מפרט אותם. עוד על הפורמט בערך שלנו על מפת אתר XML.

אילו פרטים טכניים פוגעים הכי הרבה ב-SEO של אתר Next.js?

כל הבעיות האלה פוגעות ביכולת הסריקה: סורק צריך לגלות כל כתובת דרך קישורים ולקבל קוד סטטוס נקי.

איך מוסיפים נתונים מובנים ב-Next.js?

התיעוד של Next.js ממליץ לרנדר JSON-LD בתגית script מסוג application/ld+json ישירות ברכיב העמוד או ה-layout, מאותם נתונים של העמוד, ולבצע escape לתו < ב-JSON המסודר כדי למנוע הזרקה. מכיוון שהוא מרונדר בשרת, Google וסורקי ה-AI רואים אותו ב-HTML הגולמי. השתמשו ב-Article (או BlogPosting) לפוסטים, ב-Organization ב-layout הראשי, ב-BreadcrumbList לעמודים עמוקים וב-Product במסחר מקוון. מחולל schema נותן לכם בלוק תקין להתחלה, ואחר כך בדקו את העמוד בבדיקת התוצאות העשירות של Google.

איך הופכים אתר Next.js למהיר מספיק בשביל Core Web Vitals?

Next.js מגיע עם רכיבים שמטפלים בגורמים הנפוצים לציוני Core Web Vitals נמוכים:

• next/image: משנה גודל תמונות, מגיש פורמטים מודרניים, טוען בעצלות כברירת מחדל ודורש מידות, מה שמונע תזוזות פריסה. סמנו את התמונה הראשית בחלק העליון של המסך כבעדיפות כדי שלא תיטען בעצלות (בדרך כלל זה רכיב ה-Largest Contentful Paint).
• next/font: מארח את הגופנים בדומיין שלכם ומונע את התזוזה שנגרמת מהחלפת גופן מאוחרת.
• next/script: טוען סקריפטים של צד שלישי עם אסטרטגיה (afterInteractive,‏ lazyOnload) במקום לחסום את העמוד.
• פחות JavaScript בצד הלקוח: כל גבול 'use client' מוסיף קוד להורדה ולהידרציה, וזה מכביד על Interaction to Next Paint בנייד.

מדדו נתוני שטח ולא רק ציון מעבדה: המדריך שלנו ל-PageSpeed Insights מראה איך לקרוא את שניהם.

איך מפעילים בלוג ב-Next.js שמדורג?

בלוג ב-Next.js מגיע בדרך כלל באחת משלוש צורות: קובצי MDX או Markdown במאגר הקוד (פשוט, אבל כל פוסט דורש commit ופריסה), CMS ללא ראש (Sanity,‏ Contentful,‏ Strapi,‏ Payload) שנשאל מתוך Server Components, או webhook לפרסום שמקבל מאמרים מכלי חיצוני. בשלושת המקרים דפוס ה-SEO זהה: נתיב דינמי app/blog/[slug] עם generateStaticParams,‏ generateMetadata,‏ ISR, מפת אתר שמוזנת מאותו מקור ועמוד אינדקס שמקשר לכל הפוסטים.

ה-webhook מנתק את הפרסום ממחזור הפריסה. Route Handler מקבל את המאמר, שומר אותו ואז מאמת מחדש את העמודים הרלוונטיים:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

איך SEO ב-Next.js עוזר לקבל ציטוטים מעוזרי AI?

רינדור בשרת הוא התנאי הראשון ל-GEO (אופטימיזציה למנועים גנרטיביים). הניתוח של Vercel מדצמבר 2024, The rise of the AI crawler, מצא ש"אף אחד מסורקי ה-AI הגדולים לא מרנדר כיום JavaScript", מנה את GPTBot,‏ ChatGPT-User,‏ OAI-SearchBot,‏ ClaudeBot ו-PerplexityBot, וספר 569 מיליון בקשות של GPTBot ו-370 מיליון של Claude ברשת שלו בחודש אחד. עמוד Next.js שמרנדר מראש את הטקסט, הכותרות וה-JSON-LD קריא לכולם; עמוד שמרונדר בצד הלקוח לא.

התנאי השני הוא תוכן שראוי לציטוט: מאמרים שעונים על שאלה אחת בכל חלק, עם מקורות, נתונים והגדרות ברורות, שמתפרסמים באופן קבוע. את החלק הזה Sorank, המוצר שלנו, הופכת לאוטומטי. Sorank היא תוכנת SEO ו-GEO במצב autopilot: היא מוצאת את מילות המפתח שלכם, ומחולל מאמרי הבלוג שלה כותב 20, 60 או 120 מאמרים בחודש עם מקורות, קישורים פנימיים ותמונות. באתר Next.js היא מתחברת דרך ה-webhook המותאם שמתואר בעמוד ההתקנה: ה-Route Handler שלכם מקבל כל מאמר, שומר אותו ומאמת מחדש את הבלוג. מעקב האזכורים ב-AI בודק לאחר מכן כל שבוע אם ChatGPT,‏ Claude ו-Gemini מצטטים את המותג שלכם.

בשורה התחתונה: רנדרו מראש כל עמוד שאתם רוצים שימצאו, הגדירו מטא-דאטה בשרת והזינו את מפת האתר מאותו מקור כמו התוכן. Next.js נותן את הכלים; הדירוגים והציטוטים ב-AI נובעים ממה שאתם מפרסמים בעזרתם. כדי להזין בלוג Next.js במאמרים באופן שוטף, ראו את התוכניות של Sorank, החל מ-49$ לחודש עם 3 ימי ניסיון חינם.