سئوی تکنیکال با Next.js؛ چک‌لیست عملی برای رتبه گرفتن

TL;DR — سئوی تکنیکال در Next.js پنج کار است: متادیتای یکتا با generateMetadata، Core Web Vitals سبز، اسکیمای درست، سایت‌مپ و robots، و رندر سمت سرور برای محتوای ایندکس‌شدنی. سئو دو نیمه دارد: محتوا و تکنیکال. محتوا را کارشناس محتوا می‌نویسد؛ اما اگر نیمه تکنیکال خراب باشد، بهترین مقاله دنیا هم دیده نمی‌شود. بارها دیده‌ام کسب‌وکارهایی که محتوای عالی تولید کرده‌اند ولی به‌خاطر مشکلات فنی — سرعت پایین، متادیتای تکراری یا نقشه سایت ناقص — هرگز به صفحه اول گوگل نرسیده‌اند. در این پست چک‌لیستی از کارهایی می‌گذارم که در هر پروژه Next.js برای سئوی تکنیکال انجام می‌دهم — بدون پیچیدگی اضافه، ولی با نگاهی به نتیجه تجاری.

چرا این چک‌لیست مهم است؟ چون سئوی تکنیکال زیرساخت اعتماد گوگل است. اگر گوگل نتواند سایت شما را سریع بخزد، بفهمد هر صفحه درباره چیست و کدام نسخه کانونیکال است، بودجه خزش را هدر می‌دهد و رتبه شما افت می‌کند. با Next.js می‌توانیم این زیرساخت را از روز اول درست بنا کنیم، نه بعداً با وصله و پینه.

۱. متادیتای کامل و منحصربه‌فرد در هر صفحه

در Next.js App Router، تابع generateMetadata به شما اجازه می‌دهد برای هر صفحه عنوان، توضیحات و URL کانونیکال بسازید. سه قانون ساده که همیشه رعایت می‌کنم:

• هر صفحه یک عنوان یکتا با کلمه کلیدی اصلی — نه کپی بین صفحات
• توضیحات متا که واقعاً انگیزه کلیک می‌دهد، نه پر کردن کلمات کلیدی
• کانونیکال درست، مخصوصاً وقتی نسخه‌های زبانی دارید

برای سایت‌های چندزبانه، alternates.languages را فراموش نکنید؛ همین تگ ساده hreflang به گوگل می‌گوید هر زبان برای کدام مخاطب است. مثلاً صفحه فارسی با fa-IR و انگلیسی با en-US باید متقابل به هم اشاره کنند. بدون hreflang، گوگل ممکن است نسخه اشتباه را به کاربر نشان دهد و نرخ پرش بالا برود.

نکته اجرایی: عنوان را زیر ۶۰ کاراکتر و توضیحات را ۱۴۰ تا ۱۶۰ کاراکتر نگه دارید. از متغیرهای داینامیک برای صفحات محصول یا بلاگ استفاده کنید — مثلاً «{نام محصول} | خرید آنلاین {دسته} | {برند}» — تا مقیاس‌پذیر بمانید. و حتماً openGraph و twitter را هم در generateMetadata پر کنید؛ اشتراک‌گذاری در شبکه‌های اجتماعی سیگنال غیرمستقیم اما مهمی برای دیده شدن است.

۲. سرعت: بزرگ‌ترین برنده سئو

گوگل با Core Web Vitals سرعت را می‌سنجد. سه عدد مهم که هر هفته در Search Console چک می‌کنم:

• LCP (بزرگ‌ترین المان محتوایی) زیر ۲.۵ ثانیه
• CLS (پرش چیدمان) زیر ۰.۱
• INP (زمان واکنش به تعامل) زیر ۲۰۰ میلی‌ثانیه

در طراحی سایت مدرن با Next.js، این‌ها را با چند عادت درست می‌کنید:

• استفاده از next/image برای همه تصاویر — سایز خودکار، lazy loading، فرمت مدرن AVIF/WebP و priority فقط برای تصویر هیرو
• فونت با next/font — بدون FOUT و بدون درخواست اضافه، با display: optional برای جلوگیری از جابه‌جایی
• کامپوننت‌های کلاینت را کوچک نگه دارید؛ هر چیزی که تعامل ندارد، سرور رندر شود. هر کیلوبایت جاوااسکریپت اضافی، INP را بدتر می‌کند
• کش هوشمند: fetch با revalidate و Route Segment Config برای صفحات نیمه‌پویا

