SEO FrontEnd | Mojtaba Pourkhanlar

SEO چیست؟

خب SEO مخفف Search Engine Optimization است؛ مجموعه‌ای از تکنیک‌ها که کمک می‌کند:

موتورهای جستجو صفحات ما را به‌درستی بخوانند
ساختار و محتوای سایت را بهتر درک کنند
صفحات ما را ایندکس کرده و رتبه بهتری نمایش دهند

در دنیای مدرن فرانت‌اند، مخصوصاً در اپلیکیشن‌های مبتنی بر React، رعایت اصول SEO بدون در نظر گرفتن نحوه رندرینگ تقریباً غیرممکن است. اینجاست که Next.js نقش کلیدی ایفا می‌کند.

چرا SEO برای Front-End Developer مهمه؟

در یک SPA خالص با React:

خب HTML اولیه تقریباً خالی است
محتوا بعد از اجرای JavaScript تولید می‌شود
برخی ربات‌ها JavaScript را دیر اجرا می‌کنند یا اصلاً اجرا نمی‌کنند

نتیجه؟

ایندکس ناقص
کاهش رتبه
دیده نشدن زحمات شما

ولی Next.js با قابلیت Pre-rendering این مشکل را به‌صورت ساختاری حل می‌کند.

مفاهیم پایه SEO در Next.js

1️⃣ Rendering Modes

SSG (Static Site Generation)

ساخت HTML موقع build
فوق‌العاده برای SEO
بسیار سریع

export async function getStaticProps() {
  return {
    props: {
      posts: []
,
    },
    revalidate: 60, // Incremental Static Regeneration (ISR)
  };
}

مناسب برای:

بلاگ
لندینگ پیج
صفحات محتوایی

SSR (Server Side Rendering)

در این حالت، HTML در هر درخواست روی سرور تولید می‌شود.

export async function getServerSideProps() {
  return {
    props: {
      user: {},
    },
  };
}

مناسب برای:

داشبورد
صفحات شخصی‌سازی‌شده
داده‌های real‑time

نسبت به SSG کندتر است، اما همچنان کاملاً SEO-friendly محسوب می‌شود.

CSR (Client Side Rendering)

خب HTML اولیه تقریباً خالی
محتوا با JavaScript در مرورگر ساخته می‌شود

useEffect(() => {
  fetchData();
}, []
);

این روش به‌تنهایی برای SEO توصیه نمی‌شود، مگر در ترکیب با:

Hybrid Rendering
Pre-rendering
Dynamic Import

Head va Meta Tags

Pages Router

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>آموزش Next.js | Mojtaba Dev</title>
        <meta
          name="description"
          content="آموزش حرفه‌ای Next.js و SEO در فرانت‌اند"
        />
      </Head>

      <main>سلام دنیا 🌍</main>
    </>
  );
}

نکات:

هر صفحه باید title یونیک داشته باشد
و meta description بهتر است بین 150 تا 160 کاراکتر باشد
از کلمات کلیدی مرتبط و طبیعی استفاده کنید

🌍 SEO پیشرفته با App Router (Next.js 13+)

Metadata API

export const metadata = {
  title: "بلاگ Next.js",
  description: "مقالات تخصصی Next.js و فرانت‌اند",
  openGraph: {
    title: "بلاگ Next.js",
    description: "مقالات تخصصی",
    url: "https://example.com",
    siteName: "Mojtaba Dev",
    locale: "fa_IR",
    type: "website",
  },
};

مزایا:

عدم نیاز به استفاده مستقیم از <Head>
سازگار با SSR و SSG
ساختار تمیز و قابل نگهداری
پشتیبانی داخلی از Open Graph و Social Preview

🖼️ Image Optimization (SEO + Performance)

import Image from "next/image";

<Image
  src="/hero.png"
  alt="آموزش حرفه‌ای Next.js"
  width={400}
  height={300}
  priority
/>;

چرا مهم است؟

ویژگی alt برای SEO و دسترس‌پذیری حیاتی است
Lazy Loading خودکار
کاهش CLS و بهبود Core Web Vitals

Internal Linking (مسیر دادن به ربات‌ها)

import Link from "next/link";

<Link href="/blog/seo-nextjs">آموزش SEO در Next.js</Link>;

تکست معنی دار
لینک‌سازی داخلی ساختار سایت را برای ربات‌ها شفاف می‌کند
ارتباط موضوعی صفحات

Sitemap and robots.txt

پیکربندی نمونه:

sitemap.xml

// next-sitemap.config.js
module.exports = {
  siteUrl: "https://mojtabapourkhanlar.ir",
  generateRobotsTxt: true,
};

مزایا:

کمک به کشف سریع‌تر صفحات توسط موتورهای جستجو
ایندکس کامل‌تر سایت

Performance = SEO

Core Web Vitals مستقیماً روی رتبه تأثیر دارند:

LCP → سرعت نمایش محتوای اصلی
CLS → جلوگیری از پرش صفحه
INP → کیفیت تعامل کاربر

Next.js به‌صورت پیش‌فرض کمک می‌کند با:

Code Splitting
Image Optimization
Streaming
Server Components

🧪 Structured Data

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      headline: "SEO در Next.js",
      author: {
        "@type": "Person",
        name: "Mojtaba",
      },
    }),
  }}
/>

Structured Data باعث می‌شود:

موتورهای جستجو نوع محتوای شما را بهتر درک کنند
شانس نمایش Rich Results افزایش پیدا کند

چک‌لیست نهایی SEO در Next.js

استفاده از SSG یا SSR در صفحات مهم
تنظیم صحیح Metadata (title, description, Open Graph)
یکتابودن title و description در هر صفحه
استفاده از next/image با alt مناسب
لینک‌سازی داخلی اصولی
تولید sitemap.xml و robots.txt
بهینه‌سازی Performance و Core Web Vitals
افزودن Structured Data در صفحات محتوایی

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

import Head from "next/head"; export default function Home() { return ( <> <Head> <title>آموزش Next.js | Mojtaba Dev</title> <meta name="description" content="آموزش حرفه‌ای Next.js و SEO در فرانت‌اند" /> </Head> <main>سلام دنیا 🌍</main> </> ); }

export const metadata = { title: "بلاگ Next.js", description: "مقالات تخصصی Next.js و فرانت‌اند", openGraph: { title: "بلاگ Next.js", description: "مقالات تخصصی", url: "https://example.com", siteName: "Mojtaba Dev", locale: "fa_IR", type: "website", }, };

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "Article", headline: "SEO در Next.js", author: { "@type": "Person", name: "Mojtaba", }, }), }} />

چک‌لیست نهایی SEO در Next.js

استفاده از SSG یا SSR در صفحات مهم

تنظیم صحیح Metadata (title, description, Open Graph)

یکتابودن title و description در هر صفحه

استفاده از next/image با alt مناسب

لینک‌سازی داخلی اصولی

تولید sitemap.xml و robots.txt

بهینه‌سازی Performance و Core Web Vitals

افزودن Structured Data در صفحات محتوایی