Mike Ginley

Free FAQ Accordion Template

Share Article!

In This Post

TL;DR

  • Use this free template to quickly structure and style your FAQs.
  • FAQs can be a very helpful to solve problems your customers are having.
  • I’m seeing lots of FAQs in AI Overviews, nothing concrete yet, but a positive sign!



Content, content, content and all that. Its the King, Queen and the Prince that was promised. Based on the HubSpot ranking drama, all that matters in SEO is content and rankings. I’m very much not a believer in that but I do believe that content needs to solve the end users goal which should relate back to a service or product. One of the best ways to do that is answering questions.

With that, I really love FAQs included on web pages and articles. There are tons of good SEO content briefs/templates out there, I’m pretty partial to mine, but I also came across this one from Jess Joyce.

These both include FAQs. People have questions, businesses have answers. Is that clearly documented? This is where search is heading, people are searching in different ways, we need to make sure we have the answers ready for them.

This lead me to research the best way to incorporate FAQs into my content, I’m slow at doing it, but wanted to share the process as I go. I’ve never been a fan of nor any good at JS when it comes to SEO, so I wanted an HTML/CSS only FAQ accordion. Massive shout out to Frederick Allen. I found this HTML5 setup he put together on codepen and created a Google Sheets template that anyone can use to quickly document the Questions + Answers, then copy and paste them into your content.

FAQ Google Sheet Template

  1. Make a copy of the FAQ Setup – Google Sheet
  2. Document your questions in column B.
  3. Document your answers in column D.
  4. The HTML will generate in column F.
  5. Copy and past all of that into your content.
  6. You will need to add in some custom CSS to pretty this up.
  7. You should be all set!
FAQ Template
FAQ Template
Custom CSS In Sheet
Custom CSS In Sheet

FAQ Accordion Test

Going to test the process out here, just put some random questions and answers in, copied and pasted into a ‘custom html’ snippet in my post, nothing else. Boom!

FAQ Test
FAQ Test
Who shot Mr. Burns?

That would be Maggie Simpson!

Who is Cartman’s Dad?

Cartman’s dad is Jack Tenorman—a shocking revelation from South Park’s Season 14 episode “201”.

Who is the most average SEO?

Mike Ginley!

When is the last day to say Happy New Year?

January 7th according to Larry David.

Why does David Puddy paint his face?

Gotta support the team!

Wrapping Up

This isn’t anything earth shattering, I know that. It’ll probably make some people mad cause its manual when this can easily be done dynamically with some headless SPA gobaldy scloope.

My methodology is trying to get impactful work done as quickly as possible. Yes there is probably another way to do this that can scale easily. But this way works right now and its quick. If a change is needed down the line yes it may require some manual work to cleanup, but thats a future problem. I’ve done this on some other websites and its impactful (Shout out Omar – if you need an electrician in Chicago, checkout his FAQs using this process). I responded to a post on LinkedIn where JS accordions weren’t getting indexed, but mine using this process seem to be. Give it a shot, let me know how it works and I hope it helps!

Recent Articles

Digital Marketing & Chili
Digital Marketing
Mike Ginley

Digital Marketing & Chili

TL;DR Pretty ridiculous title but I think I have a point. I’m always seeing weird recipes on Instagram that use no ingredients or take 30

Read More »
SEO is PMM
SEO
Mike Ginley

SEO Is In Its PMM Era

SEO is not dead, it never will be, it’s just always changing. It’s going through its different eras. Ya know like Taylor Swift! That’s what

Read More »

Popular Articles