Blog Layouts
A magazine-style blog article page — full-width hero image, title, and author/date/reading-time in a sticky side column
Multi-location businesses lose local rankings in the same handful of ways, over and over — inconsistent business info, duplicate location pages, and missing local schema.
Name, address, and phone number need to match exactly across every listing and every location page — even small formatting differences can split ranking signals across duplicate entities.
See how to use it on your page, then copy the component file itself.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Article title, shown next to the meta sidebar |
| coverImage | string | — | Cover image URL — required, shown as a full-width hero above the title |
| coverImageAlt | string | null | null | Alt text for the cover image - falls back to the title if omitted |
| authorName | string | "Editorial Team" | Author name, shown in the meta sidebar |
| authorAvatar | string | null | null | Author avatar URL — shows a colored initial badge if missing |
| publishedAt | string | — | ISO 8601 publish date, shown formatted in the meta sidebar |
| readingTimeMinutes | number | undefined | Estimated reading time in minutes — hidden if omitted |
| accentColor | string | "#4A68E5" | Accent color for the author badge, links, and blockquote border |
| children | React.ReactNode | — | Article body content — JSX, markdown-rendered output, or raw HTML |
The sticky sidebar keeps author and date visible for the whole read, not just above the fold. Add structured data so search engines and AI answer engines understand the page as an article.
Google's own Article structured data guidance and Search Central content both call out author information as something search quality evaluation looks for — the sidebar here keeps that byline visible and sticky throughout the read, rather than only at the top. That is about keeping authorship accessible, not a placement trick: what matters per Google's own documentation is that author, date, and image information is present and correct, not where on the page it sits.
The layout above covers the visible SEO signals (semantic <article>/<h1>/<time>, alt text, page metadata). For search engines and AI answer engines to fully understand the page as an article — author, publish date, image — add Article structured data (JSON-LD) in the page file that renders it: