طراحی سایت عارف دیزل

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

عارف دیزل؛ وقتی محصول «برق» است و مشتری، کارشناس فنی

قبل از هر خط کد و هر پیکسل، باید مخاطب را می‌شناختیم. خریدار دیزل ژنراتور کسی نیست که با یک بنر «شگفت‌انگیز» قانع شود؛ مهندس تأسیسات است، مدیر کارخانه است، یا پیمانکار شهر بازی و بیمارستان که می‌داند کاوا و آمپر و فاز یعنی چه و دنبال یک پاسخ قابل‌دفاع برای سرمایه‌گذاری چند صد میلیونی خودش می‌گردد. این یعنی سایت عارف دیزل نباید «فروشگاهی بامزه» می‌شد؛ باید یک سند فنی قابل‌اعتماد با قابلیت خرید می‌شد.

از سوی دیگر، برند خودش سابقه‌ای داشت که کمتر شرکت ایرانی می‌تواند ادعایش را بکند: بیش از بیست سال تجربه، بالای هفتصد پروژه اجراشده و کار با بیش از دوازده برند موتور دیزل از کامینز و پرکینز تا بادوین و ولوو پنتا. تصمیم اول ما این بود که این سه عدد، پیش از هر چیز دیگری، در دید اول کاربر بنشیند؛ چون در این بازار، «سابقه» همان چیزی است که ریسک خرید را کم می‌کند. همین نگاه بعدها به نوار اعتماد شش‌گانه صفحه اصلی رسید: ارسال سراسر ایران، گارانتی و خدمات، نصب و راه‌اندازی، ۱۲+ برند، ۷۰۰+ پروژه و ۲۰+ سال تجربه.

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

مرحله اول: معماری اطلاعات برای ۵۳۶ محصول

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

• دسته‌بندی بر اساس برند موتور: کامینز، پرکینز، بادوین، ولوو پنتا، سدک، تلک و بنز ایدم هرکدام آرشیو مستقل خودشان را دارند؛ چون در دنیای واقعی، خریدار اول برند موتور را انتخاب می‌کند و بعد مدل و کاوا.
• دسته‌بندی بر اساس توان: از ۲۵ کاوا تا ۱۶۷۵ کاوا، سه‌و‌سی‌و‌پنج بازه کاوا؛ برای خریداری که مشخصاً دنبال «دیزل ژنراتور ۱۶۰ کاوا» است.
• صفحات محصول با جدول مشخصات فنی: توان اضطراری، فارانس، مدل موتور و آلترناتور، تعداد سیلندر، ولتاژ خروجی و ضریب قدرت؛ همان چیزهایی که کارشناس خرید در اولین تماس می‌پرسد، قبل از تماس روی سایت دیده می‌شود.
• Breadcrumb در تمام مسیرها: از صفحه اصلی تا عمیق‌ترین محصول، کاربر و خزنده هر دو می‌دانند کجا ایستاده‌اند.

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

مرحله دوم: هویت بصری و تجربه کاربری

هویت رنگی پروژه از لوگوی خود عارف دیزل بیرون آمد: بنفش و آبی‌های اشباع‌شده که در زمینه صنعت دیزل، خودش یک تصمیم متمایزکننده است. اما زیبایی‌شناسی بدون منطق فروش، فقط نقاشی است؛ سه تصمیم UX را می‌شود قلب این طراحی دانست.

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

دوم، مدل قیمت‌گذاری B2B: به‌جای درج قیمت که در بازار ژنراتور با نوسان ارز هر هفته عوض می‌شود، صفحه محصول دکمه نارنجی «درخواست قیمت»، شماره مستقیم کارشناس فروش و دکمه سبز دانلود کاتالوگ PDF دارد. کاتالوگ، هم برای خریدار یک سند قابل‌بایگانی است و هم برای تیم فروش عارف دیزل یک سرنخ کامل با نام و شماره.

سوم، تازه‌سازی نشانگرهای اعتماد: عناوین آرشیوها با ماه و سال به‌روز می‌شوند (مثل «لیست قیمت مهر ۱۴۰۵ + گارانتی معتبر») تا کاربر بفهمد سایت زنده است و قیمت‌ها و موجودی‌ها به‌روز؛ نکته‌ای که هم روی نرخ کلیک در نتایج گوگل اثر دارد و هم روی حس اعتماد.

مرحله سوم: کدنویسی اختصاصی؛ چرا نه صفحه‌ساز؟

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

