# Comparison Pages Structure Reference **Last Updated:** 2025-11-20 Complete breakdown of comparison page structure, sections, components, and data dependencies for creating and maintaining comparison pages. ## Table of Contents 1. [Page Structure Overview](#page-structure-overview) 2. [Template Selection](#template-selection) 3. [Head Section](#head-section) 4. [Body Sections](#body-sections) 5. [Component Dependencies](#component-dependencies) 6. [Data File Structure](#data-file-structure) 7. [Schema Structure](#schema-structure) 8. [Image Requirements](#image-requirements) ## Template Selection Comparison pages use one of two templates: - **`compare_template_details.php`** - For pages with competitor Details section (expandable features/integrations) - **`compare_template_nodetails.php`** - For pages without competitor Details section (invisible placeholder for height alignment) See `docs/guides/COMPARISON_PAGES_TEMPLATE_USAGE.md` for detailed template selection criteria and usage instructions. ## Page Structure Overview Comparison pages follow a standardized structure optimized for SEO, performance, and user experience: ``` ``` ## Head Section ### Required Meta Tags ```php {Competitor} Alternativen: Vergleich & Bewertung 2025 - Ordio ``` ### Canonical URL ```php ``` ### Open Graph Tags ```php ``` ### Twitter Card Tags ```php ``` ### CSS Includes ```php ``` ### Image Preload ```php ``` ## Body Sections ### Header Include ```php ``` ### Hero Section **Structure:** ```php

{Competitor} Alternativen: Vergleich & Bewertung 2025

[Competitor description and positioning]

``` **Competitor Logo Image:** ```php {Competitor} ``` ### Company Logos Section **Structure:** ```php
Täglich genutzt von +1.700 Unternehmen
``` ### Comparison Section **Structure:** ```php
Vergleich

Ordio vs. {Competitor}
Funktionsvergleich im Überblick

``` **Key Elements:** - **Ordio Column:** Uses `ordio-card` class, includes `ordio_comparison_content.php` - **Competitor Column:** Uses `personio-card` class (legacy naming), contains competitor-specific content - **Height Synchronization:** Uses Alpine.js `x-data` and `@height-changed` event to sync column heights ### Competitor Column Structure Differences **Details Template (`compare_template_details.php`):** 1. Product Description 2. **Expandable Details Section** (lines ~938-1030+): - Button: "{Competitor} Details" - Alpine.js `x-data="{ open: false }"` for expand/collapse - Features list ("Dazu zählen") - Integrations list ("Schnittstellen") - Special characteristics ("Das macht [Competitor] besonders") - Dispatches height changes for column synchronization 3. Star Rating Distribution 4. Ratings Section 5. Pricing Section **No Details Template (`compare_template_nodetails.php`):** 1. Product Description 2. **Invisible Placeholder** (lines ~920-923): ```html ``` - Maintains height alignment with Ordio Details section - No competitor details shown 3. Star Rating Distribution 4. Ratings Section 5. Pricing Section ### Ordio Verteiler Section **Structure:** ```php
und vieles mehr…

Das macht Ordio besonders

``` ### In bester Gesellschaft Section **Structure:** ```php
Unendliche Möglichkeiten

Ordio im Einsatz: Erfolgreiche Unternehmen, die gewechselt haben

``` ### Comparison Carousel **Include:** ```php ``` **Functionality:** - Automatically filters out current competitor - Displays other comparison pages in carousel - Auto-rotates every 6 seconds - Responsive: 4 cards desktop, 2 tablet, 1 mobile - Uses Alpine.js for interactivity ### FAQs Section **Structure:** ```php

Häufige Fragen zu {Competitor} & [Category] Alternativen 2025

{Question}

{Answer}

