برنامه های انگولار، برنامه های کاربردی تک صفحه ای هستند و زمانی که یک برنامه با انگولار بارگذاری میشود، صفحات دیگر را بصورت پویا و بدون بارگیری مجدد صفحات رند می کند.
چالش های سئو در انگولار
انگولار صفحات را بارگیری مجدد نمی کند مگر اینکه به صراحت گفته شود که این کار را انجام دهد. از تغییر متادیتای صفحات وب به صورت پویا پشتیبانی می کند، اما این کاملاً مبتنی بر جاوا اسکریپت است. خزنده های موتورهای جستجو اغلب با جاوا اسکریپت مشکل دارند. به همین دلیل، برنامه های Angular ممکن است در ارائه محتوای مناسب یا متا دیتای خود با شکست مواجه شوند.
یکی دیگر از محدودیت‌های قابل توجه برنامه‌های Angular که باعث میشود آنها SEO-friendly کمتری داشته باشند، سرعت است. برنامه های Angular مقیاس پذیر، کاربر پسند هستند. چیزی که آنها به طور کلی نیستند سرعت بهینه شده است.بیشتر سایت‌های انگولار برای چند ثانیه قبل از نمایش صفحه اصلی به‌صورت صفحه‌های خالی بارگیری می‌شوند. این منجر به این می شود که بازدیدکنندگان قبل از بارگیری کامل وب سایت، آن را ترک کنند.
طبق مطالعه ای که توسط سایت Statisitcbrain انجام شده است، طول توجه یک فرد متوسط تنها 8 ثانیه است. بنابراین اگر توجه کاربر را در این بازه توجه به خود جلب نکنید، احتمالاً نرخ پرش بیشتری را مشاهده خواهید کرد که باز هم بر رتبه بندی سئو تأثیر منفی می گذارد.
چگونه سئوی Angular را بهینه کنیم؟
محدودیت اصلی وب سایت های Angular در مورد سئو این است که داده ها را از طریق API واکشی می کند و فایل های HTML زیادی برای خزیدن گوگل ندارد. یک راه حل آسان برای این مشکل می تواند استفاده از یک ابزار Dynamic Rendering باشد که می تواند به شما کمک کند فایل های HTML ایستا ایجاد کنید که خزنده های وب به راحتی قادر به بررسی و ایندکس کردن خواهند بود. پس از این، می توانید وب سرور خود را به گونه ای پیکربندی کنید که خزنده های موتور جستجو را به صفحات از پیش رندر شده هدایت کند و بازدیدکنندگان به وب سایت معمولی Angular هدایت شوند. با این روش گفته شده باز مسئله بطور کامل حل نشده نشده است. و مشکل سرعت که در بالا به آن اشاره شد بررسی و حل نشده است.
خزنده های موتورهای جستجو، داده ها را از تمام عناوین و متا دیتاهای موجود در صفحه وب واکشی می کنند. برای افزودن متادیتا و تغییر عنوان صفحه به صورت پویا در برنامه Angular، تنها کاری که باید انجام دهید این است که از ماژول های Angular که در کد زیر آورده شده میتوان استفاده کرد.
import { Component, OnInit } from '@angular/core'; import { Meta,Title } from '@angular/platform-browser'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags([ {name: 'description', content: 'Home page of SEO friendly app'}, {name: 'author', content: 'redthemes'}, {name: 'keywords', content: 'Angular, redthemes'} ]); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { } }
جهت تست این مورد میتوان در پروژه خود سرویس seo ایجاد کرده و در طول حرکت کاربر در صفحات شاهد تغییر متادیتا ها در هدر سایت باشید. با تعریف دیتاهای دلخواه برای متا در ماژول routing خود به هر مسیر متفاوت این امر میسر شده و اگر کد را در کنسول مرورگر بررسی کنید، متادیتای مربوطه را خواهید یافت.با این حال، محتوای منبع صفحه همچنان یکسان است. این به این معنی است که اگر جاوا اسکریپت مجاز باشد، می‌توانیم عناوین و متادیتای پویا ایجاد کنیم، اما نه در غیاب آن. پس باید راهی پیدا کنیم تا این محتوای صفحه رندر شده را بگیریم و برای کاربران ارسال کنیم. این به عنوان pre-rendering شناخته می شود.
اکنون دو راه حل را تا کنون مورد بحث قرار گرفت که یکی هنوز مشکل سرعت لود را حل نکرده است و دیگری محدودیت pre-rendering دارد. هر دو این مسائل را میتوان با Angular Universal حل کرد.
یک فناوری است که توسط Angular جهت rendering برنامه های Angular شما بر روی سرور ارائه شده است. این ابزار به سرور اجازه می دهد تا زمانی که کاربر برای اولین بار از وب سایت شما بازدید می کند، برنامه Angular شما را از قبل رندر کند. استفاده از Angular Universal مزایای سئو زیادی دارد. همچنین به بهبود عملکرد کلی و دسترسی برنامه وب Angular کمک می کند.
نحوه پیاده سازی angular universal در نوشته بعدی نوضیح داده خواهد شد.
مطالب مفید دیگر جهت درک بیشتر را در لینک های زیر میتوانید مطالعه کنید
