چک‌لیست سئوی Next.js (۲۰۲۵)

در حال بارگذاری پست...

نمونهٔ تنظیم متادیتا در Layout

ابتدا متادیتای پایه را در app/layout.tsx اضافه کنید تا URLهای نسبی (مثل OG image) با metadataBase به آدرس کامل تبدیل شوند.

export const metadata = {
  metadataBase: new URL("https://www.webdesignwithsina.ir"),
  title: { default: "WebDesignBySina", template: "%s | WebDesignBySina" },
  description: "SEO-first websites with Next.js + Django.",
  openGraph: {
    type: "website",
    url: "https://www.webdesignwithsina.ir",
    siteName: "WebDesignBySina",
    images: [{ url: "/og/cover.jpg", width: 1200, height: 630 }]
  },
  twitter: { card: "summary_large_image", images: ["/og/cover.jpg"] }
} as const

Metadata پایه در Layout

canonical مطلق در صفحات داینامیک

برای صفحات پارامتری (مثل بلاگ)، canonical را در generateMetadata به صورت مطلق بسازید.

import type { Metadata } from "next";
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const url = `https://www.webdesignwithsina.ir/blog/${params.slug}`;
  return { alternates: { canonical: url } };
}

تولید canonical مطلق

اگر metadataBase نداری، canonical نسبی نگذار؛ لینک را مطلق بنویس.

robots.txt و sitemap.xml در App Router

از Routeهای مخصوص استفاده کن تا robots.txt و sitemap.xml تولید شوند.

import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/", disallow: "/admin/" },
    sitemap: "https://www.webdesignwithsina.ir/sitemap.xml"
  };
}

robots.txt داینامیک

تولید sitemap

یک سایت‌مپ ساده‌ی استاتیک یا داینامیک بساز.

import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://www.webdesignwithsina.ir";
  return [
    { url: baseUrl, lastModified: new Date(), changeFrequency: "daily", priority: 1.0 },
    { url: `${baseUrl}/blog`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.8 }
  ];
}

سایت‌مپ ساده

داده‌های ساخت‌یافته (JSON-LD)

Organization/WebSite را در Layout و Article را در صفحهٔ بلاگ با <script type="application/ld+json"> اضافه کن.

<script type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "WebDesignBySina",
    "url": "https://www.webdesignwithsina.ir",
    "logo": "https://www.webdesignwithsina.ir/logo.png"
  }) }} />
<script type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify({
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "https://www.webdesignwithsina.ir",
    "name": "WebDesignBySina",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://www.webdesignwithsina.ir/search?query={q}",
      "query-input": "required name=q"
    }
  }) }} />

JSON-LD عمومی سایت

متادیتای مقاله و Article JSON-LD

برای صفحات بلاگ، علاوه‌بر canonical، متادیتای Article و JSON-LD مقاله را هم اضافه کن تا از date و lastModified استفاده شود.

import type { Metadata } from "next";
import { notFound } from "next/navigation";
// فرض: getPost(slug) عنوان/خلاصه/کاور/تاریخ‌ها را می‌دهد
async function getPost(slug: string) {
  // ...
}
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await getPost(params.slug);
  if (!post) return notFound();
  const url = `https://www.webdesignwithsina.ir/blog/${params.slug}`;
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: url },
    openGraph: {
      type: "article",
      url,
      title: post.title,
      description: post.description,
      images: [{ url: post.cover ?? "/og/blog/nexus.webp", width: 1200, height: 630 }],
      publishedTime: post.date,
      modifiedTime: post.lastModified
    },
    twitter: { card: "summary_large_image", title: post.title, description: post.description, images: [post.cover ?? "/og/blog/nexus.webp"] }
  };
}
export default async function Page({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) return notFound();
  return (
    <article>
      {/* ... محتوا ... */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": post.title,
          "description": post.description,
          "image": post.cover ? `https://www.webdesignwithsina.ir${post.cover}` : undefined,
          "datePublished": post.date,
          "dateModified": post.lastModified,
          "mainEntityOfPage": { "@type": "WebPage", "@id": `https://www.webdesignwithsina.ir/blog/${params.slug}` }
        }) }}
      />
    </article>
  );
}

متادیتای مقاله + Article JSON-LD

پشتیبانی چندزبانه و hreflang (i18n SEO)

در next.config.js شئ i18n را تنظیم کنید تا زبان‌ها و زبان پیش‌فرض مشخص شوند. سپس با alternates.languages، تگ‌های hreflang را به‌صورت خودکار تولید کنید.

module.exports = {
  i18n: {
    locales: ["fa", "en"],
    defaultLocale: "fa",
  },
};

پیکربندی i18n (مسیرهای بین‌المللی)

