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

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

اصول اولیه

جاوا اسکریپت چیست؟

زمانی که یک صفحه وب مدرن می‌سازیم، سه مؤلفه عمده وجود دارند :

۱- HTML Hypertext Markup Language (زبان نشانه‌گذاری هایپرتکست) مانند ستون فقرات یا سازمان‌دهنده محتوا بر روی سایت عمل می‌کند. HTML ساختار وب‌ سایت است (برای مثال: عنوان‌ها، پاراگراف‌ها، عناصر لیست و …) و تعیین کننده محتوای استاتیک می‌باشد.

۲- CSSCascading Style Sheets (صفحات آبشاری) شامل طراحی، استایل و زرق و برقی است که به وب‌سایت اضافه می‌شود. CSS لایه نمایشی صفحه را تشکیل می‌دهد.

۳- جاوا اسکریپت جاوا اسکریپت مؤلفه تعاملی و اصلی وب داینامیک است.

تاثیر جاوااسکریپت ، css و html در طراحی سایت

جاوا اسکریپت یا در تگ <script> در سند HTML قرار داده می‌شود و یا به آن لینک/ارجاع داده می‌شود. در حال حاضر کتابخانه‌های زیادی در رابطه با جاوا اسکریپت و فریم‌ورک‌هایی نظیر jQuery، AngularJS، ReactJS، EmberJS و … وجود دارد.

تعدادی از کتابخانه‌ها و فریم‌ورک‌های جاوا اسکریپت :

AJAX چیست؟

AJAX یا JavaScript و XML غیر هم‌زمان (Asynchronous JavaScript and XML) مجموعه‌ای از تکنیک‌های توسعه یافته وب هستند که از ترکیب JavaScript و XML استفاده می‌کنند که این امر به اپلیکیشن‌های وب اجازه می‌دهد تا بدون دخالت در صفحه فعلی با یک سرور در پیش‌زمینه ارتباط بر قرار کنند. غیر هم‌زمانی به معنای این است که توابع و خطوط دیگر کد می‌توانند هنگام اجرای اسکریپت async نیز اجرا شوند. XML زبان اولیه‌ای بود که برای عبور دادن داده‌ها استفاده می‌شد، اگرچه که اصطلاح AJAX برای همه انواع نقل و انتقالات داده‌ها استفاده می‌شود (مانند JSON، حدس می‌زنم که اصطلاح AJAJ به خوبی و راحتی AJAX نیست!).

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

می‌توان AJAX را به عنوان درخواست‌های کوچک سرور فرض کرد. یکی از نمونه‌های خوب AJAX، Google Maps است. صفحه بدون نیاز به بارگذاری کامل به روز رسانی می‌شود (همانطور که کاربر در صفحه پرسه می‌زند، از درخواست‌های کوچک سرور برای بارگذاری محتوا استفاده می‌شود).

نمونه مدل ajax وب و نمونه سنتی وب

مدل Document Object (DOM – هدف سند) چیست؟

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

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

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

امروزه DOM اغلب بسیار متفاوت از سند HTML اولیه است، به همین دلیل است که جمعاً آن را HTML داینامیک می‌نامند. HTML داینامیک قابلیتی است که صفحه به واسطه آن می‌تواند محتوای خود را به تناسب اطلاعات ورودی کاربر، شرایط محیطی (مثلاً زمان) و متغیرهای دیگر و با استفاده از HTML، CSS و JavaScript تغییر دهد.

یک مثال ساده با تگ <title> که توسط جاوا اسکریپت ایجاد شده است :

منبع HTML DOM

مرورگر وب بدون واسط گرافیکی کاربر (headless browsing) چیست؟

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

PhantomJS و Zombie.js اسکریپت‌های مرورگر وب بدون واسط گرافیکی کاربر هستند که معمولاً  برای خودکارسازی تعامل وب در تست‌ها و رندر کردن عکس‌های لحظه‌ای HTML استاتیک در درخواست‌های اولیه (پیش از رندر کردن) مورد استفاده قرار می‌گیرند.

چرا جاوا اسکریپت می‌تواند برای سئو یک چالش باشد؟ (و چگونه مشکلات را رفع می‌کند؟)

سه دلیل اصلی برای نگرانی در مورد جاوا اسکریپت در سایت وجود دارد :

۱- قابلیت ردیابی (Crawlability) : توانایی ربات‌ها برای ردیابی سایت

۲- قابلیت دسترسی (Obtainability) : توانایی ربات‌ها برای دسترسی به اطلاعات و تجزیه محتوا

۳- درک تاخیر سایت : که با عنوان مسیر رندر کردن بحرانی نیز شناخته می‌شود.

قابلیت ردیابی (Crawlability)

آیا ربات‌ها قادر هستند تا URLهای شما را پیدا کرده و معماری سایت‌ تان را درک کنند؟ دو عنصر مهم در اینجا وجود دارد :

۱- مسدودسازی موتورهای جستجو از جاوا اسکریپت (حتی به طور تصادفی)

۲- ایجاد لینک های داخلی مناسب ، نه استفاده از رویدادهای جاوا اسکریپت به عنوان جایگزینی برای تگ‌های HTML

چرا مسدودسازی جاوا اسکریپت مسئله مهمی است؟

اگر موتورهای جستجو برای ردیابی جاوا اسکریپت مسدود شده باشند، تجربه کامل سایت را دریافت نمی‌کنند. این یعنی موتورهای جستجو نمی‌توانند چیزی را که کاربر نهایی می‌بینند، ببینند. این امر می‌تواند موجب کاهش جذابیت سایت برای موتورهای جستجو شده و در نهایت موجب نادیده گرفته شدن آن شود. (در صورتی که هدف تخریب باشد). [ مقاله : آیا موتورهای جستجو برای ردیابی و ایندکس جاوا اسکریپت آماده هستند؟ ]

انجام Fetch در گوگل مانند robots.txt و TechnicalSEO.com و استفاده از ابزارهای تست Fetch و Render می‌تواند به شناسایی منابعی که Googlebot را مسدود کرده‌اند کمک کند.

آسان‌ترین راه برای حل این مشکل فراهم کردن امکان دسترسی موتورهای جستجو به منابعی است که آن‌ها برای درک تجربه کاربری شما به آن نیاز دارند.

نکته مهم : با تیم توسعه خود بر روی این موضوع کار کنید که کدام فایل‌ها باید یا نباید در دسترس موتورهای جستجو قرار بگیرند.

ایجاد لینک‌ داخلی

لینک‌ دهی داخلی باید با تگ‌های لنگر منظم در HTML یا DOM پیاده‌سازی شود (استفاده از تگ HTML hrefs=”www.example.com” ) و در مقابل استفاده از توابع جاوا اسکریپت برای اینکه به کاربر اجازه داده شود که سایت را بپیماید.

اساساً از رویداد‌های onclick جاوا اسکریپت به عنوان جایگزینی برای ایجاد لینک داخلی استفاده ننمایید. در حالیکه ممکن است URL های پایانی یافته شده و ردیابی شوند (از طریق رشته‌هایی که در کد جاوا اسکریپت یا نقشه‌های سایت XML وجود دارد)، اما به نویگیشن (Navigation) جهانی سایت وابسته نیستند.

باتوجه به معماری سایت و اهمیت صفحات، لینک‌ دهی داخلی سیگنالی قوی برای موتورهای جستجو محسوب می‌شود. در واقع لینک‌ های داخلی بسیار قدرتمند هستند و در شرایطی خاص می‌توانند موجب لغو ” عوامل قوی سئو ” مانند تگ‌های canonical شوند. [برای آشنایی بیشتر با تگ های canonical ، مطالعه “استانداردسازی” را پیشنهاد می کنیم.]

ساختار URL

