HowTo Schema for Step-by-Step Guides

HowTo Schema for Step-by-Step Guides

Add HowTo structured data to display step-by-step instructions directly in Google search results. HowTo rich results are expandable and show individual steps, tools needed, total time, and cost — making your tutorials highly visible and actionable.

Complete HowTo Schema

const howToSchema = {
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Set Up WordPress on a VPS Server",
  "description": "Step-by-step guide to install and configure WordPress on a VPS server with Nginx, PHP 8.2, and MySQL. Includes SSL setup and performance optimization.",
  "image": "https://yoursite.com/images/wordpress-vps-setup.jpg",
  "totalTime": "PT45M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "5"
  },
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "VPS Server (DigitalOcean, Vultr, or Linode)"
    },
    {
      "@type": "HowToSupply",
      "name": "Domain Name"
    },
    {
      "@type": "HowToSupply",
      "name": "SSH Client (Terminal or PuTTY)"
    }
  ],
  "tool": [
    {
      "@type": "HowToTool",
      "name": "SSH Terminal"
    },
    {
      "@type": "HowToTool",
      "name": "Text Editor (nano or vim)"
    },
    {
      "@type": "HowToTool",
      "name": "Web Browser"
    }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "name": "Provision Your VPS",
      "text": "Create a new VPS instance with Ubuntu 22.04 LTS. Choose at least 1GB RAM and 25GB SSD. Note the server IP address provided after creation.",
      "url": "https://yoursite.com/guides/wordpress-vps#provision",
      "image": "https://yoursite.com/images/step1-create-vps.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Connect via SSH and Update System",
      "text": "Open your terminal and connect with: ssh root@your-server-ip. Then update packages: apt update && apt upgrade -y. Create a new sudo user for security.",
      "url": "https://yoursite.com/guides/wordpress-vps#ssh-connect",
      "image": "https://yoursite.com/images/step2-ssh-connect.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Install Nginx Web Server",
      "text": "Install Nginx with: apt install nginx -y. Start the service and enable it to run at boot: systemctl start nginx && systemctl enable nginx. Verify by visiting your server IP in a browser.",
      "url": "https://yoursite.com/guides/wordpress-vps#install-nginx",
      "image": "https://yoursite.com/images/step3-nginx.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Install PHP 8.2 and MySQL",
      "text": "Install PHP and required extensions: apt install php8.2-fpm php8.2-mysql php8.2-xml php8.2-mbstring php8.2-curl php8.2-gd php8.2-zip. Install MySQL: apt install mysql-server. Run mysql_secure_installation to set up the root password.",
      "url": "https://yoursite.com/guides/wordpress-vps#install-php-mysql"
    },
    {
      "@type": "HowToStep",
      "name": "Create WordPress Database",
      "text": "Log into MySQL: mysql -u root -p. Create database and user: CREATE DATABASE wordpress; CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'strong_password'; GRANT ALL PRIVILEGES ON wordpress.* TO 'wpuser'@'localhost'; FLUSH PRIVILEGES;",
      "url": "https://yoursite.com/guides/wordpress-vps#create-database"
    },
    {
      "@type": "HowToStep",
      "name": "Download and Configure WordPress",
      "text": "Download WordPress to your web root: cd /var/www && wget https://wordpress.org/latest.tar.gz && tar -xzf latest.tar.gz. Copy wp-config-sample.php to wp-config.php and update database credentials.",
      "url": "https://yoursite.com/guides/wordpress-vps#install-wordpress"
    },
    {
      "@type": "HowToStep",
      "name": "Configure Nginx for WordPress",
      "text": "Create an Nginx server block configuration file for your domain with PHP processing, permalink support, and security headers. Set proper file permissions: chown -R www-data:www-data /var/www/wordpress.",
      "url": "https://yoursite.com/guides/wordpress-vps#configure-nginx"
    },
    {
      "@type": "HowToStep",
      "name": "Install SSL Certificate with Let's Encrypt",
      "text": "Install Certbot: apt install certbot python3-certbot-nginx. Obtain SSL: certbot --nginx -d yourdomain.com -d www.yourdomain.com. Certbot auto-configures Nginx for HTTPS and sets up auto-renewal.",
      "url": "https://yoursite.com/guides/wordpress-vps#ssl-setup"
    },
    {
      "@type": "HowToStep",
      "name": "Complete WordPress Installation",
      "text": "Visit https://yourdomain.com in your browser. Follow the WordPress installation wizard: choose language, set site title, create admin username and password. Your WordPress site is now live!",
      "url": "https://yoursite.com/guides/wordpress-vps#complete-setup",
      "image": "https://yoursite.com/images/step8-wp-install.jpg"
    }
  ]
};

Simple HowTo (No Tools/Supplies)

