راهنمای مشکلات جاوا اسکریپت به شما کمک میکند مشکلات جاوا اسکریپت را که ممکن است صفحه شما یا محتوای خاصی را در صفحات دارای جاوا اسکریپت در جستجوی Google مسدود کرده باشد، شناسایی و برطرف کنید. در حالی که جستجوی Google جاوا اسکریپت را اجرا میکند، تفاوتها و محدودیتهایی وجود دارد که باید هنگام طراحی صفحات و برنامههای کاربردی خود در نظر بگیرید تا نحوه دسترسی جستجوگر ها و ارائه محتوای شما را در نظر بگیرید. راهنمای ما در مورد اصول سئوی جاوا اسکریپت اطلاعات بیشتری در مورد اینکه چگونه می توانید سایت جاوا اسکریپت خود را برای جستجوی گوگل بهینه کنید دارد.
مشکلات جاوا اسکریپت مربوط به جستجو را برطرف کنید
Googlebot به گونه ای طراحی شده است که یک شهروند خوب وب باشد. خزیدن اولویت اصلی آن است، در حالی که اطمینان حاصل می شود که تجربه بازدیدکنندگان از سایت را کاهش نمی دهد. Googlebot و مؤلفه خدمات رندر وب آن (WRS) به طور مداوم منابعی را تجزیه و تحلیل و شناسایی میکنند که به محتوای ضروری صفحه کمک نمیکنند و ممکن است چنین منابعی را دریافت نکنند. برای مثال، درخواستهای گزارش و خطا که به محتوای ضروری صفحه کمک نمیکنند، و دیگر انواع درخواستهای مشابه برای استخراج محتوای ضروری صفحه استفاده نمیشوند یا ضروری نیستند. تجزیه و تحلیل سمت مشتری ممکن است نمایش کامل یا دقیقی از فعالیت Googlebot و WRS در سایت شما ارائه نکند. از گزارش آمار خزیدن در کنسول جستجوی گوگل برای نظارت بر فعالیت و بازخورد گوگل ربات و WRS در سایت خود استفاده کنید.
اگر مشکوک هستید که مشکلات جاوا اسکریپت ممکن است صفحه شما یا محتوای خاصی در صفحات دارای جاوا اسکریپت را مسدود کند تا در جستجوی Google نمایش داده نشود، این مراحل را دنبال کنید. اگر مطمئن نیستید که جاوا اسکریپت علت اصلی است یا خیر، راهنمای اشکال زدایی کلی ما را دنبال کنید تا مشکل خاص را معین کنید.
1. برای آزمایش نحوه خزیدن و نمایش URL توسط Google، از تست نتایج غنی یا ابزار بازرسی URL در کنسول جستجو استفاده کنید. می توانید منابع بارگذاری شده، خروجی کنسول جاوا اسکریپت و استثناها، DOM رندر شده و اطلاعات بیشتر را ببینید. به صورت اختیاری، ما همچنین توصیه میکنیم خطاهای جاوا اسکریپت را که کاربران از جمله Googlebot در سایت خود با آن مواجه میشوند جمعآوری و حسابرسی کنید تا مشکلات احتمالی که ممکن است بر نحوه ارائه محتوا تأثیر بگذارد شناسایی کنید.
در اینجا مثالی آورده شده است که نحوه ثبت خطاهای جاوا اسکریپت را که در کنترل کننده جهانی onerror ثبت شده اند نشان می دهد. توجه داشته باشید که برخی از انواع خطاهای جاوا اسکریپت، مانند خطای تجزیه، با این روش قابل ثبت نیستند.
window.addEventListener(‘error’, function(e) {
var errorText = [
e.message,
‘URL: ‘ + e.filename,
‘Line: ‘ + e.lineno + ‘, Column: ‘ + e.colno,
‘Stack: ‘ + (e.error && e.error.stack || ‘(no stack trace)’)
].join(‘\n’);
// Example: log errors as visual output into the host page.
// Note: you probably don’t want to show such errors to users, or
// have the errors get indexed by Googlebot; however, it may
// be a useful feature while actively debugging the page.
var DOM_ID = ‘rendering-debug-pre’;
if (!document.getElementById(DOM_ID)) {
var log = document.createElement(‘pre’);
log.id = DOM_ID;
log.style.whiteSpace = ‘pre-wrap’;
log.textContent = errorText;
if (!document.body) document.body = document.createElement(‘body’);
document.body.insertBefore(log, document.body.firstChild);
} else {
document.getElementById(DOM_ID).textContent += ‘\n\n’ + errorText;
}
// Example: log the error to remote service.
// Note: you can log errors to a remote service, to understand
// and monitor the types of errors encountered by regular users,
// Googlebot, and other crawlers.
var client = new XMLHttpRequest();
client.open(‘POST’, ‘https://example.com/logError’);
client.setRequestHeader(‘Content-Type’, ‘text/plain;charset=UTF-8’);
client.send(errorText);
});
2. مطمئن شوید که از خطاهای نرم افزار 404 جلوگیری می کنید. در یک برنامه تک صفحه ای (SPA)، این امر می تواند به ویژه دشوار باشد. برای جلوگیری از ایندکس شدن صفحات خطا، میتوانید از یکی یا هر دوی استراتژیهای زیر استفاده کنید:
- به آدرس اینترنتی که در آن سرور با کد وضعیت 404 پاسخ می دهد بروید.
fetch(`https://api.kitten.club/cats/${id}`) .then(res => res.json()) .then((cat) => { if (!cat.exists) { // redirect to page that gives a 404 window.location.href = '/not-found'; } });
- متا تگ robots را به noindex اضافه یا تغییر دهید.
fetch(`https://api.kitten.club/cats/${id}`)
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
const metaRobots = document.createElement(‘meta’);
metaRobots.name = ‘robots’;
metaRobots.content = ‘noindex’;
document.head.appendChild(metaRobots);
}
});
هنگامی که یک SPA از جاوا اسکریپت سمت سرویس گیرنده برای رسیدگی به خطاها استفاده می کند، اغلب یک کد وضعیت HTTP 200 را به جای کد وضعیت مناسب گزارش می دهد. این می تواند منجر به ایندکس شدن صفحات خطا و احتمالاً نمایش داده شدن در نتایج جستجو شود.
3. از Googlebot انتظار داشته باشید که درخواستهای مجوز کاربر را رد کند.
به عنوان مثال، اگر دوربین API را مورد نیاز قرار دهید، Googlebot نمیتواند دوربینی را در اختیار شما قرار دهد. در عوض، راهی را برای کاربران فراهم کنید تا به محتوای شما دسترسی داشته باشند، بدون اینکه مجبور به اجازه دسترسی به دوربین باشند.
4. از URL های قطعه برای بارگذاری محتوای مختلف استفاده نکنید.
یک SPA ممکن است از URL های قطعه (به عنوان مثال https://example.com/#/products) برای بارگیری نماهای مختلف استفاده کند. طرح خزنده AJAX از سال 2015 منسوخ شده است، بنابراین نمی توانید برای کار با Googlebot به URL های قطعه تکیه کنید. توصیه می کنیم از History API برای بارگیری محتوای مختلف بر اساس URL در SPA استفاده کنید.
5. برای ارائه محتوا به ماندگاری داده توجه نکنید.
WRS هر URL را بارگیری می کند (برای مرور کلی از نحوه کشف محتوا به نحوه کار جستجوی Google مراجعه کنید)، به دنبال تغییر مسیرهای سرور و سرویس گیرنده، مانند مرورگر معمولی. با این حال، WRS وضعیت را در بارگذاریهای صفحه حفظ نمیکند:
-
- دادههای Local Storage و Session Storage در بارهای صفحه پاک میشوند.
- کوکیهای HTTP در بارگذاریهای صفحه پاک میشوند.
6. از انگشت نگاری محتوا برای جلوگیری از مشکلات مربوط به کش کردن در Googlebot استفاده کنید.
Googlebot به منظور کاهش درخواستهای شبکه و استفاده از منابع، بهطور تهاجمی حافظه پنهان میکند. WRS ممکن است سرصفحههای ذخیرهسازی را نادیده بگیرد. ممکن است WRS از منابع جاوا اسکریپت یا CSS قدیمی استفاده کند. انگشت نگاری محتوا با ایجاد اثر انگشت از قسمت محتوای نام فایل، مانند main.2bb85551.js، از این مشکل جلوگیری می کند. اثر انگشت به محتوای فایل بستگی دارد، بنابراین بهروزرسانیها هر بار یک نام فایل متفاوت ایجاد میکنند. برای کسب اطلاعات بیشتر، راهنمای web.dev در مورد استراتژیهای ذخیره طولانی مدت را بررسی کنید.
7. اطمینان حاصل کنید که برنامه شما از تشخیص ویژگی برای همه APIهای حیاتی مورد نیاز خود استفاده می کند و در صورت لزوم، یک رفتار بازگشتی یا چندپری ارائه می دهد.
برخی از ویژگی های وب ممکن است هنوز توسط همه عوامل کاربر پذیرفته نشده باشند و برخی ممکن است عمداً برخی ویژگی ها را غیرفعال کنند. به عنوان مثال، اگر از WebGL برای ارائه جلوه های عکس در مرورگر استفاده می کنید، تشخیص ویژگی نشان می دهد که Googlebot از WebGL پشتیبانی نمی کند. برای رفع این مشکل، میتوانید جلوه عکس را نادیده بگیرید یا تصمیم بگیرید از رندر سمت سرور برای پیشاجرای جلوههای عکس استفاده کنید، که باعث میشود محتوای شما برای همه از جمله Googlebot در دسترس باشد.
8. مطمئن شوید که محتوای شما با اتصالات HTTP کار می کند.
Googlebot از درخواست های HTTP برای بازیابی محتوا از سرور شما استفاده می کند. از انواع دیگر اتصالات مانند WebSockets یا WebRTC پشتیبانی نمی کند. برای جلوگیری از بروز مشکل در چنین اتصالاتی، مطمئن شوید که یک HTTP بازگشتی برای بازیابی محتوا و استفاده از مدیریت خطا و تشخیص ویژگی قوی ارائه میکنید.
9. اطمینان حاصل کنید که اجزای وب شما همانطور که انتظار می رود ارائه می شوند.
از Rich Results Test یا ابزار بازرسی URL استفاده کنید تا بررسی کنید آیا HTML رندر شده تمام محتوای مورد انتظار شما را دارد یا خیر.
WRS DOM روشن و DOM سایه را صاف می کند. اگر مؤلفههای وب که استفاده میکنید از مکانیسم <slot> برای محتوای سبک DOM استفاده نمیکنند، برای اطلاعات بیشتر به مستندات مؤلفه وب مراجعه کنید یا به جای آن از مؤلفه وب دیگری استفاده کنید. برای اطلاعات بیشتر، بهترین روشها برای اجزای وب را ببینید.
پس از اصلاح موارد موجود در این چک لیست، مجدداً صفحه خود را با Rich Results Test یا ابزار بازرسی URL در Search Console آزمایش کنید.
اگر مشکل را برطرف کرده باشید، یک علامت تیک سبز ظاهر می شود و هیچ خطایی نمایش داده نمی شود. اگر همچنان خطاها را مشاهده میکنید، در انجمن راهنمای مرکز جستجو خطای خود را پست کنید.