[dyad] Added FAQ structured data extraction - wrote 4 file(s)

src/app/actions.ts

@@ -2,6 +2,11 @@
 
 import * as cheerio from "cheerio";
 
+interface FaqItem {
+  question: string;
+  answer: string;
+}
+
 export async function extractMetaData(url: string) {
   if (!url) {
     return { error: "URL is required." };
@@ -37,7 +42,45 @@ export async function extractMetaData(url: string) {
       "No description found";
     const image = $('meta[property="og:image"]').attr("content") || null;
 
-    return { data: { title, description, image } };
+    const faqData: FaqItem[] = [];
+    $('script[type="application/ld+json"]').each((i, el) => {
+      const jsonContent = $(el).html();
+      if (!jsonContent) return;
+
+      try {
+        const data = JSON.parse(jsonContent);
+        const graph = data["@graph"] || [data];
+
+        for (const item of graph) {
+          if (item["@type"] === "FAQPage" && Array.isArray(item.mainEntity)) {
+            item.mainEntity.forEach((qa: any) => {
+              if (
+                qa["@type"] === "Question" &&
+                qa.name &&
+                qa.acceptedAnswer &&
+                qa.acceptedAnswer.text
+              ) {
+                faqData.push({
+                  question: qa.name,
+                  answer: qa.acceptedAnswer.text,
+                });
+              }
+            });
+          }
+        }
+      } catch (e) {
+        // Ignore parsing errors
+      }
+    });
+
+    return {
+      data: {
+        title,
+        description,
+        image,
+        faq: faqData.length > 0 ? faqData : null,
+      },
+    };
   } catch (error) {
     console.error(error);
     if (error instanceof Error && error.message.includes("Invalid URL")) {

src/components/faq-display.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+interface FaqDisplayProps {
+  faqs: {
+    question: string;
+    answer: string;
+  }[];
+}
+
+export function FaqDisplay({ faqs }: FaqDisplayProps) {
+  return (
+    <div>
+      <h3 className="font-semibold text-card-foreground mb-2">
+        FAQ Structured Data
+      </h3>
+      <Accordion type="single" collapsible className="w-full">
+        {faqs.map((faq, index) => (
+          <AccordionItem value={`item-${index}`} key={index}>
+            <AccordionTrigger>{faq.question}</AccordionTrigger>
+            <AccordionContent>{faq.answer}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

src/components/meta-form.tsx

@@ -11,11 +11,13 @@ import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
 import { SerpPreview } from "./serp-preview";
 import { ResultsSkeleton } from "./results-skeleton";
+import { FaqDisplay } from "./faq-display";
 
 interface MetaData {
   title: string;
   description: string;
   image?: string | null;
+  faq?: { question: string; answer: string }[] | null;
 }
 
 export function MetaForm() {
@@ -159,6 +161,10 @@ export function MetaForm() {
                     </div>
                   </div>
                 )}
+                
+                {metaData.faq && metaData.faq.length > 0 && (
+                  <FaqDisplay faqs={metaData.faq} />
+                )}
               </div>
               <div className="space-y-6">
                 <div>

src/components/results-skeleton.tsx

@@ -31,6 +31,14 @@ export function ResultsSkeleton() {
               <Skeleton className="h-5 w-32 mb-2" />
               <Skeleton className="aspect-video w-full rounded-md" />
             </div>
+            <div>
+              <Skeleton className="h-5 w-40 mb-3" />
+              <div className="space-y-2">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            </div>
           </div>
           <div className="space-y-6">
             <div>