ورود / ثبت نام
سئوی جاوا اسکریپت در حال حاضر یکی از موضوعات داغ در صنعت سئو است، زیرا امروزه استفاده از JavaScript برای طراحی سایت های تعاملی و پویا گسترش یافته است اما بسیاری از موتورهای جست و جو با اینکه این زبان بسیار در بین برنامه نویسان محبوب است قابلیت ایندکس کردن این سایت ها را ندارند. بر اساس تحقیقات که صورت گرفته است حدود، ۸۰٪ از سایت های فروشگاهی و تجاری از آن برای تولید محتوای اصلی یا پیوند به محصولات مشابه استفاده می کنند. با این حال، بسیاری از وب سایت های که با این زبان راه اندازی شده اند، علیرغم محبوبیت زیاد آن، عملکرد ضعیفی در SEO دارند. روش های مختلفی برای بهبود این مشکل وجود دارد که ما در این مطلب با کمک کارشناسان متخصص آی وحید تاثیرات SSR بر روی سئو سایت را مورد بررسی قرار می دهیم. البته توجه داشته باشید که به کار بردن این نکات و راه حل ها جز حوزه سئو تکنیکال به حساب می آید. در ادامه با ما همراه باشید.
SSR ( Server-Side Rendering ) چیست ؟
رندرینگ ( Rendering ) که به معنای پردازش و بازیابی صفحات وب، ارزیابی و طراحی یک صفحه است، به سه روش انجام می شود، سمت سرور ( Server-Side )، کلاینت ( Client-Side ) و به صورت پویا ( Dynamic ).
رندرینگ سمت سرور ( SSR ) : پردازش صفحات وب از طریق سرور انجام می شود و یک روش سنتی است، اساساً تمام منابع صفحه شما در سرور قرار می گیرند. هنگامی که صفحه درخواست می شود، HTML به مرورگر تحویل داده شده و رندر می شود، JS و CSS دانلود و سپس رندر نهایی برای کاربر به نمایش در می آید.
رندرینگ سمت کاربر ( CSR ): CSR یک نوع جدیدتر از روش رندر، که متکی به JS است و در سمت مشتری ( مرورگر ) از طریق یک چارچوب جاوا اسکریپت اجرا می شود. اساساً کلاینت ابتدا کد منبعی را درخواست می کند که قابلیت ایندکس سازی کمی در آن وجود دارد، سپس درخواست دوم برای فایل js که شامل تمام کدهای HTML در جاوا اسکریپت به عنوان رشته است، ارسال می شود.
رندرینگ پویا ( Dynamic ) : از طریق یک سرور شخص ثالث انجام می شود و در این رویکرد، به کاربران یک وب سایت جاوا اسکریپت امکانات کامل را ارائه می دهد. در واقع در همان زمان، سرور یک نسخه ثابت از وب سایت شما را به Googlebot یا سایر ربات ها ارسال می کند.
سه راه اصلی برای تنظیم و اجرای رندر سمت سرور وجود دارد :
- رندر سمت سرور با HTML پویا
رندر سمت سرور یک نسخه HTML رندر شده از هر URL در صورت تقاضا ایجاد می کند. - رندر استاتیک با HTML ایستا
اساساً، این یک نسخه HTML از پیش رندر شده ( استاتیک ) از URL را زودتر از موعد ایجاد می کند و آن را در حافظه پنهان ذخیره می کند. - رندر سمت سرور با ( دوباره ) هیدراتاسیون با HTML پویا و JS/DOM
سرور یک نسخه HTML ایستا از URL و کلاینت ( مرورگر و غیره ) را ارائه می دهد که قبلاً شامل نشانه گذاری مدل شیء سند ساختاری ( DOM ) است. مشتری این را می گیرد و آن را به یک DOM پویا تبدیل می کند که می تواند به تغییرات سمت مشتری واکنش نشان دهد و آن را تعاملی تر کند.
چرا از SSR استفاده می کنیم ؟
به طور کلی بیشتر سایت هایی که در فضای وب می بینیم، ساختار مشابهی دارند. این وبسایت ها معمولا از HTML که یک زبان نشانه گذاری است برای اسکلت بندی صفحات، از CSS برای استایل دهی و از جاوااسکریپت ( JS ) برای ایجاد صفحات پویا استفاده می کنند.
اکثر اطلاعات وبسایت ها درون پایگاه داده سرور ذخیره می شوند. وقتی که آن سایت نیاز به بارگذاری داشته باشد server ابتدا کدهای HTML و سپس کدهای CSS و JS را به گونه ای که برای موتورهای جست و جو قابل خواندن باشد، بارگذاری می کند.
وقتی یک سایت با فریم ورک های JS ساخته شده باشد موتورهای جست و جو نمی توانند آن را پردازش و ایندکس کنند زیرا هیچ کدی برای کرول وجود ندارد. بنابراین برای رفع این مشکل در بین مرورگرها فقط گوگل راهکار ایندکس دو مرحله ای ( Two-wave Indexing System ) را به کار برده است. برای این کار ربات های گوگل ابتدا کدهای HTML و CSS را در مرحله اول استخراج می کنند ولی صفحات ایندکس نمی شود و آن ها در صف می مانند تا گوگل در مرحله دوم بتواند کدهای جاوااسکریپت را بخواند و سپس Index کند.
برای اینکه موتورهای جستجو بتوانند محتوای بارگذاری شده با جاوا اسکریپت را در مرورگر ببینند، باید آن را رندر کنند و از آنجایی که رندر صفحات در مقیاس وب به زمان و منابع محاسباتی زیادی نیاز دارد، ربات های موتور جستجو رندر جاوا اسکریپت را به تعویق می اندازند و ممکن است این کار هفته ها طول بکشد. به همین علت برای رفع این مشکل از SSR استفاده می کنیم که کدهای اچ تی ام ال را در در اختیار موتورهای جستجو قرار می دهد و دیگر نیازی به خواندن JS توسط مرورگر نیست.
ابزارهایی وجود دارند که می توانند بسته به فریمورک استفاده شده اجرای SSR را سریعتر کند که عبارتند از:
| SSR Solution | JavaScript Framework | |
| Next.js, Gatsby | React | |
| Angular Universal | Angular | |
| Nuxt.js | Vue.js |
بحث بین رندر سمت کلاینت، رندر سمت سرور یا رندر پویا فقط برای وب سایت هایی که از جاوا اسکریپت استفاده می کنند کاربرد دارد. اگر وبسایت شما صرفاً HTML است و چیزی وجود ندارد که کاربران یا ربات‌ها نیازی به ارائه آن داشته باشند پس نیازی به استفاده از این روش ها نخواهید داشت.
وب‌سایت‌های جاوا اسکریپت کامل که بر روی کتابخانه‌هایی مانند React و Angular ساخته شده‌اند، بسته به نحوه کدگذاری، ممکن است تا زمانی که رندر نشوند کاملاً خالی باشند.
وب سایت ها همچنین می توانند بخشی از جاوا اسکریپت و بخشی HTML باشند. به عنوان مثال، ممکن است وبسایت فقط به جاوا اسکریپت برای بررسی نظرات یا ویجت‌های «محصولات مرتبط» متکی باشد. این بدان معناست که تنها بخشی از صفحه قبل از رندر قابل مشاهده است.
اگر وب سایت شما تا حدی یا به طور کامل به جاوا اسکریپت متکی است، به خصوص اگر سایت شما بزرگ است ( مثلاً هزاران یا میلیون ها صفحه ) و اغلب تغییر می کند ( مثلاً ناشران اخبار یا سایت های تجارت الکترونیکی با گردش محصول بالا )، اسن مورد مناسب شماست.
مزایای رندر سمت سرور و تاثیرات SSR بر روی سئو سایت چیست ؟
در همه روش های Rendering معایب و مزایایی وجود دارد و این که برای هر پروژه بر اساس منابعی که وجود دارد کدام مورد مناسب است را، کارشناسان و مهندسین سئو تعیین می کنند.
از آنجایی که جاوا اسکریپت بر روی سرور وب سایت ارائه می شود، هم برای ربات های موتور جستجو و هم کاربران تجربه سریع تری دارند. این نه تنها به معنای UX بهتر است ( که بخشی از الگوریتم رتبه‌بندی گوگل هست )، بلکه مشکلات مربوط به خزیدن و سرعت را که بر روی سئو تاثیر زیادی دارد را نیز حذف میکند.
ارسال صفحات کاملاً Render شده به ربات‌های موتور جستجو نیز به این معنی است که شما خطر «ایندکس جزئی» را که می‌تواند با محتوای رندر شده در سمت مشتری اتفاق بیفتد، ندارید. وقتی گوگل و سایر ربات‌های موتور جستجو سعی می‌کنند به صفحه شما دسترسی پیدا کنند، به جای اینکه منتظر بمانند تا منابع رندر قبل از دیدن کامل صفحه شما در دسترس قرار گیرند، از همان ابتدا صفحه کاملاً رندر شده را دریافت می‌کنند.
دست یابی به محتوای سریعتر: این موضوع در مواقعی که اینترنت ضعیف است یا دستگاه هایی که کند هستند، بیشتر قابل درک است. نشانه‌گذاری ارائه‌شده توسط سرور برای نمایش، نیازی به صبر کردن ندارد تا تمام جاوا اسکریپت دانلود و اجرا شود، بنابراین کاربر شما یک صفحه کاملاً رندر شده را زودتر می‌بیند. علاوه بر این، واکشی داده‌ها در سمت سرور برای بازدید اولیه انجام میشود، که احتمالاً اتصال سریع‌تری به پایگاه داده شما نسبت به مشتری دارد. این به طور کلی منجر به بهبود معیارهای Core Web Vitals، تجربه کاربری بهتر میشود و می‌تواند برای برنامه‌هایی که زمان تا محتوا مستقیماً با نرخ تبدیل مرتبط است حیاتی باشد.
مدل ذهنی یکپارچه: شما می توانید از همان زبان و همان مدل ذهنی اعلانی و مؤلفه گرا برای توسعه کل برنامه خود استفاده کنید، به جای اینکه بین یک سیستم قالب بندی درونی و یک فریم ورک Front-end به جلو و عقب بپرید.
معایب استفاده از SSR
رندر سمت سرور می تواند گران باشد زیرا بار کامل ارائه محتوای شما برای ربات ها و بازدیدکنندگان وب سایت انسانی بر عهده سرورهای شما است. پیاده سازی آن می تواند منابع فشرده ای داشته باشد، زیرا پیش فرض برای وب سایت های جاوا اسکریپت نیست و برای اجرا به کار تیم مهندسی شما نیاز دارد.
رندر سمت سرور نیز با جاوا اسکریپت شخص ثالث کار نمی کند. بنابراین، اگر از خدماتی مانند Bazaarvoice برای دریافت نظرات در وب سایت خود استفاده می کنید، بهتر است بدانید آنها با رندر سمت سرور ارائه نمی شوند.
تفاوت اصلی بین SSR و CSR ؟
رندر سمت سرور در درخواست اولیه می تواند کمی سریعتر باشد، کاملاً به این دلیل که به تعداد زیادی رفت و برگشت به سرور نیاز ندارد. با این حال، به اینجا ختم نمی شود و عملکرد آن نیز به عوامل دیگری بستگی دارد. البته عواملی که باعث میشود هر کاربر شرایط متفاوتی را تجربه کند عبارت اند از :
- سرعت اینترنت کاربر درخواست کننده
- چند کاربر فعال در یک زمان معین به سایت دسترسی دارند
- موقعیت فیزیکی سرور
- چقدر صفحات برای سرعت بهینه شده اند
و غیره…
از طرف دیگر، رندر سمت کلاینت در درخواست اولیه کندتر است زیرا چندین بار رفت و برگشت به سرور انجام می دهد. با این حال، پس از تکمیل این درخواست‌ها، CSR تجربه‌ای سریع از طریق چارچوب JS ارائه می‌دهد. در رندر سمت سرور درست است که سرعت لود صفحه بالا است اما هنگامی که کاربر نیازمند اقدام واکنش باشد سرعت انجام کار کاربر کم است.
ممکن است برای شما این سوال مطرح شود که تاثیرات SSR بر روی سئو سایت بیشتر است یا CSR ؟
رندر سمت سرور برای سئو بهتر از رندر سمت مشتری است. این به این دلیل است که رندر سمت سرور می تواند زمان بارگذاری صفحه را افزایش دهد، که نه تنها تجربه کاربر را بهبود می بخشد، بلکه می تواند به رتبه بهتر سایت شما در نتایج جستجوی گوگل کمک کند همچنین رندر سمت سرور بار رندر جاوا اسکریپت را از روی ربات های موتور جستجو حذف می کند و مسائل بودجه خزیدن که بر روی سرعت و ایندکس تاثیر دارد را حل می کند.
سخن پایانی
برنامه های وب مبتنی بر جاوا اسکریپت، عمدتاً بر روی React یا AngularJS ساخته می شوند. با این کار، پیچیدگی بیشتری به سئو اضافه میکند، بنابراین باید مطمئن شویم که گوگل قادر است JS را به طور موثرخزش کند، تا صفحات به درستی ایندکس و رتبه بندی شوند. برای این کار روش های متعددی وجود دارد که ما در این مطلب سرور سایت و تاثیرات SSR بر روی سئو سایت را به طور کامل مورد بررسی قرار دادیم.