lang و dir: دو ویژگی کوچیک با تأثیر بزرگ
تو درس ۲-۱ با ویژگی‌های lang و dir روی تگ html آشنا شدیم و گفتیم این‌ها زبان و جهت کلی سند رو مشخص می‌کنن. حالا که وارد فصل سئو و دسترسی‌پذیری شدیم، وقتشه عمیق‌تر بریم و ببینیم این دو ویژگی، فراتر از سطح کل سند، چه نقش‌های دقیق‌تری دارن و چطور می‌شه ازشون تو سطح جزئی‌تر هم استفاده کرد.
یادآوری سریع: lang و dir روی تگ html
<html lang="fa" dir="rtl">همون‌طور که تو درس ۲-۱ دیدیم، این دو ویژگی روی تگ ریشه‌ی سند، زبان و جهت کل صفحه رو مشخص می‌کنن. اما نکته‌ای که اونجا کامل بازش نکردیم اینه که این ویژگی‌ها محدود به تگ html نیستن؛ می‌شه روی هر عنصر دیگه‌ای هم جداگانه اعمالشون کرد.
lang روی یه بخش خاص از صفحه
<p>
این کتاب به زبان انگلیسی با عنوان
<span lang="en">"The Great Gatsby"</span>
منتشر شده است.
</p>فرض کن یه صفحه‌ی فارسیه (lang="fa" روی html)، اما یه بخش کوچیک از متن (مثل عنوان یه کتاب انگلیسی) باید به زبان دیگه‌ای نوشته بشه. تو این حالت، می‌شه lang رو مستقیم روی همون بخش خاص (مثلاً یه span) گذاشت تا صفحه‌خوان بفهمه باید فقط این تیکه رو با تلفظ انگلیسی بخونه، نه با تلفظ فارسی.
چرا این دقت تو سطح جزئی مهمه؟
بدون این کار، صفحه‌خوان که از قبل می‌دونه کل صفحه فارسیه، سعی می‌کنه حتی این عنوان انگلیسی رو هم با قوانین تلفظ فارسی بخونه، که نتیجه‌ش یه تلفظ کاملاً عجیب و نامفهومه. با گذاشتن lang="en" دقیقاً روی همون تیکه، صفحه‌خوان موقتاً به قوانین تلفظ انگلیسی سوییچ می‌کنه، فقط برای همون بخش، و بعدش دوباره برمی‌گرده به فارسی.
یه مثال با چند زبان مختلف تو یه صفحه
<article lang="fa" dir="rtl">
<h1>نقد و بررسی کتاب</h1>
<p>
این هفته به بررسی رمان
<span lang="fr"><em>L'Étranger</em></span>
اثر آلبر کامو می‌پردازیم.
</p>
</article>تو این مثال، کل article فارسیه، اما یه بخش کوچیک (اسم کتاب به زبان فرانسه) با lang="fr" مشخص شده تا هم صفحه‌خوان تلفظ درست فرانسوی رو بخونه، هم مرورگر (در صورت پشتیبانی) بتونه فونت یا قوانین نگارشی مناسب همون زبان رو اعمال کنه.
dir روی یه بخش خاص: وقتی جهت متن عوض می‌شه
<p>
نام این محصول به انگلیسی
<span dir="ltr">Smart Watch Pro</span>
است.
</p>دقیقاً مثل lang، ویژگی dir هم می‌تونه روی یه بخش کوچیک از متن اعمال بشه، وقتی جهت اون بخش با جهت کلی سند فرق می‌کنه. تو این مثال، کل جمله فارسی و راست‌به‌چپه، اما اسم انگلیسی محصول («Smart Watch Pro») باید چپ‌به‌راست نمایش داده بشه تا کلمات انگلیسی به‌هم نریزن.
چرا بدون dir درست، متن مخلوط به‌هم می‌ریزه؟
وقتی متن فارسی و انگلیسی قاطی می‌شن، مرورگر باید تصمیم بگیره هر بخش رو با چه جهتی نمایش بده. معمولاً مرورگرها یه الگوریتم پیش‌فرض دارن که تا حدی خودش این کار رو انجام می‌ده، اما تو جمله‌های پیچیده (مثلاً وقتی اعداد، علائم نگارشی و کلمات لاتین با هم ترکیب می‌شن)، این الگوریتم پیش‌فرض ممکنه نتیجه‌ی عجیب و به‌هم‌ریخته‌ای تولید کنه. مشخص‌کردن صریح dir روی همون بخش خاص، این ابهام رو از بین می‌بره.
مقدار auto برای dir
<p dir="auto">این متن جهتش خودکار تشخیص داده می‌شود</p>یه مقدار خاص دیگه برای dir، مقدار auto هست؛ این باعث می‌شه مرورگر خودش بر اساس اولین کاراکتر قوی (حرف، نه علامت یا فاصله) داخل اون عنصر، جهت مناسب رو تشخیص بده. این مخصوصاً برای محتوایی مفیده که از قبل نمی‌دونی قراره فارسی باشه یا انگلیسی (مثلاً یه فیلد که کاربر خودش محتواش رو وارد می‌کنه).
یه مثال کاربردی: نمایش نظرات کاربران چندزبانه
<div class="comment">
<p dir="auto">این محصول عالی بود، پیشنهاد می‌کنم!</p>
</div>
<div class="comment">
<p dir="auto">This product exceeded my expectations!</p>
</div>تو یه سایتی که نظرات کاربران از هر زبانی می‌تونه ثبت بشه، استفاده از dir="auto" روی هر نظر، تضمین می‌کنه که هر پیام، فارغ از زبانش، با جهت درست خودش نمایش داده بشه، بدون نیاز به این‌که خودت زبان دقیق هر پیام رو از قبل بدونی.
ارتباط lang با سئوی بین‌المللی
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="fa" href="https://example.com/fa/page">برای سایت‌هایی که چند نسخه‌ی زبانی مختلف دارن (مثل یه سایت با نسخه‌ی فارسی و انگلیسی)، تگ hreflang (که با ویژگی lang رابطه‌ی مفهومی نزدیکی داره) به گوگل کمک می‌کنه بفهمه کدوم نسخه‌ی زبانی رو به کاربرهای کدوم منطقه یا زبان نشون بده؛ این یه بحث تخصصی‌تر تو سئوی بین‌المللیه که فقط به‌عنوان آشنایی مفهومی اینجا بهش اشاره کردیم.
چند اشتباه رایج
- فراموش‌کردن lang روی بخش‌های کوچیک از متن که به زبان دیگه‌ای نوشته شدن، که باعث تلفظ اشتباه توسط صفحه‌خوان می‌شه.
- نادیده‌گرفتن dir برای بخش‌های انگلیسی وسط متن فارسی، که باعث به‌هم‌ریختگی بصری می‌شه.
- تنظیم اشتباه lang کلی سند (مثلاً گذاشتن lang="en" رو یه سایت کاملاً فارسی).
بهترین روش‌ها
- همیشه lang کلی سند رو درست و مطابق زبان اصلی محتوا تنظیم کن.
- برای بخش‌های کوچیک با زبان متفاوت از زبان اصلی سند، lang رو مستقیم روی همون عنصر (نه کل سند) بذار.
- برای محتوای تولیدشده توسط کاربر با زبان نامشخص (مثل نظرات)، از dir="auto" استفاده کن.
نکته‌ی سئو
ویژگی lang، هم در سطح سند و هم در سطح بخش‌های خاص، به گوگل کمک می‌کند محتوای هر بخش را با زبان صحیح مرتبط کند؛ این موضوع مخصوصاً برای سایت‌های چندزبانه، در کنار تگ‌های hreflang، نقش مهمی در نمایش صحیح محتوا به کاربران مناطق مختلف دارد.
نکته‌ی دسترسی‌پذیری
مشخص‌کردن دقیق lang روی بخش‌های کوچیک با زبان متفاوت، یکی از ساده‌ترین اما تأثیرگذارترین اقدامات برای بهبود تجربه‌ی کاربران صفحه‌خوان در محتوای چندزبانه است؛ بدون آن، تلفظ نادرست می‌تواند محتوا را کاملاً نامفهوم کند.
جمع‌بندی
ویژگی‌های lang و dir محدود به تگ html نیستند و می‌توانند روی هر بخش کوچیک‌تری از سند هم اعمال شوند، وقتی زبان یا جهت آن بخش با بقیه‌ی سند متفاوت است. مقدار dir="auto" برای محتوای تولیدشده توسط کاربر با زبان نامشخص مفید است، و دقت در استفاده‌ی درست از این دو ویژگی، هم برای دسترسی‌پذیری و هم برای سئوی چندزبانه اهمیت دارد.