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

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

سوال مهمی که در رابطه با سئو و جاوا اسکریپت مطرح می شود اینست که آیا خزنده های موتورهای جستجو می توانند محتوای وب سایت را به صورت صحیحی دریافت کرده و تجربه کاربری را مطابق با آن ارزیابی کنند؟

با اینکه صفحات HTML که با PHP، CSS و سایر قابلیت ها هماهنگ هستند، میتواند مستقیما توسط پایشگرها خوانده شوند، اما وب سایت های مبتنی بر جاوا اسکریپت به راحتی نمی توانند توسط آنها درک گردند. پایشگرهای گوگل ابتدا به آنالیز DOM پرداخته و پس آن به رندر صفحات وب سایت می پردازند.

تعاریف اولیه

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

• HTML: زبان HTML سازمان دهنده به محتواست. HTML ساختار وب سایت را ایجاد کرده (مانند لیست های گلولهای، تیتر ها، پاراگراف ها و غیره) و محتوای استاتیک را تعریف می کند.
• CSS: زبان CSS موجب آرایش محتوای سایت شده و به نحوه استایل آن نظم می دهد.

سایر تعاریف پیچیده تر را در ادامه باهم مرور می کنیم.

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

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

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

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

ایجکس چیست؟

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

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

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

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

مدل دام (DOM) چیست؟

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

دام همان چیزیست که با کلیک بر روی Inspect Element مرورگر مشاهده می کنید. در این قسمت مشاهده خواهید کرد دام به عنوان مراحلیست که مرورگر بعد از دریافت HTML برای رندر صفحه، طی می کند.

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

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

امروزه دام بسیار متفاوت تر از کدهای HTML دریافتی در ابتدای بارگذاری صفحه است. علت این مسئله نیز موضوع HTML دینامیک است. منظور از HTML دینامیک قابلیتیست که یک صفحه قادر به تغییر محتوای خود بسته به ورودی کاربر یا وضعیت های مختلف می باشد.

جاوا اسکریپت چگونه می تواند در سئو چالش هایی ایجاد کند؟

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

1. اجازه به موتورهای جستجو برای پایش فایل های جاوا اسکریپت

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

این مسئله بدین معنیست که موتورهای جستجو قادر به فهم تجربه کاربری واقعی سایت نبوده و ممکن است که این شرایط را به عنوان مخفی کاری (Cloaking) در نظر بگیرند. بهترین راهکار اینست که دسترسی موتورهای جستجو و کاربران به منابع سایت، مشابه یکدیگر باشد.

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

2. لینک های داخلی

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

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

3. ساختار یو آر ال

وب سایت های مبتنی بر جاوا اسکریپت بعضا از شناسه هایی در یو آر ال استفاده می کنند، اما کارکترهایی مانند هش (#) یا هشبنگ (#!) توسط گوگل پیشنهاد نمی شوند.

یکی از روش های بهینه در چنین شرایطی، روش استفاده از pushState History API است. این API در نوار آدرس بروزرسانی شده و به جائا اسکریپت اجازه میدهد تا یو آر ال های تمیزتری ایجاد کند. منظور از یک یو آر ال تمیز، یو آر لیست که مورد پسند موتورهای جستجو بوده و شامل کلماتیست که توسط کاربران معمولی نیز درک می گردد.

تصور کنید که از pushState برای اسکرول کردن عمودی استفاده کنیم. در چنین شرایطی یو آر ال صفحه با هر بار اسکرول آن توسط کاربر بروزرسانی می شود. در بهترین سناریو ممکن کار با رفرش صفحه در همان نقطه قبلی باقی می ماند.

4. تست وب سایت

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

با پیروی از دستورات زیر مشکلات احتمالی را بیابید:

• چک کنید که محتوای صفحات وب سایت شما در DOM نمایش داده می شود.
• چند صفحه از سایت را توسط گوگل تست کرده تا از ایندکس آنها مطمئن شوید.

دادن دسترسی به گوگل برای مشاهده فایل های جاوا اسکریپت توسط فایل robots.txt امری بسیار ضروریست. بنابراین به تست رندوم برخی از صفحات سایت پرداخته و چگونگی بارگذاری آنها را از دید گوگل مشاهده کنید.

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

5. اسنپ شات HTML

گوگل HTML snapshots را در سال 2009 معرفی کرده و بالاخره آن را در سال 2015 از سیستم خود خارج کرد. موضوع مورد توجه در اینجا اینست که گوگل همچنان از HTML snapshots استفاده می کند، اگر چه آن را به عنوان المانهایی معرفی کرده که نادیده گرفته می شوند.

HTML snapshots ممکن است که در بعضی از شرایط ضروری باشند، بنابراین بهتر است که حداقل آشنایی را با آن داشته باشید. به عنوان مثال اگر موتورهای جستجو قادر به مشاهده جاوا اسکریپت بر روی سایتتان نباشند، شما می توانید نسخه ای از خروجی HTML آن را در اختیارشان قرار دهید. این راهکار مطمئنا بهتر از اینست که آنها قادر به ایندکس محتوای سایت نباشند.

در حالت ایده آل می توان با شناسایی user-agent به ارائه نسخه اصلی یا اسنپ شات صفحات به ترتیب به بازدید کنندگان و ربات ها پرداخت. دقت داشته باشید که گوگل تاکید کرده که این دو نسخه می بایست کامل مانند یکدیگر باشند.

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

6. تاخیر سایت

هنگامی که مرورگر به ساخت DOM با استفاده از HTML دریافتی می پردازد، اغلب منابع مورد نیاز را همانگونه که در HTML آدرس داده شده است، بارگذاری می کند.

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

اگر فایل های جاوا اسکریپت یا سایر منابع غیر ضروری، بارگذاری سایت را کند کنند با مشکلی رو به رو خواهید شد که render-blocking JavaScript نام دارد. این مسئله بدین معنیست که وبسایت شما پتانسیل بارگذاری سریعتری دارد، اما فایل های جاوا اسکریپت آن را به تاخیر انداخته اند.

با استفاده از ابزار Page Speed Insights یا سایر ابزارهای مشابه به بررسی بارگذاری سایت بپردازید. نتیجه را آنالیز کرده و ببینید که آیا فایل جاوا اسکریپتی با این شرایط در سایت وجود دارد یا خیر.

در صورت وجود چنین فایل های جاوا اسکریپتی، راه حل های زیر را می توانید به کار ببرید:

• جاوا اسکریپت را به HTML اضافه کنید.
• تگ async را به جاوا اسکریپت اضافه کرده تا این فایل به صورت غیر همزمان بارگذاری کردند.
• میزان منابع جاوا اسکریپت را کاهش دهید.

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

در بهینه سازی این موضوع می بایست با تیم توسعه دهنده سایت همفکری کرده تا از وجود بهترین تجربه کاری اطمینان حاصل کنید.

جمع بندی

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