از دید بازاریابی، سرعت مستقیماً روی تبدیل اثر می‌گذارد. طبق داده‌های گوگل، هر ۰.۱ ثانیه تأخیر در LCP می‌تواند نرخ تبدیل را تا ۸٪ کاهش دهد. کاربری که ۴ ثانیه منتظر بماند، قبل از دیدن پیشنهاد شما سایت را می‌بندد. برای همین سرعت را نه به‌عنوان یک عدد فنی، بلکه به‌عنوان اولین قدم قیف فروش می‌بینم.

برای پایش، از Lighthouse CI در هر پول‌ریکوئست و از Vercel Analytics یا CrUX برای داده واقعی کاربران استفاده کنید. عدد آزمایشگاهی خوب است، ولی عدد میدانی (field data) است که رتبه را تعیین می‌کند.

۳. داده‌های ساختاریافته (Schema)

داده ساختاریافته زبان مشترک شما و گوگل است. با JSON-LD به گوگل می‌گویید «این صفحه درباره چه چیزی است» و شانس گرفتن نتایج غنی (Rich Results) را بالا می‌برید:

• کسب‌وکار محلی: LocalBusiness یا ProfessionalService با آدرس، ساعت کاری و امتیاز
• مقالات: Article با تاریخ انتشار، نویسنده و تصویر اصلی
• سوالات متداول: FAQPage — شانس نمایش آکاردئونی در نتایج
• مسیر راهنما: BreadcrumbList برای نمایش مسیر در اسنیپت

پیاده‌سازی‌اش ساده است: یک تگ اسکریپت با JSON در کامپوننت سرور. مثلاً در صفحه بلاگ، Article را با headline، image و author پر می‌کنم و در صفحه تماس، ProfessionalService را با address و telephone. این داده‌ها به گوگل کمک می‌کند موجودیت شما را بشناسد و در Knowledge Graph بهتر نمایش دهد.

اشتباه رایج: کپی کردن یک اسکیمای عمومی برای همه صفحات. هر صفحه باید اسکیمای مخصوص خودش را داشته باشد و مقادیرش دقیقاً با محتوای قابل مشاهده مطابقت کند؛ وگرنه گوگل آن را نادیده می‌گیرد.

۴. نقشه سایت و robots؛ دو فایل کوچک با اثر بزرگ

دو فایل کوچک که خیلی فرق می‌سازند و اغلب فراموش می‌شوند:

• sitemap.ts در Next.js همه URLهای مهم را با تاریخ آخرین تغییر به گوگل معرفی می‌کند. فقط صفحات ایندکس‌شدنی را بگذارید — صفحات ۴۰۴، پیش‌نویس‌ها و پارامترهای فیلتر را حذف کنید
• robots.ts می‌گوید چه چیزی ایندکس شود و نقشه سایت کجاست. برای محیط استیجینگ، Disallow: / بگذارید تا نسخه تستی ایندکس نشود

برای سایت‌های بزرگ، سایت‌مپ را به چند فایل تقسیم کنید و sitemap index بسازید. و حتماً در Search Console، سایت‌مپ را ثبت و خطاهای Coverage را هفته‌ای یک‌بار چک کنید. یک URL که در سایت‌مپ هست ولی کانونیکالش به جای دیگری اشاره می‌کند، سیگنال متناقض می‌فرستد.

۵. رندرینگ، ایندکس‌پذیری و تجربه خزش

Next.js بین SSR، SSG و ISR تعادل عالی می‌دهد. برای سئو، قانون من این است: هر چیزی که باید ایندکس شود، باید در HTML اولیه باشد — نه بعد از هیدراته شدن جاوااسکریپت. پس:

• محتوای اصلی، هدینگ‌ها و لینک‌های داخلی را در سرور رندر کنید
• از loading.tsx و Suspense برای بهبود درک خزنده از ساختار استفاده کنید، نه برای پنهان کردن محتوا
• لینک‌های داخلی را با <Link> واقعی بسازید، نه onClick روی div
• صفحات ۴۰۴ و ریدایرکت‌ها را با notFound() و redirect() مدیریت کنید تا کد وضعیت درست برگردد

همچنین canonical، noindex برای صفحات کم‌ارزش (مثل نتایج جستجوی داخلی) و hreflang را به‌صورت خودکار از روی locale بسازید. این نظم باعث می‌شود بودجه خزش روی صفحات پول‌ساز متمرکز بماند.