// For guides that don't require physical tools or materials
const simpleHowTo = {
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Add Schema Markup to Your Website",
  "description": "Learn how to add JSON-LD structured data to any website in 4 simple steps to improve your Google search appearance.",
  "totalTime": "PT10M",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Choose Your Schema Type",
      "text": "Visit schema.org and choose the schema type that matches your content. Common types include Article, Product, LocalBusiness, FAQ, HowTo, and Recipe."
    },
    {
      "@type": "HowToStep",
      "name": "Generate the JSON-LD Code",
      "text": "Use a schema generator tool or write the JSON-LD manually. Fill in all required properties and as many recommended properties as possible."
    },
    {
      "@type": "HowToStep",
      "name": "Add Schema to Your Page",
      "text": "Place the JSON-LD script tag in the <head> section of your page or just before the closing </body> tag. Use type='application/ld+json' attribute."
    },
    {
      "@type": "HowToStep",
      "name": "Test and Validate",
      "text": "Use Google Rich Results Test (search.google.com/test/rich-results) to validate your markup. Fix any errors or warnings before publishing."
    }
  ]
};

HowTo with Sections (Grouped Steps)

// For complex guides with multiple sections
const howToWithSections = {
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Optimize WordPress Performance",
  "description": "Complete guide to speeding up your WordPress site covering caching, image optimization, database cleanup, and Core Web Vitals improvements.",
  "totalTime": "PT2H",
  "step": [
    {
      "@type": "HowToSection",
      "name": "Server Optimization",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "name": "Enable PHP OPcache",
          "text": "Edit php.ini and set opcache.enable=1, opcache.memory_consumption=128, opcache.max_accelerated_files=10000."
        },
        {
          "@type": "HowToStep",
          "name": "Configure Object Caching",
          "text": "Install Redis: apt install redis-server. Install a Redis object cache plugin in WordPress and enable it."
        }
      ]
    },
    {
      "@type": "HowToSection",
      "name": "Frontend Optimization",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "name": "Optimize Images",
          "text": "Install an image optimization plugin. Convert images to WebP format and enable lazy loading for below-the-fold images."
        },
        {
          "@type": "HowToStep",
          "name": "Minify CSS and JavaScript",
          "text": "Use a caching plugin to minify and combine CSS/JS files. Defer non-critical JavaScript and inline critical CSS."
        }
      ]
    }
  ]
};

WordPress Auto-Extraction

/**
 * Auto-extract HowTo schema from WordPress post content
 * Detects numbered lists or headings starting with "Step"
 */
function wp_howto_schema_auto() {
    if ( ! is_singular( 'post' ) ) {
        return;
    }

    global $post;
    $content = $post->post_content;

    // Match headings that contain "Step" followed by a number
    preg_match_all(
        '/<h[23][^>]*>.*?Step\s*(\d+)[:\s]*(.+?)<\/h[23]>/i',
        $content,
        $headings,
        PREG_SET_ORDER
    );

    if ( empty( $headings ) ) {
        return;
    }

    $steps = [];
    foreach ( $headings as $heading ) {
        // Get content between this heading and the next
        $pos     = strpos( $content, $heading[0] );
        $after   = substr( $content, $pos + strlen( $heading[0] ) );
        $next_h  = preg_match( '/<h[23]/', $after, $m, PREG_OFFSET_CAPTURE );
        $text    = $next_h ? substr( $after, 0, $m[0][1] ) : $after;

        $steps[] = [
            '@type' => 'HowToStep',
            'name'  => wp_strip_all_tags( $heading[2] ),
            'text'  => wp_trim_words( wp_strip_all_tags( $text ), 80 ),
        ];
    }

    $schema = [
        '@context'    => 'https://schema.org',
        '@type'       => 'HowTo',
        'name'        => get_the_title(),
        'description' => wp_trim_words( get_the_excerpt(), 30 ),
        'image'       => get_the_post_thumbnail_url( $post->ID, 'full' ),
        'step'        => $steps,
    ];

    echo '<script type="application/ld+json">'
        . wp_json_encode( $schema, JSON_UNESCAPED_SLASHES )
        . '</script>' . "\n";
}
add_action( 'wp_head', 'wp_howto_schema_auto' );

Best Practices

• Include totalTime — Google displays estimated time in rich results
• Add images to key steps — visual steps get preferred rich result display
• Use HowToSection for complex guides with natural groupings
• Include supply and tool when applicable — adds detail to rich results
• Add estimatedCost for paid procedures (server costs, materials, etc.)
• Keep step text concise — 1-2 sentences per step is ideal for rich results
• Link steps to page sections with url property for deep linking

Features

• Expandable Steps in SERP: Users can preview steps without clicking through
• Visual Rich Results: Step images display in Google search
• Time Estimate: Total duration shown in search results
• Cost Information: Display estimated cost for the procedure
• Grouped Sections: Organize complex guides into logical sections
• Auto-Extraction: WordPress function auto-detects steps from headings