Skip to content
Browse all guides

Issue #132 · standard

Issue 132

What is this issue?

sidebar_label: "What is this issue?"

What is this issue?

This issue checks whether pages that support Progressive Web App (PWA) features declare a <link rel="manifest"> tag in the HTML <head> section pointing to a valid manifest.json file.

A passing implementation requires:

  • A <link rel="manifest"> tag in the page head
  • The href attribute pointing to a valid manifest file URL
  • The manifest URL must return HTTP 200
  • The manifest file must be served with the correct Content-Type (application/manifest+json or application/json)

Example: If your website is a PWA at https://example.com, you should declare a manifest link tag pointing to /manifest.json so browsers can install the app and display it as a standalone application.

Why does it matter?

sidebar_label: "Why is this important?"

Why is this issue important?

The Web App Manifest is essential for Progressive Web App functionality and modern web experiences.

Impacts on user experience and engagement:

  • PWA installability: Browsers use the manifest to determine if a site can be installed as a PWA. Without the manifest link tag, the "Add to Home Screen" prompt will not appear in Chrome, Edge, or other supporting browsers.

  • App metadata: The manifest provides browsers with essential app information including name, icons, theme colors, and display mode. This metadata controls how the app appears when installed on a user's device.

  • User engagement: Installed PWAs have higher engagement rates, with users returning more frequently and spending more time in the app-like experience.

  • Mobile experience: On mobile devices, PWAs can run in standalone mode without browser UI, providing a native app-like experience that improves user satisfaction.

Resolving this issue improves the overall SEO health score by enabling PWA features that can lead to better user engagement metrics, increased return visits, and improved mobile user experience—all of which are positive signals for search rankings.

How to fix it

sidebar_label: "How to fix"

How to fix it

Add the manifest link tag inside the page <head> section:

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

Step-by-step recommendations:

  1. Create the manifest file: Create a manifest.json file with at minimum these required fields:

    • name: Full app name
    • short_name: Short name for home screen
    • start_url: Starting URL when app launches
    • display: Display mode (typically standalone)
    • icons: Array of icon objects with different sizes

  2. Add the link tag: Place the <link rel="manifest"> tag in the <head> section of all pages that should be installable as a PWA.

  3. Verify manifest accessibility: Ensure the manifest file is accessible at the declared href and returns HTTP 200 when accessed directly.

  4. Check Content-Type header: Confirm the manifest URL returns the correct Content-Type header:

    • application/manifest+json (preferred)
    • application/json (also acceptable)

  5. Configure server MIME types: If using .webmanifest or .json extension, ensure your server is configured to serve these files with the correct MIME type. Some servers require manual configuration.

  6. Test PWA installability: Use browser DevTools (Application panel) to verify the manifest is detected and the PWA installability criteria are met.

Examples

sidebar_label: "Examples"

Examples

Example 1: Correct manifest link tag implementation

Scenario: A PWA properly declares a manifest link tag.

Passes because:

  • A <link rel="manifest"> tag is present in the head section
  • The href attribute points to a valid manifest file URL
  • The manifest URL returns HTTP 200 with correct Content-Type
<head>
  <title>My PWA App</title>
  <link rel="manifest" href="/manifest.json" />
</head>

Example 2: Missing manifest tag

Scenario: A website intends to be a PWA but forgot to add the manifest link tag.

Fails because:

  • No <link rel="manifest"> tag is present
  • Browsers cannot install the app as a PWA
  • The site cannot be displayed as a standalone application
<head>
  <title>My PWA App</title>
</head>

Corrected version:

<head>
  <title>My PWA App</title>
  <link rel="manifest" href="/manifest.json" />
</head>

Example 3: Incorrect Content-Type

Scenario: The manifest link tag is present, but the server serves the file with wrong Content-Type.

Fails because:

  • The <link rel="manifest"> tag is present
  • The manifest URL returns HTTP 200
  • But the Content-Type is text/plain instead of application/manifest+json
  • Browsers may not recognize the manifest file
<head>
  <title>My PWA App</title>
  <link rel="manifest" href="/manifest.json" />
</head>

Corrected version: Configure the server to serve .json files with Content-Type application/manifest+json or application/json.

How PixyScan detects this

sidebar_label: "How PixyScan detects this"

How PixyScan detects this

PixyScan uses a straightforward detection process to identify Web App Manifest implementation:

  1. Fetch the page: PixyScan issues an HTTP GET request to the target URL and reads the raw HTML response without executing JavaScript.

  2. Scan for manifest link tags: The crawler scans the <head> block for all <link> tags and searches for a tag where the rel attribute equals manifest.

  3. Extract href value: For the matched tag, PixyScan extracts the href attribute value.

  4. Validate manifest presence: The crawler checks whether a <link rel="manifest"> tag exists in the page head and whether the href value is a valid non-empty URL.

  5. Test manifest URL accessibility: PixyScan issues a secondary HTTP GET request to the manifest href URL and records the HTTP status code and Content-Type response header.

  6. Check Content-Type: The crawler verifies whether the manifest file is served with the correct Content-Type (application/manifest+json or application/json).

  7. Determine pass/fail: The issue passes if a manifest link tag is present, the manifest URL returns HTTP 200, and the Content-Type is valid. The issue fails if the tag is missing, the URL returns a non-2xx status code, or the Content-Type is incorrect.

References