From a9dce097f6a076f243869a495d9ab6d9ddf6ecd2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 16 Feb 2022 15:34:06 +0100
Subject: fix: make schema.org markup valid (#4)

Squashed commit of the following:

commit 49c1b3b1556a0eb91c429a961fedd2bded8ffd47
Author: Armand Philippot <git@armandphilippot.com>
Date:   Wed Feb 16 15:17:52 2022 +0100

    chore: add headline field to blogPosting schema

commit 42214c6f032cc899ec252a9387be35dcad738546
Author: Armand Philippot <git@armandphilippot.com>
Date:   Wed Feb 16 15:09:11 2022 +0100

    chore: update the searchAction markup and add query-input

    Google was complaining about "query-input" which is not in Schema.org
    representation. So I added it.

commit 5f29226d937cbdcd262df2793f1588435d850f02
Author: Armand Philippot <git@armandphilippot.com>
Date:   Wed Feb 16 14:32:14 2022 +0100

    chore: remove breadcrumb from homepage

    The breadcrumb is not displayed on the homepage, so the breadcrumb
    field should not appear inside Schema markup.
---
 src/components/Layouts/Layout.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

(limited to 'src/components/Layouts')

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index eb725d2..d529efe 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -7,7 +7,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { ReactElement, ReactNode, useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import { WebSite, WithContext } from 'schema-dts';
+import { SearchAction, WebSite, WithContext } from 'schema-dts';
 import styles from './Layout.module.scss';
 
 const Layout = ({
@@ -40,11 +40,19 @@ const Layout = ({
     creator: { '@id': `${settings.url}/#branding` },
     editor: { '@id': `${settings.url}/#branding` },
     inLanguage: settings.locales.defaultLocale,
-    potentialAction: {
-      '@type': 'SearchAction',
-      target: `${settings.url}/recherche?s={query}`,
-      query: 'required',
-    },
+    potentialAction: { '@id': `${settings.url}/#search` },
+  };
+
+  type QueryAction = SearchAction & {
+    'query-input': string;
+  };
+
+  const searchActionSchema: QueryAction = {
+    '@type': 'SearchAction',
+    '@id': `${settings.url}/#search`,
+    target: `${settings.url}/recherche?s={query}`,
+    query: 'required',
+    'query-input': 'required name=query',
   };
 
   return (
@@ -94,6 +102,12 @@ const Layout = ({
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
         ></script>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(searchActionSchema),
+          }}
+        ></script>
       </Head>
       <noscript>
         <div className={styles['noscript-spacing']}></div>
-- 
cgit v1.2.3