اپلیکیشن‌های وب پیشرو (PWA) دیگر یک مفهوم جدید و آزمایشی نیستند؛ آن‌ها به یک استاندارد طلایی برای ارائه تجربه کاربری شبیه به اپلیکیشن‌های بومی (Native) در بستر وب تبدیل شده‌اند. اگر به دنبال افزایش تعامل کاربر، بهبود نرخ بازگشت و تقویت سئوی سایت خود هستید، بهینه‌سازی مانیفست PWA یکی از قدرتمندترین و در عین حال ساده‌ترین گام‌هایی است که می‌توانید بردارید. این فایل کوچک JSON، دروازه‌ای است که وبسایت شما را از یک صفحه ساده در مرورگر به یک اپلیکیشن قابل نصب، سریع و قابل اعتماد تبدیل می‌کند.
بسیاری از توسعه‌دهندگان وبسایت خود را به PWA تبدیل می‌کنند، اما از پتانسیل کامل فایل manifest.json برای بهبود سئوی PWA و جلب توجه کاربران غافل می‌مانند. این مقاله یک راهنمای جامع و عملی برای سال ۲۰۲۵ است که به شما نشان می‌دهد چگونه یک مانیفست بی‌نقص ایجاد کنید، ویژگی‌های کلیدی آن را برای حداکثر تأثیرگذاری بهینه نمایید و مطمئن شوید که گوگل و سایر موتورهای جستجو، اپلیکیشن وب شما را به درستی ایندکس کرده و به کاربران مناسب نمایش می‌دهند.
مانیفست PWA چیست و چرا اهمیت دارد؟
فهرست مقاله
مانیفست اپلیکیشن وب (Web App Manifest) یک فایل ساده با فرمت JSON است که اطلاعات کلیدی درباره اپلیکیشن وب شما را به مرورگر و سیستم‌عامل ارائه می‌دهد. این فایل به مرورگر می‌گوید که PWA شما هنگام نصب روی دستگاه کاربر (موبایل، تبلت یا دسکتاپ) باید چگونه به نظر برسد و چگونه رفتار کند. در واقع، این مانیفست شناسنامه اپلیکیشن شماست.
اهمیت این فایل فراتر از یک تنظیم فنی ساده است. یک مانیفست به خوبی پیکربندی شده، مستقیماً بر سه حوزه حیاتی تأثیر می‌گذارد:
- قابلیت نصب (Installability): مرورگرها (مانند کروم و اج) از اطلاعات این فایل استفاده می‌کنند تا دکمه “نصب” یا “Add to Home Screen” را به کاربر نمایش دهند. بدون یک مانیفست معتبر، وبسایت شما هرگز یک PWA واقعی نخواهد بود.
- تجربه کاربری (User Experience): از نام و آیکون اپلیکیشن گرفته تا رنگ نوار ابزار و نحوه نمایش صفحه، همه چیز توسط مانیفست کنترل می‌شود. این فایل به شما امکان می‌دهد یک تجربه یکپارچه و برندسازی شده، شبیه به یک اپلیکیشن نیتیو، ایجاد کنید.
- سئو و کشف‌پذیری (SEO & Discoverability): موتورهای جستجو مانند گوگل، فایل مانیفست را برای درک بهتر ماهیت اپلیکیشن شما خزش می‌کنند. اطلاعاتی مانند نام، توضیحات و آیکون‌ها می‌تواند در نحوه نمایش سایت شما در نتایج جستجو و حتی در فروشگاه‌های اپلیکیشن (مانند Google Play) تأثیرگذار باشد. ایندکس شدن اپلیکیشن‌های وب به شدت به وجود و صحت این فایل وابسته است.
ساختار اصلی یک فایل مانیفست (manifest.json)
برای شروع، باید یک فایل به نام manifest.json (یا هر نام دلخواه دیگری با پسوند .json) در ریشه (root) وبسایت خود ایجاد کنید. سپس، باید این فایل را در تگ <head> تمام صفحات سایت خود، به ویژه صفحه اصلی، فراخوانی کنید.
<link rel="manifest" href="https://bazaarina.site/manifest.json">
یک فایل مانیفست پایه شامل چندین عضو (Member) کلیدی است. در ادامه، مهم‌ترین اعضا و نحوه بهینه‌سازی مانیفست PWA برای هر یک را بررسی می‌کنیم.
۱. نام‌گذاری اپلیکیشن: name و short_name
این دو عضو، هویت اپلیکیشن شما را تعریف می‌کنند.
name: نام کامل اپلیکیشن شماست که معمولاً در صفحه معرفی نصب (Installation Prompt) نمایش داده می‌شود. این نام باید واضح، توصیفی و شامل نام برند شما باشد.short_name: یک نام کوتاه‌تر است که زیر آیکون اپلیکیشن روی صفحه اصلی دستگاه کاربر (Home Screen) نمایش داده می‌شود. به دلیل محدودیت فضا، این نام باید مختصر و قابل تشخیص باشد (معمولاً کمتر از ۱۲ کاراکتر).
نکات بهینه‌سازی:
- از کلیدواژه اصلی برند خود در
nameاستفاده کنید. short_nameرا به گونه‌ای انتخاب کنید که حتی بدون دیدن نام کامل، برند شما را تداعی کند.- این نام‌ها باید با تگ
<title>صفحه اصلی شما همخوانی داشته باشند تا به گوگل در درک ارتباط آن‌ها کمک کند.
{
"name": "فروشگاه آنلاین دیجی‌کالا",
"short_name": "دیجی‌کالا"
}
۲. آیکون‌ها (Icons): اولین تأثیر بصری
عضو icons یک آرایه از اشیاء است که هر کدام یک نسخه از آیکون اپلیکیشن شما را در اندازه‌ها و فرمت‌های مختلف تعریف می‌کنند. این آیکون‌ها در مکان‌های مختلفی مانند صفحه اصلی، صفحه بارگذاری (Splash Screen) و نوتیفیکیشن‌ها استفاده می‌شوند.
نکات بهینه‌سازی:
- تنوع اندازه: حتماً چندین اندازه مختلف از آیکون خود را ارائه دهید. اندازه‌های ضروری شامل
192x192و512x512پیکسل هستند. گوگل از این اندازه‌ها برای نمایش در پرامپت نصب و صفحه بارگذاری استفاده می‌کند. - فرمت مناسب: از فرمت PNG برای آیکون‌ها استفاده کنید. همچنین می‌توانید از فرمت SVG برای مقیاس‌پذیری بهتر بهره ببرید.
- آیکون‌های Maskable: با معرفی
purpose: "maskable"، می‌توانید اطمینان حاصل کنید که آیکون شما در سیستم‌عامل‌های مختلف (مانند اندروید که آیکون‌ها را در اشکال مختلف مثل دایره یا مربع گوشه‌گرد نمایش می‌دهد) به درستی و بدون بریده شدن نمایش داده می‌شود. ارائه یک آیکونmaskableبرای افزایش تعامل کاربر از طریق اپلیکیشن‌های وب حیاتی است، زیرا ظاهر حرفه‌ای‌تری به اپلیکیشن شما می‌بخشد.
{
"icons": [
{
"src": "https://bazaarina.site/icons/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "https://bazaarina.site/icons/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "https://bazaarina.site/icons/maskable_icon.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "maskable"
}
]
}
۳. کنترل نحوه نمایش: display و orientation
این دو عضو، رفتار پنجره اپلیکیشن شما پس از باز شدن را تعیین می‌کنند.
display: مشخص می‌کند که اپلیکیشن شما چه مقدار از رابط کاربری مرورگر (مانند نوار URL) را نمایش دهد. مقادیر اصلی عبارتند از:fullscreen: تمام صفحه، بدون هیچ‌گونه رابط کاربری مرورگر. مناسب برای بازی‌ها یا محتوای تعاملی.standalone: بیشترین شباهت به یک اپلیکیشن نیتیو. نوار URL و دکمه‌های مرورگر مخفی می‌شوند، اما عناصر سیستمی مانند نوار وضعیت باقی می‌مانند. این مقدار، انتخاب رایج برای اکثر PWAهاست.minimal-ui: شبیه بهstandaloneاست اما دکمه‌های ناوبری ساده (مانند بازگشت و رفرش) را نمایش می‌دهد.browser: اپلیکیشن در یک تب جدید مرورگر با رابط کاربری کامل باز می‌شود (رفتار پیش‌فرض).orientation: جهت‌گیری پیش‌فرض اپلیکیشن را تعیین می‌کند. مقادیر ممکن شاملany,natural,landscape,portraitو… است.
نکات بهینه‌سازی:
- برای ارائه تجربه‌ای شبیه به اپلیکیشن، همیشه از
display: "standalone"استفاده کنید. این کار به کاربر حس استفاده از یک محصول مستقل و نه یک وبسایت ساده را می‌دهد و نقش مهمی در افزایش تعامل کاربر از طریق اپلیکیشن‌های وب دارد.
{
"display": "standalone",
"orientation": "portrait"
}
۴. تعیین نقطه شروع: start_url
این عضو مشخص می‌کند که کدام صفحه از وبسایت شما باید پس از باز کردن PWA توسط کاربر، به عنوان صفحه اول بارگذاری شود. معمولاً این آدرس به صفحه اصلی (/) یا یک داشبورد کاربری (/dashboard) اشاره دارد.
نکات بهینه‌سازی:
start_urlباید یک URL نسبی (relative) به ریشه سایت باشد.- صفحه‌ای که به عنوان
start_urlتعیین می‌شود باید همیشه در دسترس باشد و به سرعت بارگذاری شود. - می‌توانید پارامترهای UTM را به این URL اضافه کنید تا ترافیک ورودی از PWA را در ابزارهای تحلیلی خود ردیابی کنید. این کار به شما در تحلیل رفتار کاربران و بهینه‌سازی مانیفست PWA در آینده کمک می‌کند.
{
"start_url": "/?utm_source=pwa&utm_medium=homescreen"
}
۵. برندسازی بصری: theme_color و background_color
این دو عضو به شما اجازه می‌دهند تا ظاهر PWA خود را با هویت بصری برندتان هماهنگ کنید.
theme_color: رنگ نوار ابزار (Toolbar) مرورگر را تعیین می‌کند. این رنگ باید با رنگ اصلی برند شما یکسان باشد.background_color: رنگی است که برای صفحه بارگذاری (Splash Screen) نمایش داده می‌شود، قبل از اینکه CSS سایت شما به طور کامل بارگذاری شود. این رنگ به همراه آیکون در لحظه اول باز شدن اپلیکیشن به کاربر نمایش داده می‌شود و از نمایش یک صفحه سفید خالی جلوگیری می‌کند.
نکات بهینه‌سازی:
- رنگ
theme_colorرا در تگ متا در<head>نیز تعریف کنید تا حتی قبل از بارگذاری مانیفست، نوار ابزار مرورگر رنگی شود. - رنگ
background_colorرا مشابه رنگ پس‌زمینه اصلی سایت خود انتخاب کنید تا انتقال از صفحه بارگذاری به اپلیکیشن، نرم و یکپارچه باشد.
{
"theme_color": "#4A90E2",
"background_color": "#FFFFFF"
}
اعضای پیشرفته برای سئو و تعامل بیشتر (آپدیت ۲۰۲۵)
تا اینجا اعضای اصلی را پوشش دادیم. اما برای بهینه‌سازی مانیفست PWA و کسب مزیت رقابتی، باید از اعضای پیشرفته‌تر نیز بهره ببرید.
description
این عضو یک توضیح کوتاه درباره عملکرد اپلیکیشن شما ارائه می‌دهد. اگرچه مرورگرها هنوز به طور گسترده از آن استفاده نمی‌کنند، اما موتورهای جستجو می‌توانند از این متن برای درک بهتر محتوای اپلیکیشن شما استفاده کنند. این فیلد را مشابه توضیحات متا (Meta Description) صفحه خود در نظر بگیرید.
{
"description": "اپلیکیشن وب پیشرو برای خرید آنلاین میلیون‌ها کالا با ارسال سریع. از آخرین تخفیف‌ها مطلع شوید و سفارشات خود را به راحتی پیگیری کنید."
}
scope
عضو scope مشخص می‌کند که کدام مجموعه از URLها بخشی از PWA شما محسوب می‌شوند. اگر کاربر از داخل PWA به لینکی خارج از این scope برود، آن لینک در یک تب جدید مرورگر باز خواهد شد. این کار به حفظ حس یکپارچگی اپلیکیشن کمک می‌کند. به طور پیش‌فرض، scope دایرکتوری است که مانیفست در آن قرار دارد.
{
"scope": "/app/"
}
shortcuts
این ویژگی قدرتمند به شما اجازه می‌دهد تا مجموعه‌ای از اقدامات سریع را تعریف کنید که کاربر با نگه داشتن انگشت روی آیکون PWA (در سیستم‌عامل‌های پشتیبانی‌شده) به آن‌ها دسترسی پیدا می‌کند. این قابلیت، مسیر رسیدن کاربر به بخش‌های کلیدی اپلیکیشن شما را کوتاه می‌کند و مستقیماً به افزایش تعامل کاربر از طریق اپلیکیشن‌های وب منجر می‌شود.
نکات بهینه‌سازی:
- مهم‌ترین و پرکاربردترین اقدامات را به عنوان میان‌بر تعریف کنید. برای یک فروشگاه اینترنتی می‌تواند “سفارشات من”، “لیست علاقه‌مندی‌ها” یا “جستجو” باشد.
- برای هر میان‌بر، یک نام، URL و آیکون مجزا تعریف کنید.
{
"shortcuts": [
{
"name": "سفارشات من",
"short_name": "سفارشات",
"description": "مشاهده تاریخچه سفارشات",
"url": "/profile/orders?utm_source=pwa",
"icons": [{ "src": "https://bazaarina.site/icons/orders.png", "sizes": "96x96" }]
},
{
"name": "لیست علاقه‌مندی‌ها",
"short_name": "علاقه‌مندی",
"description": "مشاهده محصولات ذخیره شده",
"url": "/profile/wishlist?utm_source=pwa",
"icons": [{ "src": "https://bazaarina.site/icons/wishlist.png", "sizes": "96x96" }]
}
]
}
related_applications
اگر علاوه بر PWA، یک اپلیکیشن نیتیو در Google Play یا App Store دارید، این عضو به شما اجازه می‌دهد تا ارتباط بین آن‌ها را مشخص کنید. این کار به مرورگرها کمک می‌کند تا از نمایش پرامپت نصب PWA برای کاربرانی که اپلیکیشن نیتیو شما را نصب کرده‌اند، خودداری کنند. همچنین سیگنال مثبتی برای موتورهای جستجو در مورد اکوسیستم دیجیتال شماست.
{
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=com.example.app1",
"id": "com.example.app1"
}
]
}
جمع‌بندی نهایی و نکات تکمیلی
بهینه‌سازی مانیفست PWA یک فرآیند ساده با بازدهی بسیار بالاست. این فایل JSON کوچک، پلی است که وبسایت شما را به دنیای اپلیکیشن‌ها متصل می‌کند و تأثیر مستقیمی بر تجربه کاربری، نرخ تعامل و سئوی PWA دارد. با صرف زمان برای پیکربندی دقیق اعضای کلیدی مانند name، icons، display و start_url، شما اولین قدم را برای ساخت یک PWA موفق برمی‌دارید. اما برای پیشی گرفتن از رقبا در سال ۲۰۲۵، باید فراتر بروید و از ویژگی‌های پیشرفته‌تری مانند shortcuts برای ایجاد مسیرهای دسترسی سریع و purpose: "maskable" برای تضمین ظاهری حرفه‌ای در تمام دستگاه‌ها استفاده کنید. به یاد داشته باشید که مانیفست یک سند زنده است؛ با تحلیل رفتار کاربران و تکامل اپلیکیشن خود، همیشه می‌توانید آن را برای افزایش تعامل کاربر از طریق اپلیکیشن‌های وب بهبود بخشید.
سوالات متداول (FAQ)
۱. چگونه می‌توانم صحت فایل manifest.json خود را بررسی کنم؟
بهترین ابزار برای این کار، پنل “Application” در ابزارهای توسعه‌دهنده (DevTools) مرورگر کروم است. در این پنل، به بخش “Manifest” بروید. کروم به طور خودکار فایل مانیفست شما را خوانده و هرگونه خطا یا هشدار را نمایش می‌دهد. همچنین می‌توانید از ابزارهای آنلاین مانند PWA Builder برای ارزیابی و تولید مانیفست استفاده کنید.
۲. آیا ترتیب اعضا در فایل manifest.json اهمیت دارد؟
خیر، ترتیب اعضا در یک فایل JSON اهمیتی ندارد. مرورگرها و موتورهای جستجو فایل را به طور کامل تجزیه می‌کنند و ترتیب قرارگیری فیلدها تأثیری بر عملکرد آن ندارد. مهم این است که سینتکس JSON (استفاده صحیح از کاما، آکولاد و کوتیشن) را رعایت کنید.
۳. آیا PWA می‌تواند جایگزین کامل یک وبسایت معمولی برای سئو شود؟
بله و خیر. PWA در واقع یک “ارتقاء” برای وبسایت شماست، نه یک جایگزین. تمام URLهای PWA شما باید قابل خزش و ایندکس باشند، درست مانند یک وبسایت معمولی. مزیت سئوی PWA در بهبود معیارهایی مانند سرعت، تجربه کاربری و تعامل است که همگی از فاکتورهای مهم رتبه‌بندی گوگل هستند. شما همچنان به استراتژی‌های سئوی سنتی مانند تولید محتوای باکیفیت و لینک‌سازی نیاز دارید.