از لحاظ تاریخی سایت‌ هایی که بر اساس جاوا اسکریپت ساخته شده‌اند (که همچنین با عنوان سایت‌های AJAX نیز شناخته می‌شوند) از تعیین کننده‌های هویت قطعات (#) در URL ها استفاده می‌کنند.

توصیه نمی‌شود :

  • هشتگ تنها (#) : این نشانه تنها قابل ردیابی نیست. از این نشانه برای شناسایی لینک لنگر (که با عنوان لینک پرشی نیز شناخته می‌شود) استفاده می‌شود. این‌ها لینک‌هایی هستند که اجازه می‌دهند کاربر به یک بخش از محتوا در صفحه پرش کند. هر بخشی که پس از هشتگ تنها در URL وجود داشته باشد هیچ‌گاه به سرور ارسال نشده و موجب می‌شود که صفحه با یک ID تطبیقی به طور خودکار به عنصر اول (یا اولین عنصر <a> با نام اطلاعات مربوطه) اسکرول شود. گوگل استفاده از ” # ” را در URL توصیه نمی‌کند.
  • Hashbang (!#) ( و URL های escaped_fragments) : URLهای Hashbang هکی برای پشتیبانی از ردیاب‌ها بودند (که گوگل در حال حاضر می‌خواهد از آن‌ها اجتناب کرده و فقط از پشتیبانی‌های Bing استفاده کند). ماه‌ها پیش گوگل و بینگ یک راه حل AJAX پیچیده را ارائه دادند، بطوریکه یک URL (!#) با یک UX و تجربه معادل escaped_fragment HTML برای ربات‌ها به طور هم‌زمان کار می‌کنند. گوگل هنوز نسبت به این توصیه تردید دارد و ترجیح می‌دهد تا تجربه کاربری دقیق را دریافت کند. در زمینه escaped fragments دو تجربه وجود دارد :
    • تجربه اصلی (که با عنوان Pretty URL نیز شناخته می‌شود) : این URL یا باید !# (hashbang) داشته باشد یا عنصر متا که هر دو تا نشان می‌دهند که escaped fragment وجود دارد ( <meta name=”fragment” content=”!”> ).
    • Escaped Fragment (که با عنوان Ugly URL و عکس لحظه‌ای از HTML نیز شناخته می‌شود) : این URL، hashbang (!#) را جایگزین ” _escaped_fragment_” کرده و عکس لحظه‌ای از HTML ارائه می‌دهد. دلیل نامیده شدن آن به ugly URL این است که طولانی است و مانند هک به نظر می‌رسد.


توصیه می‌شود :

    • pushState History API : PushState بر اساس نویگیشن بوده و بخشی از History API است (تاریخچه مرورگر وب). pushState اساساً URL موجود در نوار آدرس و فقط چیزهایی را که به واسطه آپدیت صفحه نیازمند تغییر هستند، به روز رسانی می‌کند. این به سایت‌های جاوا اسکریپت اجازه می‌دهد تا از URLهای “تمیز” استفاده کنند. PushState در حال حاضر هنگام پشتیبانی از نویگیشن مرورگر برای رند از جانب مشتری یا رندر دوطرفه، توسط گوگل پشتیبانی می‌شود.
      • یکی از قابلیت‌های خوب استفاده از pushState اسکرول کردن نامحدود است (برای مثال همانطور که کاربر به بخش‌های جدید صفحه می‌رود URL نیز آپدیت می‌شود). در حالت ایده‌آل، اگر کاربر صفحه را ریفرش کند، تجربه آن‌ها را در همان نقطه قرار می‌دهد. گرچه که نیازی به ریفرش کردن صفحه نیست زیرا همانطور که به طرف پایین اسکرول می‌کنیم محتوا و URL موجود در نوار آدرس نیز آپدیت می‌شوند.
      • مثال : یک نمونه خوب از پیاده‌سازی اسکرول کردن نامحدود در موتور جستجو توسط جان مولر در گوگل انجام شده که می‌توانید در اینجا ببینید. او از نظر فنی از replaceState() استفاده کرد که مانند pushState دارای دکمه بازگشت نیست.
      • بیشتر بخوانید : Mozilla PushState History API Documents

قابلیت دسترسی (Obtainability)

نشان دادیم که موتورهای جستجو از مرورگر وب بدون واسط گرافیکی کاربر برای رندر کردن DOM استفاده می‌کنند تا بتوانند درک بهتری از تجربه کاربری و محتوای داخل صفحه به دست بیاورند. به عبارت دیگر گوگل می‌تواند (به جای استفاده از سند HTML) جاوا اسکریپت را پردازش کرده و از DOM استفاده کند.

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

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

  • اگر کاربر برای استفاده از یک بخش باید با چیزی تعامل کند، احتمالاً موتورهای جستجو آن را نمی‌بینند.
  • گوگل یک کاربر تنبل است. نه کلیک می‌کند، نه اسکرول می‌کند و نه لاگین می‌کند. اگر یک UX کامل از کاربر تقاضای اقدام داشته باشد، باید برای اطمینان از اینکه ربات‌ ها تجربه یکسانی را دریافت می‌کنند، احتیاط‌های لازم را به عمل آورد.
  • اگر جاوا اسکریپت تا ۵ ثانیه پس از بارگذاری جاوا اسکریپت اجرا شود، ممکن است موتورهای جستجو آن را نبینند.
  • جان مولر می‌گوید هیچ ارزش زمانی خاصی وجود ندارد، گرچه سایت‌ ها باید سعی کنند که طی ۵ ثانیه بارگذاری شوند.
  • تست‌های فریاد قورباغه (Screaming Frog tests) نشان می‌دهند که ۵ ثانیه برای رندر کردن محتوا نیاز است.
  • رویداد بارگذاری صفحه به اضافه ۵ ثانیه چیزی است که PageSpeed Insights گوگل، Mobile Friendliness Tool و Fetch گوگل از آن استفاده می‌کنند؛ تست زمانی مکس پرین را بررسی کنید.
  • اگر خطایی در جاوا اسکریپت باشد، هم مرورگرها و هم موتورهای جستجو قادر به عبور از آن نخواهند بود و اگر کد به صورت کامل اجرا نشود، بخش‌هایی از صفحه به صورت بالقوه از دست خواهند رفت.

چگونه می‌توان مطمئن شد که گوگل و موتورهای جستجوی دیگر می‌توانند به محتوای شما دسترسی داشته باشند

۱- تست

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

اولین بیانیه‌ای که گوگل در مورد بهتر فهمیدن وب (برای مثال جاوا اسکریپت) اظهار داشت در ماه مه ۲۰۱۴ بود. متخصصان می‌گویند که گوگل حتی بسیار قبل‌تر از این بیانیه نیز می‌توانست جاوا اسکریپت را ردیابی کند. تیم iPullRank در سال ۲۰۱۱ دو مقاله جالب در این مورد نوشته‌اند: Chrome ربات گوگل است و ربات‌های گوگل تا چه اندازه هوشمند هستند؟ مقاله آدام آدِت نیز با عنوان ” گوگل می‌تواند جاوا اسکریپت را ردیابی کند و از DOM استفاده کند ” در سال ۲۰۱۵ تایید شده است. بنابراین اگر می‌توانید محتوای خود را در DOM ببینید، احتمال این وجود دارد که محتوایتان توسط گوگل تجزیه شده باشد.

همیشه از جاوا اسکریپت استفاده نمی‌کنم

اما وقتی استفاده می‌کنم، می‌دانم که گوگل می‌تواند DOM و HTMLهایی که به صورت داینامیک تولیده شده‌اند را ردیابی کند.

 

Bartosz Goralewicz اخیراً آزمایش جالبی را انجام داده که در آن از ترکیبی از کتابخانه‌های مختلف جاوا اسکریپت و فریم‌ورک‌ها برای تعیین نحوه تعامل گوگل با صفحات استفاده کرده است (برای مثال: آیا URL یا محتوا را ایندکس می‌کنند؟ GSC چگونه تعامل می‌کند؟ و …). نهایتاً معلوم شد که گوگل قابلیت تعامل با بسیاری از اشکال جاوا اسکریپت را دارد و مشخص کرد که ممکن است برخی از فریم‌ورک‌های خاص نیز چالش برانگیز باشند. حتی جان مولر یک گروه تحقیقاتی در مورد جاوا اسکریپت تشکیل داد (آنطور که فهمیده‌ام بسیار کارساز بوده).

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

” گلوله یک آزمایش تجربی است که هدف آن فهمیدن این است که چه چیزی کارآمد است و سه معیار دارد : یک گلوله باید کم هزینه و کم خطر بوده و کمترین حواس‌پرتی را ایجاد کند. شرکت‌های ۱۰x (10Xers) از گلوله‌ها برای اعتبار بخشیدن به چیزی که واقعاً کارآمد است استفاده می‌کنند. آن‌ها بر اساس این اعتبار بخشی تجربی منابع خود را برای پرتاب یک توپ متمرکز می‌کنند و این باعث می‌شود که بتوانند از شرط‌های متمرکز بازده زیادی را کسب کنند. ”

تست و بررسی‌های زیر را مدنظر قرار دهید :

۱- تایید کنید که محتوایتان در داخل DOM پدیدار می‌شود.

۲- زیرمجموعه‌ای از صفحات را تست کنید تا ببینید آیا گوگل می‌‌تواند محتوا را ایندکس کند.

۳- نقل‌قول‌های محتوای خود را به صورت دستی چک کنید.

۴- از طریق Fetch with Google ببینید که آیا محتوایتان ظاهر می‌شود یا خیر.

۵- ظاهراً Fetch with Google  هنگام بارگذاری و یا پیش از timeout اتفاق می‌افتد. این تستی خوب برای فهمیدن این است که ببینید آیا گوگل قادر به دیدن محتوا شماست یا خیر و آیا جاوا اسکریپت را در robots.txt خود مسدود می‌کنید یا خیر. گرچه که Fetch with Google عاری از خطا نیست اما برای شروع خوب است.

نکته: اگر در GSC تایید نشده‌اید، Fetch and Render As Any Bot Tool را در سایت Technicalseo.com امتحان کنید.

اگر پس از اینکه همه این‌ها را تست انجام دادید متوجه شدید که چیزی کار نمی‌کند و موتورهای جستجو و ربات‌ها برای ایندکس کردن و دسترسی به محتوا در کشمکش هستند، چه باید کرد؟ شاید نگران موتورهای جستجوی جایگزین باشید ( مانند : DuckDuckGo، Facebook، LinkedIn و … ) یا شاید از اطلاعات متایی استفاده می‌کنید که نیازمند تجزیه توسط ربات‌های دیگر است، مانند : کارت‌های خلاصه Twitter یا تگ‌های Facebook Open Graph . اگر هر کدام از این‌ها در تست‌‌تان مشخص شد و یا در مورد آن نگرانی داشتید، ممکن است که عکس‌برداری لحظه‌ای از HTML (HTML snapshot  ) تنها تصمیمی باشد که می‌‌توانید اتخاذ کنید.

۲- HTML SNAPSHOTS

HTML SNAPSHOTS چیست؟

HTML snapshots یک صفحه کاملاً رندر شده است (که ممکن است هر کسی در DOM دیده باشد) که می‌‌توان آن را به ربات‌های موتور جستجو باز گرداند (نسخه استاتیک HTML از DOM).

گوگل در سال ۲۰۰۹ HTML snapshots  را معرفی کرد، در سال ۲۰۱۵ از آن‌ اعلام نارضایتی کرد (اما هنوز آن‌ را پشتیبانی می‌کرد) و در اواخر سال ۲۰۱۶ به طور ناخوشایندی آن را عنصری نامید که باید از آن اجتناب کرد. HTML snapshots همیشه موضوع مورد منازعه گوگل بوده است. گرچه درک آن‌ها اهمیت دارد چون در شرایط خاص ضروری هستند.

اگر موتورهای جستجو (یا سایت‌هایی مانند فیسبوک) نتوانند جاوا اسکریپت شما را درک کنند، بهتر است از HTML snapshot استفاده کنید تا اینکه محتوایتان اصلاً ایندکس نشده و درک نشود. در حالت ایده آل، سایت شما از نوعی از کشف عامل کاربری بر روی سرور استفاده کرده و HTML snapshot را به ربات باز می‌گرداند.

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

ملاحظات

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

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

” HTML snapshot باید حاوی همان محتوایی باشد که کاربر نهایی در یک مرورگر می‌بیند. اگر چنین نیست، ممکن است با مشکل پنهان شدن مواجه باشید. ”

پرسش‌های متداول بخش Google Developer AJAX Crawling

مزایا :

علیرغم این ملاحظات، HTML snapshots  دارای مزایای قدرتمندی نیز هستند :

۱- دانستن اینکه موتورهای جستجو و ردیاب‌ها قادر به درک تجربه هستند.

  • ار راممکن است درک انواع مشخصی از جاوا اسکریپت برای گوگل سخت‌تر باشد (… Angular یا مشخصاً AngularJS 2)

۲- دیگر ردیاب‌ها و موتورهای جستجو (مانند بینگ و فیسبوک) قادر به درک تجربه هستند.

  • بینگ موتور جستجویی است که اظهار نداشته می‌تواند جاوا اسکریپت را ردیابی و ایندکس کند. ممکن است HTML snapshots تنها راه حل برای یک سایت سنگین شده با جاوا اسکریپت باشند. درست مثل همیشه پیش از به کار بردن آن مطمئن شوید که این مورد مناسب شماست.

تاخیر سایت

هنگامی که مرورگر یک سند HTML را دریافت کرده و DOM را می‌سازد (گرچه مرحله‌ای به عنوان پیش اسکن وجود دارد)، اکثر منابعی که در سند HTML ظاهر شده‌اند، بارگذاری می‌شوند. این یعنی اگر یک فایل بزرگ در بالای سند HTML خود دارید، مرورگر اول آن فایل بزرگ را بارگذاری می‌کند.

مسیر رندر کردن بحرانی گوگل (Critical Rendering Path) یعنی بارگذاری چیزی که کاربر نیاز دارد در اسرع وقت، که می‌توان آن را چنین ترجمه کرد : هر چیزی که در above-the-fold وجود دارد را در پیش چشم کاربر قرار می‌دهد؛ ASAP.

Critical Rendering Path – بارگذاری‌های رندر شده بهینه به صورت تدریجی ASAP :

تفاوت رندرینگ بهینه و غیر بهینه

اگر منابع غیر ضروری دارید یا فایل‌های جاوا اسکریپت توانایی صفحه برای بارگذاری را مسدود کرده‌اند، جاوا اسکریپت شما مسدود کننده رندرینگ است. یعنی جاوا اسکریپت شما پتانسیل صفحه برای بارگذاری سریع‌تر را مسدود می‌کند (که تاخیر دریافتی نیز نامیده می‌شود).

زمان بارگذاری دریافتی

راه حل‌های رفع مسدودسازی رندرینگ در جاوا اسکریپت

اگر نتایج سرعت صفحه خود را تجریه و تحلیل کنید (به وسیله ابزارهای مانند Page Speed Insights Tool، WebPageTest.org، CatchPoint و …) و متوجه شوید که مشکل مسدودسازی رندرینگ در جاوا اسکریپت وجود دارد، سه راه حل برای آن هست :

۱- درون خطی : اضافه کردن جاوا اسکریپت در سند HTML

۲- Async : ناهمگام‌سازی جاوا اسکریپت (مثلاً اضافه کردن ویژگی async به تگ HTML)

ناهمگام‌سازی جاوا اسکریپت

۳- به تاخیر انداختن : جای‌گذاری در قسمت‌های پایینی HTML

نکته مهم : مهم است بدانیم که اسکریپت‌ها باید به ترتیب اولویت مرتب شوند. اسکریپت‌هایی که برای بارگذاری محتواهای above-the-fold استفاده می‌شوند باید در اولویت بوده و به تاخیر انداخته نشوند. همچنین هر اسکریپتی که به فایل دیگری ارجاع می‌دهد فقط پس از بارگذاری فایل ارجاع داده شده می‌توان از آن استفاده کرد. با تیم توسعه خود تعامل لازم را داشته تا مطمئن شوید که هیچ تعلیقی در تجربه کاربری ایجاد نمی‌شود.

TL;DR – بخش اخلاقی داستان

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

منبع : سایت MOz.COM JavaScript & SEO: Making Your Bot Experience As Good As Your User Experience