# Comparison Pages Quick Reference **Last Updated:** 2025-11-20 Quick lookup guide with copy-paste code snippets, templates, and patterns for creating comparison pages. ## Table of Contents 1. [Template Selection](#template-selection) 2. [Meta Tags Templates](#meta-tags-templates) 3. [Schema Templates](#schema-templates) 4. [Image Path Patterns](#image-path-patterns) 5. [Component Includes](#component-includes) 6. [Common Code Snippets](#common-code-snippets) 7. [Alpine.js Patterns](#alpinejs-patterns) ## Template Selection ### Available Templates - **`compare_template_details.php`** - For pages with competitor Details section - **`compare_template_nodetails.php`** - For pages without competitor Details section ### When to Use Each Template **Use `compare_template_details.php` when:** - Competitor has notable features/integrations to showcase - Competitor has special characteristics or differentiators - You want to showcase competitor capabilities in detail - Example: Clockin (has integrations like DATEV, features like digital forms) **Use `compare_template_nodetails.php` when:** - Competitor is well-known and doesn't need feature breakdown - Competitor details are less relevant to the comparison - You want simpler, cleaner competitor column - Example: Personio (well-known HR software) ### Quick Copy Command ```bash # For pages with Details section: cp v2/pages/compare_template_details.php v2/pages/compare_{competitor}.php # OR for pages without Details section: cp v2/pages/compare_template_nodetails.php v2/pages/compare_{competitor}.php ``` ## Meta Tags Templates ### Complete Head Section ```php {Competitor} Alternativen: Vergleich & Bewertung 2025 - Ordio ``` ## Schema Templates ### Complete Schema Graph ```php ``` ## Image Path Patterns ### Hero Logo (Comparison Page) ```php {Competitor} ``` ### Comparison Column Logo ```php {competitor} ``` ### Carousel Logo ```php {Competitor} Logo ``` ## Component Includes ### Header ```php ``` ### CTA Buttons (Hero) ```php ``` ### CTA Buttons (Section) ```php ``` ### Ordio Comparison Content ```php ``` ### Comparison Carousel ```php ``` ### Footer ```php ``` ### Lead Capture Popup ```php ``` ## Common Code Snippets ### Hero Section Heading ```php

{Competitor} Alternativen: Vergleich & Bewertung 2025

``` ### Comparison Section Heading ```php

Ordio vs. {Competitor}
Funktionsvergleich im Überblick

``` ### Star Rating Display ```php
4.9 ``` ### Rating Distribution Bar ```php
5★
53
``` ### FAQ Item ```php
{Question}

{Answer}

``` ### Comparison Grid Container ```php
``` ### Pricing Card ```php
{Plan Name}

{Description}

{Price}

{Period}

``` ## Alpine.js Patterns ### Height Synchronization ```php
``` **In component:** ```php
``` ### Mobile Carousel ```php
``` ### Scroll-Based Timer ```php
00:00
``` ## Copy Patterns ### Competitor Intro ``` {Competitor} ist eine {Category}-Software für {Primary Use Case}. {Neutral description of what it does}. Viele Unternehmen suchen nach {Competitor} Alternativen, die {Additional Need X} und {Additional Need Y} bieten. ``` ### Ordio Differentiation ``` Ordio bietet {Unique Value Prop} und richtet sich speziell an {Target Audience}. Mit {Feature X}, {Feature Y} und {Feature Z} löst du {Problem} effizienter als {Competitor}. ``` ### Feature Comparison ``` Während {Competitor} {X} bietet, geht Ordio weiter: {Y + Z}. Das bedeutet für dich: {Benefit}. ``` ### FAQ Answer Pattern ``` {Direct answer}. {Competitor} {neutral fact}. Ordio hingegen fokussiert auf {Y}, weil {Reason}. So kannst du {Outcome} ohne {Pain Point}. ``` ## Validation Quick Checks ### Schema Validation 1. Copy JSON-LD from page source 2. Paste into [Google Rich Results Test](https://search.google.com/test/rich-results) 3. Verify no errors 4. Check all required fields present ### Image Validation ```bash # Check if all variants exist ls -la v2/img/alternativen/{competitor}-*.webp # Verify image dimensions file v2/img/alternativen/{competitor}-vergleich-logo-160w.webp ``` ### Performance Check 1. Open page in Chrome DevTools 2. Run Lighthouse audit 3. Check LCP < 2.5s 4. Verify CLS < 0.1 5. Check image preload in Network tab ### Accessibility Check 1. Run axe DevTools extension 2. Check color contrast (WCAG AA) 3. Test keyboard navigation 4. Verify screen reader compatibility ## Common Replacements ### Competitor Name Placeholders - `{Competitor}` → Full name (e.g., "awork") - `{competitor}` → Lowercase slug (e.g., "awork") - `{competitor-slug}` → Hyphenated slug (e.g., "awork") ### URL Patterns - Page URL: `/alternativen/{competitor}-vergleich` - Image path: `/v2/img/alternativen/{competitor}-vergleich-logo-160w.webp` - Schema ID: `https://www.ordio.com/alternativen/{competitor}-vergleich#{type}` ### Date Patterns - Published: `ordio_get_page_published_iso('2025-01-01T00:00:00+01:00')` - Modified: `ordio_get_page_last_modified_iso()` ## Troubleshooting Quick Fixes ### Images Not Loading ```php // Check path is correct echo $_SERVER['DOCUMENT_ROOT'] . '/v2/img/alternativen/{competitor}-vergleich-logo-160w.webp'; // Verify file exists if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/v2/img/alternativen/{competitor}-vergleich-logo-160w.webp')) { echo 'File exists'; } ``` ### Schema Validation Errors ```php // Validate JSON syntax $schema = json_decode($schemaJson); if (json_last_error() !== JSON_ERROR_NONE) { echo 'JSON Error: ' . json_last_error_msg(); } ``` ### Column Height Mismatch ```php // Ensure Alpine.js is loaded // Check browser console for Alpine errors // Verify height-changed events are dispatched ```