جاوا اسکریپت و سئو (قسمت اول)

جاوا اسکریپت و سئو

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

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

هنگام ایجاد یک صفحه وب مدرن سه جزء اصلی وجود دارد:1HTML - زبان نشانه گذاری متن، به عنوان ستون فقرات و یا سازمان دهنده ی محتوا در یک سایت عمل می کند. این ساختار وب سایت (مثلا عنوانها، پاراگرافها، عناصر لیست و غیره) و تعیین محتوای استاتیک است. 2. CSS  - طراحی سایت  سبک آبشار ، گیرایی ظاهری و سبک اضافه شده به یک وب سایت است. این لایه ارائه شده از صفحه را تشکیل می دهد. 5. جاوا اسکریپت - جاوا اسکریپت تعاملی است و یک جزء اصلی از وب داینامیک است.

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

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

 AJAX چیست؟ AJAX، یا ناهمگامی جاوا اسکریپت و XML، مجموعه ای از تکنیک های توسعه وب هستند که ترکیبی از جاوا اسکریپت و XML است که اجازه می دهد برنامه های کاربردی وب با سرور در پس زمینه بدون دخالت در صفحه فعلی ارتباط برقرار کنند.ناهمگام به این معنی است که سایر توابع یا خطوط کد می توانند در هنگام اجرای اسکریپت async اجرا شوند. XML به عنوان زبان اولیه برای انتقال اطلاعات استفاده می شود؛ با این حال، اصطلاح AJAX برای انواع انتقال داده ها استفاده می شود (از جمله JSON). استفاده معمول از AJAX این است که محتوا یا طرح یک صفحه وب را بدون شروع یک صفحه کامل به روز رسانی کنید. به طور معمول هنگامی که یک صفحه بارگذاری می شود، تمام دارایی های صفحه باید درخواست شود و از سرور برداشته شود، سپس روی صفحه نمایش داده شود.با این حال، با AJAX، تنها دارایی هایی که بین صفحات متفاوت هستند باید لود شوند، که باعث بهبود تجربه کاربر می شود، زیرا آنها مجبور نیستند تمام صفحه را تازه سازی کنند. می توانید به AJAX به عنوان تماس های مینی سرور فکر کنید. مثال خوبی از AJAX در عمل Google Maps است. به روز رسانی صفحه بدون بازنگری کامل صفحه (به عنوان مثال، تماس های مینی سرور برای بارگذاری محتوا به عنوان کاربر هدایت می شوند).    

 مدل شیءگرای سند (دام) چیست؟

به عنوان یک سئوکار حرفه ای ، شما باید بدانید که DOM چیست، زیرا این چیزی است که Google برای تجزیه و تحلیل و درک صفحات وب از آن استفاده می کند.  DOM همان "عنصر بازرسی" است که  در یک مرورگر مشاهده می کنید. به سادگی می توانید از DOM به عنوان مراحل مرورگر بعد از دریافت سند HTML برای رندر صفحه فکر کنید. اولین چیزی که مرورگر دریافت می کند، سند HTML است. پس از آن، تجزیه مطالب درون این سند و جمع آوری منابع اضافی مانند تصاویر، CSS و فایل های جاوا اسکریپت آغاز خواهد شد. DOM از این تجزیه و تحلیل اطلاعات و منابع شکل می گیرد. می توان به آن بعنوان یک نسخه ساختاری، سازماندهی شده از کد صفحه وب فکر کنید. امروزه DOM اغلب از سند اولیه HTML بسیار متفاوت است، با توجه به آنچه که به طور خلاصه HTML داینامیک نامیده می شود. HTML داینامیک توانایی یک صفحه برای تغییر محتوا آن بسته به ورودی کاربر، شرایط محیطی (به عنوان مثال زمان روز) و سایر متغیرها، استفاده از HTML، CSS و جاوا اسکریپت است.  مثال ساده با تگ <title> که از طریق جاوااسکریپت آپلود می شود:

منیع  HTML DOM

مرورگر بدون سر(headless) چیست؟  مرورگر بدون سر(Headless browsing) عملیات جمع آوری صفحات وب بدون رابط کاربر است.مهم است که بدانیم چرا Google، و در حال حاضر Baidu، مرورگرهای بی سری را برای درک بهتر تجربه کاربری و محتوای صفحات وب به کار می برند.  PhantomJS و Zombie.js مرورگرهای بی سر اسکریپت هستند، که معمولا برای متمرکز کردن خودکار وب جهت اهداف تست و ارائه تصاویر فوری استاتیک برای درخواست های اولیه (قبل از رندر کردن) استفاده می شوند.

چرا javascript می تواند برای سئو چالش برانگیز باشد؟   سه دلیل (3) اصلی برای نگرانی درباره جاوااسکریپت در سایت شما وجود دارد:

1.      Crawlability: توانایی رباتها برای خزیدن(crawl) سایت شما.2.    قابلیت دستیابی(Obtainability): توانایی رباتها برای دسترسی به اطلاعات و تجزیه محتوای شما. 3.    زمان تأخیر در سایت(Perceived site latency): AKA مسیر رندر بحرانی.   

قابلیت کراول سایت (Crawlability)

 آیا رباتها قادر به پیدا کردن URL ها و درک معماری سایت شما هستند؟اینجا دو عنصر مهم وجود دارد: 1. مسدود کردن موتورهای جستجو از جاوا اسکریپت (حتی به طور تصادفی).     2. لینک داخلی مناسب، نه استفاده از رویدادهای جاوا اسکریپت به عنوان جایگزینی برای تگ های HTML.

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

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

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

