فریمورک Next.js یکی از محبوب‌ترین فریم‌ورک‌های ساخت سایت با React است و دلیل اصلی محبوبیتش برای سایت‌های محتوایی این است که صفحات را می‌تواند روی سرور رندر کند. اما استفاده از Next.js به‌تنهایی سئو را تضمین نمی‌کند؛ باید بدانید کدام قابلیت‌ها را چطور تنظیم کنید.
در این آموزش، به‌جای مرور همه قابلیت‌های Next.js، فقط روی چیزهایی تمرکز می‌کنیم که برای سئو مهم‌اند. نمونه‌ها بر پایه App Router (پوشه app) در نسخه‌های جدید Next.js نوشته شده‌اند. چون API فریمورک مرتب تغییر می‌کند، قبل از پیاده‌سازی نهایی مستندات رسمی نسخه خودتان را هم نگاه کنید.
چرا Next.js برای سئو مناسب است؟
در سایت‌های React کلاسیک که فقط سمت کاربر رندر می‌شوند، مرورگر ابتدا یک HTML تقریباً خالی دریافت می‌کند و محتوا بعد از اجرای جاوااسکریپت ساخته می‌شود. گوگل می‌تواند جاوااسکریپت را اجرا کند، اما این کار زمان‌برتر است و ریسک خطا و تأخیر در ایندکس را بالا می‌برد. Next.js این امکان را می‌دهد که HTML کامل و آماده از سرور ارسال شود.
- HTML کامل در پاسخ اول، مناسب برای خزش و ایندکس
- مدیریت متادیتای هر صفحه با ابزارهای داخلی
- بهینه‌سازی خودکار تصویر و فونت برای سرعت بهتر
- امکان تولید نقشه سایت و robots به‌صورت برنامه‌نویسی‌شده
- مسیریابی مبتنی بر فایل که ساختار URL تمیز می‌سازد
انتخاب روش رندر: SSG، SSR یا ISR؟
|
روش |
چطور کار می‌کند؟ |
مناسب برای |
|
SSG (تولید ایستا) |
صفحه در زمان بیلد ساخته و به‌صورت فایل آماده سرو می‌شود |
مقالات، صفحات معرفی، مستندات |
|
SSR (رندر سمت سرور) |
در هر درخواست، صفحه روی سرور ساخته می‌شود |
صفحاتی که داده‌شان مرتب تغییر می‌کند یا شخصی‌سازی دارند |
|
ISR (بازسازی تدریجی) |
صفحه ایستا است اما بعد از بازه زمانی مشخص یا با درخواست، دوباره ساخته می‌شود |
وبلاگ بزرگ، فروشگاه، صفحاتی که گاهی به‌روز می‌شوند |
برای بیشتر صفحات محتوایی، قاعده ساده این است: تا جای ممکن ایستا یا نیمه‌ایستا (SSG/ISR) بسازید، چون سریع‌تر و پایدارتر است و سرعت هم بخشی از تجربه صفحه محسوب می‌شود. فقط وقتی واقعاً لازم است سراغ رندر در هر درخواست بروید.
تنظیم متادیتا با App Router
برای صفحه‌های ثابت می‌توانید یک آبجکت metadata صادر کنید:
// app/about/page.tsx
export const metadata = {
title: 'درباره ما | نوین ورز',
description: 'توضیح کوتاه و منحصربه‌فرد درباره این صفحه',
alternates: { canonical: '/about' },
};
export default function AboutPage() {
return <h1>درباره ما</h1>;
}
برای صفحه‌های پویا (مثلاً هر مقاله) از تابع generateMetadata استفاده کنید تا عنوان و توضیحات از روی داده خود مقاله ساخته شود:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const { slug } = await params;
const post = await getPost(slug);
return {
title: post.seoTitle,
description: post.metaDescription,
alternates: { canonical: `/blog/${slug}` },
openGraph: {
title: post.seoTitle,
description: post.metaDescription,
type: 'article',
},
};
}
توجه: در نسخه‌های جدید Next.js پارامترهای params ممکن است به‌صورت Promise ارائه شوند و باید await شوند. مطابق مستندات نسخه نصب‌شده خودتان عمل کنید.
چند اصل مهم برای عنوان و توضیحات
- هر صفحه عنوان و توضیحات منحصربه‌فرد داشته باشد؛ تکراری‌بودن آن‌ها یک اشتباه رایج در سایت‌های ساخته‌شده با قالب است.
- عنوان را کوتاه و مفید بنویسید و کلمه اصلی را طبیعی در آن بیاورید.
- توضیحات را مثل یک پیشنهاد کلیک بنویسید، نه یک فهرست کلمات.
- برای زبان فارسی، در تگ html مقدار lang و dir را درست تنظیم کنید.
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="fa" dir="rtl">
<body>{children}</body>
</html>
);
}
Canonical و جلوگیری از محتوای تکراری
اگر یک صفحه با چند آدرس قابل دسترسی باشد (مثلاً با پارامترهای UTM یا فیلتر)، گوگل ممکن است آن‌ها را نسخه‌های جداگانه ببیند. با alternates.canonical مشخص کنید نسخه اصلی کدام است. همچنین یکی از دو حالت «با اسلش پایانی» یا «بدون اسلش پایانی» را برای کل سایت ثابت نگه دارید.
ساخت sitemap.xml و robots.txt
Next.js اجازه می‌دهد نقشه سایت و robots را با کد بسازید و به‌صورت خودکار با محتوای جدید هماهنگ نگه دارید:
// app/sitemap.ts
export default async function sitemap() {
const posts = await getAllPosts();
return posts.map((p) => ({
url: `https://example.com/blog/${p.slug}`,
lastModified: p.updatedAt,
}));
}
// app/robots.ts
export default function robots() {
return {
rules: { userAgent: '*', allow: '/', disallow: ['/admin/'] },
sitemap: 'https://example.com/sitemap.xml',
};
}
بعد از انتشار، آدرس نقشه سایت را در Google Search Console ثبت کنید و گاهی وضعیت آن را بررسی کنید. فقط صفحاتی را در نقشه بگذارید که واقعاً می‌خواهید ایندکس شوند.
تصاویر و فونت: سرعت بیشتر، سئوی بهتر
- کامپوننت Image: تصاویر را در اندازه مناسب و فرمت‌های بهینه ارائه می‌دهد و با تعیین ابعاد از جابه‌جایی ناگهانی چیدمان (CLS) جلوگیری می‌کند.
- متن جایگزین (alt): برای هر تصویر مهم، توضیح واقعی و کوتاه بنویسید؛ هم برای دسترس‌پذیری و هم برای فهم موضوع تصویر.
- تصویر اصلی بالای صفحه: اگر تصویر اصلی (LCP) است، با اولویت بارگذاری شود و lazy-load نشود.
- next/font: فونت را به‌صورت بهینه بارگذاری می‌کند و از پرش متن هنگام لود فونت می‌کاهد. برای فونت‌های فارسی هم مسیر محلی (local) را می‌توان استفاده کرد.
داده ساخت یافته (Schema) با JSON-LD
داده ساخت‌یافته به گوگل کمک می‌کند نوع محتوا را دقیق‌تر بفهمد (مقاله، سوالات متداول، مسیر ناوبری و غیره). در Next.js معمولاً یک تگ script از نوع application/ld+json داخل صفحه قرار می‌دهند:
// داخل کامپوننت صفحه مقاله
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: post.title,
datePublished: post.publishedAt,
dateModified: post.updatedAt,
author: { '@type': 'Person', name: post.authorName },
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
);
بعد از پیاده‌سازی با ابزار Rich Results Test یا Schema Markup Validator بررسی کنید که خطایی وجود نداشته باشد. توجه کنید داده ساخت‌یافته تضمینی برای نمایش نتیجه ویژه نیست؛ فقط شرط لازم است.
لینک دهی داخلی و ساختار آدرس ها
- برای لینک بین صفحات از کامپوننت Link استفاده کنید که در HTML نهایی یک تگ a واقعی تولید می‌کند و ربات‌ها می‌توانند آن را دنبال کنند.
- ناوبری حیاتی را فقط با رویداد کلیک جاوااسکریپتی نسازید؛ لینک باید یک آدرس href واقعی داشته باشد.
- آدرس‌ها کوتاه، خوانا و پایدار باشند و بعد از انتشار بدون ریدایرکت تغییر نکنند.
- برای صفحات حذف‌شده یا جابه‌جاشده ریدایرکت دائمی (۳۰۱) تنظیم کنید.
- صفحه ۴۰۴ واقعی بدهید و صفحه‌های حذف‌شده را با پاسخ ۲۰۰ و پیام «پیدا نشد» نمایش ندهید؛ این همان مشکلی است که به‌نام Soft 404 در Search Console گزارش می‌شود.
چک لیست سئوی پروژه Next.js قبل از انتشار
- محتوای اصلی هر صفحه در HTML اولیه (View Source) دیده می‌شود.
- عنوان و توضیحات منحصربه‌فرد برای همه صفحات مهم تنظیم شده است.
- ویژگی lang و dir در تگ html درست است.
- canonical برای صفحات اصلی و صفحات دارای پارامتر تنظیم شده است.
- xml و robots.txt ساخته و در Search Console ثبت شده‌اند.
- هر صفحه فقط یک H1 دارد و ساختار هدینگ منطقی است.
- تصاویر ابعاد و متن جایگزین دارند و تصویر اصلی با اولویت لود می‌شود.
- ریدایرکت‌ها، صفحه ۴۰۴ و وضعیت‌های HTTP بررسی شده‌اند.
- Core Web Vitals با PageSpeed Insights و داده‌های واقعی بررسی شده است.
- داده ساخت‌یافته بدون خطا است.
اشتباهات رایج سئو در پروژه های Next.js
- رندر کردن محتوای اصلی فقط در سمت کاربر بعد از fetch
- استفاده از یک عنوان و توضیحات یکسان برای همه صفحات
- قراردادن صفحات پیش‌نمایش یا محیط تست در دسترس ایندکس
- بستن اشتباه همه صفحات با robots یا noindex هنگام انتقال از محیط آزمایشی به محیط اصلی
- نبود canonical برای آدرس‌های فیلتر و جستجو
سوالات متداول
آیا Next.js به تنهایی سئو را حل می کند؟
خیر. Next.js ابزارهای خوبی می‌دهد، اما محتوای مفید، ساختار درست، سرعت و لینک‌دهی همچنان کار شماست.
برای یادگیری سئو از کجا شروع کنیم؟
پیشنهاد می‌کنیم قبل از ورود به جزئیات فنی، ابتدا مفهوم کلی را مرور کنید و بعد سراغ تولید محتوا و سئو فنی بروید. مقاله «سئو چیست» ، «سئو فنی» ، «ابزارهای سئو» و «Core Web Vitals و تجربه صفحه» در همین سایت نوین ورز مسیر مناسبی برای شروع هستند.
برای سئو SSR بهتر است یا SSG؟
برای محتوای ثابت SSG یا ISR معمولاً سریع‌تر و ساده‌تر است؛ SSR وقتی لازم است که داده در هر درخواست متفاوت باشد.
آیا گوگل سایت های React را ایندکس می کند؟
بله، گوگل می‌تواند جاوااسکریپت را اجرا کند، اما ارائه HTML کامل از سرور خطر تأخیر و خطا را کم می‌کند.
از کجا بفهمم محتوا در HTML اولیه هست؟
در مرورگر گزینه View Page Source را بزنید (نه Inspect) و ببینید متن اصلی صفحه آنجا وجود دارد یا نه.
جمع بندی
Next.js زیرساخت مناسبی برای سایت‌های سئو‌محور فراهم می‌کند، به شرط اینکه رندر سمت سرور، متادیتای منحصربه‌فرد، canonical، نقشه سایت و ایندکس، تصاویر بهینه و داده ساخت‌یافته را درست تنظیم کنید. بعد از هر انتشار با Search Console بررسی کنید که گوگل صفحات را همان‌طور که انتظار دارید می‌بیند.
