What started as "add an FAQ section" turned into a deep dive on SEO optimization, user experience, and some genuinely fun UI experimentation. Here's everything I built to transform a basic blog post into an SEO powerhouse.
From Basic to SEO Powerhouse
How a simple blog post became a conversion machine
Share This
FAQ sections aren't just helpful for readers—they're SEO gold. When you add proper FAQ schema markup, Google can display your questions and answers directly in search results as expandable rich snippets. That's free SERP real estate that can dramatically increase click-through rates.
Create FAQ Content
Write 5-7 relevant Q&As that address common reader questions
Add Visual Component
Use accordion-style details/summary elements for clean UX
Inject Schema Markup
Use generateFAQSchema() to create structured data
Test in Search Console
Validate your structured data appears correctly
CTA Design Matters
Premium CTA Checklist
- 1
Animated glow effects for attention
- 2
Clear value proposition headline
- 3
Two CTAs: primary + secondary
- 4
Trust indicators below buttons
- 5
Dark background for contrast
The original CTA was a generic purple gradient box saying "Ready to Grow Your Business?" Boring and forgettable. The new design uses a dark slate background with animated emerald glow orbs, a pulsing badge, gradient text, and clear trust indicators. It's the difference between a billboard and a conversation.
Before
Ready to Grow?
Generic, forgettable
After
Stop Guessing. Start Growing.
Premium, memorable
SEO Quick Win
Key insight: Every category badge and tag on your blog should be a link. It's free internal linking that helps users discover more content and helps search engines understand your site structure.
Mobile UX Tip
Mobile TOC Features
- Sticky edge tab that doesn't overlap content
- Progress dots showing reading position
- Fisheye effect - active section bulges out
- Spring animations for natural feel
- Slide-out panel with full navigation
- Starts below navbar (no overlap)
The mobile table of contents went through several iterations. First a floating button (boring), then a tall rectangle with dots (too intrusive), and finally a compact edge tab with a camera-scroll-wheel inspired progress indicator. The dots grow and shrink based on proximity to the active section, creating a satisfying visual feedback loop as you scroll.
CSS Gotcha
Sticky + Overflow = Broken
position: sticky doesn't work when any ancestor has overflow: hidden. Be careful where you apply overflow styles!
Bugs Squashed Along the Way
- SVG Path Error: CSS values like calc() don't work in SVG path data
- Sticky Sidebar: overflow-x-hidden on parent breaks position: sticky
- Dark Text: Headings need explicit text-white on dark backgrounds
Tailwind Tip
Dark Background Text
text-white on parent only
Explicit text-white on headings
Tailwind's text-white doesn't cascade to headings. Always add text-white directly to h1-h4 inside dark containers.
One of the most frustrating CSS gotchas: Tailwind's text-white on a parent element doesn't cascade to headings. Browsers apply default styles to h1-h6 elements, which override inherited colors. The fix is simple but easy to forget—always add explicit text-white to every heading inside dark containers.
Animation Tip
What We Built
Build in Public
Building in public means sharing the messy middle, not just the polished result. Your debugging sessions are content too.
This is Just the Beginning
Future posts will cover social media cards, featured images, and more.
Follow the Journey
Get notified when new parts of this series drop.
No spam, unsubscribe anytime. We respect your privacy.
Social Media Carousel
8 cards • Click to download individually or as ZIP
Enhancing Blog Posts with FAQ, CTA & Mobile TOC
Building JJM: The Blog
How I upgraded every blog post with 4 powerful features
4 Features Added
- 1
FAQ schema for rich snippets
- 2
Animated premium CTA
- 3
Clickable category badges
- 4
Camera-scroll mobile TOC
FAQ Schema
Add structured data and Google may show expandable answers directly in search results. Free SERP real estate.
Posts with FAQ rich snippets get significantly more clicks
Mobile TOC
Camera-scroll navigation that follows the reader. Shows progress and makes long posts easy to navigate.
Before vs After
Static blog posts, no interactivity
Dynamic features that boost engagement
Small UX improvements compound. Each feature makes the blog slightly better for readers.
— Jordan James
Follow the Journey
This is Part 1 of Building JJM: The Blog series
Building JJM: The Blog
Share This Article
Spread the knowledge