ایندکس کردن صفحات React در موتور جستجوی گوگل

ایندکس کردن صفحات React در موتور جستجوی گوگل

ایندکس کردن صفحات React در موتور جستجوی گوگل

Google Not Indexing Create React App

توسط : admin
آیا گوگل صفحات وب پویا که توسط کتابخانه یا فریمورکهایی مانند React , Angular , vue و ... تولید شده رو میتونه ایندکس کنه ؟ و به محتوای اون صفحات دست پیدا کنه ؟ صفحاتی که حتما باید با اجرای کد جاوااسکریپت ایجاد بشن و از پیش در فایل استاتیک به طور مثال .html ساخته نشدند ؟ با هم باشیم تا این موضوع رو بررسی کنیم.

سلام به دوستان عزیزم .

امروز تصمیم گرفتم آموزش بسیار مهم و البته ساده ای رو برای شما در باره ری اکت در سایت قرار بدم با من همراه باشید تا ببینیم موضوع چیه!

 

آیا موتور جستجوگر گوگل میتونه صفحات ری اکت رو ایندکس کنه؟

Create React App

create-react-app  ابزاری عالی برای ساختن برنامه ها و وب سایت های React است. استفاده از آن بسیار ساده است. لازم نیست خودتون رو اسیر مراحل پر درد سر webpack کنید . همه چیز فقط و فقط با این دستور برای شما آماده میشه و به راحتی میتونید ایجاد سایتتون رو شروع کنید . بعد از نصب هر آنچه را که لازم دارید مانند ، یک محیط کد نویسی ، پشتیبانی  از ES6 ، یک سرور محلی برای آزمایش و غیره در دسترس شما قرار داره .  این برنامه  واقعا عالی است و اضافه کردن ماژولهای دیگری مانند React Router به راحتی قابل انجام هست و با دسترسی کامل به تنظیمات میتوانید خروجی نهایی رو از  پروژه دریافت کنید .

 

ایندکس صفحات توسط موتور گوگل :

 

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

در فضای اینترنت ، موتورهای جستجو هنگام خزیدن در وب سایت ها ، کدهای JavaScript روی وب سایت رو اجرا نمیکنن. این بدین معنی است که هر محتوای ایجاد شده با JavaScript در نتایج موتور جستجو گنجانده نمیشود . این ضعف هنوز در  مورد بسیاری از موتورهای جستجو وجود دارد ، اما خزنده وب گوگل اکنون قادر به اجرای کد های JavaScript است. یعنی اینکه باید بدونید  که Google قادر هست به درستی محتوای ایجاد شده با JavaScript را فهرست بندی کند.

این  یک خبر عالی برای React ، Angular و سایر ابزارهایی است که وب سایتهای با محتوای پویا ایجاد می کنند هست.  اینطور نیست ؟!!  محتوای ارائه شده از طریق JavaScript اکنون در جستجوهای Google قابل مشاهده و ایندکس شدن است. واقعا که جای خوشحالی داره ، علی الخصوص وقتی قصد دارید که برای سایتتون عملیات سئو انجام بدیدکه در اینصورت حتما باید محتوای پویای شما قابل مشاهده توسط موتور گوگل باشد .

یک اتفاق خیلی بد ! صفحات ایجاد شده توسط create-react-app در زمان واکشی توسط گوگل خالی هستن !!!!

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

 

 استفاده از ابزار Google Webmaster (google search console) :

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

 

نکته ای که وجود داره اینه که ابزاری در این پنل هست به نام Url Inspection که این ابزار به طور واضحی نشان می دهد که خزنده گوگل هنگام مراجعه به صفحه چه چیزی را مشاهده می کند. این همون محتوایی است که گوگل ایندکس می کند.

اولین برنامه react من پر از محتوا بود که با استفاده از درخواستهای ناهمزمان ارائه شد.  و همچنین آدرس دهی با استفاده از react router dom پیاده سازی شده بود . قاعدتا همه این ابزارهای پیشرفته JavaScript باعث شده طراحی وب سایت خیلی آسان و سرگرم کننده باشه . با این حال ، گوگل وب سایت را ایندکس نکرده بود! یعنی چه اتفاقی افتاده که گوگل صفحه رو ایندکس نکرده بود ؟!