``` ### Footer Include ```php ``` ### Lead Capture Popup ```php ``` ## Component Dependencies ### ordio_comparison_content.php **Location:** `v2/components/ordio_comparison_content.php` **Purpose:** Renders dynamic Ordio content for comparison pages **Data Source:** `v2/data/ordio_comparison_data.php` **Structure:** - Product Description - Collapsible Details Section (Features, Target Audience, Pricing Info) - Uses Alpine.js for accordion functionality - Dispatches `height-changed` event for column synchronization **Usage:** ```php ``` ### compare_carousel.php **Location:** `v2/base/compare_carousel.php` **Purpose:** Displays rotating carousel of other comparison pages **Data Source:** `v2/data/tools_data.php` **Functionality:** - Filters out current competitor automatically - Auto-rotates every 6 seconds - Responsive breakpoints (4/2/1 cards) - Navigation arrows and pagination dots - Uses Alpine.js for state management **Usage:** ```php ``` ## Data File Structure ### tools_data.php **Location:** `v2/data/tools_data.php` **Structure:** ```php $toolsData = [ [ 'name' => 'Competitor Name', 'slug' => 'competitor-slug', 'description' => 'Short description', 'logo' => 'competitor-logo.webp', 'tags' => ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5'], 'filter_categories' => ['Category1', 'Category2'] ], // More competitors... ]; ``` **Required Fields:** - `name`: Display name - `slug`: URL slug (used for filtering and URLs) - `description`: Short description (used in carousel) - `logo`: Logo filename (without path) - `tags`: Array of 4-5 tags for display - `filter_categories`: Array for filtering functionality ### ordio_comparison_data.php **Location:** `v2/data/ordio_comparison_data.php` **Structure:** ```php $ordio_data = [ 'description' => [ 'title' => 'Was ist Ordio?', 'content' => '...' ], 'details' => [ 'title' => 'Ordio Details', 'sections' => [ 'features' => [ 'title' => '...', 'description' => '...', 'features' => ['Feature 1', 'Feature 2', ...] ], 'target_audience' => [ 'title' => '...', 'content' => '...' ], 'pricing_info' => [ 'title' => '...', 'content' => '...' ] ] ], 'pricing' => [ 'title' => 'Preise', 'plans' => [ 'starter' => [...], 'plus' => [...], 'pro' => [...] ] ] ]; ``` ## Schema Structure ### Complete Schema Graph Comparison pages include multiple schema types in a `@graph` array: 1. **WebPage Schema** 2. **Article Schema** 3. **Table Schema** (comparison table) 4. **SoftwareApplication Schema** (competitor) 5. **BreadcrumbList Schema** 6. **FAQPage Schema** 7. **Product Schema** (Ordio) See `docs/guides/COMPARISON_PAGES_ai/QUICK_REFERENCE.md` for complete schema templates. ## Image Requirements ### Logo Variants Required **Regular Logos** (for carousel/cards): - `{competitor}-logo-64w.webp` - `{competitor}-logo-80w.webp` - `{competitor}-logo-128w.webp` - `{competitor}-logo-160w.webp` **Comparison Logos** (for hero): - `{competitor}-vergleich-logo-160w.webp` - `{competitor}-vergleich-logo-320w.webp` ### Generation Script ```bash node scripts/generate_responsive_logos.js ``` **Requirements:** - Source images: `{competitor}-logo.webp` and `{competitor}-vergleich-logo.webp` - Location: `v2/img/alternativen/` - Format: WebP - Script uses `sharp` for resizing and optimization ### Image Usage Patterns **Hero Logo:** ```php {Competitor} ``` **Carousel Logo:** ```php {Competitor} Logo ``` ## Alpine.js Usage ### Height Synchronization ```php
``` **Purpose:** Synchronizes column heights in comparison grid **Implementation:** Components dispatch `height-changed` events, parent listens and adjusts ### Mobile Carousel ```php
``` ### FAQ Accordion Uses native HTML `
` element with Alpine.js for enhanced styling and animations. ## CSS Classes Reference ### Comparison-Specific Classes From `comparison-pages.css`: - `.comparison-grid` - Main comparison grid container - `.comparison-card` - Individual comparison card - `.ordio-card` - Ordio column styling - `.personio-card` - Competitor column styling (legacy naming) - `.rating-bar-container` - Rating bar wrapper - `.rating-bar-bg` - Rating bar background - `.rating-bar-fill` - Rating bar fill - `.star-svg` - Star icon (filled) - `.checkmark-container` - Checkmark list container - `.checkmark-icon` - Checkmark icon styling ### Utility Classes - `.comparison-section` - Section wrapper - `.rating-row` - Rating distribution row - `.star-label` - Star rating label - `.count-label` - Rating count label ## Performance Considerations ### Critical Rendering Path 1. **Preload LCP image** (competitor logo) 2. **Defer CSS** using `media="print"` trick 3. **Lazy load** below-fold images 4. **Optimize images** (WebP, responsive variants) ### Layout Stability - **Explicit dimensions** on all images (prevents CLS) - **Fixed heights** for carousel cards - **Height synchronization** for comparison columns ### JavaScript Optimization - **Alpine.js** loaded via CDN (deferred) - **AOS animations** deferred with `requestIdleCallback` - **Carousel auto-rotation** stops on user interaction ## Accessibility Features - **Semantic HTML** (`
`, `
`, proper headings) - **ARIA labels** on interactive elements - **Keyboard navigation** support - **Screen reader** friendly content - **Touch targets** minimum 44x44px - **Color contrast** meets WCAG AA standards ## Browser Support - Modern browsers (Chrome, Firefox, Safari, Edge) - Mobile browsers (iOS Safari, Chrome Mobile) - Graceful degradation for older browsers - Progressive enhancement approach