لینک‌های داخلی و خارجی

لینک داخلی در برابر لینک خارجی: یه تفاوت مهم که باید مدیریتش کنی

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

لینک داخلی چیه؟

لینک داخلی (Internal Link) به صفحه‌ای اشاره می‌کنه که داخل همون سایت قرار داره؛ یعنی هم مبدأ و هم مقصد لینک، بخشی از یه دامنه‌ی واحد هستن:

<a href="/about">درباره ما</a>
<a href="/blog/post1.html">اولین پست وبلاگ</a>

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

لینک خارجی چیه؟

لینک خارجی (External Link) به یه سایت دیگه، خارج از دامنه‌ی خودت اشاره می‌کنه:

<a href="https://developer.mozilla.org">مستندات MDN</a>

این نوع لینک‌ها معمولاً برای ارجاع به منابع معتبر، مستندات، یا سایت‌های شریک استفاده می‌شن.

آدرس مطلق در برابر آدرس ریشه‌نسبی

تو درس قبل با آدرس کامل (Absolute) و آدرس نسبی (Relative) آشنا شدیم. یه حالت سومی هم وجود داره به اسم آدرس ریشه‌نسبی (Root-relative)، که با یه / شروع می‌شه:

<a href="/about.html">درباره ما</a>

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

ویژگی target: باز کردن لینک در تب جدید

<a href="https://external-site.com" target="_blank">بازدید از سایت خارجی</a>

ویژگی target="_blank" باعث می‌شه لینک تو یه تب جدید مرورگر باز بشه، به‌جای اینکه صفحه‌ی فعلی رو جایگزین کنه. این ویژگی معمولاً برای لینک‌های خارجی توصیه می‌شه؛ چون وقتی کاربر روی یه لینک خارجی کلیک می‌کنه، معمولاً بهتره سایت اصلی همچنان باز بمونه و کاربر بعد از دیدن سایت مقصد، به‌راحتی بتونه به سایت اصلی برگرده (با بستن تب جدید).

این ویژگی رو تو درس بعدی همین فصل کامل‌تر بررسی می‌کنیم.

نکته‌ی امنیتی مهم درباره‌ی target="_blank"

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">بازدید از سایت</a>

وقتی از target="_blank" استفاده می‌کنی، توصیه‌ی امنیتی مهمی وجود داره: همیشه ویژگی rel="noopener noreferrer" رو هم اضافه کن. بدون این ویژگی، صفحه‌ی جدیدی که باز می‌شه، از طریق جاوااسکریپت دسترسی محدودی به صفحه‌ی اصلی (که لینک ازش باز شده) پیدا می‌کنه که می‌تونه یه ریسک امنیتی کوچیک باشه، مخصوصاً وقتی داری به یه سایت ناشناس لینک می‌دی. noopener این دسترسی رو می‌بنده، و noreferrer هم از ارسال اطلاعات صفحه‌ی مبدأ به سایت مقصد جلوگیری می‌کنه.

چرا تفکیک لینک داخلی و خارجی مهمه؟

این تفکیک چند دلیل عملی داره:

• تجربه‌ی کاربری: لینک‌های داخلی معمولاً بهتره تو همون تب باز بشن (چون کاربر داره تو همون سایت می‌گرده)، اما لینک‌های خارجی بهتره تو تب جدید باز بشن.
• سئو: موتورهای جستجو لینک‌های داخلی و خارجی رو متفاوت تحلیل می‌کنن؛ لینک‌های داخلی به فهم ساختار سایت کمک می‌کنن، لینک‌های خارجی می‌تونن اعتبار (Authority) رو منتقل کنن.
• نگهداری سایت: اگه دامنه‌ی سایتت عوض بشه، لینک‌های داخلیِ نوشته‌شده با آدرس نسبی یا ریشه‌نسبی خودکار درست کار می‌کنن، اما لینک‌های خارجی نیازی به تغییر ندارن چون اصلاً به دامنه‌ی خودت وابسته نبودن.

یه مثال ترکیبی

<nav>
  <a href="/">خانه</a>
  <a href="/services">خدمات</a>
  <a href="/contact">تماس با ما</a>
</nav>

<p>
  برای اطلاعات بیشتر درباره‌ی استاندارد HTML، می‌توانید به
  <a href="https://developer.mozilla.org/fa" target="_blank" rel="noopener noreferrer">مستندات MDN</a>
  مراجعه کنید.
</p>

تو این مثال، لینک‌های منو که همه داخلی هستن، با آدرس ریشه‌نسبی و بدون target نوشته شدن (چون همین تب باید باز بمونن)، اما لینک به MDN که خارجیه، هم با target="_blank" باز می‌شه، هم با rel امن‌شده.

چند اشتباه رایج

• باز کردن تمام لینک‌ها، حتی لینک‌های داخلی سایت، در تب جدید که تجربه‌ی کاربری رو مختل می‌کنه (کاربر با کلی تب باز گیج می‌شه).
• فراموش‌کردن rel="noopener noreferrer" هنگام استفاده از target="_blank" برای لینک‌های خارجی.
• استفاده از آدرس کامل (شامل دامنه‌ی خودِ سایت) برای لینک‌های داخلی، به‌جای آدرس نسبی یا ریشه‌نسبی ساده‌تر.

بهترین روش‌ها

• لینک‌های داخلی رو معمولاً تو همون تب باز کن، مگر اینکه دلیل خاصی برای باز کردن در تب جدید وجود داشته باشه.
• لینک‌های خارجی رو با target="_blank" و rel="noopener noreferrer" همراه کن.
• برای لینک‌های داخلی از آدرس نسبی یا ریشه‌نسبی استفاده کن، نه آدرس کامل با دامنه.

نکته‌ی سئو

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

نکته‌ی دسترسی‌پذیری

وقتی لینکی در تب جدید باز می‌شود (target="_blank")، توصیه می‌شود این موضوع به‌نوعی به کاربر اطلاع داده شود، مثلاً با یک متن کمکی مخفی برای صفحه‌خوان، چون باز شدن ناگهانی یک تب جدید بدون اطلاع قبلی می‌تواند کاربران کم‌بینا را گیج کند.

جمع‌بندی

لینک‌های داخلی به صفحات همان سایت و لینک‌های خارجی به سایت‌های دیگر اشاره می‌کنند. برای لینک‌های داخلی، استفاده از آدرس نسبی یا ریشه‌نسبی توصیه می‌شود، در حالی‌که برای لینک‌های خارجی، معمولاً بهتر است از target="_blank" همراه با rel="noopener noreferrer" استفاده شود تا هم تجربه‌ی کاربری بهتری ایجاد شود و هم مسائل امنیتی رعایت گردد.