لرن بلاگ

تصویر مربوط به مقاله ریدایرکت در وب سایت

ریدایرکت در وب سایت و انجام آن با جاوا اسکریپت

مقدمه

شاید واژه «ریدایرکت در وب سایت و فرآیند ساخت و توسعه آن»، زیاد به گوش شما خورده باشد. اگر برایتان مهم است که بدانید Redirect چیست و چه کاربردی در ساخت وب سایت دارد، پیشنهاد می‌کنیم این مقاله را از دست ندهید. ما در اینجا در مورد مفهوم ریدایرکت در وب سایت صحبت می‌کنیم. علاوه بر ذکر اهمیت و کاربرد آن، به نحوه انجام ریدایرکت با جاوا اسکریپت نیز می‌پردازیم. در یک تعریف اولیه می‌توان این گونه به پرسش «ریدایرکت چیست؟» پاسخ داد: ریدایرکت در وب سایت، روش و راهکاری است که هم کاربران سایت و هم موتورهای جستجو را به صفحه دیگری (جدیدی) نسبت به آدرس ذکر شده هدایت می‌کند. یعنی شما کاربر سایت خود (یا موتور جستجو) را از یک URL در سایت به URL دیگری هدایت می‌کنید. البته این کار دلایل مختلفی دارد و بسته به نوع تکنولوژی‌هایی که در ساختن وب سایت خود از آنها کمک می‌گیرید، می‌تواند در هر سایت به شکل متفاوتی اجرا شود. در ادامه مقاله به توضیح این مورد می‌پردازیم.

چه زمانی از ریدایرکت در وب سایت استفاده می‌شود؟

همان‌طور که گفته شد دلایل متعددی را می‌توان برای به کارگیری ریدایرکت در وب سایت ذکر کرد. از جمله این دلایل عبارتند از:

صفحات حذف شده

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

انتقال وب سایت به دامنه جدید

یکی دیگر از دلایلی که باعث ایجاد ریدایرکت در وب سایت می‌شود، تغییر کردن دامنه سایت است. اگر با مفهوم دامنه از مفاهیم طراحی وب آشنایی ندارید، پیشنهاد می‌کنیم مقاله «مفاهیم طراحی وب: دامنه، هاست، وب سایت» را مطالعه بفرمایید.

ممکن است به هر دلیلی سایت خود را به دامنه جدیدی انتقال دهید. در چنین شرایطی طبیعتاً آدرس تمامی صفحات سایت شما نیز تغییر پیدا می‌کنند. اگر سایت شما شناخته شده باشد، ممکن است کاربران همان آدرس‌های قبلی را در مرورگر خود تایپ کنند. لذا برای اینکه آنها متوجه آدرس جدید صفحات و مقالات سایت شما بشوند، باید از فرآیند Redirect کمک بگیرید. مثلاً اگر آدرس وبلاگ قبلی شما www.olddomain.com/blog بوده، قرار است بعد از انجام ریدایرکت، کاربران به آدرس جدیدی به شکل www.newdomain.com/blog منتقل شوند.

ریدایرکت در وب سایت جهت حذف صفحات تکراری

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

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

از لحاظ سئو اهمیت ریدایرکت چیست؟

با توضیحاتی که داده شد، تا حدودی متوجه شده‌اید که فواید و کاربرد ریدایرکت چیست؟ البته به غیر از موارد ذکر شده، در حالت‌های دیگر هم ممکن است به ریدایرکت در وب سایت احتیاج داشته باشید. اما یکی از کاربردهای مهم ریدایرکت در مبحث سئوی وب سایت است. اگر شما یک سایت وردپرسی دارید، احتمالاً با افزونه وردپرس یواست آشنا هستید. یکی از گزینه‌های منوی کاربری این افزونه معروف در خصوص تنظیمات ریدایرکت در وب سایت است. همین مسئله خود نشان دهنده اهمیت ریدایرکت در سئو است. از دو جهت می‌توان کاربرد و فایده ریدایرکت در سئو را توضیح داد.

ریدایرکت تجربه کابری را بهبود می‌دهد

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

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

تأثیر ریدایرکت در ایندکس صفحات