مزیت اول، وزن است. صفحه‌سازها برای هر بخش، کلاس‌ها و اسکریپت‌های خودشان را لود می‌کنند و در پایان، سایتی تحویل می‌دهید که ممکن است چند مگابایت جاوااسکریپت بیکار با خودش حمل کند. در قالب اختصاصی، هر خط CSS و JS دلیلی برای وجودش هست؛ فقط همان چیزی لود می‌شود که آن صفحه لازم دارد. مزیت دوم، کنترل است: ساختار HTML، ترتیب اسکیماها و نحوه رندر مشخصات فنی محصولات همه در اختیار ماست، نه در قالب‌بندی پیش‌فرض یک افزونه. مزیت سوم، نگهداری است؛ وقتی تیمی که کد را نوشته در دسترس باشد، توسعه‌های بعدی (مثل افزودن حالت مقایسه یا بروزرسانی نوار قیمت) بدون دست‌زدن به صد هزار خط کد اضافه ممکن می‌شود.

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

مرحله چهارم: سرعتی که به فروش وصل می‌شود

اعداد اینفوگرافیک بالا را ساده‌تر هم می‌شود گفت: کل چیزی که مرورگر برای نمایش صفحه اصلی دانلود می‌کند، ۴۳۸ کیلوبایت است؛ یعنی تقریباً حجم سه عکس معمولی موبایل. HTML صفحه فقط ۲۳ کیلوبایت فشرده است، تصاویر در مجموع ۲۰۰ کیلوبایت و مجموع CSS و JS هم ۲۱۵ کیلوبایت. تعداد درخواست‌ها هم ۳۵ عدد است؛ یک سند HTML، پنج فایل استایل، هشت اسکریپت، بیست تصویر و یک فونت.

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

مرحله پنجم: سئو فنی و خوشه کلمات کلیدی «دیزل ژنراتور»

طراحی خوب بدون دیده‌شدن، تمام‌شده نیست. استراتژی سئوی این پروژه را روی یک اصل ساده بنا کردیم: در بازار ژنراتور، جست‌وجوی کاربر یا از «برند موتور» شروع می‌شود یا از «توان مورد نیاز». پس به‌جای آن‌که همه‌چیز را به صفحه اصلی گره بزنیم، یک خوشه (Cluster) ساختیم که کلمه کانونی «دیزل ژنراتور» قلب آن است و هشت خانواده برند و بازه کاوا دور آن می‌چرخند:

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

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

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

تیم اجرای پروژه

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

جمع‌بندی؛ چه چیزی تحویل مشتری داده شد؟

• فروشگاه ووکامرسی با ۵۳۶ محصول و ۳۵ دسته‌بندی برند و توان، با قالب ۱۰۰٪ اختصاصی و بدون صفحه‌ساز
• صفحه اصلی ۴۳۸ کیلوبایتی با ۳۵ درخواست؛ سبک‌تر و سریع‌تر از استاندارد رایج بازار
• تجربه خرید B2B کامل: درخواست قیمت، کاتالوگ PDF، مقایسه محصول و دسترسی مستقیم به کارشناس
• معماری سئوی خوشه‌ای با اسکیما و breadcrumb روی همه صفحات و عناوین تازه‌شونده
• نسخه موبایل با تمرکز روی تماس و واتساپ برای مشتری در محل پروژه

اگر برای کسب‌وکار شما هم به چیزی شبیه این نیاز دارید — سایتی که هم «فروشنده» باشد و هم «سند فنی» — می‌توانید سایر نمونه‌کارهای ما را در دسته نمونه کار طراحی سایت ببینید یا برای پروژه‌های بهینه‌سازی، فهرست نمونه کار سئو را مرور کنید. و اگر مشتاق نسخه فارسی جزئیات فنی‌تر این تجربه‌ها هستید، در آموزش‌های بعدی وب‌داران درباره ساخت فروشگاه‌های محصول‌محور B2B بیشتر خواهیم گفت.

پرسش‌های پرتکرار درباره این پروژه

قالب سایت عارف دیزل آماده است یا اختصاصی؟

قالب از صفر و اختصاصی کدنویسی شده و هیچ صفحه‌سازی در آن استفاده نشده است. همین موضوع عامل اصلی سبکی سایت (۳۵ درخواست و ۴۳۸ کیلوبایت) و کنترل کامل روی ساختار HTML و اسکیماهاست.

چرا قیمت محصولات در سایت درج نشده است؟

در بازار دیزل ژنراتور، قیمت به توان، برند موتور، آلترناتور و شرایط سفارش‌سازی بستگی دارد و با نوسان ارز تغییر می‌کند. به همین دلیل مدل «درخواست قیمت + کاتالوگ PDF + تماس با کارشناس» پیاده شد که هم دقیق‌تر است و هم برای تیم فروش، سرنخ تمیز تولید می‌کند.

استراتژی سئوی این سایت روی چه کلماتی بنا شده است؟

روی یک خوشه‌ای به مرکزیت کلمه «دیزل ژنراتور» و هشت خانواده برندی: کامینز، پرکینز، بادوین، سدک، تلک، بنز، ولوو و بازه‌های کاوا؛ همراه با کلمات مترادف و مشابه. جزئیات و روند رشد در صفحه سئو سایت عارف دیزل مستند شده است.