vibe-coding-college-specs/chapters/13-product-maintenance/05-lesson-technical-seo-and-user-analytics/spec.md

مشخصات درس‌نامه: سئو تکنیکال (Google Search Console) و تحلیل رفتار کاربر با Microsoft Clarity

• شناسه در سیلابس: L13.6
• فصل: فصل ۱۳: نگهداری محصول (Ch 13)
• نوع محتوا: 📘 درس‌نامه متنی
• زمان تقریبی مطالعه: ۱۸ دقیقه
• پیش‌نیازهای مستقیم: L13.5 (به‌روزرسانی‌های امنیتی دوره‌ای)

---

۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)

دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:

• درک کند (Understand): تفاوت میان جذب ترافیک از موتورهای جستجو با سئو تکنیکال (Technical SEO) و درک تعاملات عمیق کاربران با ابزارهای تحلیل رفتار (Behavioral Analytics) را شرح دهد.
• تحلیل/ارزیابی کند (Evaluate): نقشه سایت خودکار (sitemap.ts)، فایل هدایت خزنده‌ها (robots.ts)، و ساختار داده‌های معنایی JSON-LD را برای رتبه‌بندی نام و تخصص خود در نتایج جستجوی گوگل ارزیابی کند.
• به‌کار ببندد (Apply): دامنه پورتفولیو را در Google Search Console ثبت و اعتبارسنجی کرده و نقشه سایت داینامیک پروژه‌ها را به گوگل معرفی نماید.
• ایجاد کند (Create): سرویس Microsoft Clarity را برای ضبط ویدیویی نشست‌های کاربری (Session Replay)، تحلیل نقشه‌های حرارتی (Heatmaps) و کشف کلیک‌های خشمگینانه (Rage Clicks) روی پورتفولیو راه‌اندازی کند.

---

۲. محدوده و مرزهای محتوا (Scope & Boundaries)

آنچه باید پوشش داده شود (In-Scope):

1. دو نیمه موفقیت محصول پس از انتشار: کشف شدن توسط گوگل + درک رفتار انسان‌ها:
   • داشتن بهترین پورتفولیو بدون سئو مثل باز کردن یک مغازه لوکس در کوچه بن‌بست یک بیابان است!