۶. طراحی سایت و سئو دو روی یک سکه‌اند

اینجا جایی است که نگاه فنی به بازاریابی گره می‌خورد. در پروژه‌های واقعی، سئوی تکنیکال بدون طراحی درست ناقص است. چیدمان بصری، سلسله‌مراتب هدینگ و حتی جای دکمه تماس روی نرخ خزش و تبدیل اثر می‌گذارد. مثلاً اگر هدینگ H1 تکراری باشد یا محتوای مهم داخل تب‌های بسته بماند، گوگل اهمیت آن را کمتر می‌فهمد.

وقتی معماری را از ابتدا سئو-محور پیش می‌بریم، هر بخش یک هدف دارد: هیرو پیام اصلی را در ۵ ثانیه می‌رساند، بخش خدمات با اسکیمای درست نشانه‌گذاری می‌شود، بلاگ به‌صورت خوشه‌های موضوعی به هم لینک می‌دهد و فوتر راه دسترسی به صفحات مهم را کوتاه می‌کند. نتیجه؟ کاربر سریع‌تر قانع می‌شود و گوگل سریع‌تر می‌فهمد شما برای کدام کوئری باید رتبه بگیرید.

برای کسب‌وکارها این یعنی سئو هزینه نیست، سرمایه‌گذاری است. یک بار معماری درست می‌سازید و ماه‌ها بدون هزینه تبلیغات، ورودی ارگانیک می‌گیرید — به شرطی که تکنیکال و طراحی از روز اول هماهنگ باشند.

۷. محتوای واقعی، هنوز پادشاه است

سئوی تکنیکال در را باز می‌کند؛ محتوا مهمان را نگه می‌دارد. یک بلاگ فعال که سوال‌های واقعی مشتری‌ها را جواب می‌دهد، قوی‌ترین ابزار رتبه‌گیری بلندمدت است — و با Next.js می‌توانید آن را با MDX یا هر هدلس CMS مدیریت کنید.

برای هر خوشه موضوعی، یک صفحه ستون (Pillar) بسازید و مقالات فرعی را با انکر طبیعی به آن لینک دهید. عنوان‌ها را سوالی بنویسید — دقیقاً همان چیزی که کاربر سرچ می‌کند — و در ابتدای هر مقاله جواب کوتاه بدهید، بعد جزئیات. این الگو هم برای کاربر خوب است و هم شانس گرفتن Featured Snippet را بالا می‌برد.

۸. چک‌لیست نهایی قبل از انتشار

قبل از هر دیپلوی، این ۱۰ مورد را تیک می‌زنم:

1. عنوان، توضیحات و کانونیکال یکتا
2. hreflang متقابل برای فارسی/انگلیسی
3. تصاویر با next/image و alt توصیفی
4. فونت با next/font و بدون لود خارجی
5. JSON-LD معتبر (تست با Rich Results Test)
6. سایت‌مپ و robots بدون URL زائد
7. هدینگ H1 یکتا و سلسله‌مراتب H2/H3 منطقی
8. لینک‌های داخلی توصیفی (نه «اینجا کلیک کنید»)
9. Core Web Vitals سبز در PageSpeed Insights
10. ۴۰۴ سفارشی و ریدایرکت ۳۰۱ برای URLهای قدیمی

جمع‌بندی

سئوی تکنیکال جادو نیست؛ مجموعه‌ای از کارهای درست و قابل تکرار است که وقتی با طراحی درست همراه شود، هم رتبه می‌آورد و هم مشتری. اگر به فکر طراحی سایت حرفه‌ای با Next.js هستید و می‌خواهید از روز اول سئو در معماری باشد — نه بعداً به‌عنوان وصله — خوشحال می‌شوم کمک کنم. در DevArt سئو را از وایرفریم تا دیپلوی در پروژه می‌بافم تا سایت شما از همان هفته اول برای گوگل قابل فهم و برای کاربر قابل اعتماد باشد.

آماده‌اید رتبه بگیرید؟ برآورد رایگان سایتت رو بگیر — در ۴۸ ساعت گزارش اولیه و نقشه راه را می‌فرستم، بدون تعهد و با پیشنهاد شفاف برای قدم بعدی.

کدام ابزار Next.js کدام کار را انجام می‌دهد

