Structured data for FAQ

nearby-sharing · Mar 17, 2024 · c86180f · c86180f
1 parent 85e9f25
commit c86180f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import { Icon } from "astro-icon/components";
 
 interface Item {
   question: string;
@@ -14,14 +14,14 @@ export interface Props {
 }
 
 const {
-  title = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render('subtitle'),
+  title = await Astro.slots.render("title"),
+  subtitle = await Astro.slots.render("subtitle"),
   highlight,
   items = [],
 } = Astro.props;
 ---
 
-<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
+<article class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (
@@ -38,7 +38,12 @@ const {
               set:html={title}
             />
           )}
-          {subtitle && <p class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
+          {subtitle && (
+            <p
+              class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400"
+              set:html={subtitle}
+            />
+          )}
         </div>
       )
     }
@@ -50,17 +55,33 @@ const {
           items.map((subitems) => (
             <div class="space-y-8">
               {subitems.map(({ question, answer }) => (
-                <div>
+                <section
+                  itemprop="mainEntity"
+                  itemscope
+                  itemtype="http://schema.org/Question"
+                >
                   <h3 class="mb-4 text-xl font-bold">
-                    <Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary inline-block" />
-                    {question}
+                    <Icon
+                      name="tabler:arrow-down-right"
+                      class="w-7 h-7 text-primary inline-block"
+                    />
+                    <span itemprop="name">{question}</span>
                   </h3>
-                  {answer && <div class="text-muted dark:text-gray-400" set:html={answer} />}
-                </div>
+                  {answer && (
+                    <div
+                      itemscope
+                      itemprop="acceptedAnswer"
+                      itemtype="https://schema.org/Answer"
+                      class="text-muted dark:text-gray-400"
+                    >
+                      <span itemprop="text" set:html={answer} />
+                    </div>
+                  )}
+                </section>
               ))}
             </div>
           ))
       }
     </div>
   </div>
-</div>
+</article>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -1,25 +1,25 @@
 ---
-import Layout from '~/layouts/BaseLayout.astro';
-import Header from '~/components/widgets/Header.astro';
-import Footer from '~/components/widgets/Footer.astro';
-import Announcement from '~/components/widgets/Announcement.astro';
+import Layout from "~/layouts/BaseLayout.astro";
+import Header from "~/components/widgets/Header.astro";
+import Footer from "~/components/widgets/Footer.astro";
 
-import { headerData, footerData } from '~/data';
+import { headerData, footerData } from "~/data";
 
-import { MetaSEO } from '~/types';
+import type { MetaSEO } from "~/types";
 
 export interface Props {
   meta?: MetaSEO;
+  itemtype?: string;
 }
 
-const { meta } = Astro.props;
+const { meta, itemtype } = Astro.props;
 ---
 
 <Layout {meta}>
   <slot name="header">
     <Header {...headerData} isSticky showToggleTheme />
   </slot>
-  <main>
+  <main itemscope itemtype={itemtype}>
     <slot />
   </main>
   <slot name="footer">

diff --git a/src/pages/docs/faq.astro b/src/pages/docs/faq.astro
@@ -7,7 +7,7 @@ const meta = {
 };
 ---
 
-<Layout {meta}>
+<Layout {meta} itemtype="http://schema.org/FAQPage">
   <FAQs
     highlight="FAQs"
     title="Sending"