WooCommerce SEO audit: the issues built into WooCommerce — and how to fix them

Audit your XML sitemap and internal linking so that every product and category page is discoverable and crawlable by Google — not hidden behind JavaScript, pagination, or missing links.

1. 1Install Yoast SEO or Rank Math (free): both auto-generate an XML sitemap at yourstore.com/sitemap_index.xml that includes WooCommerce Products and Product Categories as separate sitemap files.
2. 2Yoast: Settings › Yoast SEO › General › Features — ensure XML Sitemaps is toggled ON. Then go to Yoast SEO › Search Appearance › Content Types and confirm Products is set to 'Show in search results'.
3. 3Rank Math: Rank Math › Sitemap Settings — enable the Sitemap module, then check the Products and Product Categories boxes under 'Include in Sitemap'.
4. 4WordPress Admin › Appearance › Menus: verify every Product Category is reachable from at least one navigation menu or homepage link.
5. 5Check for accidental noindex: in Yoast, open any product edit screen and look for the Yoast meta box at the bottom. Confirm 'Allow search engines to show this Post in search results' is set to Yes.
6. 6Submit yourstore.com/sitemap_index.xml in Google Search Console › Indexing › Sitemaps.

<?php
/**
 * Ensure WooCommerce product and product category pages are indexable.
 * Add to child theme's functions.php.
 */
add_action( 'wp_head', 'ensure_products_indexable', 1 );
function ensure_products_indexable() {
    if ( is_product() || is_product_category() || is_shop() ) {
        // Remove any noindex added by other plugins/code
        remove_action( 'wp_head', 'noindex', 1 );
    }
}

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

1. 1Images: Install the 'Specify Image Dimensions' plugin (free, WordPress.org) to automatically add missing width/height attributes to all images output by WordPress and WooCommerce. Alternatively, use the 'Perfmatters' plugin → Image tab → 'Add Missing Image Dimensions'.
2. 2Theme: In your child theme's functions.php, ensure add_theme_support('html5', ['img']) is present so WordPress outputs modern image markup. For block themes, check theme.json for any layout that may cause reflow.
3. 3Fonts: In Appearance → Customize → Additional CSS (or your child theme's style.css), add font-display: swap (with override descriptors if needed) to all @font-face rules. If using Google Fonts via a plugin, switch to 'Local Google Fonts' plugin which gives you control over font-display.
4. 4Cookie / GDPR banners: In your cookie consent plugin settings (e.g. Complianz, CookieYes), set the banner display style to 'bottom bar' or 'modal overlay' rather than a top push-down banner.
5. 5Caching / optimisation plugin: In WP Rocket, LiteSpeed Cache, or W3 Total Cache → Media settings, enable 'Add missing image dimensions' and 'Lazy load images'. These tools also defer non-critical JS that may inject shifting content.
6. 6Verify: Run PageSpeed Insights or use the Chrome Web Vitals extension on your site; target CLS < 0.1.

<?php
/**
 * Automatically add width and height attributes to images
 * that are missing them, to prevent Cumulative Layout Shift.
 * Add to: wp-content/themes/your-child-theme/functions.php
 */
add_filter( 'the_content', 'mytheme_add_image_dimensions', 99 );
add_filter( 'post_thumbnail_html', 'mytheme_add_image_dimensions', 99 );

function mytheme_add_image_dimensions( $html ) {
    // Match img tags that are missing width or height attributes
    $pattern = '/<img(?![^>]*(?:width|height))[^>]*>/i';
    preg_match_all( $pattern, $html, $matches );

    foreach ( $matches[0] as $img_tag ) {
        // Extract src
        preg_match( '/src=["\']([^"\']+)["\']/i', $img_tag, $src_match );
        if ( empty( $src_match[1] ) ) continue;

        $src        = $src_match[1];
        $attach_id  = attachment_url_to_postid( $src );
        if ( ! $attach_id ) continue;

        $meta = wp_get_attachment_metadata( $attach_id );
        if ( empty( $meta['width'] ) || empty( $meta['height'] ) ) continue;

        $new_tag = str_replace(
            '<img ',
            '<img width="' . esc_attr( $meta['width'] ) . '" height="' . esc_attr( $meta['height'] ) . '" ',
            $img_tag
        );
        $html = str_replace( $img_tag, $new_tag, $html );
    }
    return $html;
}

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

1. 1Install a performance plugin such as WP Rocket, Perfmatters, or Asset CleanUp Pro. In its settings, enable 'Delay JavaScript execution' or 'Load JS deferred' for third-party scripts (chat, CRM pixels, review widgets).
2. 2Go to WP Admin → Plugins and deactivate any plugin whose frontend script you don't actively need. Each deactivated plugin typically removes one or more scripts from the page.
3. 3In WP Rocket (or equivalent), use the 'Delay JavaScript' feature to defer specific scripts (e.g., Facebook Pixel, Intercom) until after first user interaction.
4. 4If using a page builder (Elementor, Divi, etc.), go to its performance settings and enable 'Improved Asset Loading' or 'Script Loading Optimizations' — these defer builder-injected JS.
5. 5For custom code, open your child theme's functions.php or a custom plugin and change `wp_enqueue_script` calls to use `'in_footer' => true` and add the `defer` strategy via the `$args` array (WP 6.3+): `wp_enqueue_script('my-script', $src, $deps, $ver, ['strategy' => 'defer'])`.
6. 6Verify with PageSpeed Insights and the Chrome DevTools Performance panel; monitor Google Search Console → Core Web Vitals report.

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

1. 1IDENTIFY LCP IMAGE: Run PageSpeed Insights on your homepage and key product/category pages. The LCP element is usually the hero image set in your theme's Customizer or a page-builder block.
2. 2CONVERT TO WEBP: Install the free plugin 'WebP Express' or 'Imagify' (freemium). Activate and run a bulk conversion. Imagify: Plugins › Add New › search 'Imagify' › Install & Activate › Settings › choose WebP format › Bulk Optimize.
3. 3PRELOAD: Install 'WP Rocket' (paid) or 'LiteSpeed Cache' (free). In WP Rocket: Settings › WP Rocket › Media tab › enable 'Preload LCP Image'. In LiteSpeed Cache: Settings › LiteSpeed Cache › Page Optimization › enable 'Preload Hero Image'.
4. 4DEFER JS & REMOVE RENDER-BLOCKING: In WP Rocket: Settings › WP Rocket › File Optimization › enable 'Defer JavaScript Execution' and 'Delay JavaScript Execution'. In LiteSpeed Cache: Page Optimization › JS Deferred/Delayed.
5. 5NO LAZY-LOAD ON HERO: In your theme's Customizer or code, ensure the hero/banner img tag has loading='eager' and fetchpriority='high'. Most caching plugins have an option to exclude the LCP image from lazy-loading — use it.
6. 6VERIFY: Re-run PageSpeed Insights; check Google Search Console › Core Web Vitals report.

<!-- WooCommerce / WordPress hero block — paste in Custom HTML block or theme template -->
<img
  src="/wp-content/uploads/hero-banner.webp"
  srcset="/wp-content/uploads/hero-banner-768.webp 768w,
          /wp-content/uploads/hero-banner-1200.webp 1200w,
          /wp-content/uploads/hero-banner.webp 1920w"
  sizes="100vw"
  alt="[Describe your hero image here]"
  width="1920"
  height="700"
  loading="eager"
  fetchpriority="high"
>