راهنمای کامل و عملی سئو برای Next.js: از صفر تا صد

اگر می‌خواهید سایت Next.js شما در گوگل پیدا شود و رتبه بهتری بگیرید، باید یکسری کارهای فنی و محتوایی را به‌صورت کامل انجام دهید. Next.js امکانات خوبی برای سئو دارد، اما به‌تنهایی کافی نیست. در این راهنمای جامع، تمام مراحل از تنظیم metadata و Search Console تا بهینه‌سازی Core Web Vitals را قدم به قدم با مثال‌های عملی و مسیر فایل‌ها توضیح داده‌ایم.

قبل از شروع

این راهنما برای سایت‌های Next.js 13+ با App Router نوشته شده است. اگر از Pages Router استفاده می‌کنید، برخی مراحل متفاوت خواهد بود.

مرحله ۱: تنظیم متادیتا (Metadata) - اولین قدم مهم

متادیتا همان اطلاعاتی است که گوگل و سایر موتورهای جستجو از صفحه شما می‌بینند. در Next.js 13+ (با App Router) می‌توانید از `metadata` برای صفحات استاتیک و `generateMetadata` برای صفحات پویا استفاده کنید.

در App Router، این کار در `app/layout.js` برای صفحه اصلی انجام می‌شود:

export const metadata = {
  title: "عنوان سایت شما",
  description: "توضیح کوتاه درباره سایت یا خدمات.",
  keywords: ["کلمه کلیدی 1", "کلمه کلیدی 2"],
  icons: {
    icon: '/icon.png',
    shortcut: '/icon.png',
    apple: '/icon.png',
  },
  openGraph: {
    title: "عنوان در شبکه‌های اجتماعی",
    description: "توضیح پیش‌نمایش برای اشتراک لینک.",
    url: "https://your-domain.com",
    siteName: "نام برند",
    images: [
      {
        url: "https://your-domain.com/opengraph-image.png",
        width: 1200,
        height: 630,
        alt: "توضیح تصویر OG",
      },
    ],
    locale: "fa_IR",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "عنوان توییتر",
    description: "توضیحات توییتر",
    images: ["https://your-domain.com/opengraph-image.png"]
  },
  robots: {
    index: true,
    follow: true,
  },
};

برای صفحات پویا (مثل صفحات بلاگ) از `generateMetadata` استفاده کنید:

export async function generateMetadata({ params }) {
  const post = getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    keywords: post.keywords,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.coverImage],
    },
  };
}

نکات مهم metadata

• عنوان (title): باید کوتاه، واضح و شامل کلمه کلیدی اصلی باشد (حداکثر 60 کاراکتر)
• توضیحات (description): یک جمله جذاب که کاربر را ترغیب به کلیک کند (حداکثر 160 کاراکتر)
• کلمات کلیدی (keywords): 3-5 کلمه کلیدی مرتبط با محتوا
• برای هر صفحه title و description اختصاصی داشته باشید
• تصویر OG باید 1200×630 پیکسل و در مسیر `public/` باشد
• robots: برای صفحاتی که نمی‌خواهید ایندکس شوند، از `noindex` استفاده کنید
• Open Graph و Twitter Cards: برای نمایش بهتر در شبکه‌های اجتماعی ضروری هستند

مرحله ۲: ایجاد robots.txt

فایل robots.txt به موتورهای جستجو می‌گوید کدام صفحات را ایندکس کنند و کدام را نه.

در پوشه `public/` فایل `robots.txt` را بسازید:

User-agent: *
Allow: /

Sitemap: https://your-domain.com/sitemap.xml
Host: https://your-domain.com

پس از دیپلوی، تست کنید: `https://your-domain.com/robots.txt`

مرحله ۳: ساخت خودکار sitemap با next-sitemap

sitemap به گوگل کمک می‌کند تمام صفحات سایت شما را پیدا کند. با استفاده از `next-sitemap` می‌توانید به صورت خودکار sitemap تولید کنید.

• نصب: `npm install next-sitemap`
• ساخت فایل پیکربندی `next-sitemap.config.js` در ریشه پروژه
• افزودن اسکریپت در `package.json`
• اجرای build

فایل پیکربندی `next-sitemap.config.js`:

module.exports = {
  siteUrl: 'https://your-domain.com',
  generateRobotsTxt: true,
  outDir: 'public',
  changefreq: 'weekly',
  priority: 0.7,
};

