بعنوان پیشگفتار باید بگم که این مقاله یک چکیده سطح بالا از تحقیقات عالی موجود هستش. به همین دلیل، من فقط به نکات بسیار مهم در موضوع شروع سئو در جاوا اسکریپت اشاره می کنم. در طول این مقاله به منابع تحقیقات مذکور اشاره خواهم کرد. همچنین یک لیست کامل از منابع رو در انتهای نوشته قرار خواهم داد که اگر خواستین عمیق بشین توی این مبحث، بتونین استفاده کنین.
سئو جاوا اسکریپت چیست؟
سدر هسته آن، اساسا به معنی ترجمه(نمایش) درست محتوا در صفحه، فهرست(index) شدن آن و در نهایت رتبه بندی شدن(ranking) آن توسط موتورهای جستجو می باشد. این مسئله به طور ویژه ای به زیاد شدن محبوبیت ترجمه سمت کلاینت (client side rendering) و وب سایت هایی که بوسیله فریم ورک های جاوا اسکریپت ساخته می شوند، مرتبط است. قبل از ادامه بحث، بیایید به ۲ نوع ترجمه(rendering) اصلی بپردازیم:
ترجمه سمت سرور(Server side rendering/SSR ):
روش سنتی ترجمه محتوا در صفحه می باشد. در واقع همه منابع صفحه شما در سرور شما جای گرفته اند. سپس وقتی صفحه درخواست می شود، HTML به مرورگر تحویل داده و ترجمه می شود، JS و CSS دانلود می شود و ترجمه(render) نهایی به کاربر نمایش داده می شود.
ترجمه سمت کلاینت(Client side rendering/ CSR):
روشی است که اخیرا استفاده می شود، این متد به جاوا اسکریپت اجرا شده سمت کلاینت (browser) توسط فریم ورک جاوا اسکریپت بستگی دارد. اساسا کاربر در ابتدا کد منبع(source code) را درخواست خواهد کرد که مقدار بسیار کمی HTMLقابل index شدن در آن خواهد داشت، سپس یک درخواست دوم برای فایل .js که همه محتوای HTML را بصورت رشته در جاوا اسکریپت دارد، فرستاده می شود.
تفاوت های اصلی بین SSR و CSR:
ترجمه سمت سرور کمی سریع تر است در درخواست اولیه، به سادگی به دلیل اینکه به مراجعه های متعدد به سرور نیاز ندارد. اگرچه این مسئله به اینجا ختم نمی شود، کارایی وب سایت به عوامل دیگه ای هم مربوط می شود که همه آن ها با هم می تواند به تجربه کاربری(UX) بسیار متفاوت تری بیانجامد. به برخی از این موارد در لیست زیر اشاره شده :
· سرعت اینترنت کاربری که درخواست مشاهده وب سایت را می دهد.
· تعداد کاربرانی که در آن لحظه به سایت دسترسی دارند.
· مکان فیزیکی سرور وب سایت
· میزان بهینه بودن صفحات برای سرعت بارگذاری و غیره ...
از سوی دیگر، ترجمه سمت کلاینت در درخواست اولیه آرام تر است، به دلیل اینکه با مراجعه های متعدد به سرور انجام می شود. اگرچه بعد از اتمام درخواست های اولیه، ترجمه سمت کلاینت (CSR) به وسیله فریم ورک های jsتجربه کاربری بسیار سریع و چشم نوازی را به کاربر می دهد.
در نوشته زیر یک تشبیه مفید از تفاوت بین SSR و CSR می توانید ببینید :
" با ترجمه سمت سرور(SSR)، هرموقع شما می خواهید یک صفحه وب جدید رو مشاهده کنید، شما باید برید بیرون و بدستش بیارید، این مشابه اینه که شما هر موقع که می خواهید چیزی بخورید، به سوپرمارکت مراجعه کنید. با ترجمه سمت کلاینت (CSR)، شما یک بار به سوپرمارکت مراجعه می کنید و 45 دقیقه وقت صرف گشتن و تهیه مواد خوراکی لازم برای یک ماه رو انجام میدید. سپس، هرموقع که می خواهید چیزی بخورید، فقط درب یخچال رو باز می کنید."
نقل قول از Adam Zerner.
برای چه منظوری این روند اتفاق می افتد؟
با گسترش محبوبیت فریم ورک های جاوا اسکریپت، همانند Angular، React و Vue.js، توسعه دهندگان هم اکنون می توانند صفحات وب سایت کارآمدتر و تجربه کاربری خیلی بهتر و سریع تری را راه اندازی کنند. اگرچه درصورتی که به دقت طرح ریزی نشود، این جهش در کارآمدی می تواند به قیمت پایین آمدن قابل توجه SEO سایت بیانجامد.
قبل از اینکه ادامه بدیم، بیایید به سرعت یک قدم به عقب برگردیم و تفاوت بین اینکه جاوا اسکریپت در گذشته به صورت عمومی چگونه استفاده می شد و اینکه استفاده آن درحال حاضر دچار چه تغییراتی شده است، بپردازیم. این پیشرفت در تصویر زیر مصور شده است: (تصویر زیر متعلق به DeepCrawl/Elephate است.)
در گذشته JS غالبا برای افزودن درجه های مختلف فعل و انفعال و ارتباط با صفحه وب استفاده می شد. این ارتباط با ارجاع به کتابخانه هایی همچون JQuery به دست می آمد. چون JS فقط محتوای HTMLکه از قبل در کد منبع(source code) موجود بود را تحت تاثیر قرار می داد، موتورهای جستجو در فهرست بندی و یافتن محتوای وب کمی مشکل داشتند. اگرچه با فریم ورک ها و CSR(ترجمه سمت کلاینت) موجود این روزها، به طورناگهانی کد منبع برای یک صفحه وب عملا خالی است و محتوای مورد نظر منحصرا توسط JS در سمت کلاینت اجرا و ترجمه می شود.
این مسئله، کار را برای موتورهای جستجو پیچیده می کند. اما گوگل تنها موتور جستجویی است که امروزه برای رسیدگی به این مشکل اقدام کرده است. هیچ کدام از موتورهای جستجوی دیگر حتی نزدیک به قابلیت های به کارگرفته شده توسط گوگل نیستند. این یعنی اینکه اگر محتوای CSR شما توسط گوگل فهرست می شود، به احتمال زیاد توسط هیچ موتور جستجوی دیگری فهرست نمی شود.
چگونه گوگل ترجمه جاوا اسکریپت(javascript rendering) را انجام می دهد؟
شرکت گوگل اخیرا پردازش ۲ مرحله ای(۲ موجی) که برای ترجمه و فهرست کردن استفاده می کند را در کنفرانس Google I/O فاش کرد.
اولین موج، کد منبع(source code) را درخواست می دهد و در محتوای HTMLو CSS موجود می خزد و آن ها را فهرست می کند، سپس همه لینک های موجود را به لیست خزش(crawl queue) می افزاید و کدهای واکنش(response) صفحه را دانلود می کند.
در سایت ترجمه شده در سمت کلاینت، در اولین موج پردازش، می توان گفت اساسا محتوایی برای فهرست کردن گوگل در کد منبع موجود نیست.
موج دوم می تواند چند ساعت تا چند هفته بعد اتفاق بیافتد. زمانی که بقیه منابع سایت که توسط JS تولید شده اند، برای فهرست و ترجمه شدن آماده هستند، گوگل به وب سایت بر می گردد تا محتوای جدید را فهرست کند.
آنچه گفته شد یعنی اینکه در شیوه SSR(ترجمه سمت سرور) ، مشکلی مبنی بر تاخیر ترجمه توسط گوگل وجود ندارد، چون همه محتوا از ابتدا در کد منبع موجود است و در اولین موج پردازش گوگل، فهرست می شود. در CSR(ترجمه سمت کلاینت)، جایی که محتوای قابل فهرست شدن تنها در زمان ترجمه آشکار می شود، با وجود تاخیر قابل توجه پردازش محتوا توسط گوگل، محتوای مورد نظر ممکن است برای روزها یا هفته ها فهرست نشود و در نتایج جستجو نمایش داده نشود.
چرا گوگل با ترجمه جاوا اسکریپت دست و پنجه نرم می کند؟
شما شاید از خودتون سوال کنید که چرا گوگل یک پردازش 2 مرحله ای برای ترجمه جاوا اسکریپت احتیاج دارد؟
این مهمه که به یاد داشته باشیم که ترجمه جاوا اسکریپت در مقیاس بزرگ، بسیار منابع فشرده ای لازم داره. این یعنی استفاده قابل ملاحظه ای از انرژی برق، نیروی پردازنده(cpu)، کاهش نرخ خزیدن بالقوه و موارد دیگر. این به نوبه خود به معنای افزایش قابل توجه هزینه مالی است.
دلیل این امر چیه؟
جاوا اسکریپت، موتور جستجو را مجبور می کند که وقت بیشتری صرف ترجمه کند، که به معنای مصرف بیشتر انرژی برق است، همچنین تقاضای استفاده بیشتر از CPUو استاندارد روند ترجمه کردن به طور چشمگیری کند می شود. حالا تصور کنید هر وب سایت در دنیای وب اگر از CSR بصورت مستقیم استفاده کند، می تونید ببینید که چرا ترجمه جاوا اسکریپت در چنین مقیاسی می تواند برای موتورهای جستجویی که سعی در کارآمدی دارند، مشکل ساز شود.
این کار اضافه برای ترجمه جاوا اسکریپت فقط مختص موتورهای جستجو نیست، شما در دستگاه های خودتون هم شاهد افزایش فشار ترجمه JS خواهید بود:
· توانمندی های CPUمورد استفاده در دستگاه کاربر(کامپیوتر دسکتاپ، لپ تاپ، موبایل، تبلت و غیره)، می تواند تفاوت زیادی داشته باشد. برای مثال CPUیک موبایل برای بارگذاری یک سایت مملو از JSسنگین، درگیری بیشتری خواهد داشت تا یک کامپیوتر دسکتاپ.
· جاوا اسکریپت سنگین، حجم زیادی از CPU، حافظه و حتی عمر باتری یک دستگاه را مصرف می کند. این رویه نشان می دهد که چقدر جاوا اسکریپت روی کارایی چیزهای مختلف (از ربات گوگل گرفته تا دستگاه موبایل) می تواند تاثیر داشته باشد.
· به عنوان نتیجه، همیشه خوبه که صفحات رو با استفاده از ابزار Chrome Dev Tools’ “Performance” tab برای زمان اجرا(run time) تست کنیم. در این ابزار می توانید کارایی دستگاه را با خفه کردن(تنگ کردن - throttling) شبکه امتحان کنید، که این کار کمک می کند تا قابلیت های CPU موبایل های مختلف را تست کنید، سرعت های اینترنت مختلف را تست کنید و متوجه شوید که صفحات وب سایت شما با آن مشخصات چگونه کار می کنند و واکنش نشان می دهند.
پیامدهای سئو CSR و SSR چیست؟
برای ترجمه سمت سرور(SSR)، همه محتوای HTMLدر source code موجود است که این بدان معناست که موتور جستجو می تواند بلافاصله محتوا را درخواست کند، در آن بخزد و آن را فهرست بندی کند. درنتیجه محتوای مورد نظر در زمان سریع تری رتبه بندی شده و در نتایج جستجو به نمایش در می آید.
برای ترجمه سمت کلاینت (CSR)، محتوای HTMLکه باید فهرست بندی شود، فقط زمانی که JSبصورت کامل در سمت کلاینت ترجمه شده است، ظاهر می شود. پس با سیستم ۲ موجی(۲ مرحله ای) که گوگل هم اکنون در اختیار دارد، ممکن است بین چند ساعت تا چند هفته طول بکشد تا محتوای مورد نظر خزیده و فهرست بندی شده و در آخر در نتایج جستجو به نمایش در بیاید. در این دوره زمانی، اگر منطق الویت بندی هم در کار گوگل باشد، به حساب نمی آید و به هم مرتبط نیستند و مدت زمان مذکور باید طی شود. به همین دلیل، در بعضی موارد، مدت زمان مذکور حتی طولانی تر هم می شود.
راه حل چیست؟
مادامی که گوگل روی ارتقای قابلیت های ترجمه جاوا اسکریپتی خودش کار می کند تا در نسخه های آینده کروم ارائه شود، این جدول زمانی مبهم به وب مسترهایی که در حال حاضر درگیر به نمایش در آوردن محتوای CSR هستند، کمکی نمی کند. این درحالی است که بقیه موتورهای جستجو حتی نزدیک به قابلیت های ترجمه jsتوسط گوگل هم نیستند.
دو راه اصلی برای این مشکل وجود دارد:
1- پیش ارائه (pre-rendering): اساسا شامل شنود و فرستادن لحظه ای HTML خالص به ربات موتور جستجو می شود در زمانی که صفحه شما را احتیاج دارد. این امر به همراه تضمین این است که کاربر شما همچنان از سرعت بالای CSRبهره مند است و همچنین محتوای HTML مورد نیاز برای رتبه بندی و فهرست شدن صفحات شما را آماده می کند.
2- جاوا اسکریپت ایزومورفیک (isomorphic javascript):
این گزینه توسط گوگل پیشنهاد می شود و شامل هردوی کلاینت و موتور جستجو می شود. به این صورت که هر دو، صفحات پیش ارائه و محتوای HTML قابل فهرست شدن را در بارگذاری اولیه می گیرند(اساسا همانند SSR عمل می کند). همه عملکرد جاوا اسکریپت بعدا در بالای آن لایه بندی می شود تا عملکرد سریع سمت کلاینت را به ارمغان بیاورد. این امر برای هردوی کاربران و ربات های موتورهای جستجو به بهترین شکل کار می کند، اگرچه اشکالات خیره کننده ای هم دارد:
پیاده سازی آن به نوعی پیچیده و خاص می باشد، و برنامه نویسان زیادی با آن درگیر هستند. همچنین پیاده سازی آن با توجه به منابعی که می خواهد تا با موفقیت به ثمر برسد، می تواند هزینه بر باشد. برای تشخیص بهترین راه برای اجرای SSR روی فریم ورک JS مورد نظر، باید تحقیقات گسترده ای انجام شود. این ها منابعی برای انجام SSR روی هر دوی Angular و React می باشند.
نتیجه گیری:
این امر کاملا مشخص است که استفاده از javascript برای بهبود تعامل، تجربه کاربری و ترجمه صفحات وب در حال گسترش است. به همین منظور، این متخصصان SEO هستند که باید در شروع پروژه های جدید، این ملاحظات را با توسعه دهندگان بهتر مطرح کنند.
گوگل و بقیه موتورهای جستجو، ظرفیت خود را در ترجمه صفحات JS در مقیاس بزرگ، افزایش خواهند داد. این امر بدون شک باعث ایجاد موانع جدیدی برای توسعه دهندگان خواهد شد، اگرچه به همین منوال تکنیک های برنامه نویسی هم رو به جلو حرکت می کند و در حال رشد است. ایده هایی که در این مقاله به آن ها پرداخته شد، برای دادن دیدگاه سطح بالایی از سئو جاوا اسکریپت و همچنین آشنایی با پیامدهای روش های مختلف پیاده سازی آن، مطرح شدند. اگر می خواهید در این رابطه بیشتر بدانید، این مقاله بی نظیر رو بهتون پیشنهاد می کنم(به توصیه نویسنده):
https://www.elephate.com/blog/ultimate-guide-javascript-seo/
برای مطالعه بیشتر به لینک های زیر هم می تونید سر بزنید:
· https://www.elephate.com/blog/ultimate-guide-javascript-seo/
· https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
· https://speedcurve.com/blog/your-javascript-hurts/
· https://www.deepcrawl.com/blog/events/webinar-recap-javascript-bartosz-goralewicz/
· https://www.briggsby.com/auditing-javascript-for-seo
· https://www.briggsby.com/dealing-with-javascript-for-seo
· http://www.stateofdigital.com/javascript-seo-crawling-indexing/
· https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc
· https://artandlogic.com/2015/05/the-what-and-why-of-javascript-frameworks/
منبع:
https://medium.com/@benjburkholder/javascript-seo-server-side-rendering-vs-client-side-rendering-bc06b8ca2383
