whiteport-design-studio 0.1.0

package/src/data/agent-guides/freya/meta-content-guide.md

@@ -0,0 +1,483 @@
+# Freya's Meta Content Guide
+
+**When to load:** When specifying public pages that will appear in search results or be shared on social media
+
+---
+
+## Core Principle
+
+**Every public page needs meta content for search results and social sharing.**
+
+Meta content is not just SEO - it's essential page content that appears when users:
+- Find your page in Google search results
+- Share your page on Facebook, Twitter, LinkedIn
+- Bookmark your page in their browser
+
+---
+
+## When to Collect Meta Content
+
+### Public Pages (Always Required)
+- Landing pages
+- Marketing pages
+- Blog posts
+- Product pages
+- About/Contact pages
+- Any page accessible without login
+
+### Private/Authenticated Pages (Browser Tab Only)
+- Dashboard pages
+- Settings pages
+- User profile pages
+- Admin pages
+- Any page requiring authentication
+
+---
+
+## Meta Content Components
+
+### 1. Page Title (Browser Tab & Search Results)
+
+**Purpose:** Appears in browser tab, search results, and social media shares
+
+**Character Limit:** 55-60 characters (including brand name)
+
+**Best Practices:**
+- Front-load important keywords
+- Include brand name at end (if space allows)
+- Be descriptive and specific
+- Make it compelling for clicks
+
+**Agent Questions:**
+```
+"What should appear in the browser tab and search results for this page?"
+"Keep it under 60 characters and make it descriptive."
+"Example: 'Dog Walking Coordination - Dog Week' (42 chars)"
+```
+
+**Example:**
+```markdown
+### Page Title (Browser Tab & Search Results)
+**Character Limit:** 55-60 characters
+
+**Content:**
+- EN: "Dog Walking Coordination - Dog Week"
+- SE: "Hundpromenad Koordinering - Dog Week"
+```
+
+---
+
+### 2. Meta Description (Search Results Preview)
+
+**Purpose:** Appears below page title in search results
+
+**Character Limit:** 150-160 characters
+
+**Best Practices:**
+- Summarize page value clearly
+- Include call-to-action
+- Use active voice
+- Address user pain point or benefit
+- Don't just repeat page title
+
+**Agent Questions:**
+```
+"How would you describe this page in 150-160 characters to encourage clicks from search results?"
+"What value does this page provide to users?"
+"What action should they take?"
+```
+
+**Example:**
+```markdown
+### Meta Description (Search Results Preview)
+**Character Limit:** 150-160 characters
+
+**Content:**
+- EN: "Coordinate dog walks with your family. Never miss a walk again. Simple scheduling, automatic reminders, and family accountability. Start free today."
+- SE: "Koordinera hundpromenader med din familj. Missa aldrig en promenad igen. Enkel schemaläggning, automatiska påminnelser. Börja gratis idag."
+```
+
+---
+
+### 3. Social Media Title
+
+**Purpose:** Appears when page is shared on Facebook, Twitter, LinkedIn, etc.
+
+**Character Limit:** 60-70 characters
+
+**Best Practices:**
+- Can differ from page title
+- Optimize for social engagement
+- More conversational tone OK
+- Focus on benefit or curiosity
+
+**Agent Questions:**
+```
+"What title would work best when this page is shared on social media?"
+"Can be different from page title, optimized for social engagement."
+"Think: What would make someone click when they see this in their feed?"
+```
+
+**Example:**
+```markdown
+#### Social Media Title
+**Character Limit:** 60-70 characters
+
+**Content:**
+- EN: "Never Forget a Dog Walk Again 🐕"
+- SE: "Glöm Aldrig en Hundpromenad Igen 🐕"
+```
+
+---
+
+### 4. Social Media Description
+
+**Purpose:** Appears below title in social media share previews
+
+**Character Limit:** 120-150 characters
+
+**Best Practices:**
+- Shorter than meta description
+- More casual/engaging tone
+- Create curiosity or urgency
+- Include benefit
+
+**Agent Questions:**
+```
+"What description would encourage people to click when they see this shared on Facebook/Twitter/LinkedIn?"
+"Keep it under 150 characters and make it engaging."
+```
+
+**Example:**
+```markdown
+#### Social Media Description
+**Character Limit:** 120-150 characters
+
+**Content:**
+- EN: "Family dog walking made simple. Schedule walks, get reminders, and keep everyone accountable. Free to start."
+- SE: "Familjens hundpromenader enkelt. Schemalägg, få påminnelser, håll alla ansvariga. Gratis att börja."
+```
+
+---
+
+### 5. Social Media Image
+
+**Purpose:** Appears as preview image when page is shared
+
+**Image Requirements:**
+- **Dimensions:** 1200x630px (Open Graph standard)
+- **Format:** JPG or PNG
+- **File size:** < 1MB
+- **Content:** Should represent page visually
+
+**Best Practices:**
+- Use high-quality images
+- Include text overlay if helpful
+- Ensure readable on mobile
+- Test on different platforms
+- Avoid too much text (Facebook limits)
+
+**Agent Questions:**
+```
+"What image best represents this page content?"
+"Should be 1200x630px and visually engaging."
+"Consider: Product screenshot, hero image, or custom graphic?"
+```
+
+**Example:**
+```markdown
+#### Social Media Image
+**Image Requirements:**
+- Dimensions: 1200x630px (Open Graph standard)
+- Format: JPG or PNG
+- File size: < 1MB
+
+**Image Path:** `/images/social/start-page-social.jpg`
+
+**Alt Text:**
+- EN: "Dog Week app showing family dog walking schedule on mobile phone"
+- SE: "Dog Week-appen visar familjens hundpromenadschema på mobiltelefon"
+```
+
+---
+
+## Agent Workflow for Public Pages
+
+### Step 1: Identify Page Visibility
+
+Ask: "Is this page publicly accessible (no login required)?"
+
+- **Yes** → Collect all meta content
+- **No** → Only collect browser tab title
+
+---
+
+### Step 2: Collect Page Title
+
+**Question:**
+```
+"What should appear in the browser tab and search results for this page?
+Keep it under 60 characters and make it descriptive.
+
+Example: 'Dog Walking Coordination - Dog Week' (42 chars)
+
+Your page title:"
+```
+
+**Validate:**
+- Length ≤ 60 characters
+- Descriptive and specific
+- Includes brand name (if space)
+
+---
+
+### Step 3: Collect Meta Description
+
+**Question:**
+```
+"How would you describe this page in 150-160 characters to encourage clicks from search results?
+
+What value does this page provide?
+What action should users take?
+
+Your meta description:"
+```
+
+**Validate:**
+- Length 150-160 characters
+- Includes value proposition
+- Has call-to-action
+- Not just repeating title
+
+---
+
+### Step 4: Collect Social Media Title
+
+**Question:**
+```
+"What title would work best when this page is shared on social media?
+
+Can be different from page title, optimized for engagement.
+Think: What would make someone click in their feed?
+
+Your social media title:"
+```
+
+**Validate:**
+- Length 60-70 characters
+- Engaging and conversational
+- Creates curiosity or shows benefit
+
+---
+
+### Step 5: Collect Social Media Description
+
+**Question:**
+```
+"What description would encourage clicks when shared on Facebook/Twitter/LinkedIn?
+
+Keep it under 150 characters and make it engaging.
+
+Your social media description:"
+```
+
+**Validate:**
+- Length 120-150 characters
+- Casual and engaging tone
+- Shows clear benefit
+
+---
+
+### Step 6: Specify Social Media Image
+
+**Question:**
+```
+"What image best represents this page content?
+
+Should be 1200x630px and visually engaging.
+Options: Product screenshot, hero image, custom graphic
+
+Image description:"
+```
+
+**Document:**
+- Image path
+- Alt text in all languages
+- Image requirements
+
+---
+
+## Multi-Language Considerations
+
+**All meta content must be provided in all product languages.**
+
+**Translation Tips:**
+- Character limits apply to each language
+- Some languages are more verbose (German, Swedish)
+- May need to adjust wording to fit limits
+- Maintain same tone and message across languages
+
+**Example:**
+```markdown
+**Content:**
+- EN: "Never Forget a Dog Walk Again" (32 chars)
+- SE: "Glöm Aldrig en Hundpromenad Igen" (34 chars) ← Slightly longer, still fits
+```
+
+---
+
+## Common Mistakes to Avoid
+
+### ❌ Mistake 1: Generic Titles
+
+**Wrong:**
+```
+Page Title: "Home - Dog Week"
+```
+
+**Right:**
+```
+Page Title: "Dog Walking Coordination - Dog Week"
+```
+
+---
+
+### ❌ Mistake 2: Too Long
+
+**Wrong:**
+```
+Meta Description: "Dog Week is an amazing application that helps families coordinate their dog walking schedules so that everyone knows when the dog needs to be walked and who is responsible for each walk throughout the day and week." (215 chars)
+```
+
+**Right:**
+```
+Meta Description: "Coordinate dog walks with your family. Never miss a walk again. Simple scheduling, automatic reminders, and family accountability. Start free today." (149 chars)
+```
+
+---
+
+### ❌ Mistake 3: No Call-to-Action
+
+**Wrong:**
+```
+Meta Description: "Dog Week is a dog walking coordination app for families."
+```
+
+**Right:**
+```
+Meta Description: "Coordinate dog walks with your family. Never miss a walk again. Start free today."
+```
+
+---
+
+### ❌ Mistake 4: Same Content Everywhere
+
+**Wrong:**
+```
+Page Title: "Dog Walking Coordination - Dog Week"
+Social Title: "Dog Walking Coordination - Dog Week" ← Same as page title
+```
+
+**Right:**
+```
+Page Title: "Dog Walking Coordination - Dog Week"
+Social Title: "Never Forget a Dog Walk Again 🐕" ← Optimized for social
+```
+
+---
+
+## Validation Checklist
+
+Before finalizing meta content:
+
+- [ ] **Page visibility identified** (Public/Private/Authenticated)
+- [ ] **Page title** ≤ 60 characters, descriptive
+- [ ] **Meta description** 150-160 characters, includes CTA
+- [ ] **Social title** 60-70 characters, engaging
+- [ ] **Social description** 120-150 characters, benefit-focused
+- [ ] **Social image** specified with path and alt text
+- [ ] **All languages** provided for each content item
+- [ ] **Character limits** respected in all languages
+- [ ] **Tone appropriate** for each context (search vs social)
+
+---
+
+## Example: Complete Meta Content Specification
+
+```markdown
+## Meta Content & Social Sharing
+
+**Page Visibility:** Public
+
+### Page Title (Browser Tab & Search Results)
+**Character Limit:** 55-60 characters
+
+**Content:**
+- EN: "Dog Walking Coordination - Dog Week"
+- SE: "Hundpromenad Koordinering - Dog Week"
+
+**Purpose:** Appears in browser tab, search results, and social media shares.
+
+---
+
+### Meta Description (Search Results Preview)
+**Character Limit:** 150-160 characters
+
+**Content:**
+- EN: "Coordinate dog walks with your family. Never miss a walk again. Simple scheduling, automatic reminders, and family accountability. Start free today."
+- SE: "Koordinera hundpromenader med din familj. Missa aldrig en promenad igen. Enkel schemaläggning, automatiska påminnelser. Börja gratis idag."
+
+**Purpose:** Appears below page title in search results.
+
+---
+
+### Social Sharing Content
+
+#### Social Media Title
+**Character Limit:** 60-70 characters
+
+**Content:**
+- EN: "Never Forget a Dog Walk Again 🐕"
+- SE: "Glöm Aldrig en Hundpromenad Igen 🐕"
+
+**Purpose:** Appears when page is shared on Facebook, Twitter, LinkedIn.
+
+---
+
+#### Social Media Description
+**Character Limit:** 120-150 characters
+
+**Content:**
+- EN: "Family dog walking made simple. Schedule walks, get reminders, and keep everyone accountable. Free to start."
+- SE: "Familjens hundpromenader enkelt. Schemalägg, få påminnelser, håll alla ansvariga. Gratis att börja."
+
+**Purpose:** Appears below title in social media share previews.
+
+---
+
+#### Social Media Image
+**Image Requirements:**
+- Dimensions: 1200x630px (Open Graph standard)
+- Format: JPG or PNG
+- File size: < 1MB
+
+**Image Path:** `/images/social/start-page-social.jpg`
+
+**Alt Text:**
+- EN: "Dog Week app showing family dog walking schedule on mobile phone"
+- SE: "Dog Week-appen visar familjens hundpromenadschema på mobiltelefon"
+
+**Purpose:** Appears as preview image when page is shared on social media.
+```
+
+---
+
+## Related Resources
+
+- **Page Specification Template:** `../../workflows/4-ux-design/templates/page-specification.template.md`
+- **Language Configuration:** `../../workflows/00-system/language-configuration-guide.md`
+- **SEO Session Log:** `../../docs/examples/wds-v6-conversion/session-logs/session-2026-01-20-seo-optimization-specifications.md`
+
+---
+
+**Meta content is essential page content, not an afterthought. Collect it during specification, not during development.** 🌐✨