افزودن اسکریپت در `package.json`:

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap"
}

فایل‌های `sitemap.xml` و `robots.txt` به‌صورت خودکار در `public/` ایجاد می‌شوند. پس از دیپلوی، آدرس sitemap را تست کنید: `https://your-domain.com/sitemap.xml`

مرحله ۴: ثبت سایت در Google Search Console

بعد از ساخت sitemap و robots.txt، باید سایت را در Google Search Console ثبت کنید. این ابزار اصلی برای مدیریت و مانیتورینگ سایت در گوگل است.

• اضافه‌کردن یک Property از نوع Domain
• دریافت رکورد TXT از گوگل مثل: `google-site-verification=XXXX`
• ثبت این TXT در DNS دامنه
• تایید در Search Console
• ارسال sitemap در بخش Sitemaps

بعد از تایید می‌توانید وضعیت ایندکس صفحات را بررسی کنید و برای صفحات مهم Request Indexing بزنید.

مرحله ۵: بهینه‌سازی تصاویر - تأثیر مستقیم روی سرعت

تصاویر بزرگ یکی از اصلی‌ترین دلایل کند شدن سایت هستند. Next.js با کامپوننت `Image` این مشکل را حل کرده است.

• همیشه از `next/image` استفاده کنید (نه تگ `<img>` معمولی)
• فرمت WebP: Next.js به صورت خودکار تصاویر را به WebP تبدیل می‌کند (حجم کمتر)
• Lazy Loading: تصاویر فقط وقتی بارگذاری می‌شوند که کاربر به آن‌ها نزدیک شود
• اندازه مناسب: تصاویر را قبل از آپلود به اندازه مناسب برش دهید
• Alt Text: همیشه متن جایگزین برای تصاویر بنویسید (برای SEO و دسترسی‌پذیری)

مثال:

<Image
  src="/blog-image.jpg"
  alt="توضیحات تصویر"
  width={1200}
  height={630}
  priority={true} // برای تصویر اصلی صفحه
/>

مرحله ۶: ساختار URL - ساده و خوانا

URL های ساده و واضح هم برای کاربران و هم برای گوگل بهتر است.

• از کلمات فارسی یا انگلیسی واضح استفاده کنید
• از کاراکترهای خاص و اعداد پیچیده پرهیز کنید
• URL را کوتاه نگه دارید
• از خط تیره (-) برای جدا کردن کلمات استفاده کنید

مثال خوب: `/blog/آموزش-nextjs`

مثال بد: `/blog/post?id=123&cat=tech`

مرحله ۷: اضافه‌کردن JSON-LD (Schema.org)

این کار باعث می‌شود گوگل بهتر ماهیت سایت را بفهمد. مثال برای یک پروفایل شخصی:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Your Name",
      "alternateName": "Your English Name",
      "url": "https://your-domain.com",
      "image": "https://your-domain.com/icon.png",
      "jobTitle": "عنوان شغلی",
      "description": "توضیح مختصر.",
      "sameAs": [
        "https://linkedin.com/your-profile",
        "https://github.com/your-profile"
      ]
    })
  }}
/>

محل قرارگیری: داخل `<head>` در فایل `app/layout.js`.

مرحله ۸: اضافه‌کردن favicon / icon

favicon و icon ها برای شناسایی بهتر سایت در تب مرورگر و بوکمارک‌ها مهم هستند.

• فایل `icon.png` (512×512 پیکسل) را در پوشه `public/` بگذارید
• در metadata آن را معرفی کنید (همانطور که در مرحله ۱ دیدیم)
• مطمئن شوید آدرس آن در JSON-LD نیز استفاده شده باشد

مرحله ۹: بهینه‌سازی فونت‌ها

فونت‌های بزرگ می‌توانند سرعت سایت را کند کنند. در Next.js از `next/font` استفاده کنید:

• فونت‌ها به صورت خودکار بهینه می‌شوند
• از فونت‌های سیستم استفاده کنید (سریع‌تر)
• اگر از فونت سفارشی استفاده می‌کنید، از `display: swap` استفاده کنید

مرحله ۱۰: بهینه‌سازی JavaScript

• از Dynamic Import استفاده کنید برای کامپوننت‌های بزرگ
• کدهای غیرضروری را حذف کنید (Tree Shaking)
• از Code Splitting استفاده کنید

مثال Dynamic Import:

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>در حال بارگذاری...</p>
})

مرحله ۱۱: Core Web Vitals - معیارهای عملکرد

