فناوری AJAX در طراحی وب سایت

امتیاز : ( 4.7 / 5 - 95 نفر )

واژهAJAX سرنام عبارت Asynchronous JavaScript and XML و به معني تركيب نامتقارن جاوااسکریپت و XML است. ماهيت صفحات وب و پروتكل HTTP به گونه اي است كه به طور معمول وقتي درحال وبگردي هستيم، به ازاي هر كنش و واكنش ميان ما و سايتي كه در حال كار با آن هستيم، كل يك صفحه وب از نو بارگذاري مي شود.

ايجكس فناوري جديدي است كه تغيير محسوسي را در اين سناريو به وجود مي آورد؛ Ajax ما را قادر می سازد بخش هایی از صفحه را بدون بارگذاری کل صفحه بروزرسانی کنیم. در نتيجه هيچگاه صفحه سفيد و خالي وب در فواصل كنش و واكنشهاي هنگام كار با مروگر ديده نميشود.

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

پیاده سازیAjax با استفاده از کتابخانه jQueryیکی از آسان ترین روش های پیاده سازیAjax می باشد.

مزیت های AJAX

افزایش سرعت بارگذاری صفحات

به دليل عدم نياز به بارگذاري مجدد كل يك صفحه وب، مقدار داده هايي كه لازم است براي تكميل يك Interaction ميان كاربر و سايت مبادله شود، به شدت كاهش مييابد و اين به معني افزايش محسوس سرعت نرم افزارهاي تحت وب می باشد و از طرفی به بهبود تجربه کاربر کمک می کند. به همين دليل اين روزها اكثر پورتالهاي بزرگ (مانند ياهو) مشغول طراحي اينترفيسهاي مبتني بر Ajax هستند.

صرفه جويي پهنای باند

اين فناوري از يك جنبه ديگر نيز اهميت دارد. تصور كنيد وقتي در طول شبانه روز ميلياردها بار فرآيند بارگذاري مجدد صفحات وب تعاملي در شبكه اينترنت تكرار ميشود، استفاده از ايجكس چگونه موجب آزاد شدن پهناي باند اينترنت و در نتيجه ميلياردها دلار صرفه جويي اقتصادي در اين زمينه ميشود و اين به نوبه خود انقلابي در عرصه وب و فضاي سايبر به شمار ميرود.

مشکلات AJAX

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

برای شرح بهتر این مشکل به نحوه عمکرد Crawler موتور جستجوهای یا نحوه خزیدن بر روی صفحات وب می پردازیم:

رباتهای موتورهای جستجو ابتدا سورس صفحه مورد نظر را بررسی می کند.
سپس متا تگ های صفحه را می خوانند.
بعد از بررسی متا تگ ها و یافتن آپشن مورد نظر، در بدنه صفحه یا تگ body به دنبال لینک ها می گردد و لینکهای داخل کد href را در می آورد تا صفحات جدید راCrawl کند.

در اینجا اگر برای صفحه AJAX لینکی در نظر نگرفته باشید و با On Click نمایش دهید موتور جستجو قادر به پیدا کردن چیزی نیست که آن را باز کند، در نتیجه محتوای آن صفحه Crawl و ایندکس نمی شود.

از طرفی مشکل اصلی خزیدن AJAX این است که مبتنی بر جاوا اسکریپت کار می کند. جاوا اسکریپت یک زبان برنامه نویسی سرویس گیرنده می باشد و در مروگرهای (فایرفاکس، کروم و غیره) اجرا می شود. مرورگرهای مختلف دارای ویژگی ها و توابع مختلفی هستند در نتیجه جاوا اسکریپت نیاز به منابع اضافی دارد که این برای رباتهای موتورهای جستجو هزینه بر است، در نتیجه روی سئوی سایت تأثیر منفی می گذارد.

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

راه حل های رفع مشکل سئو در AJAX

تکنیک Hijax

بر اساس تکنیک Hijax اگر در لینکی، از AJAX یا جاوا اسکریپت استفاده می کنید، کدتان نباید به صورت زیر باشد.

<a href=”javascript:someFunction(`somepage.html#parameter=1`)”>Click Me</a>

یا شبیه این:

<a href=”#”>Click Me</a>

دو روش فوق برای طراحان وب سایت بسیار محبوب است اما متأسفانه آنها URL معنی داری که بتوان توسط موتورهای جستجو مورد استفاده قرار گیرند، ایجاد نمی کنند.

با استفاده روش Hijax کدهای فوق باید به صورت زیر بازنویسی شود.

<a href=”somepage.html?parameter=1″ onclick=”someFunction(`somepage.html#parameter=1`); return false”>Click Me</a>

در کد بالا، اگر جاوا اسکریپت غیر فعال باشد موتورهای جستجو را به صفحه هدف هدایت می کند و اگر فعال باشد، AJAX اجرا می شود؛ در نتیجه هم کاربر و هم موتورهای جستجو به مطالب آن دسترسی خواهند داشت.

البته روش بالا دارای محدودیتهایی هم هست، به عنوان مثال محتوای داخل AJAX را نمی توان به صورت داینامیک ایجاد نمود.

طرح AJAX خزنده گوگل

در طرح AJAX خزنده گوگل URL تمام صفحات دارای محتوای AJAX با کاراکترهای خاص (!#) مشخص می شوند و هنگامی که گوگل یک لینک با AJAX URL ببیند به عنوان مثال

"http://example.com/page?query#!stat"

به طور اتوماتیک آن را به صورت زیر تفسیر می‌کند.

“http://example.com/page?query&_escaped_fragment_=state”

برای این منظور برنامه نویسان باید ساختار برنامه نویسی خود را تغییر دهند زیرا هنگامی که گوگل یک درخواست برای این URL می فرستد، سرور باید قادر به بازگشت کدHTML هنگام فراخوانی تابع AJAX باشد.
هنگامی که گوگل AJAX URL را ببیند، پس از تفسیر آن محتواهای را Crawl و ایندکس می نماید. در نهایت زمانیکه صفحه ایندکس شده در نتایج موتورهای جستجو قرار گرفت، گوگل URL اصلی را به کاربر نمایش می دهد.

در طرح AJAX خزنده گوگل، گوگل بدون اجرای جاوا اسکریپت قادر است محتوای AJAX را Crawl کند. این روش بسیار معمول تر از Hijax است اما نیاز به برنامه نویسی بیشتر دارد و در حال حاضر فقط توسط گوگل پشتیبانی می شوند.