استفاده از alternates.languages در متادیتای Layout

برای صفحات ریشه (مثل صفحهٔ اصلی)، نمونهٔ زیر را در app/layout.tsx تنظیم کنید:

export const metadata = {
  metadataBase: new URL("https://www.webdesignwithsina.ir"),
  alternates: {
    canonical: "/",
    languages: {
      "fa-IR": "/",      // نسخه فارسی – صفحه اصلی
      "en-US": "/en"      // نسخه انگلیسی – صفحه اصلی انگلیسی
    }
  },
  // ... سایر تنظیمات metadata ...
} as const;

alternates.languages در سطح ریشه

alternates.languages برای یک صفحه (مثلاً درباره ما)

برای صفحات مشخص (مثل درباره ما) می‌توانید مستقیماً در Metadata همان صفحه تنظیم کنید:

export const metadata = {
  alternates: {
    canonical: "/about",
    languages: {
      "fa-IR": "/about",
      "en-US": "/en/about"
    }
  }
};

hreflang برای صفحهٔ درباره ما

hreflang با alternates.languages برای صفحات داینامیک

در صفحات پارامتری (مثل بلاگ)، نسخه‌های زبانی را بر اساس slug بسازید:

import type { Metadata } from "next";
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const base = "https://www.webdesignwithsina.ir";
  const urlFa = `${base}/blog/${params.slug}`;
  const urlEn = `${base}/en/blog/${params.slug}`;
  return {
    alternates: {
      canonical: urlFa,
      languages: {
        "fa-IR": urlFa,
        "en-US": urlEn
      }
    }
  };
}

نمونهٔ alternates.languages (دینامیک)

خروجی تگ‌های head

پس از تنظیم بالا، تگ‌های زیر در head درج می‌شوند:

<link rel=\"alternate\" hreflang=\"fa-IR\" href=\"https://www.webdesignwithsina.ir/about\" />
<link rel=\"alternate\" hreflang=\"en-US\" href=\"https://www.webdesignwithsina.ir/en/about\" />
<link rel=\"canonical\" href=\"https://www.webdesignwithsina.ir/about\" />

نمونهٔ خروجی

نکات تکمیلی i18n

محتوای متنی، متادیتا (Title/Description) و حتی lang مطابق زبان هر نسخه باشد. در Layout می‌توانید <html lang={locale}> را تنظیم کنید.
اگر برای هر زبان دامنهٔ جداگانه دارید، به‌جای مسیر نسبی، URL کامل همان دامنه را بدهید.
برای نسخهٔ پیش‌فرض هم یک hreflang بگذارید (مثلاً fa-IR). در صورت نیاز به x-default، می‌توانید آن را دستی داخل <head> اضافه کنید.
لینک تعویض زبان در سایت قرار دهید؛ مثال با Next <Link>:

import Link from "next/link";
 
<Link href="/about" locale="en">English</Link>
<Link href="/about" locale="fa">فارسی</Link>

چک‌لیست سئوی Next.js (۲۰۲۵) | WebDesignWithSina

چک‌لیست سئوی Next.js (۲۰۲۵)

مقدمه

نکته

فهرست

چک‌لیست سئوی Next.js (۲۰۲۵)

مقدمه

نکته

فهرست

پیش‌نیازها

راهنمای سریع

جزییات پیاده‌سازی

نمونهٔ تنظیم متادیتا در Layout

canonical مطلق در صفحات داینامیک

robots.txt و sitemap.xml در App Router

تولید sitemap

داده‌های ساخت‌یافته (JSON-LD)

متادیتای مقاله و Article JSON-LD

پشتیبانی چندزبانه و hreflang (i18n SEO)

استفاده از alternates.languages در متادیتای Layout

alternates.languages برای یک صفحه (مثلاً درباره ما)

hreflang با alternates.languages برای صفحات داینامیک

خروجی تگ‌های head

نکات تکمیلی i18n

بهینه‌سازی Core Web Vitals (سرعت و تجربه)

شاخص‌ها و آستانه‌های پیشنهادی

بهینه‌سازی تصاویر

فونت‌ها و نمایش متن

مدیریت اسکریپت‌ها و کتابخانه‌های ثالث

کاهش CLS (پرش چیدمان)

تفکیک کد و بارگذاری تنبل

انتخاب استراتژی رندر (ISR/SSG در برابر CSR)

مانیتورینگ و تست

جمع‌بندی

مانیتورینگ و گزارش‌گیری Web Vitals

اشتباهات رایج

تصویر OG نامناسب

canonical نسبی یا ناقص در صفحات داینامیک

بی‌توجهی به INP/CLS و جایگذاری نادرست اسکریپت‌ها

جمع‌بندی

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

زمان‌بندی انتشار