MWPW-133754 - Support structured data API for SEO

libs/features/seotech/README.md

@@ -1,7 +1,8 @@
 # SEOTECH
 
 Collection of SEO-related features that use the SEOTECH service.
-For more details see [SEOTECH API](https://wiki.corp.adobe.com/display/seoteam/SEOTECH+API) (Corp Only).
+See [structured-data](https://milo.adobe.com/docs/authoring/structured-data) for authoring documentation including examples.
+See [SEOTECH Wiki](https://wiki.corp.adobe.com/display/seoteam/SEOTECH) for documentation regarding the service.
 
 ## Video
 
@@ -19,3 +20,17 @@ Video Platforms:
 - BYO HTML5: TBD
 
 See [video-metadata](../../blocks/video-metadata/) if you need to define a specific VideoObject on your page.
+
+## Structured Data
+
+This feature queries the SEOTECH service for structured data that should be added to the page.
+
+Metadata Properties:
+
+- `seotech-structured-data`: `on` to enable SEOTECH lookup
+- `seotech-sheet-url`: url of Franklin Spreadsheet JSON (Optional)
+
+You can also specify `seotech-sheet-url` as a query parameter.
+Otherwise SEOTECH will search for _/structured-data.json_ at the root of the current page.
+
+See [seotech page](https://git.corp.adobe.com/pages/wcms/seotech/) (Corp Only) for list of supported structured data types.

libs/features/seotech/seotech.js

@@ -21,14 +21,45 @@ export async function getVideoObject(url, seotechAPIUrl) {
   return body.videoObject;
 }
 
-export default async function appendVideoObjectScriptTag(url, { createTag, getConfig }) {
+export async function getStructuredData(url, sheetUrl, seotechAPIUrl) {
+  const apiUrl = new URL(seotechAPIUrl);
+  apiUrl.pathname = '/api/v1/web/seotech/getStructuredData';
+  apiUrl.searchParams.set('url', url);
+  if (sheetUrl) {
+    apiUrl.searchParams.set('sheetUrl', sheetUrl);
+  }
+  const resp = await fetch(apiUrl.href, { headers: { 'Content-Type': 'application/json' } });
+  const body = await resp?.json();
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch structured data: ${body?.error}`);
+  }
+  return body.objects;
+}
+
+export async function appendScriptTag({ locationUrl, getMetadata, createTag, getConfig }) {
+  const windowUrl = new URL(locationUrl);
   const seotechAPIUrl = getConfig()?.env?.name === 'prod'
     ? SEOTECH_API_URL_PROD : SEOTECH_API_URL_STAGE;
-  try {
-    const obj = await getVideoObject(url, seotechAPIUrl);
+
+  const append = (obj) => {
     const script = createTag('script', { type: 'application/ld+json' }, JSON.stringify(obj));
     document.head.append(script);
-  } catch (e) {
-    logError(e.message);
+  };
+
+  const prs = [];
+  if (getMetadata('seotech-structured-data') === 'on') {
+    const pageUrl = `${windowUrl.origin}${windowUrl.pathname}`;
+    const sheetUrl = (new URLSearchParams(windowUrl.search)).get('seotech-sheet-url') || getMetadata('seotech-sheet-url');
+    prs.push(getStructuredData(pageUrl, sheetUrl, seotechAPIUrl)
+      .then((r) => r.forEach((obj) => append(obj)))
+      .catch((e) => logError(e.message)));
   }
+  if (getMetadata('seotech-video-url')) {
+    prs.push(getVideoObject(getMetadata('seotech-video-url'), seotechAPIUrl)
+      .then((r) => append(r))
+      .catch((e) => logError(e.message)));
+  }
+  return Promise.all(prs);
 }
+
+export default appendScriptTag;

libs/utils/utils.js

@@ -890,9 +890,10 @@ export async function loadArea(area = document) {
     if (appendage) {
       import('../features/title-append/title-append.js').then((module) => module.default(appendage));
     }
-    const seotechVideoUrl = getMetadata('seotech-video-url');
-    if (seotechVideoUrl) {
-      import('../features/seotech/seotech.js').then((module) => module.default(seotechVideoUrl, { createTag, getConfig }));
+    if (getMetadata('seotech-structured-data') === 'on' || getMetadata('seotech-video-url')) {
+      import('../features/seotech/seotech.js').then((module) => module.default(
+        { locationUrl: window.location.href, getMetadata, createTag, getConfig },
+      ));
     }
     const richResults = getMetadata('richresults');
     if (richResults) {

test/features/seotech/seotech.test.js

@@ -3,10 +3,64 @@ import { stub } from 'sinon';
 import { waitForElement } from '../../helpers/waitfor.js';
 
 import { getConfig, createTag } from '../../../libs/utils/utils.js';
-import appendVideoObjectScriptTag from '../../../libs/features/seotech/seotech.js';
+import { appendScriptTag } from '../../../libs/features/seotech/seotech.js';
 
 describe('seotech', () => {
-  describe('appendVideoObjectScriptTag', () => {
+  describe('appendScriptTag + seotech-structured-data', () => {
+    beforeEach(async () => {
+      window.lana = { log: (s) => console.log(`LANA NOT STUBBED! ${s}`) };
+    });
+    afterEach(() => {
+      window.fetch?.restore?.();
+      window.lana?.restore?.();
+    });
+
+    it('should not append JSON-LD', async () => {
+      const lanaStub = stub(window.lana, 'log');
+      const getMetadata = stub().returns(null);
+      getMetadata.withArgs('seotech-structured-data').returns('on');
+      const fetchStub = stub(window, 'fetch');
+      fetchStub.returns(Promise.resolve(Response.json(
+        { error: 'ERROR!' },
+        { status: 400 },
+      )));
+      await appendScriptTag(
+        { locationUrl: window.location.href, getMetadata, getConfig, createTag },
+      );
+      const expectedApiCall = 'https://14257-seotech-stage.adobeioruntime.net/api/v1/web/seotech/getStructuredData?url=http%3A%2F%2Flocalhost%3A2000%2F';
+      expect(fetchStub.getCall(0).firstArg).to.equal(expectedApiCall);
+      expect(lanaStub.getCall(0).firstArg).to.equal('SEOTECH: Failed to fetch structured data: ERROR!');
+    });
+
+    it('should append JSON-LD', async () => {
+      const locationUrl = 'http://localhost:2000/?seotech-sheet-url=http://foo';
+      const lanaStub = stub(window.lana, 'log');
+      const fetchStub = stub(window, 'fetch');
+      const getConfigStub = stub().returns({ env: { name: 'prod' } });
+      const getMetadata = stub().returns(null);
+      getMetadata.withArgs('seotech-structured-data').returns('on');
+      const expectedObject = {
+        '@context': 'http://schema.org',
+        '@type': 'VideoObject',
+        name: 'fake',
+      };
+      fetchStub.returns(Promise.resolve(Response.json(
+        { objects: [expectedObject] },
+        { status: 200 },
+      )));
+      await appendScriptTag(
+        { locationUrl, getMetadata, getConfig: getConfigStub, createTag },
+      );
+      const expectedApiCall = 'https://14257-seotech.adobeioruntime.net/api/v1/web/seotech/getStructuredData?url=http%3A%2F%2Flocalhost%3A2000%2F&sheetUrl=http%3A%2F%2Ffoo';
+      expect(fetchStub.getCall(0).firstArg).to.equal(expectedApiCall);
+      const el = await waitForElement('script[type="application/ld+json"]');
+      const obj = JSON.parse(el.text);
+      expect(obj).to.deep.equal(expectedObject);
+      expect(lanaStub.called).to.be.false;
+    });
+  });
+
+  describe('appendScriptTag + seotech-video-url', () => {
     beforeEach(async () => {
       window.lana = { log: () => console.log('LANA NOT STUBBED!') };
     });
@@ -17,26 +71,37 @@ describe('seotech', () => {
 
     it('should not append JSON-LD if url is invalid', async () => {
       const lanaStub = stub(window.lana, 'log');
-      await appendVideoObjectScriptTag('', { getConfig, createTag });
+      const getMetadata = stub().returns(null);
+      getMetadata.withArgs('seotech-video-url').returns('fake');
+      await appendScriptTag(
+        { locationUrl: window.location.href, getMetadata, getConfig, createTag },
+      );
       expect(lanaStub.calledOnceWith('SEOTECH: Failed to construct \'URL\': Invalid URL')).to.be.true;
     });
 
     it('should not append JSON-LD if url not found', async () => {
       const lanaStub = stub(window.lana, 'log');
+      const getMetadata = stub().returns(null);
+      getMetadata.withArgs('seotech-video-url').returns('http://fake');
       const fetchStub = stub(window, 'fetch');
       fetchStub.returns(Promise.resolve(Response.json(
         { error: 'ERROR!' },
         { status: 400 },
       )));
-      await appendVideoObjectScriptTag('http://fake', { getConfig, createTag });
+      await appendScriptTag(
+        { locationUrl: window.location.href, getMetadata, getConfig, createTag },
+      );
       expect(fetchStub.calledOnceWith(
         'https://14257-seotech-stage.adobeioruntime.net/api/v1/web/seotech/getVideoObject?url=http://fake/',
       )).to.be.true;
       expect(lanaStub.calledOnceWith('SEOTECH: Failed to fetch video: ERROR!')).to.be.true;
     });
 
     it('should append JSON-LD', async () => {
+      const lanaStub = stub(window.lana, 'log');
       const fetchStub = stub(window, 'fetch');
+      const getMetadata = stub().returns(null);
+      getMetadata.withArgs('seotech-video-url').returns('http://fake');
       const expectedVideoObject = {
         '@context': 'http://schema.org',
         '@type': 'VideoObject',
@@ -46,13 +111,16 @@ describe('seotech', () => {
         { videoObject: expectedVideoObject },
         { status: 200 },
       )));
-      await appendVideoObjectScriptTag('http://fake', { getConfig, createTag });
+      await appendScriptTag(
+        { locationUrl: window.location.href, getMetadata, getConfig, createTag },
+      );
       expect(fetchStub.calledOnceWith(
         'https://14257-seotech-stage.adobeioruntime.net/api/v1/web/seotech/getVideoObject?url=http://fake/',
       )).to.be.true;
       const el = await waitForElement('script[type="application/ld+json"]');
       const obj = JSON.parse(el.text);
       expect(obj).to.deep.equal(expectedVideoObject);
+      expect(lanaStub.called).to.be.false;
     });
   });
 });