Svelte
You're viewing Unhead v3 beta documentation. Install with unhead@beta
Recipes

Use defineQuestion() with defineWebPage({ '@type': 'FAQPage' }) to mark up FAQ content. Google can display your questions and answers directly in search results as expandable rich snippets.

FAQ structured data enables rich results where users can see and expand your Q&A directly in Google search, increasing visibility and click-through rates.

How do I mark up FAQs?

defineQuestion creates Question Schema whilst handling relations for you.

Note: When using a page with the path /faq, the page type will be automatically set for you.

Tips:

  • The answer may contain HTML content such as links and lists.
import { defineQuestion, defineWebPage, useSchemaOrg } from '@unhead/schema-org/svelte'

useSchemaOrg([
  defineWebPage({
    '@type': 'FAQPage',
  }),
  defineQuestion({
    name: 'How long is a piece of string?',
    acceptedAnswer: 'The length of a piece of string is the number of characters in the string.',
  }),
  defineQuestion({
    name: 'How big is a giraffe?',
    acceptedAnswer: 'A giraffe is 12 feet tall',
  }),
])

How should I structure FAQ content in HTML?

For the best user experience, it's good to structure your FAQ content in a way that matches your schema markup:

<div>
  <h1>Frequently Asked Questions</h1>

  <div>
    <h2>How long is a piece of string?</h2>
    <div>The length of a piece of string is the number of characters in the string.</div>
  </div>

  <div>
    <h2>How big is a giraffe?</h2>
    <div>A giraffe is 12 feet tall</div>
  </div>

  <div>
    <h2>What is quantum mechanics?</h2>
    <div>
      <p>Quantum mechanics is the study of the nature of matter.</p>
      <p>It is the study of the nature of the interaction between particles and the nature of the universe.</p>
      <p>Particles are the smallest particles in the universe.</p>
      <p>The universe is made up of particles.</p>
      <p>Particles are made up of matter.</p>
      <p>Matter is made up of energy.</p>
    </div>
  </div>
</div>

Can I use HTML in FAQ answers?

You can include HTML content in your answers to provide a richer experience:

import { defineQuestion, defineWebPage, useSchemaOrg } from '@unhead/schema-org/svelte'

useSchemaOrg([
  defineWebPage({
    '@type': 'FAQPage',
  }),
  defineQuestion({
    name: 'What is quantum mechanics?',
    acceptedAnswer: `
      <p>Quantum mechanics is the study of the nature of matter.</p>
      <p>It is the study of the nature of the interaction between particles and the nature of the universe.</p>
      <p>Particles are the smallest particles in the universe.</p>
      <p>The universe is made up of particles.</p>
      <p>Particles are made up of matter.</p>
      <p>Matter is made up of energy.</p>
    `,
  }),
])
Did this page help you?