چرا React SEO Friendly ممکن است و چرا باید از آن برای پروژه های نیازمند به SEO خود استفاده کنید؟

افرادی که با من سروکار دارند از خواندن عنوان این صفحه متعجب شده اند!..

چطور؟ ما که هروقت با این آقا از ری اکت صحبت کردیم، گفته:

برنامه نویس شما یک سایت که با ری اکت نوشته و تو گوگل ایندکس خوبی داشته باشه را نشان بدهد، بعد با من از طراحی با ری اکت حرف بزنید...

بله من هنوزم از این حرف برنگشته ام و همین اعتقاد را دارم، اما این نه به معنای زیر سوال بردن react است،

کما اینکه من هیچ وقت لینک سازی را تایید نکرده ام اما این نه بخاطر این است که لینک سازی مفید نیست، بلکه اهل فن می طلبد.

برای ری اکت هم به این دلیل مخالفم. چون برای کوچ به ری اکت، صرف بلد بودن ری اکت کافی نیست، بایست علم کافی برای بنا کردن سایت ری اکت داشته باشید تا بتوانید از سئوفرایندلی بودن سایت مطمئن شوید.

راستش تو این مقاله بر خلاف تیتر، اصلا قصد ندارم به این سوال که: «چرا باید از ری اکت برای پروژه های نیازمند به SEO خود استفاده کنید؟» جواب بدهم چون مطمئنم همین که دارید این مطلب را می خوانید یعنی به ارزش ری اکت واقف هستید

بلکه می خواهم کل مطلبم را به بخش اول تیترم اختصاص بدهم یعنی اینکه:

چرا React SEO Friendly ممکن است؟

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

که من به این مسئله سال 1388 واقف شده بودم و در این لینک گفته بودم که گوگل رباتی دارد که « با هوش انسانی صفحات را می گردد مثلا جاوا اسکریپت را اجرا می کند و...»

اما گوگل از 2015 ربات های دیگرش را هم به جاواسکریپت مجهز کرد که در مستنداتش به آدرس زیر ( سال 2015) به آن اذعان کرده است:

بات خزشگر گوگل جاواسکریت را هم رندر می کند؟

و در این داکیومنشن چگونگی فیکس کردن خطاهایی که بات را چار مشکل می کند گفته است:

Fix Search-related JavaScript problems

Fix lazy-loaded content

Implement dynamic rendering

خوب حتما می گویید پس مشکل حل شد.

متأسفانه نه، این ادعای گوگل به این معنا نیست که ترکیب جاوا اسکریپت و سئو دیگر مشکلی ایجاد نمی کند. در عمل، اکثریت قریب به اتفاق متخصصان سئو (که من مقالاتشان را در موز دنبال می کنم)، با من موافق هستند که در عمل به نظر می رسد برای گوگل رندر و ایندکس کردن صفحات جاوا اسکریپت دشوار است. یعنی در عمل سایت هایی که با اتکا به جاواسکریت ( یا ری اکت) صفحه را به کاربر نمایش می دهند به اندازه وب سایت هایی که از جاوا اسکریپت استفاده نمی کنند، در نتایج گوگل موفق ظاهر نشده اند

چرا که فرآیند رندر کردن صفحات جاوا اسکریپت کند و دشوار است.

و این دقیقا همان جایی است که من با ری اکت مخالفم. اما اگر شخص ری اکت کار کارش را بلد باشد، 180 درجه وضعیت فرق می کند و من مثل کوه پشتش می ایستم و از ری اکت نوشته شده توسط یک شخص کاردان و مسلط به Nextjs و آشنا به مباحث SSR حمایت می کنم.

برگردیم سر ری اکت

هر پروژه بسته به اهدافی که می‌خواهد به آنها برسد نیاز به فناوری‌های متفاوتی دارد. و به سمت تغییر نرم افزار می رود و یکی از این کوچها را ما به سمت ری اکت شاهد هستیم

امروزه بهینه سازی React SEO یک عمل پرکار و مخاطره آمیز است.درست است که دلایل زیادی برای نگرانی در مورد سئو دوستی React وجود ندارد، اما به چه شرط؟

بشرطیکه برنامه نویس مورد نظر روشهای سئوفرایندلی کردن با جاوا اسکریپت را درک کرده باشد.

امروزه استفاده از سئو برای اپلیکیشن React مانند سال‌های پیش مشکل بزرگی نیست اما یک سری مشکلات کماکان وجود دارد.

اگر اصرار به استفاده از ری اکت برای وب سایت خود دارید، به یاد داشته باشید هرچند با ری اکت سایت برای کاربران سریعتر باز می شود اما برعکس آن ربات های گوگل وب سایت های HTML را سریع تر و مؤثرتر می خزند، محتوای رندر شده توسط React را حتی با تاخیرهای طولانی را هم گوگل ایندکس می کند اما چطور؟