گوگل از سه معیار اصلی برای سنجش کیفیت سایت استفاده می‌کند. این معیارها تأثیر مستقیمی روی رتبه سایت شما دارند:

• LCP (Largest Contentful Paint): زمان بارگذاری محتوای اصلی صفحه (باید کمتر از 2.5 ثانیه باشد)
• FID (First Input Delay): زمان پاسخ به اولین کلیک کاربر (باید کمتر از 100 میلی‌ثانیه باشد)
• CLS (Cumulative Layout Shift): میزان جابجایی عناصر صفحه (باید کمتر از 0.1 باشد)

چطور بهبود دهیم:

• LCP: تصویر اصلی را با `priority` بارگذاری کنید، از فونت‌های بهینه استفاده کنید، از CDN استفاده کنید
• FID: JavaScript را بهینه کنید، از Code Splitting استفاده کنید، از Dynamic Import برای کامپوننت‌های بزرگ استفاده کنید
• CLS: برای تصاویر و ویدیوها width و height مشخص کنید، از فونت‌های بهینه استفاده کنید، از CSS برای رزرو فضا استفاده کنید

مرحله ۱۲: صفحات و محتوای بهینه‌شده

• هر صفحه یک H1 مشخص داشته باشد
• توضیحات هر صفحه حداقل ۳۰۰–۸۰۰ کلمه باشد
• کلیدواژه‌های مرتبط را طبیعی در متن استفاده کنید (فارسی و انگلیسی)
• تصاویر با `next/image` و دارای alt باشند

مرحله ۱۳: لینک‌سازی و حضور در شبکه‌های اجتماعی

• لینک سایت را در پروفایل‌های اجتماعی و رزومه قرار دهید
• یک پست معرفی سایت در شبکه‌های اجتماعی منتشر کنید
• اگر بلاگ دارید، لینک‌سازی داخلی و خارجی ایجاد کنید

مرحله ۱۴: تست و مانیتورینگ

بعد از انجام تمام مراحل، باید سایت را تست کنید:

• Google Search Console → URL Inspection: برای بررسی ایندکس شدن صفحات و Request Indexing برای صفحات مهم
• Google PageSpeed Insights: برای بررسی سرعت و Core Web Vitals (https://pagespeed.web.dev/)
• Lighthouse: ابزار Chrome DevTools (F12 → Lighthouse) برای بررسی کامل SEO، Performance، Accessibility و Best Practices
• Rich Results Test: بررسی صحت JSON-LD (https://search.google.com/test/rich-results)
• Facebook Sharing Debugger: بررسی و رفرش کردن OG image (https://developers.facebook.com/tools/debug/)
• Twitter Card Validator: بررسی کارت اشتراک لینک (https://cards-dev.twitter.com/validator)
• Mobile-Friendly Test: برای اطمینان از سازگاری با موبایل (https://search.google.com/test/mobile-friendly)

چک‌لیست نهایی

• ✅ سایت در Search Console ثبت و تایید شده
• ✅ sitemap.xml تولید و در Search Console ارسال شده
• ✅ robots.txt درست کار می‌کند
• ✅ metadata کامل برای تمام صفحات تنظیم شده
• ✅ OG image با اندازه 1200×630 پیکسل آماده شده
• ✅ JSON-LD برای صفحات مهم اضافه شده
• ✅ favicon در public/icon.png قرار دارد
• ✅ صفحات دارای H1 و محتوای کافی (حداقل 300 کلمه)
• ✅ تصاویر با next/image و alt text بهینه شده‌اند
• ✅ فونت‌ها با next/font بهینه شده‌اند
• ✅ Core Web Vitals در حد قابل قبول است
• ✅ PageSpeed Insights بدون هشدارهای مهم است
• ✅ لینک‌سازی خارجی انجام شده

نتیجه‌گیری

بهینه‌سازی سئو یک فرایند مداوم است. با انجام این مراحل، پایه محکمی برای سئوی سایت خود ایجاد می‌کنید. یادتان باشد که گوگل چند هفته تا چند ماه زمان می‌برد تا تغییرات را ببیند و ایندکس کند، پس صبور باشید و به طور منظم وضعیت سایت را در Search Console بررسی کنید.

نکته مهم: سئو یک فرایند بلندمدت است. با رعایت این نکات و تولید محتوای باکیفیت، به مرور زمان رتبه سایت شما بهبود خواهد یافت.