Author Box
Author Box
The XAFAuthorBox component renders the author bio block. Google's Helpful Content system weights real author identity heavily (E-E-A-T: Experience, Expertise, Authoritativeness, Trustworthiness) — a real byline with credentials and a bio is the single biggest E-E-A-T signal you can ship.
Component
<XAFAuthorBox />
<XAFAuthorBox
variant="card"
:published-at="review.publishedAt"
:updated-at="review.updatedAt"
/>
<!-- Or fully override per-page: -->
<XAFAuthorBox
name="Jane Reviewer"
role="Senior Kitchen Gear Editor"
bio="I've been reviewing kitchen equipment for home cooks for 8 years."
image="/team/jane.jpg"
:credentials="['CNC-certified', '8 years testing kitchen gear']"
:social="{ twitter: 'https://twitter.com/jane', website: 'https://janereviews.com' }"
variant="inline"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | xAffiliate.author.name | Author name. |
role | string | xAffiliate.author.role | One-line role/title. |
bio | string | xAffiliate.author.bio | 1–3 sentence bio. |
image | string | xAffiliate.author.image | Avatar URL (square, 200×200+). |
credentials | string[] | xAffiliate.author.credentials | Trust badges (e.g. ['CNC-certified', '8 years reviewing']). |
showLabel | boolean | true | Show "Reviewed by" prefix. |
variant | 'card' | 'inline' | 'compact' | 'card' | Layout: card (boxed), inline (horizontal), compact (avatar + name only). |
publishedAt | string (ISO) | — | First-published date — shown in card variant only. |
updatedAt | string (ISO) | — | Last-updated date. Shown only when it differs from publishedAt. |
Site-wide config
Set once in app.config.ts and every <XAFAuthorBox> on the site inherits it:
export default defineAppConfig({
xAffiliate: {
author: {
name: 'Jane Reviewer',
role: 'Senior Kitchen Gear Editor',
bio: '8 years reviewing kitchen equipment for home cooks.',
image: '/team/jane.jpg',
credentials: ['CNC-certified', '8 years testing kitchen gear'],
social: {
twitter: 'https://twitter.com/jane',
linkedin: 'https://linkedin.com/in/jane',
website: 'https://janereviews.com',
email: 'jane@bestkitchengear.com',
},
},
},
})
E-E-A-T impact
Google's 2024 Helpful Content update weighs author identity hard. The single biggest E-E-A-T action you can take on a niche review site is:
- Put a real person's name on every review (not "Editorial Team").
- Show their credentials, photo, and bio.
- Link to their social profiles and personal site.
- Show "Published / Updated" dates.
<XAFAuthorBox> does all four.
Pair with usePersonSchema()
For maximum SERP impact, also call usePersonSchema() in your review page's <script setup>:
usePersonSchema({
knowsAbout: ['wireless keyboards', 'mechanical switches', 'office peripherals'],
})
This emits Schema.org Person JSON-LD with knowsAbout properties — Google uses these to associate the author with topical expertise.
AI Context
component: XAFAuthorBox
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
At the top of every review or article page. Drives Google E-E-A-T
(Experience, Expertise, Authoritativeness, Trustworthiness) signal.
Set site-wide defaults under xAffiliate.author in app.config.ts
(name, role, bio, image, credentials, social) and override per-page
when needed. Three variants: card (boxed, full bio), inline
(horizontal), compact (avatar + name). Pair with usePersonSchema()
for full Schema.org Person markup with knowsAbout topics.