اساسا: از رویدادهای onclick جاوا اسکریپت به عنوان جایگزینی برای لینک داخلی استفاده نکنید. در حالی که URL های پایان ممکن است یافت می شوند و خزیده شوند، آنها به ناوبری جهانی سایت وابسته نیستند.  لینک داخلی یک سیگنال قوی برای موتورهای جستجو مرتبط با معماری سایت و اهمیت صفحات است.در واقع، لینک های داخلی بسیار قوی هستند که می توانند (در شرایط خاص) " SEO hints " تگ های کانونی را نادیده بگیرند.   ساختار URL از لحاظ تاریخی، وبسایت های مبتنی بر جاوا اسکریپت (بعلاوه سایتهای AJAX) از شناسه های (#) در URL ها استفاده میکنند.

  مواردی که توصیه نمیشود:

   O Lone Hash (#) - نماد lone pound تنها نمیتواند قابل کراول باشد. این برای شناسایی انکر لینک (anchor link)استفاده می شود.این ها لینک هایی هستند که به یک نفر اجازه می دهد تا به یک تکه محتوا در یک صفحه برسد. هر چیزی پس از lone hash  تنها از URL هرگز به سرور ارسال نمی شود و صفحه به طور خودکار به عنصر اول با شناسه مطابق (یا اولین عنصر <a>) حرکت می کند.گوگل توصیه می کند از استفاده از "#" در URL ها اجتناب شود.

  o Hashbang (#!) (و escaped_fragments URLs) –  URL های Hashbang یک هک برای پشتیبانی از خزنده ها بودند(گوگل می خواهد از آن جلوگیری کند اما Bing از آنها پشتیبانی می کند). ماهها پیش، Google و Bing یک راه حل پیچیده AJAX را توسعه کردند، در نتیجه یک URL زیبا (#!) به همراه UX با معادل escaped_fragment مبتنی بر HTML برای رباتها بود.از آن زمان گوگل در مورد این توصیه توقف کرده است و ترجیح می دهد تا کاربر دقیقی را دریافت کند. در قطعات، دو تجربه در اینجا وجود دارد:         

تجربه اصلی (aka Pretty URL): این URL باید یک # داشته باشد!  (hashbang) در URL برای نشان دادن اینکه escaped fragment وجود دارد یا یک عنصر متا نشان می دهد که یک escaped fragment وجود دارد (<meta name = "fragment" content = "!">)

 

 Fragment Failed (aka Ugly URL, HTML snapshot): این URL جایگزین hashbang (#!) با "_escaped_fragment_" است و در عکس لحظات HTML به کار می رود. این ugly URL  نامیده می شود زیرا طولانی است و به نظر می رسد (برای همه اهداف) یک هک است.

  مواردی که توصیه میشود:  

 pushState API History PushState مبتنی بر ناوبری و بخشی از API History است (فکر کنید: سابقه مرور وب شما).اساسا pushState URL را در نوار آدرس به روزرسانی می کنند و تنها چیزی که باید در صفحه تغییر کند، به روز می شود. این اجازه می دهد تا سایت های JS برای استفاده از URL های "تمیز" استفاده شوند. PushState در حال حاضر توسط گوگل پشتیبانی می شود، هنگامی که از ناوبری مرورگر برای ردگیری از طرف مشتری پشتیبانی می شود.        

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

مثال: مثال خوبی از پیاده سازی اسکریپت نامحدود موتور جستجو، توسط John Mueller گوگل، می توان در اینجا یافت. او از نظر فنی جایگزین وضعیت () است که شامل همان دکمه بازگشت به عنوان pushState نمشود. 

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

  موتورهای جستجو نشان داده اند که از مرورگر بی نهایت استفاده می کنند تا DOM رابه منظور درک بهتر تجربه کاربری و محتوا در صفحه به نمایش بگذارد.به عبارت دیگر، گوگل می تواند برخی از جاوا اسکریپت ها را پردازش کند و از DOM (به جای سند HTML) استفاده می کند.  در عین حال، موقعیت هایی نیز وجود دارد که موتورهای جستجو برای درک بهتر جاوا اسکریپت تلاش می کنند. هیچ کس نمی خواهد وضعیت Hulu در سایت یا سایت مشتری خودش اتفاق بیفتد. این مهم است که بدانید چگونه رباتها با محتوای سایت شما ارتباط برقرار می کنند.  با فرض اینکه ما در مورد یک ربات موتور جستجو که javascript را اجرا می کند صحبت می کنیم، چندین عنصر مهم برای موتورهای جستجو جهت دستیابی به محتوا وجود دارد: • اگر کاربر برای از بین بردن چیزی تعامل داشته باشد، موتورهای جستجو احتمالا آن را نمی بینند. ·        

o گوگل یک کاربر تنبل است.

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

• اگر جاوا اسکریپت پس از رویداد بارگذاری جاوا اسکریپت به علاوه ~ 5 ثانیه ایجاد شود، موتورهای جستجو ممکن است آن را مشاهده نکنند.          

  • John Mueller اشاره کرد که هیچ ارزش زمان خاصی وجود ندارد؛ با این حال، سایت ها باید در عرض 5 ثانیه بارگذاری شوند.        
  • * تست قورباغه برای رندر محتوا نشان دهنده همبستگی تا پنج ثانیه است.
  •  * رویداد بارگیری به علاوه پنج ثانیه است که چه گوگل PageSpeed Insights، ابزار دوستیابی موبایل و استفاده از گوگل Fetch به عنوان گوگل؛ چک کردن زمان سنج تست حداکثر پرین.  
  • *  اگر در جاوا اسکریپت خطایی وجود داشته باشد، هر دو مرورگر و موتورهای جستجو قادر نخواهند بود از آنها عبور کنند.
1396-07-01 11:23 مقالات آموزشی

مشاوره رایگان جهت طراحی سایت؟