کیس استادی فروشگاه کتاب یکی یه دونه؛ یک فروشگاه اینترنتی واقعی

پاسخ کوتاه: «فروشگاه کتاب یکی یه دونه» یک فروشگاه اینترنتی واقعی در شیراز است که با لاراول و اینرسیا و ویو ساخته شده و همین حالا زنده است. در نقشه سایت خودش ۷۵۹ صفحه کتاب، ۲۳ دسته بندی، ۵۸۶ صفحه نویسنده و ۷۴ مطلب مجله ثبت شده است؛ یعنی ۱٬۴۵۰ نشانی که می شود آدرس داد و در گوگل دید. در این نوشته پشت صحنه این پروژه را با عدد نشان می دهم: چه انتخاب هایی شد، هر صفحه چه چیزی دارد و از کجا می توانید خودتان راستی آزمایی کنید.

مشتری این پروژه و چیزی که می خواست

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

درخواست ها در عمل این چهار مورد بود:

• هر کتاب یک صفحه مستقل با تصویر، قیمت و توضیح داشته باشد
• کتاب ها در دسته بندی های فهمیدنی مرتب شوند، نه یک لیست بی پایان
• جستجوی ساده و سبد خرید، بدون سردرگمی
• یک جای جدا برای نوشتن درباره کتاب ها، تا سایت فقط قفسه نباشد

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

پایهٔ فنی: لاراول، اینرسیا و ویو

کتاب فروشی آیندهٔ فروش را از دو جا می گیرد: مشتری تلفنی و مشتری گوگل. برای هر دو، دو چیز مهم است؛ سرعت و پیدا شدن. به همین دلیل پایه این پروژه لاراول با اینرسیا و ویو است.

به زبان ساده، این ترکیب سه چیز به فروشگاه می دهد:

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

این انتخاب، تصمیم ما در همین پروژه بود و نه ادعای کلی درباره دیگر فناوری ها. هر فروشگاهی بسته به موجودی و برنامه رشدش می تواند انتخاب دیگری داشته باشد.

نقشهٔ سایت: ۱٬۴۵۰ نشانی قابل خزش

عددهای زیر را امروز از فایل نقشه سایت خود فروشگاه بیرون کشیدم و شمردم؛ هیچ کدام تخمینی نیست:

هیچ فروشگاهی این عددها را برای خودنمایی نمی خواهد. ۷۵۹ صفحه کتاب یعنی ۷۵۹ فرصت برای اینکه با نام و توضیح کتاب در جستجو دیده شود؛ ۵۸۶ صفحه نویسنده یعنی کسی که نام نویسنده را جستجو می کند هم به یک صفحه مرتب می رسد، نه به یک پیام خطا. دسته بندی بزرگ تر هم محتوای بیشتری در خودش جا می دهد: «کودک و نوجوان» در این فروشگاه ۷۲۹ کتاب دارد و دستهٔ «کتاب های تحصیلی، کنکور و آزمون های تخصصی» ۱۸ کتاب. اگر می خواهید بدانید همین صفحه ها چطور به فروش تبدیل می شوند، نوشته سئو سایت فروشگاهی مسیر کار را نشان می دهد.

امکانات فروشگاه؛ از سبد خرید تا فهرست نویسندگان

فهرست زیر را از داده خودِ صفحه های زنده بیرون کشیدم، نه از خاطره:

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

سئو در این پروژه: عنوان، آدرس کانونیکال و اسکیما

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

• یک عنوان اصلی در هر صفحه. در هر شش صفحه ای که سنجیدم، فقط یک h1 وجود دارد. چند h1 در یک صفحه، به گوگل می گوید خودت هم نمی دانی موضوع صفحه چیست.
• عنوان و توضیح کوتاه مستقل. صفحه خانه، فروشگاه، یک کتاب، مجله، درباره ما و تماس، هر کدام عنوان خودشان را دارند. برای نمونه، توضیح کوتاه صفحه یک کتاب ۱۴۴ کاراکتر است و توضیح صفحه مجله ۱۱۲ کاراکتر.
• آدرس کانونیکال. هر صفحه به گوگل می گوید نسخه اصلی خودش همین آدرس است؛ جلوی تکراری شدن صفحه کتاب در آدرس های گوناگون را می گیرد.
• تصویر پیش نمایش پیوند. هر صفحه تصویر پیش نمایش خودش را دارد، پس وقتی لینک کتاب در تلگرام یا واتساپ فرستاده می شود، کارت تصویری می آید، نه یک لینک لخت.
• شناسنامه کتاب برای گوگل. صفحه کتاب سه نوع اطلاعات ساختاری دارد: کتاب، محصول و مسیر راهنما. یعنی گوگل می فهمد این صفحه یک کتاب فروشی است و قیمت دارد، نه یک نوشته معمولی.
• نقشه سایت و دستور ربات ها. نقشه سایت از پنج زیرنقشه ساخته شده و آدرس همه بخش ها را می دهد. فایل دستور ربات ها هم بخش های عمومی را باز گذاشته و مسیرهای مدیریت، پرداخت و پروفایل را بسته است.

