# What Do AI Systems Actually See When They Read Your Page?

AI systems and search engines don't see page design, colours, or layout. They extract semantic content — text, headings, lists, images (via alt text), and links, [generally in markdown](/content/blog/html-to-markdown/index.html), and stripped of boilerplate, navigation, and visual styling. Content that depends on visual context to make sense may be misinterpreted or ignored entirely. Verifying what gets extracted requires rendering the page as AI sees it.

Content Preview in QueryBurst's individual [page reports](/content/docs/page-reports/index.html) renders this stripped-down semantic view with element type labels, so the extracted content can be inspected directly.

## Why This Matters

### What AI Systems See

When AI assistants like [ChatGPT](/content/use-cases/optimize-website-chatgpt/index.html), Perplexity, or Claude process web content, they work with:

- **Text content** - Headings, paragraphs, lists
- **Structure** - How content is organized and nested
- **Images** - Only if alt text describes them
- **Links** - Anchor text and destinations

They don't see your beautiful design, colors, or layout. This preview shows the semantic content they extract.

### Content Quality Check

Use this view to verify:

- Your key messages come through clearly
- Content flows logically without visual context
- Important information isn't lost in boilerplate
- Images have proper alt text descriptions

## Understanding the Display

### Element Type Badges

Hover over any element to see its HTML type:

| Badge    | Element      | Purpose                                   |
|----------|--------------|-------------------------------------------|
| **H1-H6**| Headings     | Document structure and hierarchy          |
| **P**    | Paragraph    | Body text content                         |
| **UL**   | Unordered list| Bullet point lists                        |
| **OL**   | Ordered list  | Numbered lists                           |
| **QUOTE**| Blockquote   | Quoted or highlighted text                |
| **CODE** | Code block   | Technical content                         |
| **TABLE**| Table        | Structured data                           |

### Image Placeholders

Images appear as placeholder cards showing:

- **File type** (JPG, PNG, SVG, WebP, etc.)
- **Alt text** - The description visible to AI
- **Source URL** - Where the image loads from

#### Alt Text Warnings

Images missing alt text display a prominent warning:

- 🔴 **NO ALT** badge
- Tooltip: "Missing alt text - invisible to AI assistants"

This is critical because AI systems cannot "see" images—they rely entirely on alt text to understand visual content.

## Best Practices

### For AI Visibility

✅ **Do** write descriptive alt text for all images  
✅ **Do** use headings to structure content logically  
✅ **Do** keep paragraphs focused and scannable  
✅ **Do** use lists for related items

❌ **Don't** rely on images to convey key information  
❌ **Don't** leave alt text empty or use "image" as alt  
❌ **Don't** put critical content in headers/footers (often stripped)

### Alt Text Guidelines

Good alt text should:

- Describe what the image shows, not just "photo" or "image"
- Include relevant context for the page topic
- Be concise but complete (typically 125 characters or less)
- Skip "image of" or "picture of" (screen readers add this)

**Examples:**

- ❌ `alt="image"`
- ❌ `alt=""` (empty)
- ✅ `alt="Bar chart showing 40% increase in organic traffic Q3 2024"`
- ✅ `alt="Product comparison table: Plan A vs Plan B features"`

### Content Structure

For optimal AI comprehension:

1. **Lead with key information** - AI may truncate long content
2. **Use descriptive headings** - Include relevant keywords
3. **Break up long paragraphs** - Easier to process and cite
4. **Use semantic markup** - Lists for lists, tables for data

## Common Issues

| Issue                   | Impact                                  | Fix                                      |
|-------------------------|-----------------------------------------|------------------------------------------|
| Missing alt text        | Images invisible to AI                  | Add descriptive alt attributes            |
| No headings             | Hard to navigate/understand structure   | Add H2-H4 section headings               |
| Wall of text            | Poor comprehension, won't be cited      | Break into paragraphs with headings      |
| Key info in images      | AI can't access it                     | Add alt text or repeat in body          |