# Managing SEO Metadata

> Strategies for dynamic SEO using Next.js Metadata API. Use to generate social share cards and search-engine-friendly titles for tours.

- Skill: `majiayu000/managing-seo-metadata` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/managing-seo-metadata`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/managing-seo-metadata/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/managing-seo-metadata

---


# SEO and Metadata Strategy

## When to use this skill
- Any page intended for public discovery (Tours, Destinations, Blog).
- Creating dynamic OpenGraph (OG) images for social media sharing.

## Workflow
- [ ] Use `export const metadata` for static pages.
- [ ] Use `export async function generateMetadata` for dynamic routes (`tours/[id]`).
- [ ] Fetch the tour data inside `generateMetadata` to populate tags.

## Example (Dynamic Metadata)
```typescript
export async function generateMetadata({ params }): Promise<Metadata> {
    const { id } = await params;
    const tour = await TourService.getById(id);

    return {
        title: `${tour.title} | Tourly`,
        description: tour.description.substring(0, 160),
        openGraph: {
            images: [tour.images[0]],
        },
    };
}
```

## Instructions
- **Memoization**: Next.js automatically deduplicates fetch requests between `generateMetadata` and your Page component.
- **Defaults**: Set a global `title.template` in `root layout.tsx` (e.g., `%s | Tourly`).
- **Canonical**: Always include `canonical` URLs to prevent duplicate content issues.