Add FAQ section on Ghost blog

Using Ghost
1

Hello,

I am trying to add a FAQ section on my article. What I have done is used custom HTML, CSS and Javascript to make the FAQ section.

However I am not able to understand if google will mark it as a structured data.

Previously I was using WordPress and adding FAQ was very simple and easy but with Ghost I find it complex at certain times.

Could someone please let me know how to make my FAQ as a structured data, and also I am not a coder so I have no idea how to do that.

2

Hey @Atmadeep_Das,

It really depends on what you want the presentation to be, and what structured data you want to expose. FAQ pages come in many forms. For example The Ghost FAQ is structured as a custom collection with links through to extensive solutions to those queries:
https://ghost.org/faq/

Another example is a Q&A I recently did on my own blog, which uses block quotes (<blockquote>) to contain the questions from people and answers as regular paragraphs. I also added a small piece of CSS to add spacing:

Both are perfectly semantic and possible within Ghost. You could also use a definition list (<dl>) within a HTML card.

What approach would you like to take? :blush:

3

Hi, I’m pretty certain it’s not possible to create proper FAQ structured data markup in Ghost itself.

What I would suggest you do is: write your article/post, then copy the text and paste into a separate markup creator and edit. There are a handful of free services on the web, none of them is perfect but I think this one is great for FAQs. Then you’ll simply copy the resulting markup and paste it into the code injection thing on your post. If I were you I’d check the results with Google’s Structured Data Testing Tool before you publish.

(If you’re marking up some common things like reviews or products you could use Google’s own Structured Data Markup Helper. It’s very good but limited to a few kinds of markup).

It would be fantastic if one could one day create more granular structured data with Ghost, but I guess that won’t be soon, it seems very complex. And the schema seems to be changing and evolving all the time.

4

If you switch to “Microdata” in that Google developer doc you’ll see an alternative to applying rich data using HTML attributes, which is perfectly possible to include in Ghost as a HTML card :smile:. HTML Microdata is a lot more portable and less prone to errors over JSON-LD data.

5

Thank you very much for the suggestions, I am trying

for the time being.

6

Thank you, I will surely check it out.

7

Hi guys

https://ghost.org/faq/ is on 404 status, is that feature still a thing ?

8

Personally I like the way John does it in his Membership page on Rediverge.

He has a responsive two-column grid with questions and answers. It’s easy to replicate with display:grid and grid-template-columns:1fr 1fr.

Alternatively, you could do accordions using the <details> tag. (see MDN docs)

So in an HTML card you would have something like:

<details>
    <summary>FAQ 1</summary>
    FAQ 1 answer
</details>

<details>
    <summary>FAQ 2</summary>
    FAQ answer 2
</details>

which would output this:

FAQ 1 FAQ 1 answer

FAQ 2 FAQ answer 2

Then in code injection you could add CSS to style <details> and <summary>.

9

Maybe you’ll find what you’re looking for here?