در این مطلب به آموزش رفع مشکل seo صفحات angularjs در nginx می پردازیم.
توضیح مشکلی که در seo صفحات angularjs بوجود می آید
موتورهای جستجو برای اینکه بتوانند سایتهای موجود در اینترنت را پیدا کرده و با توجه به محتویات آنها در نتیجه جستجوی کاربرنشان نشان دهند از crawlerها و یا bot های مخصوص به خود استفاده میکنند. این crawler و bot ها با توجه به طراحی که دارند میتوانند صفحات و محتویاتی را که با HTML در سطح وب هستند را بررسی کرده و در پایگاه داده خود نگهداری کنند.
اما با توجه به پیشرف تکنولوژی و مطرح شدن زبانهای اسکریپت نویسی مانند AngularJS برای نوشتن صفحات وب و همچنین با توجه به اینکه این صفحات وب بسته به درخواستهای کاربران اجرا شده و در مرورگر کاربر به HTML تبدیل میشوند مشکلاتی را برای crawler و bot های موتورهای جستجو ایجاد میکنند، که این مشکل بصورت نمایش محتویات نامشخص در بخش perview سایت در نتایج جستجو نمود پیدا خواهد کرد.
در زیر تصویر نمونه این مشکل در کوکل را میبینید.
توضیح چگونگی حل مشکل ایجاد شده
با توجه به اینکه گوگل و اکثر موتورهای جستجو قابلیت index کردن صفحات وب نوشته شده با متد AJAX و برنامه های کاربردی تحت وب نوشته شده با AngularJS را ندارند، راه حلی که مطرح میشوند این است که سرویس دهنده وب خود را بگونه ای تنظیم کنیم که درصورتی که درخواستی از سمت موتورهای جستجو برای index کردن سایت دریافت کرد بجای اینکه محتویات اسکریپتهای AngularJS را برای آنها ارسال کند، یک کد HTML ثابت از قبل تولید شده را بسمت crawler و botهای موتور جستجوگر ارسال کند تا مشکل نمایش محتویات نامفهوم که در تصویر قسمت قبل مشاهده کردید رفع گردد.
حل مشکل ایجاد شده با استفاده از nginx
توجه: برای خواندن آموزش نصب nginx به اینجا مراجعه کنید.
توجه: برای خواندن مقالات ایمن سازی nginx به اینجا و اینجا مراجعه کنید.
برای حل این مشکل با استفاده از صفحات استاتیک HTML باید خطوط زیر را در تنظیمات مربوط به وبسایت angularjs خود در nginx قرار دهیم.
if ($http_user_agent ~ “baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator”) {
return 301 https://nowlearn.ir;
}
در توضیح خطوط بالا اینکه این تنظیمات به nginx می گوید که در صورتی که user agent درخواست دهنده صفحات وب angularjs ما از طرف موتورهای جستجویی مانند گوگل با نام Googlebot بود بجای صفحات angularjs، صفحات استاتیک HTML را که از قبل آمده کرده ایم را به آن نشان دهد یا اینکه به آدرس خواستی ریدایرکت شود.
در زیر نمونه ای از تنظیماتی که شما باید در فایل تنظیمات nginx خود قرار دهید آورده شده است.
location / {
if ($http_user_agent ~ “baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator”) {
return 301 https://nowlearn.ir;
}
root /path/to/root;
try_files $uri $uri/ /index.html;
}
و در آخر برای اینکه تنظیمات بر روی nginx اعمال شود باید سرویس دهنده آن را restart کنیم.
systemctl restart nginx
