The old HJD blog was a wall of text. The new one is built around how we actually communicate results to clients and prospects: case-study openers, KPI strips, channel splits, keyword tables, audit gauges, traffic charts, SERP and ad teardowns, plus the editorial primitives that hold them together.
This post is a working tour. Every component below is a real one available to anyone publishing here. Use it as a reference for what's possible when you're scoping a post.
A note on the numbers
All metrics, keywords, ad copy, and client names below are illustrative samples chosen to show what each component looks like when populated. Nothing here is real reporting from a real engagement. Real posts pull real data from Search Console, Ahrefs, GA4, the audit, the campaign, the engagement.
Article frame: hero + TOC
Every post opens with an <ArticleHero> (rendered automatically at the top of this page by the /[slug] route). The <TableOfContents> you just used sticks to the top of long-form posts. That's it for the frame primitives. Keep it short.
For case-study posts, swap the article hero for <CaseStudyHero> further down the body. Logo plate, industry chips, three result pills.
CO
A 90-day organic-lead lift
Logo plate on the left, industry chips, headline, three bold result pills. Pass `logoImage` (URL) to render a real client logo in the white plate; otherwise it falls back to the `logo` text wordmark (HTML allowed for <br/>). Real case studies replace this with the actual client (with sign-off), the actual industry, and the actual numbers.
Showing results: the agency primitives
This is the bulk of what makes HJD's blog different from a generic agency blog. The components in this group are tuned for showing channel performance, audit output, keyword movement, ad creative, and SERP changes. Every one of them needs real data. Never lift example numbers from this post.
KeyMetric · one big number per post
Save this for the headline result. The thing the founder will quote at their next dinner.
The headline number
that founders quote
The big-number block sits inline mid-post. Pair it with a one-line label and a one-line caption. Real posts use the actual hero metric from the engagement; never reuse this 312%.
ResultsStrip · four KPIs across a campaign window
KeywordTable · for SEO posts
Show the move. Keyword, volume, difficulty, rank delta. Pull from real Search Console or Ahrefs data only.
| Keyword | Volume | Difficulty | Was | Now | Δ |
|---|---|---|---|---|---|
| sample primary keyword | 2,400 | 73 | 38 | 4 | 34 |
| sample secondary term | 1,900 | 52 | 22 | 2 | 20 |
| sample 'near me' term | 3,600 | 68 | n/a | 7 | new |
| sample long-tail term | 880 | 31 | 14 | 1 | 13 |
| sample broad term | 540 | 49 | 8 | 11 | 3 |
ChannelMixBars · channel-split for paid-media reports
TrafficChart · six-month line for organic-traffic posts
Solid line is the period. Dashed is the year prior.
SerpPreview · for title-tag and meta posts
For posts about title-tag rewrites, meta descriptions, schema. Mock the SERP so readers can see exactly what changed.
Sample sponsored result · 24-hr quotes · ACME Co
Specialists in sample target query across the region. Free site survey, fixed quote within 24 hours. 4.9★ across 280+ Google reviews.
Sample organic result · fast, insured, licensed since 2009
Body copy describing the ranking page. Teams operating across the region. Sample target query matched in description.
Competitor sample · industrial specialists since 1998
Industrial-grade services for warehouses, factories and commercial sites. Hours, contact, free site visit.
AdPreview · Meta and Google variants
Two formats. A Meta feed ad on the left, a Google text ad on the right. Use to teardown winning creative or show before/after copy in paid posts.
AuditScoreCard · three half-gauge dials
Cyan = 80+, amber = 50 to 79, red = under 50. Use at the top of audit posts, before the findings list.
SiteAuditFindings · severity dots + counts
Audit-output list with severity dots. Use after AuditScoreCard to break down what's behind the numbers.
BeforeAfter · screenshot delta
Two-card screenshot delta. Use for site rebuilds, ad-creative tests, conversion-rate posts. Pin a metric to each card.
Conversion rate. Single CTA, buried below the fold, no social proof. In real posts, attach a screenshot via the `image` prop.
Conversion rate. New hero, two-CTA layout, real photography, review snippets. Pin the metric that matters to the case.
TimelineRecap · campaign milestones with phase chips
Every event gets a phase chip (audit, build, launch, optimise) so the reader can track what kind of work happened when.
- Week 1Audit
38-point technical audit shipped
Critical fixes. Title rewrites, schema gaps, broken redirects from a previous migration. Dev-ready CSV export to client engineering.
- Week 4Build
Technical rebuild complete
All 38 items closed. Lighthouse on the homepage went from 64 to 96. Indexed pages climbed from 47 to 112 within ten days.
- Week 8Launch
Keyword cull + content sprint live
Killed 22 thin pages, merged 9 into 3 cornerstones. Shipped four new service-page rewrites tied to commercial-intent terms.
- Week 12Measure
Pipeline impact recorded
Qualified form-fills tripled vs. the previous quarter. Average deal size held, so a real lift in qualified leads, not a vanity stat.
Editorial: callouts, quotes, steps
These are the primitives that hold every post together. The connective tissue. Use them sparingly. One CalloutBox per ~800 words, one quote per case study, steps when the post is genuinely a playbook.
CalloutBox · five tones
Heads up
Default cyan tone. Use for the structural note that doesn't fit any of the semantic colours.
Good to know
Info-blue tone. Use for context that helps the reader without being a warning or a confirmation.
You're already winning
Success-green tone. Use to confirm something the reader has likely already done right.
Watch this
Warn-amber tone. Use for the gotcha. The thing that sinks 80% of attempts at this.
Don't do this
Danger-red tone. Use sparingly, only for genuine 'this will hurt you' material.
TipBox · quick aside, lighter than CalloutBox
Inline aside with a Tip badge. Use for the obvious-but-easy-to-miss thing. One or two sentences max.
PullQuote · real client sentence with attribution
Use a real client quote pulled from the transcript, call recording, or a public source (LinkedIn post, podcast, blog). Pass sourceUrl and the avatar is derived automatically from the source's favicon. No need for per-author headshots. Pass source for the attribution row at the bottom.
"Sample pull quote · this slot is for a real client sentence. The favicon next to the attribution is pulled from the sourceUrl automatically. LinkedIn here, but it'd be the client's company favicon if the quote came from their site.
SourceLinkedIn, March 2026Sample Client NameFounder · ACME Co
For quotes without a public source, omit sourceUrl and the avatar slot collapses entirely. No fake placeholder. Pass avatarUrl explicitly if you have a real headshot or company logo to use instead.
StepBlock · numbered playbook, 3 to 6 steps
Pick the topic, the angle, and the components you'll use. 1,200 to 2,000 words is the band.
Stats, quotes, case-study numbers. Every claim needs a source. Never lift example values from the design system.
Use components freely. Validate before you publish. The MCP catches title length, description, word count.
publish_post commits to hjd-blog and triggers a Railway redeploy. Live within 2 to 3 minutes.
ProsCons · two-column tradeoff
Three real points beat six generic ones. Use for channel decisions, technology calls, build-vs-buy.
DeliveryComparison · neutral framing
DIY vs in-house vs agency, neutrally framed. Use in 'how to choose an SEO partner'-type posts. Don't put HJD on the right by default. This works because it's honest.
| DIY tools | In-house team | Agency | |
|---|---|---|---|
| Speed to startTime before useful output | Days | Months · hire + onboard | 1 to 2 weeks |
| Annual cost(Mid-market band) | £3 to 8k | £90 to 180k | £40 to 120k |
| Specialist depthSEO + paid + creative | Generalist | Usually one specialism | All three, in parallel |
| Best when | Starting from zero | You're at scale, brand-led | You need range, fast |
Definition · inline glossary
Use the first time a jargon term shows up in a post. Two-letter monogram on the left, definition on the right.
The practice of structuring content, schema and citations so AI search products (ChatGPT, Perplexity, Google AI Overviews) cite your page when answering a query. The 2026 evolution of SEO.
RegionCallout · UK / AU / TH offices
Three-cell strip showing the regional contacts. Use on local-market posts and 'work with us' sections.
Checklist · action list with done states
Mark done as readers go. Works as the body of any 'pre-launch / pre-pitch / pre-audit' post.
- ✓Verify Google Search ConsoleSingle TXT record. Five minutes.
- ✓Run a 200-point technical auditUse HJD Site Audit or Screaming Frog. Export to CSV.
- Rewrite top-10 page titlesFront-load keyword. Cap at 60 characters. Brand suffix last.
- Claim local listings (GBP, Bing, Apple)Identical NAP across all three. Photos. Hours.
ImageFeature · full-width media block
Conversion: service plugs, CTAs
ServicePromoCard · inline soft-pitch
Drop in mid-post when the topic maps to a service page. One per post, never two.
CTABanner · full-width audit/quote banner
Use at the foot of conversion-intent posts.
FREE SITE AUDIT
No credit card. Full PDF. Real recommendations from real humans on the team.
Run my auditFurtherReading · outbound references
Use this to show your work. Better than a 'sources' footnote.
<NewsletterCTA>, <AuthorCard> and <RelatedPosts> are rendered automatically by the /[slug] route after the article body. You don't need to include them in the MDX.
How to publish a post
The agent-driven publishing flow uses the blog-publisher MCP. Same plugin Capture AI uses, multi-tenant.
Check existing posts via list_posts to avoid duplication. Topic comes from real engagement work, the editorial calendar, or a research brief. Never from this showcase post's examples.
Real numbers, real citations, real quotes. If a case study, get sign-off from the client first. The design system is for structure, not content.
validate_post catches title length (50 to 65), description length (150 to 160), and word count (1000 to 2500). Fix all warnings before publishing.
publish_post commits MDX to highjumpdigital/hjd-blog and triggers a Railway redeploy. Site rebuilds with the post in 2 to 3 minutes.
Hard rule for any agent publishing here
The design bundle's example content (numbers, names, quotes, scenarios) is illustrative only. Like Lorem Ipsum with specifics. Never lift it into a post. Every component instance needs real data, real citations, or be clearly labelled as a sample, like the examples above.