Skip to content

Adding automatically generated & pushed FAQ JSON-LD schema feature to accordion #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
JonBarakMierke wants to merge 3 commits into
base: master
Choose a base branch
from
+109 −3
Draft

Adding automatically generated & pushed FAQ JSON-LD schema feature to accordion #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5f09e9
Have a rough working version of the first tab variant
Aug 12, 2026
2ee6b41
v1
Aug 17, 2026
bb0f943
removed files that are part of a different branch
Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 80 additions & 3 deletions components/accordion/files/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,86 @@
@props([
'reverse' => false
'reverse' => false,
'faq' => false
])

<div
x-data="{ active: null }"
@php
$faqSchema = null;

if ($faq) {
$slotHtml = trim((string) $slot);

if ($slotHtml !== '') {
$questions = [];

libxml_use_internal_errors(true);
$dom = new \DOMDocument();
$dom->loadHTML(
'<?xml encoding="utf-8" ?><div>' . $slotHtml . '</div>',
LIBXML_NOERROR | LIBXML_NOWARNING
);
libxml_clear_errors();

foreach ((new \DOMXPath($dom))->query('//*[@role="region"]') as $region) {
$trigger = null;
$panel = null;

foreach ($region->childNodes as $child) {
if (!$child instanceof \DOMElement) {
continue;
}

if ($child->tagName === 'button' && !$trigger) {
$trigger = $child;
} elseif ($child->tagName === 'div' && !$panel) {
$panel = $child;
}
}

if (!$trigger || !$panel) {
continue;
}

$question = trim(preg_replace('/\s+/', ' ', $trigger->textContent));

$answerHtml = '';
foreach ($panel->firstElementChild?->childNodes ?? [] as $node) {
$answerHtml .= $dom->saveHTML($node);
}
$answerHtml = trim($answerHtml);

if ($question === '' || $answerHtml === '') {
continue;
}

$questions[] = [
'@type' => 'Question',
'name' => $question,
'acceptedAnswer' => [
'@type' => 'Answer',
'text' => $answerHtml,
],
];
}

if (!empty($questions)) {
$faqSchema = [
'@context' => 'https://schema.org',
'@type' => 'FAQPage',
'mainEntity' => $questions,
];
}
}
}
@endphp

@if ($faqSchema)
@push('head')
<script type="application/ld+json">{!! str_replace('</', '<\/', json_encode($faqSchema, JSON_UNESCAPED_UNICODE)) !!}</script>
@endpush
@endif

<div
x-data="{ active: null }"
{{ $attributes->merge([
'class'=>"w-full flex flex-col"
]) }}
Expand Down
29 changes: 29 additions & 0 deletions components/accordion/usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,13 +284,42 @@ Use the reverse layout to position chevron icons on the left side.
</x-ui.accordion>
```

### FAQ Schema (JSON-LD)

Add the `faq` attribute to the root `<x-ui.accordion>` tag to automatically generate a [FAQPage JSON-LD schema](https://developers.google.com/search/docs/appearance/structured-data/faqpage) from the accordion's triggers and content, and push it to your page's `<head>`.

This walks the rendered accordion items, using each trigger's text as the `Question` and each content panel's markup as the `Answer`.

```blade
<x-ui.accordion faq>
<x-ui.accordion.item trigger="What is your return policy?">
<p>We offer a 30-day return policy for all unused items in their original packaging.</p>
</x-ui.accordion.item>
<x-ui.accordion.item trigger="How long does shipping take?">
<p>Standard shipping typically takes 3-5 business days.</p>
</x-ui.accordion.item>
</x-ui.accordion>
```

This pushes a `<script type="application/ld+json">` tag onto the `head` stack, so your layout must declare it:

```blade
<head>
...
@stack('head')
</head>
```

> Items without a resolvable trigger/content pair (e.g. empty triggers) are skipped rather than emitted as blank schema entries.

## Component Props Reference

### ui.accordion

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `reverse` | `boolean` | `false` | Whether to reverse the trigger layout (chevron on left) |
| `faq` | `boolean` | `false` | Automatically build a FAQPage JSON-LD schema from the accordion items and push it to the `head` stack |

### ui.accordion.item

Expand Down