# Ordio Validation Workflows


**Last Updated:** 2025-11-20

This document outlines automated and manual validation workflows for Ordio pages to ensure quality, performance, and compliance.

## Schema Validation

### JSON-LD Schema Validation

**Purpose:** Ensure all structured data (Schema.org markup) is valid and complete.

**Tools:**

- Online: [Google Rich Results Test](https://search.google.com/test/rich-results)
- Online: [Schema.org Validator](https://validator.schema.org/)
- Browser: Copy JSON-LD into browser console and `JSON.parse()` to check syntax
- CLI: Use `ajv` (Another JSON Schema Validator) for automated checks

**Process:**

1. **Extract schema from page:**

   ```bash
   # View rendered page and copy JSON-LD block
   curl http://localhost:8003/v2/pages/[page].php | grep -A 100 'application/ld+json'
   ```

2. **Validate syntax:**

   ```javascript
   // In browser console
   let schema = document.querySelector(
     'script[type="application/ld+json"]'
   ).textContent;
   JSON.parse(schema); // Should not throw error
   ```

3. **Validate structure:**
   - Paste into Google Rich Results Test
   - Check for required fields per schema type
   - Verify URLs are absolute and correct
   - Confirm dates are ISO 8601 format

**Common Schema Types:**

| Page Type  | Required Schemas                        | Key Fields to Verify         |
| ---------- | --------------------------------------- | ---------------------------- |
| Comparison | WebPage, Table, Product, BreadcrumbList | Table rows, Product offers   |
| Product    | WebPage, SoftwareApplication, Service   | Pricing, features, ratings   |
| Industry   | WebPage, Industry, Service              | Industry code, challenges    |
| Tools      | WebPage, HowTo, BreadcrumbList          | Steps, totalTime             |
| Templates  | WebPage, DigitalDocument, HowTo         | fileFormat, dateModified     |
| Downloads  | WebPage, DigitalDocument                | fileFormat, author           |
| Webinars   | WebPage, Event, BreadcrumbList          | startDate, endDate, timezone |
| Pillars    | WebPage, Article, FAQPage               | FAQ questions/answers        |
| Static     | WebPage, (varies)                       | Appropriate for page type    |
| Homepage   | WebSite, Organization, WebPage          | Organization details         |

**Automated Check (Future):**

```bash
# Create Node script to validate all schemas
node scripts/validate-schemas.js v2/pages/
```

## Link Checking

### Internal Link Validation

**Purpose:** Ensure all internal links are functional and point to correct pages.

**Tools:**

- CLI: `linkchecker` (Python package)
- Online: [W3C Link Checker](https://validator.w3.org/checklink)
- Manual: Browser DevTools Network tab

**Process:**

1. **Check single page:**

   ```bash
   linkchecker http://localhost:8003/v2/pages/[page].php
   ```

2. **Check all pages:**

   ```bash
   linkchecker --recursion-level=2 http://localhost:8003/
   ```

3. **Check specific link types:**
   - Navigation links (header, footer)
   - CTA buttons
   - Internal content links
   - Carousel links
   - FAQ links

**Common Link Issues:**

- Broken relative paths (`../` errors)
- Missing trailing slashes
- Incorrect slugs after page renames
- Dead links to removed pages

**Manual Checklist:**

- [ ] Header navigation links work
- [ ] Footer links work
- [ ] Primary CTA links to correct page
- [ ] Secondary CTAs functional
- [ ] Carousel links (if present) work
- [ ] Internal content links valid
- [ ] Breadcrumb links functional

### External Link Validation

**Purpose:** Verify external links (competitor sites, resources) are functional.

**Process:**

1. **Identify external links:**

   ```bash
   grep -r 'href="http' v2/pages/ | grep -v 'ordio.com'
   ```

2. **Check status:**

   ```bash
   curl -I [external-url] # Should return 200 or 301/302
   ```

3. **Monitor regularly:**
   - External links can break over time
   - Check quarterly or after competitor site changes

## Performance Audits

### PageSpeed Insights

**Purpose:** Measure Core Web Vitals and identify performance bottlenecks.

**Tools:**

- Online: [PageSpeed Insights](https://pagespeed.web.dev/)
- CLI: Lighthouse CI
- Browser: Chrome DevTools Lighthouse

**Targets:**

- **LCP (Largest Contentful Paint):** < 2.5s
- **FID (First Input Delay):** < 100ms
- **CLS (Cumulative Layout Shift):** < 0.1
- **PageSpeed Score:** > 90 (desktop), > 80 (mobile)

**Process:**

1. **Run PageSpeed test:**

   ```bash
   # Using Lighthouse CLI
   lighthouse http://localhost:8003/v2/pages/[page].php --output html --output-path ./reports/[page]-lighthouse.html
   ```

2. **Analyze results:**

   - Identify LCP element (usually hero image)
   - Check for layout shifts (missing dimensions)
   - Review render-blocking resources
   - Verify image optimization (WebP, srcset)

3. **Common fixes:**
   - Preload hero images with `fetchpriority="high"`
   - Add explicit `width` and `height` to images
   - Defer non-critical CSS/JS
   - Optimize image sizes and formats
   - Minimize above-fold content

**Automated Check (Future):**

```bash
# Run Lighthouse CI on all page types
npm run lighthouse-ci
```

### Image Optimization Check

**Purpose:** Ensure all images are optimized (WebP, srcset, dimensions).

**Process:**

1. **Check image formats:**

   ```bash
   # Find non-WebP images
   find v2/img/ -type f ! -name "*.webp" ! -name "*.svg"
   ```

2. **Verify srcset attributes:**

   ```bash
   # Check for missing srcset
   grep -r '<img' v2/pages/ | grep -v 'srcset'
   ```

3. **Check explicit dimensions:**
   ```bash
   # Find images without width/height
   grep -r '<img' v2/pages/ | grep -v 'width=' | grep -v 'height='
   ```

**Image Checklist:**

- [ ] All images are WebP (except SVG logos)
- [ ] Hero images have `srcset` with 160w, 320w, 640w, 1280w
- [ ] All images have explicit `width` and `height`
- [ ] Hero images have `fetchpriority="high"`
- [ ] Below-fold images have `loading="lazy"`
- [ ] All images have descriptive `alt` attributes

## Accessibility Audits

### WCAG Compliance Check

**Purpose:** Ensure pages meet WCAG AA accessibility standards.

**Tools:**

- Browser: axe DevTools extension
- Online: [WAVE Web Accessibility Evaluation Tool](https://wave.webaim.org/)
- CLI: pa11y

**Process:**

1. **Run axe scan:**

   - Install axe DevTools browser extension
   - Open page in browser
   - Run axe scan
   - Fix critical and serious issues

2. **Check color contrast:**

   ```bash
   # Use WAVE or axe to check contrast ratios
   # Text should be 4.5:1 minimum (WCAG AA)
   ```

3. **Keyboard navigation test:**
   - Tab through all interactive elements
   - Verify focus states visible
   - Ensure logical tab order
   - Test form inputs and buttons

**Accessibility Checklist:**

- [ ] All images have descriptive `alt` attributes
- [ ] Headings follow hierarchy (H1 → H2 → H3)
- [ ] Color contrast meets WCAG AA (4.5:1 for text)
- [ ] Focus states visible on all interactive elements
- [ ] Keyboard navigation works (Tab, Enter, Space)
- [ ] Forms have labels or `aria-label`
- [ ] Touch targets minimum 44x44px
- [ ] No flashing or auto-playing content
- [ ] Screen reader friendly (test with NVDA/JAWS)

## Content Quality Checks

### Du Tone Verification

**Purpose:** Ensure all copy uses informal "du" pronouns, not formal "Sie".

**Process:**

1. **Search for formal language:**

   ```bash
   # Find instances of "Sie" (formal you)
   grep -ri '\bSie\b' v2/pages/[page].php

   # Find formal verb forms
   grep -ri '\bkönnen Sie\b\|\bmüssen Sie\b\|\bsollten Sie\b' v2/pages/
   ```

2. **Verify du tone:**
   - "du" instead of "Sie"
   - "kannst" instead of "können Sie"
   - "musst" instead of "müssen Sie"
   - "solltest" instead of "sollten Sie"

**Du Tone Checklist:**

- [ ] All pronouns are "du" (not "Sie")
- [ ] Verb forms match du tone
- [ ] Copy feels conversational and friendly
- [ ] No overly formal language

### Ordio Mention Check

**Purpose:** Ensure Ordio is mentioned naturally once per major section (not forced).

**Process:**

1. **Count Ordio mentions:**

   ```bash
   # Count mentions per section
   grep -o 'Ordio' v2/pages/[page].php | wc -l
   ```

2. **Review context:**
   - Hero: natural mention (e.g., "Mit Ordio erfasst du...")
   - Features/Benefits: once per section
   - FAQ: 1-2 mentions across all answers
   - CTA: implicit (buttons link to Ordio)

**Ordio Mention Guidelines:**

- Once per major section (hero, benefits, comparison, FAQ)
- Natural integration (not "Mit Ordio kannst du..." every paragraph)
- Implicit in CTAs (no need to say "Ordio" in button text)

### Competitor Praise Check

**Purpose:** Ensure no competitor praise or compliments.

**Process:**

1. **Search for positive competitor language:**

   ```bash
   # Find potential praise words
   grep -ri 'gut\|toll\|super\|hervorragend\|exzellent' v2/pages/compare_*.php
   ```

2. **Review comparison copy:**
   - Position Ordio as smarter choice
   - Highlight Ordio advantages
   - Neutral or factual competitor descriptions
   - No compliments or praise

**Competitor Language Guidelines:**

- Neutral: "[Competitor] bietet X, aber..."
- Factual: "[Competitor] hat Feature Y."
- Avoid: "[Competitor] ist gut, aber Ordio ist besser."
- Prefer: "Ordio macht X smarter/einfacher/schneller."

## SEO Checks

### Meta Tags Verification

**Purpose:** Ensure all meta tags are complete and optimized.

**Process:**

1. **Check required meta tags:**

   ```bash
   # Verify presence of key meta tags
   grep -A 5 '<head>' v2/pages/[page].php | grep 'title\|description\|canonical'
   ```

2. **Validate content:**
   - Title: < 60 characters, includes year, keyword, "Ordio"
   - Description: 155-160 characters, du tone, benefit-driven
   - Canonical: absolute URL, correct slug
   - OG tags: complete (title, description, url, image)
   - Twitter tags: complete (card, title, description, image)

**Meta Tags Checklist:**

- [ ] `<title>` present and optimized (< 60 chars)
- [ ] `<meta name="description">` present (155-160 chars)
- [ ] `<link rel="canonical">` present (absolute URL)
- [ ] Open Graph tags complete (og:title, og:description, og:url, og:image)
- [ ] Twitter Card tags complete (twitter:card, twitter:title, twitter:description, twitter:image)
- [ ] Year current in title/description (2025)
- [ ] URLs match page slug

### Keyword Optimization

**Purpose:** Ensure target keywords are present and optimized.

**Process:**

1. **Identify target keywords:**

   - Primary keyword in title
   - Primary keyword in first paragraph
   - Secondary keywords throughout content

2. **Check keyword density:**
   - Not too high (keyword stuffing)
   - Not too low (missing focus)
   - Natural integration

**Keyword Guidelines:**

- Primary keyword in title, H1, first paragraph
- Secondary keywords in H2s, content
- Natural language (not forced)
- Semantic variations (synonyms, related terms)

## Validation Workflow Summary

### Pre-Deployment Checklist

Before marking any page complete, run through:

1. **Schema Validation**

   - [ ] JSON-LD syntax valid (no parse errors)
   - [ ] Required schema types present
   - [ ] All required fields populated
   - [ ] URLs absolute and correct

2. **Link Checking**

   - [ ] Internal links functional
   - [ ] CTA buttons link correctly
   - [ ] Carousel links work (if present)
   - [ ] External links valid (if present)

3. **Performance**

   - [ ] Hero image preloaded
   - [ ] Images have srcset, dimensions
   - [ ] No layout shifts (CLS < 0.1)
   - [ ] PageSpeed score > 90 (desktop)

4. **Accessibility**

   - [ ] All images have alt attributes
   - [ ] Color contrast meets WCAG AA
   - [ ] Keyboard navigation works
   - [ ] Focus states visible

5. **Content Quality**

   - [ ] Du tone throughout
   - [ ] Ordio mentioned naturally (once per section)
   - [ ] No competitor praise
   - [ ] Copy concise and clear

6. **SEO**
   - [ ] Meta tags complete and optimized
   - [ ] Schema markup valid
   - [ ] Keywords present and natural
   - [ ] Year current (2025)

### Automated Validation (Future)

**Goal:** Create scripts to automate validation checks.

**Potential scripts:**

- `validate-schemas.js` – Check all JSON-LD schemas
- `check-links.js` – Verify internal/external links
- `audit-performance.js` – Run Lighthouse on all pages
- `check-accessibility.js` – Run pa11y on all pages
- `verify-content.js` – Check du tone, Ordio mentions, competitor language

**Run all checks:**

```bash
npm run validate-all
```

This would run all validation scripts and generate a report with pass/fail for each page type.