ریاکت (React.js) دشمن سئو نیست، اما تنظیمات پیشفرض آن برای موتورهای جستجو «نامرئی» است.
مشکل اصلی اینجاست که ریاکت محتوا را در مرورگر کاربر میسازد (CSR). این در حالی است که رباتهای گوگل انتظار دارند محتوا را آماده و کامل از سرور تحویل بگیرند.
برای سئو کردن سایتهای ریاکتی، تنها دو راه حل قطعی و استاندارد دارید: ۱. استفاده از فریمورک Next.js برای رندر سمت سرور (SSR) که بهترین روش است. ۲. استفاده از ابزارهای Pre-rendering و React Helmet برای پروژههایی که تکمیل شدهاند.
اما چرا هنوز هم سئوکاران از شنیدن نام «ریاکت» میترسند؟ ما با یک پارادوکس بزرگ روبرو هستیم. ریاکت تجربه کاربری (UX) فوقالعادهای میسازد، اما اگر درست مدیریت نشود، سایت شما برای گوگل تبدیل به یک «صفحه سفید و خالی» میشود.
بسیاری از کسبوکارها هزینههای سنگینی میکنند، اما در نهایت سایتی دارند که گوگل اصلاً آن را نمیبیند. خبر خوب اینکه لازم نیست کدهای خود را دور بریزید.
هدف این مقاله دقیقاً حل همین چالش است: تبدیل یک اپلیکیشن تکصفحهای (SPA) که گوگل از آن فراری است، به سایتی که رباتها عاشق خزیدن در آن هستند.
برای درک این مشکل، کافیست یک تست ساده انجام دهید. یک سایت خام ریاکتی (که سئو نشده) را باز کنید. روی صفحه کلیک راست کرده و گزینه View Page Source را بزنید.
چه چیزی میبینید؟ احتمالاً فقط یک صفحه سفید با چند خط کد کوتاه و یک تگ مثل این: <div id="root"></div>
هیچ متن، عکس یا لینکی در کار نیست! اما چرا؟
ریاکت در حالت پیشفرض از روشی به نام Client Side Rendering (CSR) استفاده میکند. در این روش، سرور فقط یک "قاب خالی" (همان کد بالا) به مرورگر میفرستد. سپس مرورگر کاربر (یا ربات گوگل) باید فایلهای سنگین جاوااسکریپت را دانلود کند تا بتواند محتوا را داخل آن قاب بسازد.
مشکل اینجاست که رباتهای گوگل همیشه حوصله یا توانایی صبر کردن برای "پر شدن این قاب" را ندارند. آنها وارد سایت میشوند، یک صفحه خالی میبینند و ممکن است همانطور دستخالی برگردند.
گوگل در سالهای اخیر هوشمندتر شده و میتواند جاوااسکریپت را اجرا کند، اما این کار برایش «پرهزینه» است. خواندن یک فایل HTML ساده برای گوگل مثل نوشیدن آب است، اما پردازش و اجرای فایلهای JS مثل جویدن سنگ است! این کار فشار زیادی به منابع پردازشی گوگل وارد میکند.
هر سایتی نزد گوگل یک "بودجه خزش" مشخص دارد (مقدار زمانی که ربات گوگل صرف گشتن در سایت شما میکند). وقتی سایت شما ریاکتی است، ربات گوگل مجبور است زمان زیادی را صرف "ساختن صفحات" کند.
نتیجه؟ زمان ربات تمام میشود در حالی که هنوز نیمی از صفحات سایت شما را ندیده است. به همین دلیل، سایتهای ریاکتی معمولاً با مشکل «عدم ایندکس شدن صفحات عمیق» مواجه میشوند.
برخلاف سایتهای وردپرس یا HTML ساده که گوگل در یک مرحله آنها را میخواند، برای سایتهای ریاکتی (JS-based) فرآیند کاملاً متفاوت است.
گوگل برای این سایتها از روشی به نام «ایندکس دو مرحلهای» (Two-Wave Indexing) استفاده میکند. بیایید این دو موج را بررسی کنیم.
در این مرحله، ربات گوگل (Googlebot) درخواست HTTP میفرستد و فایل HTML را دریافت میکند.
این کار بسیار سریع انجام میشود.
مشکل: در سایتهای ریاکت خام، این فایل HTML تقریباً خالی است.
نتیجه: گوگل در موج اول، عملاً هیچ محتوایی برای ایندکس کردن پیدا نمیکند و فقط لینکهای موجود در هدر یا فوتر (اگر استاتیک باشند) را میبیند.
بعد از موج اول، صفحه شما ایندکس نمیشود! بلکه وارد یک «صف انتظار» (Render Queue) میشود. گوگل باید صبر کند تا منابع سرورهایش (Google Web Rendering Service) آزاد شوند تا بتواند کدهای جاوااسکریپت صفحه شما را اجرا کند.
این انتظار ممکن است چند دقیقه، چند ساعت و یا حتی چند روز طول بکشد. همه چیز بستگی به «بودجه خزش» سایت شما و شلوغی سرورهای گوگل دارد.
وقتی نوبت سایت شما رسید، گوگلباتِ واقعی (که شبیه یک مرورگر کروم بدون سر است - Headless Chrome) کدهای JS را اجرا میکند.
حالا محتوا ساخته میشود.
متنها ظاهر میشوند.
لینکهای داخلی مشخص میشوند.
و تازه در این لحظه، گوگل محتوای واقعی شما را میبیند و دیتابیس خود را آپدیت میکند.
چرا این بد است؟ اگر سایت شما خبری است یا قیمتها در آن تغییر میکنند، این تاخیر بین موج اول و دوم میتواند مرگبار باشد. شاید وقتی گوگل قیمت جدید را میبیند، دیگر دیر شده باشد.
حالا که فهمیدیم مشکل از «رندر سمت کاربر» است، راه حل منطقی این است که رندر را از دوش مرورگر برداریم. برای این کار سه استراتژی اصلی داریم که بسته به نوع پروژه و مرحلهای که در آن هستید، میتوانید یکی را انتخاب کنید.
اگر در ابتدای پروژه هستید، Next.js بهترین هدیهای است که میتوانید به تیم فنی و مارکتینگ خود بدهید. Next.js فریمورکی است که بر پایه ریاکت ساخته شده اما مشکل سئو را با روشی به نام SSR (Server Side Rendering) حل کرده است.
چطور کار میکند؟ وقتی ربات گوگل درخواست میدهد، سرور کدهای ریاکت را همانجا اجرا میکند، دیتابیس را میخواند و یک فایل HTML کامل و پُر شده را برای گوگل میفرستد.
مزیت: ربات گوگل دقیقاً همان چیزی را میبیند که در یک سایت وردپرسی میبیند. هیچ تاخیری وجود ندارد و ایندکس در همان «موج اول» انجام میشود.
کاربرد: برای سایتهای پویا مثل فروشگاههای اینترنتی یا شبکههای اجتماعی که محتوا لحظهای تغییر میکند.
این روش سریعترین و امنترین حالت ممکن است. در SSG (Static Site Generation)، صفحات سایت شما نه در لحظه بازدید کاربر، بلکه در زمان بیلد (Build Time) ساخته میشوند.
چطور کار میکند؟ وقتی برنامهنویس دکمه "انتشار" را میزند، تمام صفحات سایت به فایلهای HTML استاتیک تبدیل میشوند.
مزیت: سرعت فوقالعاده بالا (چون هیچ پردازشی سمت سرور یا کاربر انجام نمیشود) و امنیت ۱۰۰٪. گوگل عاشق سرعت این سایتهاست.
کاربرد: برای بلاگها، لندینگ پیجها، سایتهای خبری و شرکتی که محتوای آنها هر ثانیه تغییر نمیکند.
اگر سایت ریاکت شما کامل شده و بودجه یا زمان کافی برای بازنویسی آن با Next.js را ندارید، نگران نباشید. راه حل نجاتبخش شما رندرینگ پویا است.
چطور کار میکند؟ شما از سرویسهایی مثل Prerender.io یا ابزارهایی مثل Puppeteer روی سرور خود استفاده میکنید. این ابزارها مثل یک نگهبان عمل میکنند:
اگر بازدیدکننده انسان باشد، سایت ریاکت معمولی (CSR) را به او نشان میدهند.
اگر بازدیدکننده ربات گوگل باشد، یک نسخه HTMLِ عکسبرداری شده (Snapshot) از صفحه را به او تحویل میدهند.
مزیت: بدون دست زدن به کدهای فرانتاند، مشکل سئو حل میشود.
معایب: هزینه سرویسهای جانبی و پیچیدگی تنظیمات سرور.
اگر به هر دلیلی نمیتوانید از Next.js استفاده کنید و مجبورید با همان ساختار تکصفحهای (SPA) پیش بروید، باید بدانید که ریاکت به تنهایی دو نقص بزرگ دارد:
دسترسی مستقیم به تگ <head> ندارد (جایی که سئو اتفاق میافتد).
مفهوم "صفحه" در آن با مفهوم "صفحه" در گوگل متفاوت است.
برای پر کردن این خلأها، به دو ابزار زیر نیاز دارید:
در یک فایل HTML معمولی، تایتل و توضیحات متا در بخش <head> قرار دارند. اما در ریاکت، تمام کامپوننتهای شما در بخش <body> و داخل <div id="root"> رندر میشوند. این یعنی وقتی کاربر از "صفحه اصلی" به "صفحه محصول" میرود، تایتل مرورگر و متاتگها تغییر نمیکنند و ثابت میمانند! این برای سئو فاجعه است.
راهکار: کتابخانه React Helmet (یا نسخه جدیدتر و بهتر آن react-helmet-async).
کاری که انجام میدهد: این کامپوننت به شما اجازه میدهد داخل هر صفحه (مثلاً صفحه محصول)، تگهای اختصاصی آن صفحه را تعریف کنید. سپس این کتابخانه آنها را برداشته و به صورت دینامیک به <head> فایل HTML اصلی تزریق میکند.
کاربرد حیاتی: تنظیم Title، Meta Description و تگ Canonical برای جلوگیری از محتوای تکراری.
اپلیکیشنهای تکصفحهای (SPA) ذاتاً "یک صفحه" هستند. تغییر محتوا با تغییر State انجام میشود، نه با تغییر URL. اما گوگل برای هر محتوا، یک آدرس یکتا (Unique URL) میخواهد.
راهکار: استفاده از React Router DOM.
نکته حیاتی (مرگ و زندگی): در تنظیمات روتر، دو حالت وجود دارد:
HashRouter: آدرسها را با # میسازد (مثلاً site.com/#/about). هرگز از این روش استفاده نکنید! گوگل هر چیزی بعد از # را نادیده میگیرد و کل سایت شما را فقط "یک صفحه" میبیند.
BrowserRouter: از History API مرورگر استفاده میکند و آدرسهای تمیز و واقعی میسازد (مثلاً site.com/about). حتماً از این روش استفاده کنید.
گاهی اوقات مشکل از "تکنولوژی" نیست، بلکه از "نحوه استفاده" ماست. در توسعه اپلیکیشنهای ریاکت (SPA)، اشتباهاتی رایج است که عملاً درهای سایت را به روی رباتهای گوگل میبندد. قبل از لانچ نهایی، این لیست را چک کنید:
۱. استفاده از HashRouter (آدرسهای دارای #)
این بزرگترین و رایجترین اشتباه است.
اشتباه: استفاده از آدرسهایی مثل example.com/#/about.
چرا مرگبار است؟ در استاندارد وب، علامت # (Hash) برای اسکرول کردن داخل یک صفحه استفاده میشود، نه برای تغییر صفحه. گوگل هر چیزی که بعد از # بیاید را نادیده میگیرد. یعنی از نظر گوگل، کل سایت شما فقط یک صفحه (صفحه اصلی) است.
راه حل: حتماً از BrowserRouter استفاده کنید تا آدرسهای تمیز (example.com/about) داشته باشید.
۲. لینکسازی با رویداد (تله ناوبری)
اشتباه: استفاده از div، span یا button برای لینک دادن به صفحات دیگر و مدیریت آن با تابع در جاوااسکریپت.
JavaScript
// اشتباه: گوگل این را دنبال نمیکند
<div ={() => history.push('/product')}>مشاهده محصول</div>
چرا مرگبار است؟ رباتهای گوگل مثل کاربران روی دکمهها کلیک نمیکنند! آنها فقط تگهای استاندارد <a> که دارای ویژگی href باشند را دنبال میکنند تا صفحات جدید را کشف کنند.
راه حل: همیشه از کامپوننت <Link> در React Router استفاده کنید که در نهایت به تگ <a> کامپایل میشود.
۳. مشکل Soft 404 (صفحاتی که وجود ندارند اما باز میشوند)
اشتباه: وقتی کاربر آدرسی را اشتباه تایپ میکند، شما یک کامپوننت "صفحه یافت نشد" را نشان میدهید، اما سرور کد وضعیت 200 (OK) را برمیگرداند.
چرا مرگبار است؟ در حالت CSR، سرور همیشه فایل index.html را با موفقیت ارسال میکند. گوگل فکر میکند این صفحه اشتباه، یک صفحه واقعی است و آن را ایندکس میکند. این باعث ایجاد هزاران صفحه بیهوده و هدر رفتن بودجه خزش میشود.
راه حل: از آنجا که در CSR نمیتوانید کد وضعیت سرور (HTTP Status) را تغییر دهید، باید در کامپوننت ۴۰۴ خود، متا تگ noindex را تزریق کنید تا گوگل بداند نباید آن را ذخیره کند.
۴. بارگذاری تنبل (Lazy Loading) اشتباه محتوا
اشتباه: محتوای اصلی مقاله یا محصولات را طوری تنظیم کنید که فقط وقتی کاربر اسکرول کرد ظاهر شوند.
چرا مرگبار است؟ ربات گوگل اسکرول نمیکند! اگر محتوا به اسکرول وابسته باشد، ربات فقط بالای صفحه را میبیند و بقیه صفحه برایش خالی میماند.
راه حل: از روشهای Lazy Loading استاندارد مرورگر (Native Lazy Loading) استفاده کنید یا مطمئن شوید محتوای متنی اصلی در همان بارگذاری اولیه در HTML (یا DOM اولیه) وجود دارد.
۵. باندلهای جاوااسکریپت حجیم (JS Bloat)
اشتباه: بارگذاری کل کدهای سایت در یک فایل JS بزرگ (مثلاً ۵ مگابایت) در ورود اولیه.
چرا مرگبار است؟ گوگلبات برای رندر کردن سایت شما "زمان محدودی" دارد. اگر دانلود و اجرای فایل JS شما بیش از حد طول بکشد، ربات خسته شده و صفحه را ترک میکند (Time out).
راه حل: استفاده از تکنیک Code Splitting (تقسیم کد). یعنی وقتی کاربر در "صفحه اصلی" است، کدهای مربوط به "پنل کاربری" دانلود نشود.
بیایید به سوال اول مقاله برگردیم: آیا ریاکت برای سئو بد است؟ پاسخ کوتاه: خیر، به شرطی که درست استفاده شود.
ریاکت مثل یک خودروی مسابقهای فرمول یک است. سرعت و قدرت فوقالعادهای دارد، اما اگر بخواهید با آن در جاده خاکی (ساختار وب قدیمی) رانندگی کنید، به مشکل میخورید. مشکل از خودرو نیست، از انتخاب مسیر است.
ریاکت در حالت پیشفرض (CSR) برای گوگل «نامرئی» است، نه بد. گوگل تلاش میکند آن را ببیند، اما این کار برایش سخت و زمانبر است. اگر میخواهید در سئو برنده باشید، نباید کار گوگل را سخت کنید.
توصیه نهایی (نسخه طلایی):
برای اینکه بهترین تصمیم را برای پروژه خود بگیرید، از این فرمول استفاده کنید:
اگر پروژه جدیدی شروع میکنید و سئو برایتان حیاتی است: شک نکنید و از Next.js استفاده کنید. این فریمورک تمام مزایای ریاکت را دارد، اما با رندر سمت سرور (SSR)، سایت شما را برای گوگل مثل یک سایت وردپرسی، خوانا و سریع میکند.
اگر پروژه شما تمام شده و امکان تغییر کد ندارید: لازم نیست سایت را بکوبید و از نو بسازید. از سرویسهای Pre-rendering (مثل Prerender.io) استفاده کنید و مطمئن شوید که React Helmet را برای مدیریت متاتگها نصب کردهاید.
اگر پنل ادمین یا داشبورد کاربری میسازید: اصلاً نگران سئو نباشید! در این پروژهها که نیاز به ایندکس شدن در گوگل ندارند، از همان React معمولی (CSR) استفاده کنید و لذت ببرید.
در نهایت، جنگ بین «تکنولوژی» و «سئو» تمام شده است. امروز با ابزارهایی که داریم، میتوانید سایتی داشته باشید که هم کاربران عاشق سرعت و نرمی آن باشند (React) و هم رباتهای گوگل عاشق ساختار آن (SEO).
