Technical

Web App Manifest

A web app manifest is a JSON file (manifest.json) that tells browsers how a Progressive Web App should behave when installed on a user's device, defining its name, icons, theme colors, display mode, and start URL.

Quick Answer

  • What it is: A web app manifest is a JSON file (manifest.json) that tells browsers how a Progressive Web App should behave when installed on a user's device, defining its name, icons, theme colors, display mode, and start URL.
  • Why it matters: The manifest controls how your PWA appears on home screens, app switchers, and install prompts. While it doesn't directly affect rankings, a misconfigured manifest can hurt user experience metrics that Google measures.
  • How to check or improve: Create a manifest.json file with required fields (name, short_name, icons, start_url, display), link it in your HTML head, and validate with Lighthouse's PWA audit.

When you'd use this

The manifest controls how your PWA appears on home screens, app switchers, and install prompts. While it doesn't directly affect rankings, a misconfigured manifest can hurt user experience metrics that Google measures.

Example scenario

Hypothetical scenario (not a real company)

A team might use Web App Manifest when Create a manifest.json file with required fields (name, short_name, icons, start_url, display), link it in your HTML head, and validate with Lighthouse's PWA audit.

Common mistakes

  • Confusing Web App Manifest with Progressive Web App SEO: The practice of optimizing Progressive Web Apps for search engines while maintaining app-like functionality, offline capabilities, and superior performance.
  • Confusing Web App Manifest with App Shell Model: A Progressive Web App architecture pattern that separates the static UI shell (header, nav, footer) from dynamic content, enabling instant loads through aggressive caching.
  • Confusing Web App Manifest with Core Web Vitals: A set of three specific metrics that Google uses to measure user experience on websites: loading performance (LCP), interactivity (INP), and visual stability (CLS). Learn how to measure and improve your Core Web Vitals scores.

How to measure or implement

  • Create a manifest
  • json file with required fields (name, short_name, icons, start_url, display), link it in your HTML head, and validate with Lighthouse's PWA audit

Audit your site's PWA readiness

Start here
Updated May 10, 2026·5 min read

What Is a Web App Manifest?

A web app manifest is a JSON file — typically named manifest.json or manifest.webmanifest — that provides metadata about a Progressive Web App. Browsers use this file to determine how the app should look and behave when installed on a user's device: the app name, icon, splash screen color, display mode (fullscreen, standalone, or browser tab), and which URL opens when the user launches it.

The manifest is referenced in the HTML <head>:

<link rel="manifest" href="/manifest.json" />

Without a valid manifest, browsers cannot offer the "Add to Home Screen" install prompt, and the app won't function as a standalone experience outside the browser.

Required Manifest Fields

A minimal functional manifest needs five fields:

