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/Form/Form.tsx               |  4 +++-
 src/components/Layouts/Layout.tsx          | 26 ++++++++++++++++++++------
 src/components/PostPreview/PostPreview.tsx |  1 +
 src/components/SearchForm/SearchForm.tsx   |  2 +-
 src/pages/article/[slug].tsx               |  1 +
 src/pages/index.tsx                        |  1 -
 src/pages/mentions-legales.tsx             |  1 +
 src/pages/projet/[slug].tsx                |  1 +
 src/pages/projets.tsx                      |  1 +
 src/pages/sujet/[slug].tsx                 |  3 ++-
 src/pages/thematique/[slug].tsx            |  3 ++-
 11 files changed, 33 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 74a4efb..44763c4 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -5,16 +5,18 @@ const Form = ({
   children,
   submitHandler,
   modifier = '',
+  id,
 }: {
   children: ReactNode;
   submitHandler: any;
   modifier?: string;
+  id?: string;
 }) => {
   const withModifier = modifier ? styles[`wrapper--${modifier}`] : '';
   const classes = `${styles.wrapper} ${withModifier}`;
 
   return (
-    <form onSubmit={submitHandler} className={classes}>
+    <form onSubmit={submitHandler} className={classes} id={id}>
       {children}
     </form>
   );
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>
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index 0be9709..3fbfa63 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -57,6 +57,7 @@ const PostPreview = ({
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${settings.url}/#branding` },
+    headline: title,
     image: featuredImage?.sourceUrl,
     inLanguage: settings.locales.defaultLocale,
     isBasedOn: `${settings.url}/article/${slug}`,
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
index da6f25c..fa3ad07 100644
--- a/src/components/SearchForm/SearchForm.tsx
+++ b/src/components/SearchForm/SearchForm.tsx
@@ -34,7 +34,7 @@ const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
           description: 'SearchForm : form title',
         })}
       </div>
-      <Form submitHandler={launchSearch} modifier="search">
+      <Form submitHandler={launchSearch} modifier="search" id="search">
         <label htmlFor="search-query" className="screen-reader-text">
           {intl.formatMessage({
             defaultMessage: 'Keywords:',
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index a0255fa..2fd1850 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -120,6 +120,7 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({
     datePublished: publicationDate.toISOString(),
     discussionUrl: `${articleUrl}/#comments`,
     editor: { '@id': `${settings.url}/#branding` },
+    headline: title,
     image: featuredImage?.sourceUrl,
     inLanguage: settings.locales.defaultLocale,
     isPartOf: {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 55bc14c..374e56f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -152,7 +152,6 @@ const Home: NextPageWithLayout<HomePageProps> = ({
   const webpageSchema: WebPage = {
     '@id': `${settings.url}/#home`,
     '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
     name: pageTitle,
     description: pageDescription,
     author: { '@id': `${settings.url}/#branding` },
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index b1dca02..0b92294 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -77,6 +77,7 @@ const LegalNotice: NextPageWithLayout = () => {
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${settings.url}/#branding` },
+    headline: title,
     inLanguage: settings.locales.defaultLocale,
     license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
     mainEntityOfPage: { '@id': `${pageUrl}` },
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index f72063a..fe62f0e 100644
--- a/src/pages/projet/[slug].tsx
+++ b/src/pages/projet/[slug].tsx
@@ -78,6 +78,7 @@ const Project: NextPageWithLayout<ProjectProps> = ({
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${settings.url}/#branding` },
+    headline: title,
     thumbnailUrl: meta.hasCover ? `/projects/${id}.jpg` : '',
     image: meta.hasCover ? `/projects/${id}.jpg` : '',
     inLanguage: settings.locales.defaultLocale,
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
index 48e55e5..998c67f 100644
--- a/src/pages/projets.tsx
+++ b/src/pages/projets.tsx
@@ -66,6 +66,7 @@ const Projects = ({ projects }: { projects: Project[] }) => {
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${settings.url}/#branding` },
+    headline: meta.title,
     inLanguage: settings.locales.defaultLocale,
     license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
     mainEntityOfPage: { '@id': `${pageUrl}` },
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 82af2ff..dc5ee7e 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -79,7 +79,7 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic, allTopics }) => {
   const updateDate = new Date(topic.dates.update);
 
   const articleSchema: Article = {
-    '@id': `${settings.url}/topic`,
+    '@id': `${settings.url}/#topic`,
     '@type': 'Article',
     name: topic.title,
     description: topic.intro,
@@ -90,6 +90,7 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic, allTopics }) => {
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${settings.url}/#branding` },
+    headline: topic.title,
     thumbnailUrl: topic.featuredImage?.sourceUrl,
     image: topic.featuredImage?.sourceUrl,
     inLanguage: settings.locales.defaultLocale,
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index d737ea7..a8cb478 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -78,7 +78,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({
   const updateDate = new Date(thematic.dates.update);
 
   const articleSchema: Article = {
-    '@id': `${settings.url}/thematic`,
+    '@id': `${settings.url}/#thematic`,
     '@type': 'Article',
     name: thematic.title,
     description: thematic.intro,
@@ -89,6 +89,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${settings.url}/#branding` },
+    headline: thematic.title,
     inLanguage: settings.locales.defaultLocale,
     isPartOf: { '@id': `${settings.url}/blog` },
     license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-- 
cgit v1.2.3