بهینه‌سازی اپلیکیشن‌های انگولار برای ربات گوگل

بهینه‌سازی اپلیکیشن‌های انگولار برای ربات گوگل

Optimizing AngularJS Applications for Googlebot

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

 

سئوی اپلیکیشن انگولار برای خزنده های گوگل

 

نمونه وب‌سایت‌های پیاده سازی شده توسط انگولار:

احتمالا تابحال با وب سایت هایی مواجه شده اید که توسط تکنولوژی انگولار (Angular) نوشته شده اند. در صورتی که اینگونه وب سایت ها را مشاهده نکرده اید، در لیست زیر، وب سایت هایی را بیان کرده ایم که توسط انگولار پیاده سازی شده اند:

 

مقایسه وب سایت های کلاسیک با وب سایت های انگولار:

همانطور که ملاحظه می کنید، سایت های معروف و معتبری از این تکنولوژی بهره برده اند. انگولار (AngularJS) در حال فراگیرشدن در سطح اینترنت می باشد. دلیل روشنی برای این قضیه وجود دارد و آن اینست که فریم ورک هایی مانند انگولار (AngularJS) و ریکت (ReactJS) و سایر فریم ورک های مشابه، تجربه کاربری (UX:User Experience) و تجربه توسعه دهنده (Developer Experience) خوبی را فراهم می کنند.

AngularJS و ReactJS بخشی از تحول و انقلاب طراحی وب با عنوان اپلیکیشن های تک-صفحه ای (SPAs=Single-Page Applications) می باشند. در وب سایت های کلاسیک و سنتی، وقتی کاربر به هریک از صفحات آن وب سایت مراجعه می کند، درخواست به سمت سرور در آن صفحه رخ می دهد، تمام منابع آن صفحه خاص لود می شود و صفحه render می شود. در حالیکه در اپلیکیشن های تک-صفحه ای که توسط تکنولوژی های Angular و React نوشته می شوند، تمام فعالیت ها و منابع پشت صحنه (Back-End Activity) در بار اولی که کاربر به یک صفحه مراجعه می کند لود می شوند.

Traditional-vs-SPA

 

مزیت اپلیکیشن‌های تک‌صفحه ای:

با اپلیکیشن های تک صفحه ای (SPAs=Single Page Applications) کاربران با یک وب سایت فوق العاده سریع مواجه هستند که تعامل آنها با سایت و بالعکس تقریبا بصورت بلافاصله (instantaneously) صورت می گیرد. فریم ورک های AngularJS و ReactJS از تمپلیت های پیشرفته جاوااسکریپت برای render سایت بهره می برند. بدین معنیست که سرباری که کدهای HTML/CSS ایجاد می کنند تقریبا ناچیز است و تمام کارها در پشت صحنه انجام می شوند و از دید کاربر پنهان می باشد.

 

بهینه سازی وب سایت انگولار:

افرادی که قصد بهینه سازی وب سایت های انگولار (Angular) و یا ریکت (React) را دارند، می دانند که اکثر فعالیت های وب سایت از دید کاربران و همچنین از دید خزنده های موتور جستجو پنهان می باشند. خزنده هایی مانند گوگل‌بات (GoogleBot) بر اساس کدهای html و css داده های سایت را دریافت می کنند و محتوای آن را تفسیر می کنند. وقتیکه محتوا توسط کدهای جاوا-اسکریپت مخفی می باشد و در html محتوای خاصی وجود ندارد، خزنده گوگل محتوایی نمی بیند که بخواهد پیمایش و ایندکس کند و در نتیجه در نتایج جستجوی خود نمایش دهد.

پیمایش کدهای جاوا-اسکریپت توسط گوگل:

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

 

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

 

تعداد بازدید صفحات اپلیکیشن انگولار:

چالش بعدی می تواند ضبط داده ها توسط سرویس گوگل آنالیتیک باشد. تعداد بازدید صفحات (pageview) با هر بار ورود کاربران به صفحات وب بدست می آیند. تصور کنید صفحات وب سایت های انگولار که هیچ پاسخ html ندارند، چگونه قرار است بازدیدشان محاسبه شود؟

پس از بررسی وب سایت های زیادی که توسط Angular یا React (SPA Websites) پیاده سازی شده اند، به یک فرآیندی برای سئوی اینگونه وب سایت ها رسیدیم که با انجام آیتم های آن علاوه بر اینکه محتوای اینگونه وب سایت ها توسط موتورهای جستجو پیمایش و ایندکس می شوند، بلکه (برای کلمات کلیدی خاص) در رتبه های بالای نتایج جستجو (SERP) مشاهده خواهند شد.

 

 

۵ راه حل برای بهینه‌سازی وب سایت های تک صفحه ای انگولار (SPA Websites):

 

۱- تهیه لیستی از تمام صفحات وب سایت

۲- نصب Prerender

۳- استفاده از "Fetch as Google"

۴- انجام تنظیمات سرویس گوگل آنالیتک

۵- پیمایش مجدد وب سایت

 

در بخش زیر، تمام ۵ مورد فوق را شرح خواهیم داد.

 

۱- لیستی از تمام صفحات وب سایت تهیه کنید.

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

تعریف صفحات سایت در دایرکتوری های مختلف:

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

 

۲- نصب PreRender:

