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

وقتی یک سایت با Next.js می‌سازید، بخش بزرگی از سئوی فنی را رایگان می‌گیرید: صفحه‌ها روی سرور رندر می‌شوند و خزنده‌ی گوگل بدون اجرای جاوااسکریپت محتوا را می‌بیند. اما «رایگان» به معنی «کامل» نیست. چند تنظیم هست که اگر انجام ندهید، سایت شما هرچقدر هم سریع و تمیز باشد، در نتایج جستجو ضعیف ظاهر می‌شود.

این چک‌لیستی است که ما روی هر پروژه‌ی Next.js اجرا می‌کنیم.

۱. متادیتای اختصاصی برای هر صفحه

رایج‌ترین اشتباه این است که عنوان و توضیح فقط یک‌بار در layout ریشه نوشته شود. نتیجه‌اش این است که همه‌ی صفحه‌های سایت در گوگل با یک عنوان و یک توضیح ظاهر می‌شوند و گوگل هم آن‌ها را نسخه‌های تکراری یکدیگر می‌بیند.

در App Router هر صفحه باید metadata خودش را داشته باشد:

export const metadata: Metadata = {
  title: "طراحی فروشگاه اینترنتی",
  description: "شرح دقیق همین صفحه، نه شرح کلی سایت.",
  alternates: { canonical: "/services/ecommerce" },
};

یک نکته‌ی مهم که خیلی‌ها با آن برخورد می‌کنند: فیلدهای تودرتو مثل openGraph و twitter بین لایه‌ها ادغام نمی‌شوند، جایگزین می‌شوند. اگر یک صفحه فقط openGraph.title را تعریف کند، بقیه‌ی فیلدهای openGraph والد — از جمله تصویر — کلاً حذف می‌شوند و پیش‌نمایش لینک آن صفحه بی‌تصویر می‌ماند. راه‌حل این است که ساخت متادیتا را در یک تابع کمکی متمرکز کنید تا هیچ صفحه‌ای نصفه‌کاره نماند.

۲. canonical روی همه‌ی صفحه‌ها

بدون canonical، یک محتوا از چند نشانی قابل دسترس می‌شود: با و بدون اسلش پایانی، با پارامترهای UTM، روی دامنه‌ی preview و روی دامنه‌ی اصلی. گوگل باید خودش حدس بزند کدام نسخه اصل است و گاهی اشتباه حدس می‌زند.

metadataBase را در layout ریشه تنظیم کنید و بعد در هر صفحه فقط مسیر نسبی را بدهید. صفحه‌ی ۴۰۴ یک استثنای مهم است: اگر canonical را روی آن null نکنید، هر نشانی اشتباهی خودش را نسخه‌ی دیگری از صفحه‌ی خانه معرفی می‌کند.

۳. نقشه‌ی سایت و robots به‌صورت کد

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

export default function sitemap(): MetadataRoute.Sitemap {
  return projects.map((project) => ({
    url: `${siteConfig.url}/work/${project.slug}`,
    lastModified: new Date(),
  }));
}

در robots.ts هم مسیرهای داخلی مثل صفحه‌ی راهنمای سیستم طراحی را ببندید. یک نکته: مسدودکردن مسیر در robots با noindex فرق دارد. اگر صفحه‌ای در robots بسته شود، گوگل نمی‌تواند آن را بخواند و در نتیجه متا تگ noindex آن را هم نمی‌بیند. برای صفحه‌ای که نباید ایندکس شود ولی لینک دارد، از robots: { index: false } در متادیتا استفاده کنید، نه از disallow.

۴. داده‌ی ساختاریافته با ارجاع، نه با تکرار

بیشتر سایت‌ها یک بلوک JSON-LD از نوع Organization در همه‌ی صفحه‌ها تکرار می‌کنند. این کار بد نیست، ولی گوگل از آن چیز زیادی نمی‌فهمد.

کار درست این است که به هر موجودیت یک @id ثابت بدهید و از صفحه‌های دیگر به همان @id ارجاع بدهید:

const ORGANIZATION_ID = "https://example.com/#organization";

// در صفحه‌ی شخصی هر عضو:
{
  "@type": "Person",
  "@id": "https://example.com/team/reza-abdollahi#person",
  name: "رضا عبدالهی",
  worksFor: { "@id": ORGANIZATION_ID },
}

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

۵. یک h1 در هر صفحه، و دقیقاً یکی

ساده به نظر می‌رسد اما در پروژه‌های واقعی زیاد خراب می‌شود، مخصوصاً وقتی کامپوننت سربرگ مشترک در چند جا استفاده می‌شود و خودش h1 رندر می‌کند. سلسله‌مراتب تیترها را جدی بگیرید: h1 موضوع صفحه است، h2 بخش‌های اصلی و h3 زیربخش‌ها. از تیتر برای بزرگ‌کردن متن استفاده نکنید؛ برای آن کلاس CSS هست.

۶. تصویرها: هم برای سرعت، هم برای معنا

از next/image استفاده کنید و برای تصویرهای بالای صفحه priority بگذارید تا در مسیر بحرانی بارگذاری قرار بگیرند. sizes را درست بنویسید، وگرنه مرورگر روی موبایل هم نسخه‌ی دسکتاپ را دانلود می‌کند.

متن جایگزین (alt) را هم توصیفی بنویسید. alt="عکس" هیچ ارزشی ندارد؛ alt="داشبورد مالی پلتفرم Dofixo" هم برای کاربر صفحه‌خوان مفید است هم به گوگل می‌گوید تصویر درباره‌ی چیست.

۷. سرعت واقعی، نه نمره‌ی Lighthouse

نمره‌ی Lighthouse روی لپ‌تاپ شما چیز زیادی ثابت نمی‌کند. آنچه گوگل می‌بیند داده‌ی واقعی کاربران است. سه چیز بیشترین اثر را دارند:

• فونت‌ها: فونت فارسی را به‌صورت محلی و با فرمت woff2 سرو کنید و font-display را طوری تنظیم کنید که متن بلافاصله دیده شود.
• جاوااسکریپت: هر کتابخانه‌ی انیمیشن یا اسکرول که اضافه می‌کنید هزینه دارد. مطمئن شوید محتوای اصلی بدون اجرای آن هم دیده می‌شود.
• پرش چیدمان: برای هر تصویر و هر جای خالی، ابعاد را از قبل رزرو کنید تا صفحه هنگام بارگذاری نپرد.

جمع‌بندی

سئوی فنی کار یک‌باره نیست، ولی برخلاف تصور رایج، کار پیچیده‌ای هم نیست. اگر این هفت مورد را در همان ابتدای پروژه انجام دهید، بعداً لازم نیست دنبال «بهینه‌سازی سئو» به‌عنوان یک پروژه‌ی جداگانه بگردید.

آنچه بعد از این‌ها می‌ماند، محتوا است — و آن دیگر مسئله‌ی کد نیست.