| نیاز سئو | ابزار در Next.js | نکته‌ای که معمولاً فراموش می‌شود | |---|---|---| | عنوان، توضیحات، کانونیکال، Open Graph | generateMetadata در layout.js یا page.js | فقط در Server Component کار می‌کند و در همان روت ارسال می‌شود، نه بعد از هیدریت | | زبان‌های مختلف یک صفحه | alternates.languages | هر زبان باید به زبان دیگر هم اشاره کند | | سایت‌مپ | sitemap.ts در روت | فقط صفحات ایندکس‌شدنی را برگردانید | | robots و مسیر سایت‌مپ | robots.ts در روت | برای نسخه استیجینگ، Disallow: / بگذارید | | رندر محتوای اصلی | Server Component پیش‌فرض | محتوای پشت use client یا پشت دکمه «بیشتر»، دیر خزیده می‌شود | | اسکیمای JSON-LD | تگ اسکریپت در کامپوننت سرور | مقادیر باید دقیقاً با محتوای قابل مشاهده یکی باشند |

چک‌لیست پیش از انتشار

• [ ] generateMetadata در همه مسیرهای محتوایی صادر شده و خروجی آن را در HTML اولیه می‌بینید.
• [ ] هر صفحه یک H1 دارد و سلسله‌مراتب H2/H3 منطقی است.
• [ ] alternates.languages برای هر جفت زبان تعریف شده و کانونیکال درست است.
• [ ] تصاویر با next/image و متن alt توصیفی بارگذاری می‌شوند.
• [ ] فونت با next/font بارگذاری می‌شود و درخواست خارجی نمی‌فرستد.
• [ ] JSON-LD با Rich Results Test اعتبارسنجی شده است.
• [ ] سایت‌مپ فقط URLهای ایندکس‌شدنی را برمی‌گرداند و robots به سایت‌مپ اشاره می‌کند.
• [ ] لینک‌های داخلی با کامپوننت لینک واقعی ساخته شده‌اند، نه رویداد کلیک روی یک عنصر بی‌معنا.
• [ ] صفحه ۴۰۴ اختصاصی و ریدایرکت دائمی برای URLهای قدیمی وجود دارد.
• [ ] داده میدانی Core Web Vitals را در سرچ کنسول بررسی کرده‌اید، نه فقط نتیجه آزمایشگاهی.

سوالات پرتکرار

Q: چرا متادیتای من در کد HTML هست ولی در مرورگر نه؟

تقریباً همیشه یکی از این سه دلیل است: یا فایل یک Client Component است، یا از Pages Router به‌جای App Router استفاده می‌کنید، یا متادیتا را از یک لایه پایین‌تر ارث برده‌اید بدون این‌که مقداردهی کنید. metadata و generateMetadata فقط در Server Component پشتیبانی می‌شوند، و اگر کامپوننت سمت سرور باشد متادیتا در پاسخ HTML اولیه قرار می‌گیرد. همیشه خروجی سورس صفحه را چک کنید، نه فقط تب Elements.

Q: سایت‌مپ و robots را دستی بنویسم یا کد؟

در Next.js هر دو با یک فایل در روت ساخته می‌شوند: sitemap.ts و robots.ts. مزیتش این است که خروجی از محتوای واقعی ساخته می‌شود و با هر انتشار به‌روز می‌ماند، بدون این‌که کسی یادش بماند فایل XML را ویرایش کند. تنها جایی که دستی‌نویسی منطقی است، فایل‌های استاتیک خیلی کوچک است.

Q: چقدر طول می‌کشد تا اثر این کارها دیده شود؟

گوگل می‌گوید هر تغییری ممکن است از چند ساعت تا چند ماه طول بکشد تا در نتایج منعکس شود، و توصیه می‌کند چند هفته صبر کنید و بعد ارزیابی کنید. نکته مهم‌تر این است که سئوی تکنیکال تضمین رتبه نیست؛ در را باز می‌کند. محتوایی که واقعاً به سؤال مشتری جواب بدهد، همان چیزی است که می‌ماند.

منابع

• Next.js documentation — Functions: generateMetadata
• Google Search Central — Introduction to structured data markup
• Google Search Central — SEO Starter Guide: The Basics
• web.dev — Web Vitals (Core Web Vitals thresholds: LCP, INP, CLS)
• Stack Overflow — Next.js App Router generateMetadata not working, only client component renders