Crawlable FAQ Accordion in Framer
Overview
There’s a problem with typical FAQ accordions in Framer that most people don’t know about.
Due to how components are implemented, hiding the answer in the “closed” state and then showing it in the “open” state will cause it to be added to the page only when the user clicks on the item.
While not a problem for user experience, it can be problematic for SEO. Google, or any other search engine for that matter, won’t crawl it because it’s not on the page on the first render.
In other words, Google will only see the questions, not the answers.
To solve this problem, I’ve created this FAQ accordion that makes the answer appear on the page source code on the first render, allowing search engines to see and crawl it.
The component works by setting the height of the answer to 0px on the “closed” state rather than hiding it.
This way, the answer is still technically on the page, though it can only be seen once the user clicks on the FAQ item.
If you want to go the extra mile, I’ve also included a sample FAQ schema markup you can add to your FAQ page’s <head> tag to give search engines even more information and get a chance to earn a rich result on the search results.
Feel free to remix the project and play around with it!
Overview:
Crawlable FAQ Accordion in Framer
