صفحه دستهبندی فقط شبکهای از کالاها نیست؛ باید به خریدار کمک کند میان گزینهها مسیر درست را پیدا کند و معماری فروشگاه را برای موتور جستوجو روشن سازد. طراحی صفحه دستهبندی فروشگاه اینترنتی زمانی موفق است که کاربر جایگاه خود، دامنه انتخاب و معیارهای مقایسه را بفهمد و هر کالای ارزشمند نیز از مسیر لینکهای واقعی در دسترس خزنده باشد.
تمرکز این راهنما بر سطح دسته و زیردسته است: معماری طبقهبندی، فهرست محصول، فیلتر و مرتبسازی، صفحهبندی، محتوای راهنما و کنترل ایندکس. جزئیات گالری، واریانت، قیمت و دکمه خرید در راهنمای طراحی صفحه محصول بررسی شدهاند. جدا نگه داشتن این دو نقش مهم است؛ صفحه دسته برای کشف و مقایسه ساخته میشود و صفحه محصول برای تصمیم درباره یک کالای مشخص.
پاسخ کوتاه: صفحه دستهبندی خوب چه ویژگیهایی دارد؟
یک صفحه دستهبندی خوب سه کار را بدون اصطکاک انجام میدهد:
- قلمرو دسته را با عنوان و توضیح کوتاه مشخص میکند؛
- محصول مناسب را با شبکه خوانا، فیلترهای معنادار و مرتبسازی قابل فهم پیدا میکند؛
- مسیر دسته، زیردسته و محصول را با لینکهای قابل خزیدن به هم متصل نگه میدارد.
طبقهبندی را پیش از طراحی کارتها حل کنید
زیباترین شبکه محصول نمیتواند معماری مبهم را جبران کند. ابتدا یک درخت دستهبندی بسازید که از مدل ذهنی خریدار پیروی کند، نه از ساختار واحدهای سازمانی یا نام جدولهای دیتابیس. هر دسته باید موضوع مشخص، مجموعه محصول معنادار و دلیل مستقلی برای وجود داشتن داشته باشد.
دسته، زیردسته یا فقط یک فیلتر؟
برای هر ویژگی از خود بپرسید آیا کاربر آن را بهعنوان مقصد مستقل جستوجو یا مرور میکند. «لپتاپ» احتمالاً دسته است و «لپتاپ دانشجویی» ممکن است با موجودی و محتوای کافی یک زیردسته ارزشمند باشد؛ اما «مرتبسازی از ارزانترین» مقصد محتوایی مستقلی نیست. رنگ، اندازه و برند نیز همیشه یک حکم ندارند. ترکیبی که تقاضای روشن، محصولات کافی و تفاوت محتوایی دارد میتواند صفحه فرود اختصاصی بگیرد؛ بقیه ترکیبها بهتر است ابزار محدودکردن نتایج باقی بمانند.
عمق مسیر و دسترسی با لینک واقعی
دستههای اصلی باید از منو یا نقاط مهم سایت قابل دسترسی باشند و زیردستهها از والد خود لینک بگیرند. راهنمای رسمی ساختار فروشگاه در Google Search Central تأکید میکند که مسیر منو به دسته، زیردسته و محصول باید با لینکهای واقعی ساخته شود؛ خزنده معمولاً برای یافتن محصولات، فرم جستوجوی داخلی را تکمیل نمیکند. بنابراین کالایی که فقط پس از تایپ در جستوجو یا اجرای رویداد جاوااسکریپت دیده میشود، مسیر کشف مطمئنی ندارد.
بالای صفحه باید دامنه انتخاب را روشن کند
عنوان دسته باید همان مفهومی را بیان کند که کاربر میبیند. زیر آن یک مقدمه کوتاه بنویسید: این مجموعه شامل چه نوع محصولاتی است، مهمترین تفاوتها کداماند و برای انتخاب باید به چه چیزی توجه کرد. متن افتتاحیه نباید یک مقاله طولانی را پیش از محصولات قرار دهد یا با تکرار کلیدواژه، کاربر آماده خرید را عقب براند.
زیردستههای پرکاربرد را با پیوندهای واضح و محدود نشان دهید. breadcrumb نیز جایگاه فعلی و راه بازگشت به والد را روشن میکند. اگر این مسیر روی صفحه دیده میشود، میتوان رابطه همان عناصر را با واژگان رسمی BreadcrumbList در Schema.org توصیف کرد؛ داده ساختاریافته نباید آیتمی بسازد که کاربر نمیبیند.
شبکه محصول در سطح دسته چه اطلاعاتی لازم دارد؟
کارت دسته باید برای غربال اولیه کافی باشد، نه اینکه تمام صفحه محصول را در خود جا دهد. نام دقیق، تصویر قابل تشخیص، قیمت یا بازه قیمت معتبر، وضعیت ضروری مانند ناموجودی و یک یا دو ویژگی واقعاً مقایسهپذیر معمولاً هسته کارت را میسازند. اگر تخفیف نمایش داده میشود، قیمت پایه و شرایط آن باید روشن باشد.
فیلتر و مرتبسازی را از تصمیمهای واقعی بسازید
فیلتر خوب سؤال خریدار را به کنترل تبدیل میکند. ابتدا داده جستوجوی داخلی، مکالمات فروش و ویژگیهای محصول را بررسی کنید، سپس فقط معیارهایی را نشان دهید که نتیجه را بهشکل مفید محدود میکنند. فیلتر بدون داده کامل خطرناک است؛ اگر نیمی از کالاها مقدار «جنس» ندارند، انتخاب یک جنس میتواند محصولات مرتبط را پنهان کند.
در موبایل، فیلترها معمولاً در پنل جدا باز میشوند. تعداد فیلترهای فعال، امکان پاککردن هر مورد و دکمه اعمال باید واضح باشد و پس از بستن پنل، جای کاربر حفظ شود. مرتبسازی نیز باید نامی قابل فهم مانند «جدیدترین» یا «کمترین قیمت» داشته باشد.
دسترسپذیری کنترلها
هر checkbox، ورودی بازه و فهرست انتخاب باید برچسب برنامهنویسیشده داشته باشد. گزینههای مرتبط را گروهبندی کنید و وضعیت باز یا بسته شدن پنل، تعداد نتایج و تغییر فهرست را برای فناوری کمکی قابل دریافت سازید. آموزش فرمهای دسترسپذیر W3C بر label روشن، گروهبندی منطقی و دستور قابل فهم تأکید دارد. همه کنترلها باید با صفحهکلید کار کنند، فوکوس دیده شود و بستن پنل، فوکوس را به دکمه آغاز برگرداند.
URL فیلترها؛ پیش از توسعه راهبرد ایندکس بنویسید
ناوبری faceted میتواند برای هر ترکیب رنگ، برند، اندازه، قیمت و ترتیب یک URL تولید کند. اگر پنج فیلتر هرکدام چند گزینه داشته باشند، تعداد ترکیبها بهسرعت از تعداد صفحههای ارزشمند بیشتر میشود. مستند رسمی مدیریت خزش URLهای فیلترشده هشدار میدهد که این فضا میتواند منابع خزش را مصرف و کشف محتوای مهمتر را کند کند.
پیش از پیادهسازی، ترکیبها را به سه گروه تقسیم کنید:
| نوع URL | نمونه تصمیم | اقدام پیشنهادی | |---|---|---| | دسته یا فرود ارزشمند | مجموعه دارای تقاضا، موجودی و محتوای مستقل | URL پایدار، محتوای یکتا، self-canonical و لینک داخلی | | فیلتر کاربردی بدون ارزش جستوجوی مستقل | تغییر برند، رنگ یا بازه قیمت برای مرور | قابل استفاده برای کاربر، اما خارج از مجموعه صفحات هدف ایندکس | | ترکیب بیمعنا یا بدون نتیجه | پارامتر تکراری، مقدار نامعتبر یا صفحه فراتر از نتایج | وضعیت درست خطا، معمولاً ۴۰۴ برای URL نامعتبر یا بینتیجه |
canonical، noindex و robots.txt یک کار نمیکنند
`canonical` نسخه ترجیحی میان صفحههای مشابه را پیشنهاد میکند و میتواند به تجمیع سیگنالها کمک کند، اما دستور قطعی برای توقف خزش یا حذف از نتایج نیست. `noindex` درخواست میکند صفحه وارد نتایج نشود؛ برای دیدن این دستور، خزنده باید اجازه دسترسی به صفحه را داشته باشد. `robots.txt` خزش مسیر را محدود میکند، اما بهتنهایی تضمین نمیکند خود URL هرگز در نتایج دیده نشود و مانع مشاهده `noindex` داخل همان صفحه میشود.
پس سه ابزار را روی یک URL انباشته نکنید. برای ترکیبی که نباید خزیده شود، الگوی robots را بررسی کنید؛ برای صفحه قابل خزش اما خارج از نتایج، noindex؛ و برای نسخههای واقعاً مشابه، canonical. اثر تصمیم را در لاگ سرور و Search Console بسنجید.
صفحهبندی و بارگذاری تدریجی باید قابل خزیدن بماند
فهرست طولانی را نباید یکباره بارگذاری کرد، اما «نمایش بیشتر» یا اسکرول بینهایت نیز بدون مسیر URL کافی نیست. راهنمای رسمی صفحهبندی گوگل توضیح میدهد که خزنده معمولاً دکمه را کلیک نمیکند؛ باید بتواند با لینکهای دارای `href` به بخشهای بعدی مجموعه برسد.
برای صفحهبندی، هر صفحه URL یکتا داشته باشد، به صفحه بعدی لینک بدهد و canonical خودش را اعلام کند. همه صفحات را به اجبار canonical صفحه اول نکنید، زیرا محصولات موجود در صفحات بعدی بخشی از محتوای مستقل همان URL هستند. مرتبسازیهای جایگزین را نیز از صفحهبندی اصلی جدا کنید تا صدها نسخه از یک فهرست ساخته نشود.
اگر رابط اسکرول بینهایت را ترجیح میدهید، در پشت آن قطعات صفحهبندیشده با URL پایدار فراهم کنید. با رسیدن کاربر به انتها، URL و تاریخچه مرورگر باید منطقی بماند و بازگشت او را به موقعیت قبلی برگرداند. آخرین صفحه، شماره ناموجود و درخواست خارج از بازه نیز باید پاسخ HTTP درست داشته باشند.
محتوای دسته باید مفید باشد، نه مانع دیدن کالاها
مقدمه کوتاه بالای صفحه برای تعریف قلمرو و معیارهای اصلی کافی است. راهنمای عمیقتر را میتوان پس از شبکه یا در بخشهای جمعشوندهای قرار داد که محتوای آن در HTML قابل دسترسی است. درباره تفاوت زیردستهها، شیوه انتخاب، محدودیتها، نگهداری یا سازگاری بنویسید؛ نه تاریخچه عمومی محصولی که به تصمیم امروز ارتباط ندارد.
برای هر دسته متن مستقل بسازید. جایگزینکردن نام دسته در یک قالب ثابت، صفحههای کمارزش و شبیه به هم تولید میکند. اگر دسته فقط یک یا دو محصول دارد و هدف متفاوتی پوشش نمیدهد، ادغام آن با والد معمولاً منطقیتر از ساخت یک صفحه ضعیف است. هنگام برآورد توسعه و نگهداری این الگوها، راهنمای هزینه طراحی سایت در سال ۱۴۰۵ کمک میکند اجزای فنی، محتوا و پشتیبانی را جداگانه بودجهبندی کنید.
موجودی صفر و نتیجه صفر را آگاهانه طراحی کنید
در دستهای که موقتاً همه کالاهایش ناموجود شدهاند، عنوان، توضیح، زیردستهها و محصولات مرتبط را حفظ کنید و وضعیت را صادقانه بگویید؛ حذف فوری صفحه میتواند مسیر کاربر و لینکهای داخلی را بشکند. برای کالای ناموجود، وضعیت روی کارت روشن باشد و اگر جایگزین مرتبط وجود دارد، رابطه آن توضیح داده شود.
نتیجه صفر پس از انتخاب فیلتر با URL نامعتبر فرق دارد. در تعامل کاربر، میتوانید فیلترهای فعال را نگه دارید، دلیل احتمالی را نشان دهید و پیشنهاد کنید یک محدودیت حذف شود. اما URL قابل خزشی که ترکیب بیمعنا یا صفحه خارج از دامنه را نمایش میدهد نباید با پاسخ ۲۰۰ و یک صفحه توخالی تکثیر شود. رفتار رابط، وضعیت HTTP و سیاست ایندکس را برای هر سناریو مستند کنید.
سرعت و ثبات در شبکههای بزرگ
صفحه دسته چندین تصویر، کنترل تعاملی و اسکریپت شخصیسازی دارد؛ بنابراین هزینه هر کارت در تعداد زیاد ضرب میشود. تصویر نخستِ قابل مشاهده را در اندازه مناسب و از HTML اولیه قابل کشف کنید، تصاویر پایینتر را هوشمندانه lazy-load کنید و برای همه تصاویر ابعاد مشخص بگذارید. راهنمای بهینهسازی LCP در web.dev توضیح میدهد که منبع محتوای اصلی باید زود کشف شود و تصویر LCP نباید بیدلیل lazy-load شود.
برای یک پیادهسازی هماهنگ میان معماری محتوا، رابط، داده محصول و عملکرد فنی، خدمات طراحی سایت و فروشگاه اینترنتی ایزیساز میتواند مبنای طراحی یا بازطراحی الگوی دستهبندی باشد.
اندازهگیری بدون وعدههای ساختگی
موفقیت را فقط با رتبه یک عبارت یا نرخ کلیک کارت نسنجید. ابتدا رویدادهایی تعریف کنید که مسئله را نشان دهند: مشاهده دسته، انتخاب زیردسته، باز کردن فیلتر، اعمال و حذف فیلتر، مرتبسازی، رسیدن به صفحه بعد، ورود به محصول، نتیجه صفر و بازگشت به دسته. نام و ساختار رویدادها باید میان وب و گزارش یکسان باشد.
هر تغییر را با فرضیه مشخص اجرا کنید. برای نمونه: «نمایش زیردستههای اصلی بالای شبکه، رسیدن به محصول مناسب را آسانتر میکند.» سپس معیار، بازه مقایسه و بخش مخاطب را پیش از انتشار تعیین کنید. افزایش یک شاخص نباید با افت سرعت، کاهش دسترسپذیری یا رشد URLهای بیارزش خریداری شود. برای تدوین نقشه کلیدواژه، صفحههای هدف و کنترل همپوشانی، خدمات سئو ایزیساز مسیر مستقلی برای بررسی دارد.
نمونه عملی: دسته «صندلی اداری»
فرض کنید دسته صندلی اداری صدها محصول دارد و فهرست فعلی فقط تصویر، نام و قیمت را نشان میدهد. کاربران با واژههای «مدیریتی»، «کارشناسی» و «ارگونومیک» جستوجو میکنند، اما فروشگاه محصولات را بر اساس کد تأمینکننده دستهبندی کرده است. بازطراحی از تغییر رنگ کارت شروع نمیشود.
ابتدا دستههای همپوشان ادغام و زیردستهها بر اساس کاربرد واقعی تعریف میشوند. سپس ویژگیهای معتبر مانند نوع پشتی، بازه تنظیم ارتفاع، جنس روکش و تحمل وزن برای همه کالاها پاکسازی میشوند. کارت فقط دو ویژگی تعیینکننده را نشان میدهد و فیلترها از همین داده کامل ساخته میشوند. ترکیبهای رایج و دارای موجودی، در صورت داشتن تقاضا و محتوای مستقل، صفحه فرود پایدار میگیرند؛ مرتبسازی قیمت و ترکیبهای تصادفی وارد فهرست صفحات هدف نمیشوند.
در موبایل، فیلتر فعال و تعداد نتیجه همیشه قابل مشاهده است. صفحهبندی پشت دکمه «نمایش بیشتر» URLهای قابل دنبالکردن دارد. نتیجه صفر پیشنهاد حذف آخرین فیلتر را میدهد و محصولات ناموجود از فهرست ناپدید نمیشوند، بلکه وضعیت و جایگزینشان روشن است. پس از انتشار، تیم داده، ورود به محصول، نتیجه صفر، عملکرد واقعی و الگوی خزش URLهای فیلتر را بررسی میکند.
چکلیست تحویل صفحه دستهبندی
پیش از انتشار یا بازطراحی، این موارد را کنترل کنید:
- هر دسته هدف و مجموعه محصول مشخص دارد و با صفحه دیگری هممعنا نیست؛
- مسیر منو، دسته، زیردسته و محصول با لینک واقعی قابل دنبالکردن است؛
- عنوان، مقدمه کوتاه و breadcrumb جایگاه صفحه را روشن میکنند؛
- کارتها اطلاعات لازم برای مقایسه اولیه و وضعیت موجودی دقیق دارند؛
- فیلترها از داده کامل و معیارهای تصمیم مشتری ساخته شدهاند؛
- فیلتر و مرتبسازی در ۳۶۰ و ۷۶۸ پیکسل بدون پوشاندن محتوا کار میکنند؛
- کنترلها label، فوکوس، نام و وضعیت قابل دریافت دارند؛
- برای URL دسته، فیلتر، مرتبسازی و صفحهبندی سیاست مکتوب وجود دارد؛
- canonical، noindex و robots.txt مطابق نقش واقعی خود استفاده شدهاند؛
- ترکیبهای نامعتبر، نتیجه صفر و صفحه خارج از بازه پاسخ فنی درست دارند؛
- صفحهبندی با `href` قابل خزش است و هر صفحه self-canonical دارد؛
- تصاویر ابعاد مشخص و فایل متناسب با محل نمایش دارند؛
- شبکه در بارگذاری و تغییر فیلتر پرش آزاردهنده ایجاد نمیکند؛
- محتوای دسته یکتا، تصمیمساز و متناسب با موجودی همان مجموعه است؛
- محصولات ناموجود و دسته موقتاً خالی، مسیر جایگزین صادقانه دارند؛
- رویدادهای تعامل، نتیجه صفر، ورود به محصول و خطاها اندازهگیری میشوند؛
- URLهای هدف در sitemap و صفحات بیارزش خارج از آن هستند؛
- پس از انتشار، وضعیت HTTP، لینکها، ایندکس و رفتار موبایل دوباره آزموده میشود.
جمعبندی: صفحه دسته را به ابزار انتخاب تبدیل کنید
طراحی صفحه دستهبندی فروشگاه اینترنتی از تعریف درست دسته آغاز میشود، نه از انتخاب شکل کارت. معماری طبقهبندی باید با زبان و نیاز خریدار همسو باشد؛ شبکه باید مقایسه اولیه را ممکن کند؛ فیلتر و مرتبسازی باید بر داده قابل اعتماد تکیه کنند؛ و هر تصمیم تعاملی باید سیاست روشن URL، خزش و ایندکس داشته باشد. صفحهبندی قابل دنبالکردن، محتوای یکتا، دسترسپذیری و عملکرد واقعی نیز بخشی از همان محصولاند، نه کنترلهای تزئینی پایان پروژه.
اگر میخواهید ساختار دستهها، URLهای فیلترشده، تجربه موبایل و سنجش فروشگاه شما در یک بررسی اجرایی کنار هم ارزیابی شود، درخواست بررسی پروژه را برای ایزیساز ارسال کنید.