باز کردن لینک خروجی در تب جدید مرورگر

احتمالاً خودت هم تجربه‌اش رو داری: داری یه مقاله می‌خونی، روی یه لینک کلیک می‌کنی و یهو سایت قبلی غیب می‌شه. حالا باید با دکمه‌ی بازگشت برگردی یا کلاً بی‌خیال بشی. همین تجربه‌ی کوچیک، روی سایت خودت می‌تونه برات گرون تموم بشه؛ چون کاربری که از سایتت بیرون می‌ره، خیلی وقت‌ها دیگه برنمی‌گرده.

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

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

چرا باید لینک خروجی رو در تب جدید باز کنیم؟

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

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

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

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

پس قانون کلی ساده‌ست: لینک‌هایی که کاربر رو از سایتت دور می‌کنن، بهتره توی تب جدید باز بشن تا پل ارتباطی‌ات با کاربر قطع نشه.

روش‌های دستی اضافه کردن لینک در تب جدید

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

باز کردن لینک در تب جدید مرورگر با گوتنبرگ

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

شما به راحتی این امکان رو دارید که در پست‌ها و وبلاگ خودتون لینک‌های خروجی رو اضافه کنید. برای این کار کافیه متنی که می‌خواهید به اون لینک بدید رو انتخاب کنید و کلیدهای CTRL + K رو در ویندوز / Command + K در مک فشار بدید و روی آیکون مداد بزنید.

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

باز کردن لینک در پنجره جدید مرورگر با ویرایشگر قدیمی وردپرس

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

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

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

در اینجا باید کادر کنار بازکردن پیوند در زبانه تازه رو علامت بزنید و بعد روی دکمه افزودن پیوند کلیک کنید تا لینک خروجی اضافه بشه.
با انجام همه موارد بالا الان می‌تونید لینک خروجی رو در سایت خود مشاهده کنید.

باز کردن لینک خروجی در تب جدید مرورگر با ویرایشگر متن

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

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

با توجه به این تصویر می‌تونید لینک رو به متن اضافه کنید و گزینه‌های مربوط به اون رو از جعبه کناری ببینید. بعد از اون باید بر روی افزودن لینک کلیک کنید تا یک پنجره برای شما باز شود. الان می‌تونید کد HTML رو که برای لینک در ویرایشگر متن بود مشاهده کنید

الان لازمه که شما تغییراتی که انجام دادید رو ذخیره کنید و بعد از اون می‌تونید ببینید که لینک‌های خروجی به سایت شما اضافه شده است.

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

باز کردن لینک خروجی در تب جدید مرورگر با HTML

گاهی اوقات ممکنه شما برای اضافه کردن لینک در وردپرس نیاز به نوشتن HTML داشته باشید. به‌عنوان مثال زمانیکه شما از حالت HTML در یک بلوک جدید استفاده می‌کنید یا یک پیوند رو در الگوی قالب وردپرس اضافه می‌کنید نیاز به مورد زیر دارید.

شما باید لینک رو با استفاده از کد HTML زیر اضافه کنید

<a href="http://example.com" target="_blank" rel="noopener">Link Text</a>

استفاده از کد بالا بسیار ساده هست فقط کافیه به‌جای قسمتی که example.com که در آن نوشته شده URL لینک خروجی مورد نظر خودتون رو جایگذاری کنید و به جای Link Text، لینک متن مورد نظر خودتون رو قرار بدید.

اهمیت تگ rel=”noopener”

شاید حواست بهش بوده باشه: هر وقت تیک «بازکردن در زبانه جدید» رو می‌زنی، وردپرس خودش به‌طور خودکار یه کد به اسم rel=”noopener” (یا گاهی rel=”noreferrer”) به لینکت اضافه می‌کنه. این یه اشتباه یا کد اضافی نیست؛ کاملاً عمدیه و دلیل امنیتی داره.

ماجرا اینه: وقتی یه صفحه توی تب جدید باز می‌شه، اون صفحه‌ی جدید از نظر جاوااسکریپت یه دسترسی محدود به صفحه‌ی قبلی (یعنی سایت تو) داره. حالا فرض کن لینکی که بهش وصل شدی، دست یه آدم بدخواه باشه. اون می‌تونه از همین دسترسی سوءاستفاده کنه و تب سایت تو رو پشت سر کاربر به یه صفحه‌ی جعلی یا فیشینگ تبدیل کنه. به این ترفند می‌گن tabnabbing. همون rel=”noopener” دقیقاً جلوی این اتفاق رو می‌گیره.

یه نکته‌ی جدید: خبر خوب اینه که مرورگرهای جدید (کروم، فایرفاکس و سافاری) از حدود سال ۲۰۲۱ این رفتار noopener رو خودشون به‌صورت پیش‌فرض روی هر لینک target=”_blank” اعمال می‌کنن. پس این خطر امروز توی مرورگرهای جدید تا حد زیادی خودکار رفع شده. با این حال، نوشتن صریح rel=”noopener” هنوز یه عادت درسته؛ چون کاربرهایی که هنوز مرورگر قدیمی دارن هم باید در امان بمونن.

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