ربات های گوگل به شدت بی حوصله و عصبی مزاج هستند و اگر تو رندر یک صفحه بیش از 5 ثانیه تاخیر ببیند (در صفحات با ری اکت این اتفاق برای ربات و نه کاربران عادی می افتد) صفحه را رها می کنند و می روند.

و اون موقع باید منتظر باشید که ربات دیگری که اعصاب و روان آرامتری دارد به این صفحه سرکشی کند (گوگل برای صفحات html رباتهای سریعتر و در فواصل منظم تر نسبت به صفحات تعاملی می فرستد)

خوب این خوبه یا بد؟

بد نیست اگر صفحه شما مرتب تغییر ندارد (مثل صفحه به روز کردن قیمت ارز) و در بارگذاری اول بدون خطا داده ها را پاس کرده باشیم.

یعنی اگر اپراتور صفحه ای را در سایت بارگذاری کند و روز بعد بفهمد که اطلاعات را غلط به خورد گوگل داده و آن را آپدیت کند، اگر صفحه html ای باشد در بدترین حالت تا یک هفته باید مننتظر باشد گوگل به آن سر بزند و خود را اصلاح کند اما اگر با ری اکت باشد در خوشبینانه ترین حالت تا سه ماه این فرایند طول می کشد.

'گفتیم ری اکت خوبه اما به شروطها (در ادامه متن شروط دیگر را برای شما می گویم)

هنگامی که از React برای ساخت وب سایت های نیازمند به SEO استفاده می شود، باید به صورت عمودی تنظیم شود.

در آنصورت مشکل تاخیر بات و اون سه ماه تاخیر در به روز شدن مطلب و ... حل میشود

مطمئناً هنگام تلاش برای ساخت یک برنامه React سازگار با سئو، با چالش های زیادی روبرو خواهید شد. به همین دلیل مهم است که توسعه دهندگان React ماهر در تیم خود داشته باشید تا از بهینه سازی صحیح اطمینان حاصل کنید.

در بیشتر موارد، خطاها در کد جاوا اسکریپت فهرست بندی را غیرممکن می کند (ربات گوگل چون بر خلاف مرورگر دیباگر برای کد های جاوا اسکریپت ندارد صفحه را خالی می بیند. در حالی که در مورد مرورگر باید گفت روندی که مرورگرهای مدرن در پیش می گیرند در خروجی HTML، اشتباهات قابل تحمل می شوند. به این معنی که محتوای صفحه دیده می شود فقط تعامل برقرار نمی شود.

از ابتدای شروع به خزش ربات های گوگل بگوییم حدود 5 ثانیه طول می کشد تا ربات گوگل یک اسکریپت را بخزد. به همین دلیل باید صبر کنیم تا این ربات عصبی مزاج برود و ربات تکنیکی گوگل بیاید( در تمام وب سایت های ساخته شده با ری اکت، بارگیری یک اسکریپت ممکن است به بیش از 5 ثانیه نیاز داشته باشد.

حل مشکل اینکه چگونه یک اپلیکیشن واکنشی ری اکت مناسب سئو بسازیم.

آشنایی برنامه نویس ری اکت کار با Nexrjs

ری اکت به ساخت یک رابط کاربری بسیار کاربرپسند از دید گوگل کمک می‌کند که از نظر سئو نیز ارزشمند است(منظورم گوگل پسند بودن یا google frindly است)

بنابراین چیری که یک ری اکت کار هنگام ایجاد یک رابط کاربری برای وب‌سایت خود، قطعاً نباید از آن غافل شود در نظر داشتن بات گوگل است. حتی با قبول این فرض نیز، باید از برخی ترفندها استفاده کنید تا مطمئن شوید که سایت React شما برای خزنده‌های گوگل قابل درک است.

از چارچوب جاوا اسکریپت سازگار با SEO استفاده کنید

راز ایجاد React SEO-friendly این است که مطمئن شوید گوگل مجبور نیست از جاوا اسکریپت برای ارائه محتوا استفاده کند. شما می توانید این کار را با استفاده از رندر سمت سرور (SSR) انجام دهید. به این معنی که فایل ها قبل از اجرای کد جاوا اسکریپت برای کاربر ارسال می شود. به عبارت ساده، باعث می شود صفحه سریعتر بارگذاری شود زیرا بازدیدکننده مجبور نیست منتظر اجرای React باشد. این به ویژه برای رایانه های شخصی قدیمی مفید است. مهمتر از آن، نیاز به انتظار گوگل برای اجرای جاوا اسکریپت برای خواندن محتوای صفحه را از بین می برد. اگر می خواهید به این مهم برسید نمی توانید از کنار Nextjs بگذرید.

Next.js می تواند صفحات استاتیک را ایجاد کند

مطالب مرتبط:

اجرای ری‌اکت سمت سرور (React SSR)

React SEO: Best Practices to Make It SEO-Friendly

React SEO Strategies and Best Practices