2. سئو تکنیکال خودکار در Next.js مدرن:
   • ساخت خودکار نقشه سایت در app/sitemap.ts: استخراج داینامیک اسلاگ پروژه‌ها از Supabase و تولید sitemap.xml.
   • ساخت فایل هدایت خزنده‌ها در app/robots.ts: اجازه ورود به صفحات عمومی و مسدودسازی خزنده‌ها از ورود به مسیرهای ادمین (/admin/*).
   • ساخت داده‌های ساختاریافته معنایی (Schema.org JSON-LD): معرفی خودتان به عنوان یک Person متخصص، مهارت‌ها و لینک‌های شبکه‌های اجتماعی برای نمایش ریچ‌اسنیپت اختصاصی در گوگل.
3. ثبت رسمی در Google Search Console (GSC):
   • اعتبارسنجی مالکیت با رکورد DNS TXT یا تگ متا.
   • ارسال نقشه سایت (/sitemap.xml) برای ایندکس سریع صفحات.
   • تحلیل کوئری‌های جستجو (Search Queries): کارفرمایان با چه کلماتی به سایت شما رسیده‌اند؟
4. تحلیل رفتار کاربر با مایکروسافت کلاریتی (Microsoft Clarity):
   • چرا کلاریتی؟ ۱۰۰٪ رایگان، بدون سقف ترافیک، و رعایت کامل حریم خصوصی.
   • بازپخش نشست‌ها (Session Replay): تماشای ناشناس حرکت ماوس و اسکرول کارفرما درست شبیه تماشای یک فیلم ویدیویی.
   • نقشه‌های حرارتی (Heatmaps): نقاط داغ کلیک و عمق اسکرول (Scroll Depth)؛ آیا کارفرمایان به بخش فرم تماس در انتهای صفحه می‌رسند؟
   • کشف کلیک‌های خشمگینانه (Rage Clicks) و کلیک‌های مرده (Dead Clicks): جاهایی که کاربر فکر می‌کند لینکی وجود دارد و مکرراً کلیک می‌کند!
5. نصب اسکریپت کلاریتی در app/layout.tsx:
   • نحوه الصاق تمیز اسکریپت با کامپوننت next/script بدون افت نمره لایت‌هاوس.
6. کال‌اوت‌های آموزشی و هشدار کوئرا:
   • کال‌اوت بنفش (<details class="violet">): مفهوم کلیک‌های خشمگینانه (Rage Clicks) و چگونه این شاخص به شما نشان می‌دهد کدام دکمه یا کارت در سایت گمراه‌کننده است.
   • کال‌اوت سبز (<details class="green">): مشاهده اولین ویدیوی گشت‌وگذار یک بازدیدکننده در پورتفولیو و حس شگفت‌انگیز درک رفتار کاربر واقعی.
   • کال‌اوت قرمز (<details class="red">): مسدود کردن مسیرهای /admin در robots.txt؛ هرگز اجازه ندهید صفحات لاگین مدیریت شما در نتایج جستجوی گوگل لیست شوند.

آنچه نباید وارد آن شویم (Out-of-Scope):

• مباحث پیچیده تبلیغات کلیکی گوگل ادز (Google Ads).
• کمپین‌های بک‌لینک‌سازی کلاه‌سیاه و خرید رپورتاژهای انبوه.

---

۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

اصطلاح انگلیسی	معادل فارسی مصوب	توضیح یک‌خطی ساده
Technical SEO	سئوی تکنیکال	بهینه‌سازی فنی زیرساخت سایت، سرعت، کدها و متادیتاها جهت خوانایی حداکثری برای موتورهای جستجو
Sitemap.xml	نقشه سایت اینترنتی	سندی استاندارد حاوی فهرست تمام آدرس‌های فعال سایت برای تسهیل خزش و ایندکس توسط گوگل
Robots.txt	فایل هدایت خزنده‌ها	فایل متنی در ریشه سایت که مشخص می‌کند خزنده‌های وب مجاز به بررسی کدام صفحات هستند و از کدام باید دور بمانند
JSON-LD Schema	داده‌های ساختاریافته معنایی	قالب استاندارد افزودن اطلاعات مفهومی به کدها برای تولید نتایج غنی (Rich Snippets) در جستجو
Session Replay	بازپخش نشست کاربری	شبیه‌سازی ویدیویی کامل نحوه تعامل، کلیک‌ها و اسکرول بازدیدکننده در طول زمان حضور در سایت
Rage Clicks	کلیک‌های خشمگینانه	کلیک‌های پیاپی و سریع کاربر روی یک نقطه که نشان‌دهنده ناکامی و کار نکردن یک المان ظاهری است

---

۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)

راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ images/ ذخیره شده و در جدول تک‌خانه‌ای وسط‌چین درج شوند:

1. تصویر کاور درس: images/cover.png
   • موضوع: ربات خزنده گوگل با ذره‌بین درخشان در کنار نقشه حرارتی نئونی پر از لکه‌های قرمز و زرد کلیک کاربران روی صفحات سایت.
2. داشبورد عملکرد در Google Search Console: images/google-search-console-performance.png
   • موضوع: اسکرین‌شات از پنل سرچ کنسول گوگل با نمودارهای Total Clicks، Total Impressions و کلمات کلیدی ورودی.
3. نمای بازپخش نشست ویدیویی در Microsoft Clarity: images/clarity-session-replay-screen.png
   • موضوع: اسکرین‌شات از پلیر کلاریتی با نمایش ردپای ماوس کاربر روی کارت پروژه‌ها و تایم‌لاین رویدادها.
4. نقشه حرارتی کلیک‌ها (Heatmap) در پورتفولیو: images/clarity-heatmap-preview.png
   • موضوع: اسکرین‌شات از صفحه پورتفولیو با لکه‌های حرارتی قرمز روی دکمه‌های «مشاهده پروژه» و «رزرو مشاوره».

---

۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)

1. تیتر اصلی: # سئو تکنیکال (Google Search Console) و تحلیل رفتار کاربر با Microsoft Clarity
2. مقدمه: چگونه کاری کنیم که هم ربات‌های گوگل عاشق ساختار سایت ما شوند و هم پشت صحنه ببینیم کاربران چگونه با پروژه‌های ما زندگی می‌کنند؟
3. جدول کاور درس
4. استعاره تابلوهای راهنما و دوربین‌های مداربسته فروشگاه:
   • سئو تابلوهای هدایت مشتری از اتوبان است؛ کلاریتی دوربین‌های داخل فروشگاه برای فهمیدن اینکه مشتری جلوی کدام قفسه مکث کرده است.
5. سئوی تکنیکال با ساخت فایل‌های جادویی Next.js:
   • کدنویسی app/sitemap.ts به صورت پویا با خواندن اسلاگ پروژه‌ها از Supabase.
   • کدنویسی app/robots.ts برای محافظت از روت‌های مدیریت.
6. تزریق هویت معنایی با JSON-LD Schema:
   • ساخت قطعه کد اسکیما در layout.tsx برای معرفی برند شخصی به خزنده‌های گوگل.
7. ثبت دامنه در Google Search Console:
   • اعتبارسنجی دامنه و ارسال سیت‌مپ و درخواست ایندکس سریع اولین صفحات.
8. راه‌اندازی جادوی مایکروسافت کلاریتی (Microsoft Clarity):
   • ثبت نام رایگان و دریافت کد رهگیری اختصاصی پروژه.
   • افزودن امن اسکریپت کلاریتی به app/layout.tsx با کامپوننت next/script.
9. تحلیل شاهکارهای کلاریتی: تماشای فیلم و کشف کلیک‌های خشمگینانه:
   • چگونه با دیدن ۱۰ ویدیوی اول، نقاط ضعف چیدمان و دکمه‌های گیج‌کننده پورتفولیو را بازطراحی کنیم.
10. باکس نکته Quera (<details class="violet">): اهمیت داده‌های Rage Clicks؛ کشف المان‌هایی که شبیه لینک طراحی شده‌اند اما کار نمی‌کنند و اصلاح فوری آن‌ها.
11. باکس هشدار Quera (<details class="red">): مسدود کردن صفحات پنل مدیریت در robots.txt؛ امنیت و حریم خصوصی پنل ادمین با سئو مخدوش نشود.
12. باکس رضایت‌بخش Quera (<details class="green">): دیدن اولین نتایج سرچ کنسول و تماشای حرکات زنده بازدیدکنندگان روی دکمه رزرو و دانلود رزومه.
13. جمع‌بندی درس‌نامه: تسلط بر دیدبانی رفتار و سئو؛ ورود به آخرین درس این فصل: مستندسازی فاخر و راهنمای نگهداری پروژه در درس بعدی.

---

۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)

• اصول سئو تکنیکال مدرن (sitemap.ts, robots.ts, JSON-LD) با کدهای استاندارد پیاده شود.
• مراحل ثبت سایت و ارسال نقشه سایت در Google Search Console تشریح گردد.
• راه‌اندازی و کاربرد Microsoft Clarity (Session Replays, Heatmaps, Rage Clicks) آموزش داده شود.
• کدهای ادغام اسکریپت با استفاده از کامپوننت بهینه‌ساز Next.js ارائه گردد.