تأثیر ویژگی باز شدن لینک در تب جدید (target=”_blank”) روی سئو و تجربه کاربری

اول بذار یه سوءتفاهم رایج رو صاف کنیم. خیلی‌ها می‌گن باز کردن لینک توی تب جدید «مدت ماندگاری» کاربر رو بالا می‌بره و گوگل هم همین رو مستقیم به‌عنوان سیگنال رتبه حساب می‌کنه. واقعیت یه‌کم ظریف‌تره: گوگل هیچ‌وقت به‌صراحت تأیید نکرده که زمان حضور کاربر یه فاکتور رتبه‌بندی مستقیمه. پس بهتره روی این حساب باز نکنی که با این کار یهو رتبه‌ات بپره بالا.

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

پس بهترین نگاه به این روش اینه: یه بهینه‌سازی برای تجربه‌ی کاربر، نه یه ترفند مستقیم برای بالا رفتن رتبه توی گوگل. اگه از این زاویه نگاهش کنی، هم انتظار درستی ازش داری و هم واقعاً ازش سود می‌بری.

روش خودکار با افزونه (مناسب کسایی که نمی‌خوان درگیر تنظیمات بشن)

تا اینجا روش‌های دستی رو دیدیم. ولی بذار رو راست باشیم: اگه یه سایت پر از مطلب داری یا چند تا نویسنده روش کار می‌کنن، اینکه هر بار یادت باشه تیک تب جدید رو بزنی یا تک‌تک لینک‌ها رو چک کنی، عملاً غیرممکنه. یکی یادش می‌ره، یکی حواسش نیست، و کم‌کم کلی لینک داری که توی همون تب باز می‌شن.

اینجاست که یه افزونه کار رو راحت می‌کنه. کافیه افزونه‌ی Open External Links in a New Window رو نصب و فعال کنی. از این به بعد، خودش به‌صورت خودکار همه‌ی لینک‌های خروجی رو توی یه تب جدید باز می‌کنه و دیگه لازم نیست به چیزی فکر کنی.

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

چطور لینک‌های داخلی سایت را هم در تب جدید باز کنیم؟

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

مشکل باز نشدن لینک‌ها در تب جدید با افزونه‌های کش و راه حل آن

یکی از مشکلات رایجی که وب‌مسترها با اون روبه‌رو می‌شن اینه که با وجود زدن تیک زبانه جدید یا نصب افزونه، لینک‌ها همچنان در همان صفحه باز می‌شن! مقصر اصلی این اتفاق در ۹۰ درصد مواقع، افزونه‌های کش و بهینه‌سازی سرعت سایت مثل موشک وردپرس هستند. این افزونه‌ها برای بالا بردن سرعت، کدهای جاوا اسکریپت رو فشرده یا به تأخیر می‌اندازند. برای حل این مشکل کافیه یک‌بار کش سایت خودتون رو کاملاً خالی کنید و اگر درست نشد، تنظیمات فشرده‌سازی جاوا اسکریپت افزونه کش خودتون رو بررسی کنید.

ترفند استثنا قائل شدن برای برخی لینک‌های خروجی در افزونه‌ها

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

نحوه تست و اطمینان از درست کار کردن لینک‌ها در حالت ناشناس مرورگر

بعد از اینکه تمام تنظیمات رو انجام دادید و لینک‌های خودتون رو ساختید، بهترین راه برای تست کردن اینه که سایت رو در حالت ناشناس مرورگر باز کنید. چرا؟ چون مرورگرها معمولاً کدهای قدیمی سایت رو ذخیره می‌کنند و ممکن است تغییرات جدید رو به شما نشان ندند. با این کار مطمئن می‌شید که یک کاربر تازه وارد هم دقیقاً همین تجربه عالی باز شدن لینک‌ها در تب جدید رو خواهد داشت.

روش حرفه‌ای: بدون افزونه و فقط با یه تکه کد

حالا فرض کن نه حوصله داری تک‌تک لینک‌ها رو دستی تغییر بدی، نه دلت می‌خواد یه افزونه‌ی جدید به سایتت اضافه کنی (که خب، هر افزونه یه‌کم سایت رو سنگین‌تر می‌کنه). توی این حالت یه راه تمیز وجود داره: یه تکه کد جاوااسکریپت کوچیک به قالبت اضافه می‌کنی و کار تمومه.

این کد خودش دامنه‌ی سایت تو رو تشخیص می‌ده و فقط روی لینک‌هایی که خارج از سایتت هستن، ویژگی target=”_blank” و همون rel=”noopener” اصولی رو اعمال می‌کنه. لینک‌های داخلی خودت دست‌نخورده می‌مونن. این روش بهترین گزینه برای کسیه که هم سایت سبک و سریع می‌خواد و هم می‌خواد همه‌ی لینک‌های خارجی‌اش خودکار توی تب جدید باز بشن.

