نحوه رفع خطای Google bot cannot access CSS and JS files در وردپرس

نحوه رفع خطای Google bot cannot access CSS and JS files در وردپرس

 

 

چرا گوگل نیاز به دسترسی فایل‌های CSS و JS دارد؟

گوگل امتیاز ویژه‌ای در نظر گرفته تا در نتایج جستجو سایت ها را در نتایج بالاتری قرار بده، بنابراین برای گوگل این نکته که سایت شما از نظر ظاهری کاربرپسند باشه مورد اهمیت هستش، پس برای اینکه بتونه تا با استفاده از هوش مصنوعی که داره به درک درستی از سایت شما درست مشابه یک کاربر عادی برسه لازمه تا این فایل‌ها برای روبات گوگل لود شده و امکان دسترسی برای اونها هم فراهم باشد. و این میسر نمیشه جز با دسترسی به فایل‌های CSS و JS که نقش اصلی در نمایش ظاهر سایت را چه برای کاربران و چه برای موتورهای جستجو دارند.

برای اینکه بتونید ببینید که گوگل سایت شما را درست مثل یک کاربر عادی به چه شکلی میبینه کافیه تا به کنسول جستجوی گوگل که در آدرس https://www.google.com/webmasters/tools/home قرار داره مراجعه کنید و سپس بعد از اینکه سایت خودتون را انتخاب کردید در کنسول جستجوی سایت به مسیر Crawl> Fetch as Google مراجعه کنید، حالا روی دکمه FETCH AND RENDER که در تصویر زیر هم اونو مشاهده می‌کنید کلیک کنید و منتظر بمونید تا اگر گوگل به فایل‌های CSS و JS در سایت شما دسترسی داره اونو مورد بررسی قرار بده و نتیجه دید گوگل از سایت شما را ببینید.

اگر هم صفحه خاصی از سایتتون مد نظر شماست کافیه تا در فید آدرس دامنه که مشاهده می‌کنید ادامه آدرس صفحه مورد نظر را وارد کنید و در نهایت روی دکمه FETCH AND RENDER کلیک کنید و منتظر بمونید تا سایت شما مورد بررسی قرار بگیره. بعد از اینکه کار با موفقیت انجام گرفت یک Render برای شما ساخته میشه، کمی منتظر بمونید تا این Render مشابه تصویر زیر برای شما ساخته شود.

حالا روی رندر ساخته شده کلیک کنید تا در صفحه‌ای که براتون باز میشه ببینید که کاربران و خود گوگل سایت شما را در چه ظاهری خواهند دید. اگر همه چی درست باشه نشون دهنده اینه که گوگل به صورت کامل به فایل‌های JS و CSS موجود در سایت وردپرسی شما دسترسی دارد.

در صورتی که نتیجه یکسانی در این دو قسمت یعنی بخش‌های visitor و Googlebot وجود نداشته باشد به این معنیه که گوگل دسترسی به فایل‌های استایل و جاوا اسکریپت را به درستی نداشته است و سایت مانند چیزی که کاربران مشاهده می‌کنند برای ربات گوگل قابل مشاهده نیست. در این صورتت بخش‌هایی که گوگل به اونها دسترسی نداشته باشه در قسمت پایین تصویر سمت چپ نمایش داده خواهند شد که در این صورت باید ببینید اون فایل‌های تو کدوم دایرکتوری از وردپرس قرار دارند و اگر از طریق فایل robots.txt و یا فایل htaccess. دسترسی به اونها غیرفعال شده اصلاح کنید.

در صورتی که در این لیست توی ستون Reason عبارت Blocked را جلوی هر یک از فایل‌هایی که دسترسی به اونها برای گوگل فراهم نیست را مشاهده کردید، این مسئله به معنی عدم امکان دسترسی گوگل به فایل مورد نظر است که باید این مشکل را برطرف کنید. بنابراین برای رفع این خطا کافیه تا از طریق فایل robots.txt که در هاست شما در مسیری که وردپرس را در آن نصب کرده‌اید اقدام کرده و دسترسی لازم برای فایل‌های استایل و جاوا اسکریپت را برای ربات گوگل فراهم کنید. برای این منظور ابتدا وارد هاست خود شده و سپس به قسمت File Manager هاست مراجعه کنید.

سپس وارد مسیری که وردپرس را نصب کردید شده و فایل robots.txt را جهت ویرایش کردن باز کنید. اگر فایلی با این عنوان در هاست شما وجود نداره میتونید اونو بسازید، کافیه تا با استفاده از برنامه‌های ویرایشگر متن همچون نوت‌پد یک فایل جدید با همین نام بسازید و سپس اونو در مسیر public_html اپلود کنید. علاوه بر این میتونید تا با کلیک روی دکمه Files که در مدیریت فایل سی پنل قرار داره مشابه تصویر زیر در پنجره باز شده فایل جدید را بسازید.

این فایل شامل کدهایی مشابه زیر هستش که،

• اگر قبل از هر خط کدهای موجود در این فایل از دستور allow استفاده شده باشه به معنی اجازه دسترسی به این پوشه است.
• اگر از دستور disallow استفاده شده باشه به معنی عدم دسترسی به پوشه و یا فایل مورد نظر می‌باشد.

بنابراین اگر در فایل robots.txt سایتتون امکان دسترسی به پوشه‌های /wp-content/plugins/ و /wp-content/themes/ وجود ندارد و از دستور disallow در ان استفاده شده است می‌بایست آن را تغییر دهید. برای این منظور کافیه تا خط مورد نظر را حذف کنید. اگر هم قصد دارید تا دسترسی به یک فایل را در یک دایرکتوری ببندید کافیه مسیر درست را در اون ایجاد کنید، نه اینکه به طور کلی دایرکتوری اصلی را از دسترس ربات جستجوگرها خارج کنید. استانداردترین نوع دسترسی در فایل robots.txt در حالت پیشفرض برای وردپرس اینه که فقط دسترسی به پوشه wp-admin را از روبات گوگل خارج کنید. بنابراین کافیه تا کد زیر را در اون قرار بدین.

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