Introducing Content Badges: Highlight What Matters Most

Quick‑Glance Takeaways

Purpose: Badges visually flag special content classes to boost click‑through rate (CTR) and reader trust.
Where They Show: Thumbnails, in‑feed labels, newsletters, push alerts, and the mobile app.
Who Uses Them: All editors and producers with Contributor or higher roles.
How Many: One badge per post—keep the signal strong.
Results So Far: Pilot phase shows a +18 % CTR on “Exclusive” stories (replace with your real metric once final).

1. Why We Built the Badge System

Pain Points Solved

Breaking stories buried in crowded feeds.
Readers missing members‑only or exclusive reportage.
Editors manually hacking CSS/Image overlays for seasonal series.

Alignment With OKRs

Objective	Key Result Impacted
Grow engaged sessions	↑ CTR on high‑value content
Improve editorial efficiency	↓ time to publish special posts
Strengthen brand authority	Clear visual differentiators

2. Badge Types & When to Use Them

Badge	One‑Line Description	Use For	Don’t Use When
Breaking	Urgent, developing news	Live news, fast‑moving events	Opinion pieces, recaps
Exclusive	Content only we have	Interviews, leaked docs	Aggregated reporting
Developing	Story likely to update	Court cases, elections	Finished analyses
Trending	Currently viral topic	Pop‑culture moments	Niche deep‑dives
Evergreen	Timeless resources	How‑tos, explainers	Ephemeral news
Sponsored	Paid partner content	Brand integrations	Editorial pieces
Editor’s Pick	Curated best‑of	Premium long‑reads	Routine daily posts

(Add, rename, or remove badges to match your final taxonomy.)

3. Where Badges Appear

Thumbnail Overlays – Archive grids, related‑stories modules.
In‑Feed Labels – Homepage river, section pages.
Newsletter Blocks – Sailthru & Braze templates auto‑pull the badge keyword.
Mobile & OTT Apps – React Native components map the badge slug to a pill‑style label.
Search & Social – Open Graph images regenerate after a badge is applied.

4. Step‑by‑Step: Applying a Badge in Gutenberg

Open the post in edit mode.
In the right sidebar, expand “Post Display Options → Badge”.
Select one badge from the dropdown (single‑select).
Preview the thumbnail block to confirm overlay.
Publish / Update the post.

Pro‑Tip: Badges are required for posts in the “Hero” or “Super Feature” slots.

5. Editorial Best Practices

Keep It Rare: Aim for ≤ 10 % of daily posts to carry a badge.
Pair With Powerful Headlines: The badge reinforces; it doesn’t replace tight copy.
Maintain Accuracy: Update or remove badges as a story evolves (e.g., Breaking → Developing → none).
Avoid Badge Fatigue: Rotate Editor’s Pick across verticals; don’t label every great piece.

6. SEO & Accessibility

Alt‑Text: We automatically prepend the badge keyword to thumbnail alt attributes.
ARIA Labels: Badge pills include aria-label for screen‑reader clarity.
No Keyword Stuffing: Badges complement—never replace—good meta descriptions and headings.

7. Real‑World Examples

Before vs. After

(Insert two side‑by‑side screenshots here—one without badge overlay, one with.)

Micro‑Case Study

Story: Exclusive interview with Artist X
Period: 14 days A/B test
Outcome: +18 % CTR, +12 % average scroll depth, +8 % social shares

(Replace with live data once your analytics team finalizes the report.)

8. Troubleshooting & Known Limitations

Issue	Likely Cause	Fix
Badge not displaying	Image cached by CDN	Purge cache or append `?nocache=1`
Dropdown missing in Gutenberg	Role lacks `manage_badges` capability	Request Editor role from CMS Ops
Overlay misaligned	Thumbnail < 300 × 300 px	Upload higher‑res featured image
Conflicts with custom CSS	Legacy theme overrides	File Jira to Front‑End team

9. FAQ

Q: Can I apply two badges?
A: No—single‑select prevents clutter and user confusion.

Q: How do badges affect social previews?
A: The system regenerates the Open Graph image on update, embedding the badge overlay.

Q: Who approves new badge types?
A: Product + Editorial Steering Committee via #product‑requests.

10. Additional Resources

Technical Spec: Jira [XWP‑4132]
Loom Walkthrough: [insert URL]
Slack: #badge‑questions for realtime help

Call to Action

Start using badges on your next post—let’s help readers find our best work, faster.

📌 Open Items / Data Needed

Final list of badge types + slug names
Actual pilot metrics (CTR, scroll depth, etc.)
Screenshots for Before/After section
Link to Loom video
Confirmation of required roles/permissions wording

(Ping @Product‑Insights in Slack with these details and we’ll update the doc.)