{
  "name": "Rankwise SEO Platform",
  "short_name": "Rankwise",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
FieldPurposeRequirements
nameFull app name shown in install dialogsMax 45 characters recommended
short_nameName shown on home screenMax 12 characters
start_urlURL that opens when app launchesMust be within the manifest's scope
displayHow the app window appearsstandalone, fullscreen, minimal-ui, or browser
iconsApp icons for various contextsAt least 192x192 and 512x512 PNG icons

How Does the Web App Manifest Affect SEO?

The manifest file itself is not a ranking signal — Google does not read manifest.json to determine search rankings. However, the manifest indirectly affects SEO through three mechanisms:

1. User Experience Signals

A well-configured manifest enables the installed PWA experience: faster launch times, fullscreen display, and native-app feel. These factors improve engagement metrics (session duration, pages per session, bounce rate) that correlate with stronger rankings.

2. Lighthouse PWA Score

Google's Lighthouse audit checks for a valid manifest as part of its PWA assessment. While the PWA score isn't a ranking factor, the same Lighthouse run evaluates Core Web Vitals and SEO criteria that do matter. A missing or invalid manifest often indicates broader PWA implementation issues.

3. Mobile Install Prompts

The manifest enables browser install prompts on mobile. Installed PWAs load faster on repeat visits (cached via service workers), which improves real-user Core Web Vitals data in the Chrome User Experience Report (CrUX) — the dataset Google uses for ranking signals.

Key Manifest Properties for SEO

Beyond the required fields, several optional properties affect discoverability and user experience:

scope

Defines which URLs are considered part of the app. Navigation outside the scope opens in a regular browser tab:

{
  "scope": "/app/"
}

Setting the scope correctly prevents users from accidentally leaving the PWA context, which would hurt engagement metrics.

theme_color and background_color

Control the browser toolbar color and splash screen background. Consistent branding during loading reduces perceived load time and lowers bounce rates:

{
  "theme_color": "#1a1a2e",
  "background_color": "#ffffff"
}

description

A text description of the application. Used in app store listings (for TWA — Trusted Web Activity) and potentially by search engines for context:

{
  "description": "SEO and AI visibility platform for content teams"
}

categories

Categorizes the app for store listings:

{
  "categories": ["business", "productivity"]
}

shortcuts

Defines quick-action links accessible from the app icon's context menu:

{
  "shortcuts": [
    {
      "name": "New Report",
      "url": "/report/new",
      "icons": [{ "src": "/icon-report.png", "sizes": "96x96" }]
    }
  ]
}

Common Manifest Mistakes

Missing icons at required sizes. Chrome requires at least a 192x192 and a 512x512 icon. Missing either prevents the install prompt from appearing. Use the purpose: "any maskable" property to ensure icons display correctly on all devices.

Wrong start_url. If your start_url points to a page that redirects, the install experience breaks. The start URL must resolve to a 200 status code and be within the manifest's scope. Add UTM parameters to track installs: "start_url": "/?utm_source=pwa".

Not linking the manifest in HTML. Creating manifest.json without adding <link rel="manifest" href="/manifest.json" /> in the HTML head means browsers never discover it. Verify the link exists on every page, not just the homepage.

Using display: "browser". This mode opens the app in a regular browser tab with full browser UI, defeating the purpose of a PWA. Use "standalone" for app-like experience or "minimal-ui" if you want a back button.

Serving with wrong MIME type. The manifest must be served with Content-Type: application/manifest+json. Some servers default to application/json or text/plain, which can cause validation warnings.

How to Validate Your Manifest

Chrome DevTools

Open DevTools > Application > Manifest. Chrome parses and displays every field, flags errors, and shows the installability status.

Lighthouse PWA Audit

Run a Lighthouse audit with the PWA category enabled. It checks for:

  • Valid manifest file
  • Required fields present
  • Icons at correct sizes
  • start_url responds with 200
  • Display mode set correctly

Google Search Console

Check the "Page Experience" report for PWA-related issues that might affect Core Web Vitals scoring.

FAQ

Does Google crawl manifest.json?

Google's documentation confirms that Googlebot does not use the manifest file for indexing or ranking purposes. The manifest serves browsers, not search engines. SEO impact is indirect — through user experience improvements that affect engagement signals.

Should I include the manifest on every page?

Yes. The <link rel="manifest"> tag should appear in the <head> of every page. This ensures the install prompt can appear regardless of which page a user visits first. Use a shared layout template to add it once.

What's the difference between manifest.json and manifest.webmanifest?

Both file extensions work identically. The .webmanifest extension is the W3C recommended standard, while .json is more widely used in practice. Chrome, Firefox, Safari, and Edge all accept both. The file content format is the same — standard JSON.

Can the manifest affect page load speed?

The manifest file itself is tiny (typically under 1KB) and does not block page rendering. Browsers fetch it asynchronously after the page loads. However, large icon files referenced in the manifest can consume bandwidth on slow connections if the browser pre-fetches them. Use appropriately compressed PNG or WebP icons.

Put GEO into practice

Generate AI-optimized content that gets cited.

Try Rankwise Free
Newsletter

Stay ahead of AI search

Weekly insights on GEO and content optimization.