Implement Blog Post Best-Practice Template (layout + components)

[kavaivaleri]

Update the blog post template to meet UX, SEO, accessibility, and performance best practices.
The template should include metadata, breadcrumbs, TOC, author components, CTAs, share buttons, related posts, progress/completion indicators, and analytics events.

---

Implementation Checklist

Page-Level Metadata & Schema

Add structured metadata and editing flexibility.

• Display reading time (calculated at 200–250 words per minute or from a provided value).
• Support a separate H1 and meta title — title tag for SEO, visible H1 for the page.
• Include canonical URL, Open Graph/Twitter cards, and Article schema (datePublished, dateModified, author, image).
• Add a visible divider (or sufficient whitespace) between the hero/top area and the main body.
• Ensure breadcrumbs appear and use BreadcrumbList schema.

---

Layout & Type Scale

Define visual consistency and optimal readability.

• Content width: 640–760 px (max 800 px).
• Typography: body text 18–20 px, line-height 1.6–1.8; H2 24–28 px, H3 20–22 px.
• Spacing: paragraphs 12–16 px, list items 8–12 px.
• Responsive typography via rem units; consistent margins and grid spacing across viewports.

---

Table of Contents

Improve navigation and scannability.

• Automatically generated from H2/H3 headings.
• Render right after the intro or first section.
• Collapsible on mobile and optionally sticky on desktop (“On this page”).

---

Sidebar

Enhance discoverability and secondary engagement.

• Sticky mini-TOC or “On this page” widget on wide screens.
• Author mini-card (photo, 1-2 lines, link to author page).
• “Related posts” feed — mix of algorithmic and curated selections.
• Lightweight newsletter or resource signup (single input, minimal friction).
• Optionally include a scroll progress indicator or completion percentage bar on long posts.

---

CTAs & Sharing

Encourage reader engagement without intrusiveness.

• 1–2 inline contextual CTAs placed mid-article (relevant to topic).
• One bottom CTA block (primary action such as subscribe, join, or download).
• Share buttons: X/Twitter, LinkedIn, Facebook, and a native Copy Link button with visual confirmation.
• Avoid heavy third-party widgets; use lightweight custom code.
• Allow optional UTM tagging of CTA links for analytics.

---

Elements After the Main Body

Close the post with clear attribution and next steps.

• Author box — headshot, 2–3 sentence bio, links to author profile and social accounts.
• Related posts — 3–6 articles from the same category, show reading time and image thumbnail.
• Next/Previous navigation for series or chronological browsing.
• Optionally include a “Last updated on…” note or changelog snippet for transparency.

---

Completion & Engagement Features

Help users see their progress and increase time-on-page.

• Top progress bar that fills as the reader scrolls (visible on both desktop and mobile).
• Scroll completion percentage indicator near the sidebar or sticky TOC.
• Optional “You’ve reached the end!” message or subtle animation once the reader finishes.
• Track scroll depth events (25%, 50%, 75%, 100%) for analytics.
• Optionally, include a small completion checkmark or “✔ 100% read” badge in the footer for UX satisfaction.

---

Accessibility

Ensure the page works for everyone.

• Maintain color contrast ≥ 4.5:1 for text and UI elements.
• Visible focus states for all links, buttons, and anchors.
• Include a skip-to-content link at the top of the page.
• Keyboard navigable TOC, CTAs, and share buttons.
• Descriptive alt text for all non-decorative images and ARIA labels for interactive icons.

---

Performance

Optimize load speed and interaction.

• Lazy-load non-hero images; use responsive formats (WebP/AVIF).
• Preload hero image and fonts.
• Self-host or preconnect fonts (≤ 2 families, ≤ 3 weights).
• Minify and defer JS; avoid blocking scripts.
• Keep total JS payload lightweight (< 100 KB preferred).

References:
Semrush: https://www.semrush.com/blog/

Hubspot: https://blog.hubspot.com/sales/ultimate-guide-creating-sales-plan
Neil Patel: https://neilpatel.com/blog/broken-backlink-strategies/