وقتی سعی کردم از ابزار Url Inspection و قسمت Test Live Url رو اجرا کنم ،  متوجه شدم که آدرس لینک شناسایی میشه ولی  صفحات مورد نظر به صورت خالی توسط خزنده  واکشی می شوند. یعنی اینکه  Google در حال دیدن صفحه خالی است و هیچ محتوایی  را برای فهرست بندی نمی بیند. این یک خبر بد و ناامید کننده بود برای سئو و گرفتن هر نوع ترافیکی از موتور جستجو !

 

خوب ! در اکثر وب سایتها که توسط فریمورک های مختلفی ارائه میشن عملیات ایجاد صفحه در سمت سرور اتفاق میافته . به این صورت که یا صفحه به صورت فایل فیزیکی وجود داره و از سرور به سمت کلاینت ارسال میشه و یا اینکه صفحه توسط سرور رندر شده و صفحه رندر شده به صورت کامل به سمت کلاینت ارسال و مشاهده میشه . که این عملکرد در ابزارهای تولید وب سایتهای پویا مثل ری اکت انجام نمیشه. و گذشته از اون ، این بود که در ری اکت قسمت های سایت من توسط کامپوننت ها جدا سازی شده بود و برای اینکه بار لود اولیه سایت پایین بیاد ، اطلاعات این کامپوننت ها به صورت نا همزمان از سرور دریافت و سپس در سمت کلاینت بارگذاری میشدند .  الان باید چکار میکردم ؟ باید میرفتم  و کل برنامه رو تغییر میدادم و با فریمورکی مثل NextJs  که برای اجرای ری اکت در سمت سرور هست دوباره باز نویسی میکردم ؟ اصلا شدنی بود این همه وقت و انرژی چی میشد ؟  یا اینکه با ری اکت خداحافظی میکردم ؟ جواب همه سوالات خیر هست !!!

 

راه حل 

بعد از کل تحقیق و بازبینی تمام کد ها متوجه شدم در کد نویسی من  مشکلی نیست . همچنین فکر میکردم شاید از اینکه دارم از درخواست های ناهمزمان استفاده میکنم علت این اتفاق هست که  مشکل از اون هم نبود.  مشکل  در جایی بود  یکی از ماژولهای مورد استفاده من از JavaScript استفاده می کرد که  کدهای اون برای خزنده گوگل قابل اجرا نبود.  احتمالاً نسخه ای از ES6 یا بالاتر که توسط خزنده گوگل پشتیبانی نمی شد . از آنجا که نسخه های JavaScript مدرن استفاده شده در برنامه  react ،  با موتور قدیمی JavaScript استفاده شده توسط خزنده گوگل پشتیبانی نمی شود ، این صفحه خطای جاوا اسکریپت را پرتاب می کرد و به صورت خالی ارائه می شد . جالب است بدونید که خزنده گوگل از موتور جاوا اسکریپت قدیمی استفاده می کند. خوب مشکل پیدا شد . حالا چکار کنیم ؟ خیلی ساده است . این دو ماژول که توسط  babeljs که وظیفه تبدیل کد های جاوااسکریپت مدرن رو به کدهای وانیلا جاوااسکریپت بر عهده داره تا مرورگها بتونن این کدها رو اجرا کنند ، ایجاد شدند رو  ، در برنامه ری اکت نصب و در فایل  Index.js  برنامتون فراخوانی کنید و همه چیز تمام هست .

 

npm i  core-js regenerator-runtime

 

 

و به اینصورت در فایل index.js فراخوانی کنید .

import "core-js/stable";
import "regenerator-runtime/runtime";

 

 

فقط بهتر هست که کدهای فوق بالاتر از بقیه دستورات باشند . به اینصورت در زمان اجرای اپلیکیشن تمام کدهای مدرن جاوا اسکریپت به نسخه قدیمی به صورت runtime تبدیل شده و اکنون قابل اجرا و درک توسط خزنده گوگل هستند . حالا یکبار دیگه بعد از اپلود سایت Test Live Url رو از پنل گوگل سرچ کنسول اجرا کنید و صفحه واکشی شده رو با اطلاعات کامل خودتون مشاهده کنید .

امیدوارم این آموزش به شما کمک کرده باشه که مشکلی از سر راه شما کنار گذاشته بشه . خوشحال میشم نظرتون رو با من در میون بگذارید  .

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید