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

جاوا اسکریپت (JavaScript) یک زبان برنامه نویسی محبوب بوده و از شهرت بالایی در دنیای تجارت الکترونیک برخوردار می باشد. این شهرت نیز از توانایی بالای آن در ایجاد محیط های خرید کاربر پسند و ارائه تجربه کاربری بی نظیر به خریداران نشات گرفته است. برای نمونه، لود شدن آیتم های موجود در صفحه دسته بندی محصولات یا بروزرسانی پویای محصولات، از طریق جاوا اسکریپت امکان پذیر خواهد بود. در حالی که استفاده از جاوا اسکریپت برای سایت های فروشگاهی بسیار مفید است اما چالش هایی برای سئو جاوا اسکریپت برای کسب و کارهای آنلاین ایجاد می کند.

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

جاوا اسکریپت چگونه در سایت های تجارت الکترونیک عمل می نماید

زمان ایجاد یک سایت تجارت الکترونیک مانند فروشگاه‌ها، از HTML برای تولید محتوا، از CSS جهت طراحی و از JavaScript به منظور تعامل با بک اند سرور استفاده می گردد. جاوا اسکریپت سه نقش مهم را در سایت های فروشگاهی ایفا می کند:

1. افزودن قابلیت تعامل به صفحات وب

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

2. اتصال به سرورهای بک اند (Backend Servers)

جاوا اسکریپت با بهره گیری از Asynchronous JavaScript (به اختصار "AJAX") و Extensible Markup Language (به اختصار "XML")، امکان یکپارچه سازی بهتری را با سرور فراهم می کند. بدین صورت، امکان تبادل ناهمگن اطلاعات با سرور بدون نیاز به تغییر آدرس و صفحه مورد استفاده، فراهم خواهد شد.

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

جاوا اسکریپت امکان بروزرسانی همزمان محصولات و تبادل اطلاعات با سرور (در لحظه) را فراهم می کند. به عنوان مثال، کاربر می‌تواند به صورت همزمان نتیجه اعمال تغییرات خود روی یک محصول (تغییر رنگ، تعداد و غیره) را در سبد خرید مشاهده کند. همچنین امکان drag and drop (کشیدن و رها کردن) المان های موجود در صفحه نیز قابل پیاده سازی است.

3. ردیابی و آنالیز کاربران

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

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

گوگل پردازش جاوا اسکریپت را در سه مرحله انجام می دهد. نام این مراحل به ترتیب خزیدن(crawling)، تفسیر کردن (rendering) و فهرست بندی (indexing) می باشد.

تصویر(1)

همانگونه که در تصویر (1) قابل مشاهده است، ربات گوگل صفحات سایت را در صف خزیدن و تفسیر کردن قرار می دهد. در این مرحله ربات ها صفحات را برای یافتن محتوای جدید اسکن می کنند. اسکن صفحات برای ارزیابی محتوای جدید احتمالی، انجام می گردد. در این بین، وقتی آدرس جدیدی برای خزیدن پیدا شود، به فایل robots.txt رجوع می شود تا اجازه خزیدن آن فایل بررسی گردد. این آدرس های جدید در بخش "صف خزیدن" کشف خواهند شد.

اگر دسترسی به آن آدرس ممنوع باشد، ربات گوگل نیز از بررسی چشم پوشی خواهد کرد. در مرحله دوم فایل‌های HTML، CSS و JavaScript تفسیر شده و به فرمتی تبدیل می‌شوند که به راحتی از سوی گوگل قابل فهرست یا اصطلاحا "ایندکس" شدن باشند. در مرحله نهایی نیز محتوای تفسیر شده، به فهرست ایندکس گوگل اضافه می شود تا در نتایج جستجو، قابل نمایش باشد.

رایج ترین چالش های سئو جاوا اسکریپت برای کسب و کارهای آنلاین

خزیدن فایل های جاوا اسکریپت به مراتب سخت تر از فایل های HTML خواهد بود. در جدول (1) مقایسه جاوا اسکریپت و HTML قابل مشاهده است:

جدول(1)

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

محدودیت نرخ خزش (Crawl Budget)

سایت های تجارت الکترونیک معمولا دارای حجم عظیمی از صفحات با سازماندهی ضعیف می باشند. نرخ خزش بالایی برای این صفحات لازم است و پیش‌نیازهای آن زیاد هستند. زمانی که از جاوا اسکریپت نیز استفاده گردد، مدت زمان پردازش زیاد خواهد شد. از طرفی وجود محتوای قدیمی، صفحات orphan(صفحه ای که هیچ لینکی به آن اشاره نکند) و صفحات zombie (صفحاتی که هیچ ترافیک ورودی برای سایت ایجاد نکرده و دسترسی ربات‌ها به آنها بسیار دشوار است) می توانند باعث هدر رفتن بخش زیادی از نرخ خزش سایت شوند.

محدودیت نرخ تفسیر (Render Budget)

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

گوگل محتوای جاوا اسکریپت را در دور دوم ایندکس، تفسیر می کند:

تصویر(2)

نمایش محتوا در کدهای HTML جهت دسترسی گوگل به آن، از اهمیت بالایی برخوردار است. جهت بررسی می توان پس از ورود به یک صفحه، از ابزار Inspect element مرورگر استفاده نمود. اگر در زمان استفاده از Inspect element محتوایی مشاهده شود، آن محتوا از سوی ربات نیز دیده خواهد شد و عکس این موضوع نیز صادق است.

عیب یابی خطا‌های جاوا اسکریپتی سایت دشوار است

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

در این شرایط، استفاده از ابزار crawl پیشرفته و آنالیز کننده ها، می توانند موثر واقع شوند. از مشهورترین ابزارها می توان به Semrush Log File Analyzer، Google Search Console Crawl Stats و JetOctopus اشاره نمود. برای نمونه بخش "Crawl Stats" در کنسول گوگل اطلاعات ارزشمندی از وضعیت کلی Crawl ارائه می کند.

تصویر(3)

وضعیت crawl سایت در سه بخش ثبت و ذخیره می گردد:

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

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

سایت های تجارت الکترونیک که بر مبنای React، Angular و Vue طراحی شده اند، به صورت پیشفرض Render سایت را در مرورگر کاربر انجام می دهند. از این رو، ربات ها نمی‌توانند محتوای رندر شده را مشاهده کنند. این امر منجر به مشکلات تفسیر و ایندکس سایت و همچنین بروز مشکل در سئو جاوا اسکریپت برای کسب و کارهای آنلاین می گردد.

فایل های حجیم و بهینه نشده جاوا اسکریپت

معمولا لود فایل های جاوا اسکریپت زمانبر بوده و از نمایش سریع محتوای اصلی سایت جلوگیری می کنند. این موضوع نیز بر تجربه کاربری و سئو سایت، اثر منفی دارد. مرور تکنیک های بهینه سازی جاوا اسکریپت می تواند برای سایت های فروشگاهی مفید باشد.

1- بررسی مشکلات احتمالی سئو از سمت جاوا اسکریپت

بدین منظور می توان سه تست سریع روی صفحه اصلی، دسته بندی محصولات و محصول موجود و دیگر صفحات مهم سایت انجام داد.

• ابزار URL Inspection: وارد کنسول جستجوی گوگل شده و آدرس موردنظرتان را در بخش Inspect any URL وارد کنید. سپس enter را بزنید:

تصویر(4)

در صفحه جدید روی "TEST LIVE URL" کلیک کرده و صبر نمایید تا نتیجه نمایش داده شود:

تصویر(5)

سپس در صفحه جدید روی "VIEW TESTED PAGE" کلیک کنید و تب "SCREENSHOT" را انتخاب نمایید. اگر مانند تصویر(6)، صفحه سفید مشاهده شود، یعنی گوگل در render آن صفحه با مشکل روبرو است.

تصویر(6)

برای یافتن مشکلات سایر صفحات نیز باید این فرایند تکرار گردد.

• جستجوی گوگل: جستجو پیرامون صفحات سایت در گوگل، می تواند نشان دهد که آدرس ایندکس شده است یا خیر. جهت انجام این کار، پس از ورود به صفحه جستجو گوگل، عبارت "site:example.com inurl:exampleurl" را تحت دامنه و آدرس صفحه دلخواه خود جستجو نمایید:

تصویر(7)

تصویر(7) نشان می دهد که آدرس about از دامنه example.com در گوگل ایندکس نشده است. در این مثال، سایت example.com با جاوا اسکریپت پیاده‌سازی شده و ظاهرا مشکلی در crawl فایل‌های جاوا اسکریپت وجود دارد که از ایندکس سایت جلوگیری می‌کند.

• محتوای سایت را جستجو کنید: ممکن است برخی اوقات آدرس صفحه ایندکس شود اما محتوای آن از سوی گوگل قابل خواندن نباشد و ایندکس نشود. جستجوی محتوای صفحات می تواند در تشخیص این موضوع مفید باشد. برای این امر بخشی از محتوای یک از صفحات یا محصولات را در گوگل جستجو نمایید:

تصویر(8)

اگر مانند تصویر(9)، این محتوا در نتایج جستجوی گوگل نمایش داده شود، در واقع مشکلی برای ایندکس آن وجود نداشته است. 

تصویر(9)

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

2- پیاده سازی تفسیر پویای (Dynamic Rendering) صفحات

نحوه render یا تفسیر یک سایت، در ایندکس شدن محتوای مبتنی بر جاوا اسکریپت آن تاثیر مستقیم دارد. دو روش render جاوا اسکریپت عبارتند از:

• تفسیر سمت سرور (Server-Side Rendering) به اختصار SSR:

در این حالت عملیات render سایت، در سرور انجام شده و نتیجه آن به ربات ها یا مرورگر کاربران ارائه می گردد. crawl این سایت ها مشابه صفحات HTML است. با این حال معمولا باعث ایجاد چالش‌هایی در پیاده‌سازی آن شده و لود سرور را افزایش خواهد داد.

علاوه بر این، لود بالا از سمت سرور باعث افزایش Time to First Byte یا به اختصار TTFB می گردد. در این روش، توسعه دهندگان باید از به کار گیری توابع فعال در عناصر Document Object Model یا به اختصار DOM (یک رابط برنامه نویسی برای نمایش ساختار صفحات است) خودداری کنند.

• تفسیر سمت کاربر (Client-Side Rendering) به اختصار CSR:

در این روش، عملیات render سایت در مرورگر کاربران انجام می گردد. همین موضوع باعث ایجاد مشکلاتی در Crawl ،Render و ایندکس سایت برای ربات ها می شود.

یک جایگزین مناسب برای SSR و CSR، استفاده از dynamic rendering است. در این روش بر اساس نوع کاربر درخواست کننده، محتوای سایت به روش SSR یا CSR ارائه می گردد. در این حالت اگر کاربر واقعی وارد سایت شود، محتوا به صورت CSR به مرورگر ارسال می شود. در مقابل اگر ربات وارد سایت گردد، محتوا به صورت SSR تحویل آن خواهد شد. در این صورت ربات گوگل همواره یک صفحه ثابت را دریافت می کند. گوگل رسما از dynamic rendering پشتیبانی می کند.

تصویر(10) 

این روش کمک می کند که محتوای صفحات سایت، تحت HTML ثابت به ربات های خزنده گوگل ارائه گردند. در این صورت، تاثیر منفی شامل حال سئو جاوا اسکریپت برای کسب و کارهای آنلاین نخواهد شد. پیاده سازی dynamic rendering برای سایت های تجارت الکترونیک بسیار مناسب است. این سایت ها محتوای زیادی در خود جای داده اند و مرتب آنها را تغییر می دهند.

3- مسیردهی آدرس ها را درست انجام دهید

فریم‌ورک‌های جاوا اسکریپت از routing (روشی برای الحاق محتوا به آدرس URL) جهت تحویل محتوا استفاده می کنند. در مقابل فریم ورک های Angular و Vue به صورت پیشفرض آدرس های URL را به وسیله هشتگ (#) ایجاد می کنند. برای مثال:

www.example.com/#/about-us

این نوع آدرس‌ها از سوی ربات‌های گوگل نادیده گرفته می‌شوند. به همین دلیل، استفاده از هشتگ توصیه نمی گردد. بهتر است به جای آن از آدرس ثابتی مانند http://www.example.com/about-us استفاده شود.

4- تابع پروتکل های لینک داخلی باشید

لینک‌های داخلی، به ربات ها در crawl کردن و مشخص نمودن صفحات مهم کمک می کنند. ساختار لینک‌دهی ضعیف به خصوص در سایت‌های مبتنی بر جاوا اسکریپت، می تواند مشکلات بزرگی برای سئو سایت ایجاد کند. یکی از مشکلات رایج، پیاده سازی لینک تحت onclick جاوا اسکریپت است. برای نمونه:

<a href=”/important-link”onclick=”changePage(‘important-link’)”>Crawl this</a>