Skip to content

Web JSON Schema#386

Open
echen-adobe wants to merge 4 commits intostagefrom
fqa-schema
Open

Web JSON Schema#386
echen-adobe wants to merge 4 commits intostagefrom
fqa-schema

Conversation

@echen-adobe
Copy link
Copy Markdown
Contributor

Summary

Adds WebApplication JSON-LD (application/ld+json) for pages that opt in via metadata. The script runs from delayed load, injects a single <script id="web-application-schema"> in <head>, and builds name from the main H1 (fallback: document.title), description from the meta description, url from the canonical link (fallback: current URL), and sensible defaults for category, OS, browser requirements, free Offer, and Adobe creator. Authors can tune optional fields (schema-application-category, schema-operating-system, schema-browser-requirements, offer-related metas) and must set web-app-schema to on to enable injection. Duplicates are avoided if the script tag already exists.


Jira Ticket

Resolves: MWPW-188099


Test URLs

Env URL
Before https://main--da-express-milo--adobecom.aem.page/express/
After https://fqa-schema--da-express-milo--adobecom.aem.live/drafts/echen/schema-demo

Schema demo (branch): https://fqa-schema--da-express-milo--adobecom.aem.live/drafts/echen/schema-demo
Page with schema validation turned off https://fqa-schema--da-express-milo--adobecom.aem.live/express/

Verification Steps

  1. Open a page that includes web-app-schema metadata set to on (e.g. the schema demo draft above).
  2. View page source or DevTools → Elements<head> and confirm a script with type="application/ld+json" and id="web-application-schema" whose JSON has @type": "WebApplication" and the expected name, description, and url.
  3. Run Schema Validator Test on the deployed URL; confirm no errors for this structured data.
  4. Before: pages without the opt-in meta should not get this JSON-LD from this utility. After: opted-in pages should expose WebApplication schema without conflicting duplicate injection (second load should not add a second script).

Potential Regressions

@aem-code-sync
Copy link
Copy Markdown

aem-code-sync Bot commented Apr 21, 2026

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

@github-actions github-actions Bot added the Ready for Review Ready for peer review. label Apr 21, 2026
@aem-code-sync
Copy link
Copy Markdown

aem-code-sync Bot commented Apr 21, 2026

Page Scores Audits
📱 /drafts/echen/schema-demo PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS
🖥️ /drafts/echen/schema-demo PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS
📱 /express/ PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS
🖥️ /express/ PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS
📱 /express/?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS
🖥️ /express/?martech=off PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS

Copy link
Copy Markdown
Contributor

@fullcolorcoder fullcolorcoder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick nits

@@ -0,0 +1,47 @@
function getMeta(name) {
return document.querySelector(`meta[name="${name}"]`)?.content;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getMeta is doing exactly what getMetadata (and getCachedMetadata) in utils.js already does. Worth importing from there instead of maintaining a parallel implementation — getCachedMetadata would even give you a free memoization benefit for the repeated opt-in check.

if (getMeta('web-app-schema') !== 'on') return;
if (document.getElementById('web-application-schema')) return;
injectWebApplicationSchema();
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests

// test/scripts/utils/web-app-schema.test.js
import { injectWebApplicationSchema, loadWebApplicationSchema } from '../../../express/code/scripts/utils/web-app-schema.js';

describe('loadWebApplicationSchema', () => {
  beforeEach(() => {
    document.head.innerHTML = '';
    document.body.innerHTML = '<main><h1>Test App</h1></main>';
  });

  it('does not inject when web-app-schema meta is absent', () => {
    loadWebApplicationSchema();
    expect(document.getElementById('web-application-schema')).to.be.null;
  });

  it('injects JSON-LD when web-app-schema meta is on', () => {
    const meta = document.createElement('meta');
    meta.name = 'web-app-schema';
    meta.content = 'on';
    document.head.appendChild(meta);

    loadWebApplicationSchema();
    const script = document.getElementById('web-application-schema');
    expect(script).to.exist;
    const json = JSON.parse(script.textContent);
    expect(json['@type']).to.equal('WebApplication');
    expect(json.name).to.equal('Test App');
  });

  it('does not inject a duplicate if script already exists', () => {
    const meta = document.createElement('meta');
    meta.name = 'web-app-schema';
    meta.content = 'on';
    document.head.appendChild(meta);

    loadWebApplicationSchema();
    loadWebApplicationSchema();
    expect(document.querySelectorAll('#web-application-schema').length).to.equal(1);
  });
});

@nateyolles nateyolles added this to the Express-26.19 milestone Apr 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Ready for Review Ready for peer review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants