فرض کنید کاربر در یک فروشگاه عنوان محصول رو وارد میکنه:
لپتاپ اپل مکبوک پرو
اگر همین عنوان فارسی مستقیماً در URL قرار بگیره، مرورگر اون رو به URL-encoded تبدیل میکنه و ممکنه چیزی شبیه این ببینیم:
%D9%84%D9%BE...
نتیجه، URL طولانی، ناخوانا و سختتر برای اشتراکگذاری و مدیریت خواهد بود؛ علاوه بر این، چنین URLهایی برای کاربر قابل درک نیستن و حتی روی سئو هم تأثیر منفی میذارن.
از طرف دیگه، اگر کاربر مجبور باشه slug انگلیسی رو خودش وارد کنه، تجربه کاربری خوبی نخواهیم داشت؛ مخصوصاً در فروشگاهها و CMSها که کاربر فقط عنوان فارسی محصول، دستهبندی یا مقاله رو وارد میکنه. این کار هم زمانبره و هم احتمال خطا و ناهماهنگی در URLها رو بالا میبره.
پس راهحل بهتر اینه که slug انگلیسی بهصورت خودکار از عنوان فارسی ساخته بشه.
اما اینجا یک چالش دیگه وجود داره: تبدیل ساده حروف فارسی به لاتین همیشه خروجی طبیعی و قابلفهمی تولید نمیکنه، چون این تبدیلها معمولاً بدون در نظر گرفتن تلفظ و معنی انجام میشن.
مثلاً ممکنه خروجی شبیه به این بشه:
لپتاپ -> lptap
در حالی که برای یک URL مناسب، انتظار داریم:
لپتاپ -> laptop
اینجاست که
@pinooxhq/slug وارد میشه.این کتابخانه برای ساخت slug مناسب محتوای فارسی، چند مرحله رو انجام میده:
Normalize -> Transliterate -> Word Mapping -> Slugify
یعنی:
متن فارسی رو نرمال میکنه
حروف و فاصلههای مختلف رو یکسانسازی میکنه
متن رو به Finglish تبدیل میکنه
برای واژههای رایج فارسی mapping مناسب در نظر میگیره
و در نهایت یک slug کوتاه، خوانا و URL-safe تولید میکنه
مثلاً:
لپتاپ سامسونگ -> laptop-samsung
یا:
دستهبندی گوشی موبایل -> daste-bandi-gooshi-mobile
این موضوع فقط برای محصولات نیست؛ slug در محصولات، دستهبندیها، مقالات، صفحات CMS و سایر URLهای داینامیک کاربرد داره و میتونه URLها رو خواناتر و مدیریت اونها رو سادهتر کنه.
پروژه
@pinooxhq/slug یک کتابخانه سبک و اوپن سورس هست و در Vue، React، Svelte و Vanilla JS قابل استفاده است.npm install @pinooxhq/slugGitHub: github.com/pinoox/slug
@DevTwitter | <Esmaeil Bahrani Fard/>