اگر می خواهید همین منطق را برای فروشگاه خودتان ببینید، نوشته فروشگاه اینترنتی راه بیندازم یا در اینستاگرام بفروشم تفاوت فروش در پیج و در سایت را با عدد و شرط نشان می دهد.

حجم و سرعت صفحه ها: عددهای اندازه گیری شده

حجم صفحه را با فشرده سازی سنجیدم؛ همان کاری که مرورگر واقعی انجام می دهد:

این عددها یک معنی ساده دارند: با یک بستهٔ حدود بیست کیلوبایتی، مشتری کل صفحه کتاب را می گیرد. برای کسی که با اینترنت موبایل وارد می شود، تفاوت بین بیست کیلوبایت و صد کیلوبایت، تفاوت بین ماندن و رفتن است.

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

چطور خودتان راستی آزمایی کنید

من نمی خواهم حرفم را باور کنید. دو دستور زیر را در خط فرمان اجرا کنید و خودتان ببینید:

curl -s -o /dev/null -m 30 \
  -w "%{http_code} %{size_download}\n" \
  https://yekiyedoneh.com/book/can-we-friends

اگر جواب با ۲۰۰ شروع شد و حجمی چند ده کیلوبایتی آمد، یعنی سرور خودش صفحه کتاب را می دهد و برای نشان دادن آن به گوگل منتظر مرورگر نمی ماند.

curl -s -m 30 https://yekiyedoneh.com/sitemap.xml \
  | grep -c "<loc>"

این یکی تعداد نشانی های اعلام شده به گوگل را می شمارد. همین دو دستور، مبنای همان چک لیستی است که در بخش بعدی می خوانید.

این پروژه برای چه کسب و کاری مناسب است

هر فروشگاهی به این ساختار نیاز ندارد. این پروژه برای این حالت ها مناسب است:

• موجودی خودتان را می فروشید، نه موجودی چند فروشنده دیگر (این فروشگاه تک فروشنده است)
• چند صد تا چند هزار قلم کالا دارید و هر کالا توضیح و تصویر خودش را لازم دارد
• کالاها در دسته و زیردسته جای می گیرند و مشتری از دسته به کالا می رسد
• می خواهید بخش محتوایی هم داشته باشید تا پیش از خرید، دیده شوید

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

چک لیست تصمیم برای صاحب فروشگاه

پیش از سفارش هر فروشگاه اینترنتی، این شش مورد را از هر کسی که پیشنهاد می دهد بخواهید. هر شش مورد در همین پروژه قابل بررسی است:

1. نشانی نقشه سایت را نشان بدهد. اگر نشانی نداشت یا خالی بود، گوگل راهی برای شناختن صفحه های شما ندارد.
2. یک صفحه نمونه را بدون اجرای جاوااسکریپت نشان بدهد. اگر با یک دستور ساده هیچ متنی نیامد، گوگل هم همان را می بیند.
3. یک عنوان و توضیح کوتاه مستقل برای هر نوع صفحه. صفحه کتاب، دسته بندی و مقاله هر کدام باید عنوان خودشان را داشته باشند.
4. حجم صفحه را نشان بدهد، نه فقط ظاهر آن. ظاهر خوب با صفحه سنگین هم ممکن است؛ عدد حجم، حقیقت را می گوید.
5. بگوید چه کاری در دامنهٔ کارش نیست. کسی که فهرست «چه کاری نمی کنیم» ندارد، بعدا همه چیز را گردن شما می اندازد.
6. معیار پذیرش بنویسد. یعنی وقتی کار تمام شد، با چه آزمایشی قبول می شود؟ مثلا: صفحه کتاب با یک دستور ۲۰۰ می دهد و در نقشه سایت هست.

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

گام بعدی

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