Media & SEO Guide

HTML docs support rich media embeds for better engagement and SEO. Below are examples:

Adding Images

Use standard HTML image tags:

<img src="/images/product.jpg" alt="Product Demo" width="600" height="400">

Best practices:

• Always include alt text for accessibility and SEO
• Use descriptive filenames (e.g., quixess-dashboard-demo.jpg)
• Optimize image size (compress to <500KB)
• Use modern formats: WebP, AVIF

Embedding Videos

Embed YouTube videos with custom sizing:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/VIDEO_ID" title="Your Video Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

For Vimeo:

<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="100%" height="400" frameborder="0" allowfullscreen></iframe>

SEO Best Practices

Meta Tags (in Next.js Head)

• <title> - Page title (auto-pulled from frontmatter)
• <meta name="description"> - Page description
• <meta property="og:image"> - Social sharing image
• <meta name="keywords"> - Target keywords

Structured Data (Schema.org)

For documentation:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Getting Started with Quixess",
  "description": "Learn how to set up Quixess",
  "author": {
    "@type": "Organization",
    "name": "Quixess"
  }
}
</script>

HTML Semantics

• Use <h1> once per page (main title)
• Use <h2>, <h3> for hierarchy
• Use <strong> for important terms
• Use <em> for emphasis
• Use semantic HTML5 elements: <article>, <section>, etc.

Create Better Docs

Rich HTML docs with proper structure:

Format	SEO Benefit	Engagement
Plain text	Poor	Low
Markdown	Good	Medium
HTML + Media	Excellent	High

Next Steps

Start adding:

1. Product screenshots
2. Demo videos
3. Comparison tables
4. Feature highlights with icons
5. Call-to-action buttons