PWA مخفف Progressive Web Application می باشد و اگر بخواهیم برنامه های وب پیش رونده (PWA) را در یک جمله توصیف کنیم، از الکس راسل، مهندس گوگل نقل قول می کنیم که گفت: «آنها مرز بین محتوای وب و اپلیکیشن ها را محو می کنند، اما باعث حفظ نقاط قوت وب می شوند». این فناوری در اوایل سال 2015 توسط گوگل معرفی شد. PWA به اصطلاح یک وب سایت است که از فناوری های مدرن و جدید وب استفاده می کند اما ظاهر و کارکرد آن شبیه یک اپلیکیشن معمولی می باشد. یعنی PWA یک وب سایت می باشد که با استفاده از مرورگرهایی مثل کروم و فایرفاکس وارد آن می شوید و سپس با یک اپلیکیشن سروکار خواهید داشت.
آیا PWAها جذابیت جدید فناوری های موبایل هستند؟ بله! چرا؟ خوب، به چند دلیل: به طور کلی، کاربران تقریباً سه برابر بیشتر احتمال دارد یک برنامه تلفن همراه را به نسبت یک وب سایت بازگشایی کنند و بیشتر وقت خود را صرف برنامه ها در دستگاه های تلفن همراه می کنند تا در مرورگرها. با در نظر گرفتن این موضوع و ادغام آن با بهترین ویژگی های وب سایت ها و اپلیکیشن های موبایل به همراه یک تجربه کاربری عالی، دسترسی آفلاین، پوش نوتیفیکیشن و سئو سازگار، باعث می شود محبوبیت PWA بالا رود.
به لطف امکان ایندکسینگ و لینک پذیری بالا، PWA ها تاثیر زیادی در ایجاد فرصت دیده شدن ایجاد می کنند که همین امر باعث شده PWA ها مورد علاقه کاربران، توسعه دهندگان و بازاریابان دیجیتال باشند. برخلاف برنامه های تلفن همراه، PWA ها متعلق به اکوسیستم WWW هستند که همه محتوای آنها را در گوگل قابل مشاهده می کند.
به همین دلیل بسیار مهم است که از فرصت های استاندارد PWA حداکثر استفاده را ببرید. به خصوص از آنجایی که سئو مستقیماً به بهبود تجربه کاربر منجر می شود و همین امر منجر به افزایش تعامل و عملکرد بهتر می شود.
سئو جاوا اسکریپت می تواند یک چالش باشد
البته که، به این راحتی هم نیست. PWAها از جاوا اسکریپت استفاده می کنند و در نتیجه، گوگل یک PWA را مانند هر سایت جاوا اسکریپت دیگری می بیند و Googlebot مانند بقیه سایت ها در آن خزش میکند. با این وجود، برخی از مسائل به طور بالقوه می توانند بر نمایه سازی، رتبه بندی و همچنین توانایی خزیدن تاثیر بگذارند و توسعه دهندگان باید از آنها آگاه باشند!
چرا این مسائل پیش می آید؟ وب سایت ها همیشه کد HTML را در سمت سرور تولید یا رندر می کنند زیرا این ساده ترین راه برای اطمینان از پیوند مستقیم محتوا است. از سوی دیگر، برنامه های وب بیشتر از رندر سمت مشتری استفاده می کنند، که در آن محتوا به صورت پویا در وب در حین جستجو به روز می شود – بدون بارگیری مجدد صفحه. با این حال، امروزه توسعه دهندگان ترجیح می دهند از نوع دیگری به نام رندر ترکیبی استفاده کنند.
از رندر سمت سرور یا رویکرد ترکیبی استفاده کنید تا قدرت SEO PWA خود را کامل کنید.
سرفصل مطالب
تاثیر رندر سمت سرور بر SEO در PWA
خوشبختانه، چندین راه برای رندر در سمت سرور وجود دارد. یکی از گزینه های موجود استفاده از Vue.js ، که یک فریم ورک جاوا اسکریپت است. با Vue، به طور پیش فرض، کامپوننت ها DOM را در مرورگر به عنوان خروجی تولید می کنند. که با این وجود، توسعه دهندگان می توانند انتخاب کنند که همان کامپوننت ها را در رشته های HTML در سمت سرور رندر کنند و سپس آنها را مستقیماً به مرورگر ارسال کنند.
چرا این روش مفید است؟ این روش تضمین می کند که خزنده های موتور جستجوگر، صفحه کاملاً رندر شده را می بینند، که به سئوی بهتر منجر می شود. همچنین زمان رسیدن به محتوا را سرعت می بخشد، نیازی نیست منتظر بمانند تا جاوا اسکریپت بارگیری کند و محتوا را نمایش دهد.
به ویژه زمانی که کاربران از سرعت پایین اینترنت یا از داشتن دستگاه های قدیمی ناراحت می باشند. این بدیهی است که تجربه کاربر افزایش می یابد و نرخ تبدیل را به طور قابل توجهی تحت تاثیر قرار می دهد.
رندر سمت سرور تضمین می کند که خزنده های گوگل صفحه کاملاً رندر شده را می بینند که به سئوی بهتر منجر می شود.
رندر پویا در سئوی PWA
پردازش جاوا اسکریپت لزوما خیلی راحت نیست، و هر رباتی نمی تواند آن را به درستی و به سادگی انجام دهد. برای مقابله با این چالش، از رندر پویا استفاده می شود. که بر روی جابجایی بین محتوای سمت مشتری و محتوای از پیش رندر شده تمرکز دارد. به ویژه در حالت کلی، محتوای تولید شده با جاوا اسکریپت که به صورت پویا در حال تغییر است مفید می باشد.
در این مورد، سرور WWW باید ربات ها را شناسایی کند (مثلاً از طریق بررسی کاربر) و درخواست های آن ها را مطابق معمول ارائه دهد. درخواست های ربات به مکانیزم رندر هدایت می شوند و درخواست های کاربر طبق معمول پردازش می شوند. در صورت لزوم، رندر پویا یک نسخه محتوایی را نشان می دهد که برای پردازش ربات مناسب است، مثلاً با کد HTML ایستا. این ابزار می تواند در همه یا فقط برخی از سایت ها کار کند.
با در نظر گرفتن موارد فوق، توسعه دهندگان باید در هنگام ساختن PWA نسبت به مسائل سئوی وب اپلیکیشن ها محتاط باشند. برای استفاده از مزایای کامل سئو PWA، مراحل خاصی را باید دنبال کنید.
چک لیست نهایی سئوی PWA
هر صفحه تحت آدرس URL بدون “#”
آیا می دانستید که ربات های گوگل URL ها را با ‘#’ یا ‘#!` شناسه در آنها فهرست نمی کنند؟ متاستفانه، بسیاری از PWA ها نا آگاهانه از آن در ساختار URL خود استفاده می کنند. برای جلوگیری از این موضوع، ساختار URL را طبق قوانین سئو سنتی پیاده سازی کنید.
ارائه URL های واضح بدون شناسه بسیار مهم است.
روی عملکرد تمرکز کنید
هیچ کس دوست ندارد برای بارگذاری صفحه صبر کند. اندازه گیری عملکرد بارگذاری صفحه یک عمل تاثیر گذار در سئوی PWA است زیرا به طور قابل توجهی تجربه کاربری را بهبود می بخشد. اگرچه مدت زمان بارگذاری صفحه برای Googlebot اهمیتی ندارد، اما کاربران شما مطمئنا خسته و کلافه خواهند شد. به یاد داشته باشید که از ابزارهای رایج اندازه گیری سرعت، مانند Web Page Test یا PageSpeed Insights استفاده کنید. تست عملکرد قبل از راه اندازی PWA مطمئنا نتایج بهتری به همراه خواهد داشت، بنابراین آن را برای مرحله پس از راه اندازی رها نکنید!
اندازه گیری عملکرد بارگذاری صفحه یک عمل مهم SEO PWA است زیرا به طور قابل توجهی تجربه کاربر را بهبود می بخشد.
HTTPS
حتی اگر با ارتباطات حساس و مالی سر و کار ندارید، آدرس وب شما باید همیشه محافظت شود. PWA شما نیز به همین صورت است – باید به طور کامل در HTTPS اجرا شود. همچنین در استفاده از منابع غیر ایمن خودداری کنید! این می تواند منجر به مشکلات سئو با محتوای ترکیبی شود. به خاطر داشته باشید که HTTPS دیگر یک ابزار که بهتر است آن را داشته باشید نیست، اکنون یک ابزار ضروری محسوب می شود- به خصوص برای PWA ها!
URL های Canonical را مشخص کنید
یکی دیگر از روشهای خوب SEO PWA استفاده از «rel=canonical» هنگام ارائه محتوایی است که از چندین URL میآید. بدون آن، زمانی که یک محتوا بدون در نظر گرفتن دامنه، در URL های مختلف موجود است، می توانید مشکلات ایندکس را ایجاد کنید. محتوای تکراری و ایجاد ارجاعات متعارف بین صفحات PWA قطعا مواردی هستند که باید از آنها اجتناب کنید! علامت گذاری یک محتوا به عنوان کنونیکال، ابهام را کاهش می دهد و به طور مستقیم منبع محتوا را نشان می دهد.
همان محتوای که به ربات های گوگل نمایش داده میشود را به کاربران نمایش دهید
هنگام استفاده از سرویس پویا در دستگاههای مختلف همیشه به یاد داشته باشید که بررسی کنید، آیا محتوا برای کاربران و ربات های جستجوی Google یکسان است یا خیر. پنهان کاری محتوا مطمئنا امتیاز SEO PWA شما را پایین می آورد، درنظر داشته باشید هنگام استفاده از سرویس پویا برای تغییر طراحی مطابق با دستگاه، محتوا باید ثابت بماند. برای بررسی اینکه آیا این کار انجام میشود یا خیر، از عملکرد کنسول جستجوی گوگل به نام Fetch as Google استفاده کنید.
این به شما کمک می کند تا بررسی کنید که آیا محتوای دریافت شده با آنچه کاربران می بینند مطابقت دارد یا خیر. همچنین، فایل های جاوا اسکریپت و CSS را برای مرورگرها در دسترس قرار دهید.
طراحی برای دستگاه های مختلف
افزایش سازگاری با دستگاه های مختلف تضمین می کند که همه کاربران در استفاده از PWA شما به صورت یکسان، بهترین تجربه ممکن را کسب می کنند. یک راه حل خوب باید بدون توجه به دستگاه، کار کند، اجرا و نمایش داده شود. برای دستیابی به آن، PWA باید از نظر طراحی پاسخگو باشد – با مارجین ، پدینگ، فونتها، دکمهها و همه عناصر دیگر که بهصورت پویا با دستگاه ها و رزولوشن های مختلف مقیاس پذیر می شوند، منطبق باشند.
از ویژگی ‘scrset’ استفاده کنید
یکی دیگر از نکات عالی UX برای افزایش تجربه کلی PWA SEO، استفاده از ویژگی ‘scrset’ است. نکته ای که در مورد تصاویر وجود دارد این است که وقتی آنها بزرگ می شوند در صورتی که کوچک ذخیره شده باشند، در سایز بزرگ کیفیت بسیار بدی خواهند داشت. اگر با کیفیت بالا نیز ذخیره شوند، حجم بسیار بالایی خواهند داشت و عمل بارگیری صفحه و سرعت اسکرول را بسیار کند می کنند.
ویژگی ‘scrset’ این مشکل لود تصاویر را با دریافت تصاویر مناسب با توجه به رزولوشن و اندازه صفحه برطرف کرده است. به یاد داشته باشید که در استفاده از فونت ها با اندازه ثابت خودداری کنید زیرا بر قابلیت استفاده کلی PWA شما تأثیر می گذارد.
پیوند خارجی صحیح
توجه داشته باشید که گوگل تمام پیوندهای خارجی را در PWA فهرست نمی کند. آنچه مهم است، مربوط به پیوند داخلی و خارجی در برنامه است. به خصوص پیوندهای داخلی و خزیدن در ساختارهای PWA توسط ربات های گوگل بدون استفاده از ویژگی “a href” به طور قابل توجهی تحت تاثیر قرار می گیرد. به خاطر داشته باشید که ربات ها تنها تگ های انکر که ویژگی ‘a href’ داشته باشند را تجزیه و تحلیل می کنند و از پیوندهای جاوا اسکریپت پیروی نمی کنند.
گوگل مطمئناً یک پیوند “a href” معمولی را ایندکس می کند، و از لینک های “onclick” رد می شود، حتی اگر انکر باشند. گوگل ممکن است لینکی را که هر دو ویژگی ‘a href’ و ‘onclick’ در آن استفاده شده را نیز ایندکس کند.
Schema.org، Open Graph یا Twitter Cards را پیاده سازی کنید
Schema.org نوعی واژگان انعطاف پذیر است که سرنخ PWA شما را به عنوان داده های قابل پردازش ماشینی خلاصه می کند. می تواند هم بسیار کلی و هم به صورت خاص و مشخص تعریف شده باشد. با این وجود، کاملا منطقی است که یک ساختار برای این متا دیتا تهیه ببینید. صحت Schema.org خود را بررسی کنید و اینکه آیا داده های ارائه شده بدون خطا ظاهر می شوند یا خیر. مطمئن شوید که توضیحات با محتوای PWA شما مطابقت دارد!
علاوه بر این، می توانید با پروتکل Open Graph و کارت های توییتر و فیس بوک حاشیه نویسی کنید تا تجربه کاربری مربوط به اشتراک گذاری محتوای PWA خود را در شبکه های اجتماعی بهبود بخشید.
تست کن انگار فردایی نیست!
از نظر سئو، درک اینکه چگونه ربات های گوگل محتوای PWA را آنالیز می کنند بسیار مهم است. درک آن مطمئنا کمک می کند اصلاحات و بهینه سازی های کوچک را اضافه کنید که به عملکرد سایت اجازه می دهد از متوسط به عالی تبدیل شود.
بهترین ابزارها و تست هایی که می توانند سئوی جاوا اسکریپت PWA را بهبود بخشند
کنسول جستجوی گوگل
از کنسول جستجوی گوگل استفاده کنید و URL ها را با ویژگی «Crawl > Fetch as Google» دریافت کنید. اینگونه، نه تنها پاسخ HTML خام را ارائه می کند بلکه گوگل جاوا اسکریپت شما را پردازش و رندر نیز می کند. یکی دیگر از ویژگیهای جالب «Crawl > Sitemaps» است که به شما کمک میکند مطمئن شوید که خزندههای Google از وجود تمام صفحات شما مطلع هستند. به غیر از آن، دادههای ساختاریافته، ریچ کارت ها، پیوندهای سایت و بسیاری موارد دیگر – قابل بررسی و اندازه گیری است. کنسول جستجوی گوگل دوست سئوی شماست، بنابراین ویژگیهای آن را بررسی کنید و از آن برای نظارت بر نتایج خود استفاده کنید.
Lighthouse
Lighthouse یک ابزار متن باز است که به شما در بهبود PWA کمک می کند و به شما اطلاع می دهد که آیا همه ویژگی ها مرتب هستند یا خیر. به عنوان یک اکستنشن کروم یا به عنوان یک کد فرمان استفاده می شود که به شما می گوید آیا PWA با اتصال خوب یا بد در حالت آفلاین بارگیری می شود. نسبتاً سریع است، با یک منشأ ایمن، بهترین روشها را برای دسترسی ارائه میکند.
Google PageSpeed Insights
PWA (درست مانند یک وب سایت) باید سریع بارگذاری شود، بنابراین بهینه سازی عملکرد را در کانون توجه قرار دهید. ابزارهایی مانند Google PageSpeed Insights دادههای مختلف را بررسی میکند و نکاتی درباره مواردی که امکان بهبود دارند را ارائه میکند. با استفاده از این ابزار می توانید امتیاز عملکرد کلی PWA خود را مشاهده کنید. تنگناها را از بین ببرید و امتیازی بالاتر از 90 بگیرید.
ابزارهای تست بین مرورگرها
PWA ها به دلیل قابلیت اطمینان، تعامل و تجربه پاسخگوی غنی مورد علاقه هستند. به همین دلیل بسیار مهم است که بررسی کنید برنامه در همه ابزارها و مرورگرها یکسان عمل میکند. ابزارهایی مانند Mobile-Friendly Test Tool, Chrome Developer Tool’s Device Mode, BrowserStack.com, Browserling.com یا BrowserShots.org – اینها به شما کمک میکنند مطمئن شوید که PWA شما با مرورگرها سازگار است.
برای استفاده کامل از مزایای ارائه شده توسط PWA، باید تلاش خود را افزایش دهید و به یاد داشته باشید که هیچ چیز به جز یک سئو خوب نمی تواند ترافیک وبسایت شما را به سمت درست هدایت کند.
خلاصه مطالب
Progressive Web App راه حلی عالی است که کاربران را جذب می کند، توسعه دهندگان و بازاریابان دیجیتال را به وجد می آورد – این واقعیتی است که نمی توانید انکار کنید. ما تقریباً مطمئن هستیم که روند رشد آن در چند سال آینده همچنان در حال افزایش خواهد بود. چنانچه مایل به دریافت خدمات سئو هستید، می توانید از خدمات سئو شرکت مهندسی داده پردازان سپنتامهر بهرمند شوید. ما به شما در تکمیل تجزیه و تحلیل سئو کمک می کنیم.
۱ نظر
بسیار عالی و مفید