در اصل شما به کمک ریدایرکت به موتورهای جستجو اطلاع می‌دهید که محتوای صفحه یا صفحاتی از سایت شما منتقل شده است. همچنین بیان می‌کنید که این محتوا به کجا و کدام URL جدید انتقال یافته است. به این ترتیب احتمال اینکه موتورهای جستجو در جستجو کردن محتوای سایت شما و به اصطلاح ایندکس کردن صفحات وب سایت، به صفحه یا خطای 404 برخورد کنند، تا حد زیادی کاهش می‌یابد. اگر این ریدایرکت‌ها صورت نگیرد، موتورهای جستجو به صفحات با محتوای نامناسب یا غیرمرتبط برخورد می‌کنند یا با همان خطای 404 مواجه می‌شوند. در چنین حالتی جایگاه سایت شما از نظر این‌گونه ابزارها پایین آمده و این مسئله تأثیر نامطلوبی در سئوی وب سایت شما خواهد داشت. لذا ریدایرکت کردن، در ایندکس شدن صفحات تأثیرگذار بوده و برای سئوی بهتر سایت شما ضروری است.

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

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

استفاده از ویژگی location.href برای ریدایرکت با جاوا اسکریپت

شاید راه‌های مختلفی برای ریدایرکت کردن در جاوا اسکریپت وجود داشته باشد، اما یکی از ساده‌ترین آنها استفاده از دستور یا ویژگی location.href می‌باشد. جهت توضیح بهتر کافی است دو فایل html در یک پوشه دلخواه بر روی سیستم خود ایجاد کنید. یکی را index.html و دیگری را about.html نام‌گذاری کنید. برای آنکه به صورت عملی و کاربردی متوجه شوید که «ریدایرکت چیست؟» یک فایل جاوا اسکریپت با نام redirect.js (نام‌گذاری دلخواه) نیز در همین پوشه ایجاد کنید.

تصویر پوشه های ایجادشده برای ریدایرکت در وب سایت

محتویات دو فایل html مشابه با یکدیگر هستند. صرفا برای تغییر در ظاهر آنها رنگ پس‌زمینه متفاوتی برای هر یک قرار داده‌ایم. در ادامه کدهای مربوط به فایل index.html را مشاهده می‌کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>home page</title>
  <style>
    .myDiv {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #598FF2;
      min-height: 100vh;
    }
  </style>
</head>
<body>
  <div class="myDiv">
    <h1>this is the home page</h1>
  </div>
  <!-- js file for redirecting -->
  <script src="redirect.js"></script>
</body>
</html>

به طریق مشابه کد فایل about.html به شکل زیر است:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>about page</title>
  <style>
    .myDiv {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #F320F2;
      min-height: 100vh;
    }
  </style>
</head>
<body>
  <div class="myDiv">
    <h1>this is the about page</h1>
  </div>
</body>
</html>

قرار است که کاربر از صفحه index.html به صفحه about.html منتقل شود (در اصطلاح ریدایرکت شود). برای انجام این‌کار از فایل redirect.js که در صفحه index.html ضمیمه شده، کمک می‌گیریم.

در حال حاضر این فایل خالی است و کدی در داخل آن وجود ندارد. لذا اگر دو صفحه را در مرورگرهای خود باز کنید، محتویات هر یک نمایش داده می‌شوند:

صفحات در مرورگرها

اما به محض استفاده از دستور زیر در فایل redirect.js مشاهده می‌کنید که هرگاه بخواهید صفحه index.html را در مرورگر باز کنید، مرورگر شما را به صفحه about.html منتقل می‌کند.

window.location.href = "about.html";

به این ترتیب عملا متوجه مفهوم ریدایرکت در وب سایت می‌شوید. همان‌طور که در تصویر زیر ملاحظه می‌کنید، هر بار صفحه index در مرورگر باز می‌شود، سریعا مرورگر ما را به صفحه about منتقل می‌کند‌. در واقع اصلاً کاربر نمی‌تواند در صفحه index.html باقی بماند.

نحوه انجام ریدایرکت با جاوا اسکریپت

از همین دستور location.href می‌توانید در سایت‌های آنلاین نیز برای انجام ریدایرکت با جاوا اسکریپت استفاده کنید. تنها کافی است آدرس صفحه‌ای که کاربر قرار است به آن منتقل شود، در جلوی این دستور ذکر گردد:

window.location.href = "https://learnblog.hamid-davodi.com";

اگر این‌بار باز هم فایل index.html را در مرورگر باز کنید، مشاهده می‌کنید که به صفحه اصلی سایت لرن بلاگ منتقل می‌شوید.

تصویر مربوط به ریدایرکت چیست و ریدایرکت با جاوا اسکریپت

جمع‌بندی

در این مقاله به مفهوم ریدایرکت در وب سایت اشاره کردیم. سعی کردیم به پرسش «ریدایرکت چیست؟» پاسخ دهیم. در مورد اهمیت و کاربردهای ریدایرکت به‌خصوص در زمینه سئو صحبت کردیم. در پایان نیز سعی کردیم به صورت عملی و با کدنویسی نحوه انجام ریدایرکت با جاوا اسکریپت را شرح دهیم.

دیدگاهتان را بنویسید

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