| name | anitrend-metadata-and-social-preview |
| description | Use when implementing or reviewing Next.js App Router metadata, Open Graph, Twitter cards, and social preview consistency across AniTrend routes. |
| argument-hint | Which route or metadata concern needs validation or updates? |
AniTrend Metadata And Social Preview
Overview
Use this skill when work affects route metadata, social preview cards, or discoverability in the AniTrend website.
When to Use
- Adding a new App Router page, layout, or route segment that needs metadata ownership decisions
- Adding or updating
metadata exports in App Router pages or layouts
- Auditing Open Graph or Twitter card consistency across routes
- Aligning route-level metadata with root defaults from the app layout
- Reviewing title and description quality for search and social sharing
- Verifying whether a route should define local metadata or inherit root metadata
Do Not Use For
- Pure UI/styling changes that do not touch metadata output
- Analytics-only updates that do not affect previews or page metadata
- Backend/API behavior unrelated to route metadata generation
Current Repo Anchors
- Root metadata baseline:
src/app/layout.tsx
- Exports
Metadata with metadataBase, title template, description, openGraph, twitter, and icons
- Landing page metadata:
src/app/page.tsx
- Exports route-level metadata for title, description, and Open Graph title/description
- Discover route metadata + server data path:
src/app/discover/page.tsx
- Server page parsing
searchParams, fetching data, and passing props to DiscoverClient
- Exports route metadata for discoverability/social preview context
- Recommend route metadata:
src/app/recommend/layout.tsx
- Server layout exports route metadata for the recommender experience
Implementation details and practical checklists live in:
./references/app-router-metadata.md
Procedure
- Identify the metadata owner.
- Decide whether metadata belongs at root layout, route layout, or page scope.
- Choose static export vs
generateMetadata explicitly.
- Use
export const metadata when route metadata is deterministic and does not depend on runtime params, fetched entities, headers, or cookies.
- Use
export async function generateMetadata when metadata must be derived from route params/search params or server-fetched content at request time.
- Prefer static metadata by default in this repo unless a route has a concrete runtime dependency.
- Compare against root defaults.
- Use
src/app/layout.tsx as the canonical baseline for title template and shared social metadata fields.
- Verify route override intent.
- Ensure per-route title/description/Open Graph content reflects the route purpose and does not regress discoverability.
- Apply interactive route server-wrapper rule.
- On interactive routes, keep metadata in a server
page.tsx or layout.tsx wrapper and delegate interactivity to a client component.
- Keep the metadata owner stable in the server wrapper even when client UI logic evolves.
- Apply Open Graph and Twitter guidance consistent with current implementation.
- Prefer aligning Open Graph and Twitter title/description pairs when route-level social copy is explicitly customized.
- Route-level Open Graph overrides without route-level Twitter overrides are acceptable only when the inherited root Twitter title and description still describe the route accurately and no route-specific Twitter copy is needed.
- Confirm server boundaries.
- Keep metadata exports in server files (page/layout) where route metadata is authored in this repo.
- Update documentation anchors when behavior changes.
- If metadata ownership or conventions shift, update
./references/app-router-metadata.md.
Expected Outputs
- Metadata decisions that are explicit, route-aware, and consistent with root defaults
- Social preview fields that remain coherent across landing, discover, and recommend surfaces
- Updated references when route metadata patterns or ownership change
References