در مسیر بهینه سازی وب سایت های انگولار یا ریکت (SEO for SPAs)، سرویس Prerender بهترین دوست و همراه شما خواهد بود. Prerender یک سرویس است که وب سایت شما را در یک مرورگر مجازی (Virtual Browser) رندر می کند و سپس html استاتیک را در اختیار خزنده موتورجستجو قرار می دهد. در صورت استفاده از این سرویس، کاربران سایت تجربه خوبی بهنگام تعامل با سایت خواهند داشت و سایت انگولار شما همچنان با سرعت بالایی با کاربر تعامل دارد. در حالیکه محتوای وب سایت تان نیز پیمایش و ایندکس (Crawl & index) می شوند.

مشخصات سرویس PreRender:

قیمت سرویس Prerender بر اساس سایز سایت شما متغیر می باشد. وب سایت های با تعداد صفحات کمتر از ۲۵۰ تا می توانند بصورت رایگان از این سرویس بهره ببرند. وب سایت های دارای حداکثر ۲۰،۰۰۰ صفحه با پرداخت ماهیانه ۱۵ دلار می توانند از سرویس prerender استفاده کنند. اگرچه داشتن یک وب سایت قابل پیمایش و ایندکس ارزشش بیش از این مبالغ می باشد.

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

 

۳- استفاده از Fetch as Google:

استفاده از Fetch as Google

 

قابلیت Fetch as Google در کنسول جستجوی گوگل:

در سرویس کنسول جستجوی گوگل (Google Search Console) یا همان گوگل وبمستر تولز (Google Webmaster Tools) ویژگی مفید و کاربردی وجود دارد بنام "Fetch as Google". همانطور که در تصویر فوق مشاهده می کنید، در این بخش می توانید یک URL وارد کرده تا گوگل‌بات (خزنده گوگل) آنرا در لیست خود قرار دهد. "Fetch" یک پاسخ HTTP از آن صفحه وب برمی گرداند که شامل سورس کد کامل آن صفحه می باشد (همانطوری که خزنده گوگل آن صفحه را می بیند). دکمه "Fetch and Render" علاوه بر بازگرداندن یک HTTP Response ، یک اسکرین‌شات از آن صفحه وب نیز برمی گرداند (همانطور که بازدیدکنندگان مشاهده می کنند)

این مرحله یعنی استفاده از ویژگی Fetch as Google در گوگل وبمستر تولز، تاثیر بسزایی در پیمایش و ایندکس صفحات اپلیکیشن های تک صفحه ای انگولار یا ریکت (SPAs) دارد. حتی اگر سرویس Prerender روی وب سایت شما نصب و فعال باشد، ممکن است گوگل صفحاتی از وب سایت را که اهمیت دارد را پیمایش و ایندکس نکند و متعاقبا در نتایج جستجوی خود نمایش ندهد.

درج URL های دلخواه در بخش Fetch as Google:

ثبت URL های دلخواه در کنسول جستجوی گوگل، می تواند در این زمینه کمک کننده باشد. علاوه بر این، پس از زدن دکمه های Fetch یا Fetch and Render امکان این را دارید که درخواست ایندکس شدن یا "Request Indexing" را بدهید. در اینصورت سرعت ایندکس شدن آن صفحه خاص را افزایش داده ایم و سریع تر در نتایج گوگل به نمایش در خواهد آمد.

 

۴- انجام تنظیمات گوگل آنالیتیکس (یا مدیریت تگ گوگل:Google Tag Manager):

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

پلاگین Angulartics:

یکی از روش های جایگزین، استفاده از پلاگین Angulartics  می باشد. کار این پلاگین، جایگزین کردن متدهای استاندارد pageview گوگل آنالیتیک با متدهای مجازی رهگیری کاربر می باشد. پلاگین Angulartics تمام حرکات کاربران در وب سایت انگولار را زیرنظر می گیرد و آنالیز و ذخیره می کند.

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

سرویس Google Tag Manager:

برخی از مدیران سایت ها، روش های دیگری برای جایگزینی روش سنتی گوگل آنالیتیکس اتخاذ می کنند. مانند استفاده از سرویس Google Tag Manager که روش درستی می باشد. در نتیجه بدلیل اینکه سرویس گوگل آنالیتیکس تعامل کاربر (user interaction) با سایت را آنالیز و ذخیره می کند (بجای محاسبه pageview در وب سایت های استاندارد و سنتی)، تنظیمات سرویس گوگل آنالیتیکس وب سایت شما باید اختصاصی باشد.

 

۵- پیمایش مجدد سایت (Recrawl the site):

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

پیمایش مجدد سایت (Recrawl the site)

 

نتیجه گیری (Conclusion):

در صورتی که تمام ۵ مرحله فوق را بطور کامل انجام دهید، نه تنها باعث می شوید محتوای وب سایت انگولار شما پیمایش و ایندکس شود، بلکه می توانید در یک سری کلیدواژه های دلخواه (Keywords) در رتبه های بالای نتایج سرچ گوگل قرار بگیرید. در تصویر زیر گزارشی از وب سایت AngularJS یک مشتری آمده است که متخصصین وب سایت MOZ آنرا بهینه سازی کرده اند:

گزارشی از وب سایت AngularJS یک مشتری

 

همچنین در تصویر زیر نموداری از رشد ترافیک بازدیدکنندگان آن وب سایت خاص را در طی ۷ ماه مشاهده می کنید.

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

 

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

 

منبع: https://moz.com/blog/optimizing-angularjs-single-page-applications-googlebot-crawlers


برچسب‌ها:

اپلیکیشن angularاپلیکیشن انگولاراپلیکیشن‌های تک صفحه‌ایانگولاربات گوگلبهینه سازی انگولارسئوی انگولارنصب Prerenderوب سایت انگولار

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بیست + هفده =