108 lines
12 KiB
Markdown
108 lines
12 KiB
Markdown
# مشخصات درس‌نامه: سئو تکنیکال (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 ارائه گردد.
|