کد html زیر رو کپی کن:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var links = document.getElementsByTagName('a');
    var currentDomain = window.location.hostname;

    for (var i = 0; i < links.length; i++) {
        // بررسی اینکه لینک خارجی است و پروتکل ایمیل یا تلفن نیست
        if (links[i].hostname && links[i].hostname !== currentDomain && !links[i].href.startsWith('mailto:') && !links[i].href.startsWith('tel:')) {
            links[i].setAttribute('target', '_blank');
            links[i].setAttribute('rel', 'noopener');
        }
    }
});
</script>

این کد رو کجا بذاریم؟

برای اضافه کردن این کد به وردپرس دو تا راه ساده داری؛ هر کدوم راحت‌تر بود همون رو انتخاب کن.

روش اول: از طریق افزونه‌ی درج کد (راحت و امن)

اگه قالبت بخشی به اسم «کدهای سفارشی» یا «اسکریپت‌های فوتر» داره، کد رو همون‌جا بذار. اگه نداره، می‌تونی از یه افزونه‌ی سبک درج کد توی هدر و فوتر مثل WPCode استفاده کنی. این روش امن‌تره چون با هیچ فایل قالبی ور نمی‌ری.

روش دوم: مستقیم توی فایل footer.php قالب (برای حرفه‌ای‌ترها)

از مسیر نمایش > ویرایشگر پرونده پوسته وارد شو.

از منوی سمت راست فایل footer.php رو پیدا کن، و کد بالا رو دقیقاً یه خط قبل از تگ پایانی </body> بذار. بعدش دکمه‌ی به‌روزرسانی پرونده رو بزن.

حواست به قالب‌های بلوکی باشه: اگه از یه قالب بلوکی (Full Site Editing) استفاده می‌کنی، اصلاً همچین منو و فایل footer.php به این شکل وجود نداره. توی این قالب‌ها بهتره بری سراغ روش اول و از افزونه‌ی درج کد استفاده کنی.

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

نکات کاربردی و رفع مشکلات رایج

تا اینجا روش‌های اصلی رو دیدیم. حالا چند تا نکته‌ی پراکنده ولی مهم مونده که دونستنشون می‌تونه کلی از دردسرت کم کنه.

لینک‌های داخلی رو هم می‌شه در تب جدید باز کرد

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

اگه با وجود زدن تیک، لینک‌ها در تب جدید باز نمی‌شن

این یکی از مشکلات رایجیه که خیلی‌ها رو کلافه می‌کنه: تیک رو زدی یا افزونه نصب کردی، ولی لینک‌ها همچنان توی همون صفحه باز می‌شن. توی ۹۰ درصد مواقع مقصر، افزونه‌های کش و افزایش سرعت مثل WP Rocket هستن. این افزونه‌ها برای بالا بردن سرعت، کدهای جاوااسکریپت رو فشرده می‌کنن یا اجراشون رو به تأخیر می‌اندازن و همین گاهی این قابلیت رو به‌هم می‌ریزه.

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

برای بعضی لینک‌ها استثنا قائل شو

اگه از افزونه‌ی خودکار استفاده می‌کنی، ممکنه برای بعضی لینک‌ها اصلاً نخوای این اتفاق بیفته؛ مثلاً لینک‌های شبکه‌های اجتماعی خودت یا لینک‌های دانلود مستقیم. خوشبختانه اکثر این افزونه‌ها توی تنظیماتشون یه کادر به اسم «استثناها» (Exceptions) دارن. کافیه آدرس دامنه‌های موردنظرت رو اونجا وارد کنی تا افزونه نادیده‌شون بگیره و اون لینک‌ها مثل قبل توی همون صفحه باز بشن.

آخر کار حتماً در حالت ناشناس تست کن

وقتی همه‌ی تنظیمات رو انجام دادی، بهترین راه برای مطمئن شدن اینه که سایت رو توی حالت ناشناس (Incognito) مرورگر باز کنی و چند تا لینک رو امتحان کنی. چرا حالت ناشناس؟ چون مرورگرها معمولاً نسخه‌ی قدیمی سایت رو ذخیره می‌کنن و ممکنه تغییرات جدید رو بهت نشون ندن. توی حالت ناشناس این اتفاق نمی‌افته و دقیقاً همون چیزی رو می‌بینی که یه کاربر تازه‌وارد می‌بینه.

جمع‌بندی

دیدی که باز کردن لینک‌های خروجی توی تب جدید نه کار سختیه و نه یه قابلیت لوکس؛ یه تغییر کوچیکه که هم تجربه‌ی کاربرت رو بهتر می‌کنه و هم کمک می‌کنه بازدیدکننده‌هات راحت‌تر پیشت برگردن.

حالا کدوم روش رو انتخاب کنی؟ بستگی به خودت داره:

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

هر کدوم که با کار تو جور بود رو انتخاب کن و خیالت راحت باشه که داری تجربه‌ی بهتری به کاربرت می‌دی. شاد و سربلند باشید. 🙂

تیم تولید محتوا

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