JavaScript SEO برای React: Google دقیقاً چه چیزی می‌بیند؟

در یک SPA، اینکه محتوا در مرورگر شما دیده می‌شود الزاماً به معنی قابل‌کشف بودن سریع و قابل‌اعتماد آن برای crawler نیست. برای تحلیل درست باید سه مرحله را جدا کنید: crawl، render و index.

HTML اولیه را بررسی کنید

صفحه را بدون تکیه به hydration تصور کنید. آیا title، meta description، heading اصلی، متن مهم و لینک‌های داخلی در HTML اولیه حضور دارند؟ اگر محتوای اصلی فقط بعد از request سمت client ساخته می‌شود، مسیر discovery و rendering پیچیده‌تر می‌شود.

SSR و prerender ابزارند، نه هدف

برای صفحه‌های عمومی و SEO-sensitive، SSR یا prerender معمولاً مسیر ساده‌تری برای تحویل محتوای اصلی ایجاد می‌کند. اما یک SPA هم می‌تواند index شود؛ تصمیم معماری باید بر اساس اهمیت SEO، freshness محتوا، هزینه rendering و نیازهای محصول باشد.

لینک واقعی بسازید

Navigation قابل crawl را با anchor واقعی نگه دارید:

<a href="/blog/react-performance">React Performance</a>

وابسته‌کردن discovery صفحه‌ها به click handler یا state داخلی، معماری لینک‌دهی را شکننده می‌کند.

محتوای اصلی را پشت interaction پنهان نکنید

اگر متن مهم فقط بعد از کلیک، scroll خاص یا event سفارشی fetch می‌شود، crawler ممکن است آن مسیر را مثل کاربر طی نکند. lazy loading برای resourceهای پایین صفحه مفید است، اما محتوای حیاتی صفحه باید مسیر قابل‌اعتماد برای render داشته باشد.

خطاهای rendering را جداگانه تست کنید

یک route ممکن است برای کاربر سالم باشد ولی هنگام render شدن توسط crawler به دلیل API failure، auth، timeout یا browser-only API شکست بخورد. مسیرهای عمومی را بدون session و با شرایط شبکه متفاوت بررسی کنید.

Canonical و metadata را per-route نگه دارید

SPAای که برای همه routeها title و canonical یکسان می‌دهد، مسئله معماری دارد. metadata باید با محتوای route هماهنگ باشد و URL قابل‌اشتراک و پایدار داشته باشد.

چک‌لیست عملی

• محتوای اصلی و heading در خروجی قابل render وجود دارد؛
• لینک‌های داخلی href واقعی دارند؛
• route عمومی به login/session وابسته نیست؛
• metadata و canonical برای هر صفحه درست است؛
• lazy loading محتوای اصلی را پشت interaction اجباری نمی‌برد؛
• status code و redirectها معنی‌دار هستند؛
• نسخه موبایل همان محتوای اصلی را ارائه می‌دهد.

JavaScript SEO بیشتر از اینکه مجموعه‌ای از hackها باشد، نتیجه معماری قابل‌پیش‌بینی rendering و navigation است.