{"instruction": "How do I implement SEO-friendly breadcrumbs?", "output": "# SEO-Friendly Breadcrumbs Implementation\n\n## HTML Structure\n```html\n\n```\n\n## JSON-LD Schema (Preferred)\n```html\n\n```\n\n## CSS Styling\n```css\n.breadcrumb ol { display: flex; list-style: none; padding: 0; }\n.breadcrumb li:not(:last-child)::after { content: \"\u203a\"; margin: 0 0.5rem; color: #666; }\n.breadcrumb a { color: #0066cc; text-decoration: none; }\n.breadcrumb li:last-child { color: #333; font-weight: 500; }\n```\n\n## Best Practices\n1. Include on all pages except homepage\n2. Use hierarchical structure matching site navigation\n3. Make all levels clickable except current page\n4. Keep breadcrumb text concise\n5. Always include structured data for rich snippets", "metadata": {"topic": "breadcrumbs", "type": "implementation"}} {"instruction": "What semantic HTML elements should I use for SEO?", "output": "# Semantic HTML for SEO\n\n## Document Structure\n```html\n\n\n\n \n \n Page Title | Brand Name\n \n \n\n\n
\n \n
\n \n
\n
\n
\n

Single H1 Per Page

\n \n
\n
\n

Section Heading

\n

Content...

\n
\n
\n \n
\n \n \n\n\n```\n\n## Key Semantic Elements\n| Element | Purpose | SEO Impact |\n|---------|---------|------------|\n| `
` | Page/section header | Defines main branding area |\n| `