Every Webflow Commerce fix we catalog

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.

On Webflow Commerce

1. Same steps as Webflow above.
2. Webflow Commerce category pages (Collection List pages) must also have a published template and be linked from the main navigation to receive internal link equity.

<!-- CORRECT: Standard crawlable link -->
<a href="/products/blue-running-shoes">Blue Running Shoes</a>

<!-- WRONG: JavaScript-only — Googlebot cannot follow this -->
<span onclick="navigate('/products/blue-running-shoes')">Blue Running Shoes</span>

Add descriptive alt text to every product and content image at the template level so search engines and screen readers can understand all images on the page.

On Webflow Commerce

1. In the Webflow Designer, navigate to the Product Template page. Click the main Product Image element → in the Settings panel, bind the Alt Text to the 'Name' field from the Product CMS collection (or a dedicated alt text CMS field if you have one).
2. For collection list grids (e.g. shop page), click the image inside the Collection List → bind its alt text to the product name CMS field.
3. Publish and verify on a live product page.

<!-- Informative product image — describe what the image shows -->
<img src="/images/red-running-shoes-side-view.jpg"
     alt="Red canvas running shoes, side view, white rubber sole"
     width="800" height="800">

<!-- Decorative image — empty alt tells screen readers to skip it -->
<img src="/images/divider-wave.svg"
     alt=""
     role="presentation"
     width="1200" height="40">

Add a single, descriptive H1 tag to every page that currently lacks one, clearly stating the page's main topic.

On Webflow Commerce

1. In the Webflow Designer, open the Product Template page.
2. Select (or add) the top Heading element, confirm its tag is H1 in Element Settings, and bind it to the Product Name CMS field.
3. Publish and verify.

<h1>Women's Running Shoes</h1>

Add a unique, descriptive title tag (30–60 characters) to every page that is missing one.

On Webflow Commerce

1. In the Webflow Designer, go to the CMS panel → select the Ecommerce Products collection → open an individual product item.
2. Scroll to the 'SEO Settings' section within the item editor → fill in or update the 'SEO Title' field.
3. For global templates: edit the Product Template page → gear icon → SEO Settings → use dynamic bindings ('+Add Field') to pull the product name into the title automatically.
4. Publish to push changes live.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slim Bifold Leather Wallet | BrandName</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Write and publish a 200–400 word product description covering what the product is, its key specs, who it's for, and how to use it.

On Webflow Commerce

1. Open the Webflow CMS panel → Products collection → click the product.
2. Edit the Rich Text 'Description' field with your product copy.
3. Set the SEO meta description in the 'SEO Settings' section of the same CMS record.
4. Publish and confirm on the live page.

<section class="product-description">
  <h2>About This Product</h2>
  <p>
    The <strong>Trailblazer 500 Waterproof Hiking Boot</strong> is a lightweight,
    full-grain leather boot built for all-day comfort on rugged mountain trails.
    Its Gore-Tex membrane keeps feet dry in rain and creek crossings while the
    Vibram outsole delivers confident grip on wet rock and loose scree.
  </p>
  <p>
    Designed for day hikers and weekend backpackers who want reliable protection
    without the weight of a mountaineering boot, the Trailblazer 500 strikes the
    ideal balance between support and agility. The padded collar and gusseted
    tongue prevent trail debris from entering the boot, and the cushioned EVA
    midsole absorbs impact mile after mile.
  </p>
  <h3>Key Specifications</h3>
  <ul>
    <li><strong>Upper:</strong> Full-grain leather with Gore-Tex waterproof lining</li>
    <li><strong>Outsole:</strong> Vibram Megagrip rubber</li>
    <li><strong>Weight:</strong> 680 g / pair (size UK 9)</li>
    <li><strong>Shaft height:</strong> Mid (ankle) cut</li>
    <li><strong>Available widths:</strong> Standard and Wide</li>
  </ul>
  <h3>How to Use</h3>
  <p>
    Lace firmly for ankle support on uneven terrain. Break the boot in over two
    or three shorter walks before a full-day hike. Apply a water-repellent spray
    to the leather upper every 20–30 hours of trail use to maintain waterproofing.
  </p>
</section>

Replace auto-generated filename-based alt text on product images with short, descriptive phrases that accurately describe what the image shows.

On Webflow Commerce

1. Open Webflow Designer → CMS → Products.
2. Open each product, click the image, and fill in the 'Alt text' field in the asset/settings panel.
3. Publish changes. For bulk updates, use the Webflow CMS CSV export/import workflow.

<!-- BAD: filename-based alt text -->
<img src="/images/IMG_4823_blue_v2.webp" alt="IMG_4823_blue_v2.webp">

<!-- BAD: empty alt text -->
<img src="/images/blue-sweater.webp" alt="">

<!-- GOOD: descriptive alt text -->
<img src="/images/blue-sweater.webp" alt="Blue cotton crew-neck sweater, front view">

Add a GTIN (and/or MPN) field to your Product structured data so Google can match your listings to its product knowledge graph for rich results and Google Shopping.

On Webflow Commerce

1. Same as Webflow: add GTIN and MPN as custom CMS fields on your Ecommerce Products collection.
2. Bind these fields into a JSON-LD Embed element on the Product Template page.
3. Webflow Commerce does not auto-generate Product schema with GTIN — the Embed approach is required.

Render your product price in the server-generated HTML so Google and other crawlers can read it directly — without executing JavaScript.

On Webflow Commerce

1. Same as Webflow above. Use the native eCommerce Product Price component in the Product Template so Webflow's publish pipeline writes the price into static HTML.
2. Verify structured data with Google's Rich Results Test after publishing.

Add HowTo structured data (JSON-LD) to any page that walks customers through a multi-step process, so Google can display your instructions as rich results in search.

On Webflow Commerce

1. In the Webflow Designer, open the specific Product or CMS page that contains how-to content via the Pages panel.
2. Click the gear icon for Page Settings > Custom Code > 'Inside <head> tag'.
3. Paste your complete JSON-LD HowTo block. For product how-to guides in CMS, bind step text to CMS fields using Webflow's embed component with dynamic content.
4. Publish and validate with Google's Rich Results Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to Complete Your Task | Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "How to Complete Your Task",
    "description": "Follow these steps to complete your task easily.",
    "totalTime": "PT10M",
    "step": [
      {
        "@type": "HowToStep",
        "position": 1,
        "name": "Prepare your materials",
        "text": "Gather everything you need before you start: list materials here."
      },
      {
        "@type": "HowToStep",
        "position": 2,
        "name": "Complete the main action",
        "text": "Describe exactly what the user should do in this core step."
      },
      {
        "@type": "HowToStep",
        "position": 3,
        "name": "Verify the result",
        "text": "Explain how the user confirms the task was completed successfully."
      }
    ]
  }
  </script>
</head>
<body>
  <!-- Your how-to page content -->
</body>
</html>

Add WebPage schema markup to every page so search engines and AI answer engines can precisely understand and describe your content.

On Webflow Commerce

1. Follow the same Designer steps as standard Webflow.
2. For product Collection pages, open the Product template page → gear icon → Head Code, and insert a WebPage JSON-LD block using CMS dynamic fields (e.g. {Product Name}, {Slug}) so every product page gets unique schema values.
3. For the store homepage and static pages, use Project Settings → Custom Code → Head Code for sitewide Organization schema.
4. Validate using Google's Rich Results Test after publishing.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "About Us | Acme Store",
  "description": "Learn about Acme Store, our mission, and the team behind our products.",
  "url": "https://www.example.com/about/",
  "inLanguage": "en-US",
  "datePublished": "2022-01-15",
  "dateModified": "2024-06-01",
  "isPartOf": {
    "@type": "WebSite",
    "name": "Acme Store",
    "url": "https://www.example.com/"
  },
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://www.example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "About Us",
        "item": "https://www.example.com/about/"
      }
    ]
  }
}
</script>

Add a descriptive accessible name (aria-label, aria-labelledby, or a visible <label>) to every ARIA input field so assistive technologies can identify it.

On Webflow Commerce

1. Follow the same Webflow Designer steps above for product page and cart form inputs.
2. For Webflow Commerce checkout (if using native checkout), custom form inputs added to the checkout can be labeled via the Settings panel custom attribute: aria-label = 'value'.

<label for="customer-email">Email address</label>
<input type="email" id="customer-email" name="email" autocomplete="email">

Add descriptive alt text to every meaningful image, and mark purely decorative images with an empty alt attribute or role="presentation".

On Webflow Commerce

1. Open the CMS for your Products collection (CMS → Collections → Products) → ensure each product has an 'Image Alt Text' plain-text field.
2. In the Designer, select the product image element → in Element Settings, bind the Alt Text property to your 'Image Alt Text' CMS field so alt text is output dynamically for every product.

<!-- Meaningful image: describe the content -->
<img src="red-leather-bag.jpg" alt="Red leather crossbody bag with gold clasp" width="600" height="400">

<!-- Image used as a link: describe the destination/action -->
<a href="/sale">
  <img src="summer-sale-banner.jpg" alt="Shop our summer sale — up to 40% off">
</a>

<!-- Decorative image: empty alt, screen readers skip it -->
<img src="decorative-swoosh.svg" alt="" role="presentation">

<!-- WRONG — never omit alt entirely on an <img> -->
<!-- <img src="product.jpg"> -->

<!-- WRONG — never use filename or generic words -->
<!-- <img src="IMG_4821.jpg" alt="image"> -->

Add a single, descriptive `<h1>` heading to every page so assistive technologies and search engines can identify the page's main topic.

On Webflow Commerce

1. In the Webflow Designer, open a product template page (CMS collection template for Products).
2. Locate the product name element — typically a text element bound to the 'Name' CMS field. Select it and confirm its tag is H1 in the right-side settings panel.
3. If it's a Div or Paragraph, change the tag to H1 to semantically mark it as the primary heading.
4. Repeat for Category/Collection list pages, ensuring the collection title is an H1.
5. Publish and audit with the Webflow Audit panel or the axe browser extension.

<main>
  <h1>Women's Running Shoes</h1>
  <!-- rest of page content -->
</main>

Remove or suppress the X-Powered-By HTTP response header so your server stops advertising which technology stack, hosting platform, or software version powers your store.

On Webflow Commerce

1. Same as Webflow above. Webflow Commerce store owners do not have server-header access on the hosted platform.
2. Focus on reviewing any embedded third-party payment or app integrations that might proxy requests and add their own X-Powered-By header.

<!-- X-Powered-By is an HTTP response header set by the server, not in HTML markup.
     Use the server-side code snippets below for your specific platform. -->

Add a Referrer-Policy HTTP response header set to strict-origin-when-cross-origin to control what URL information browsers send when users navigate away from your store.

On Webflow Commerce

1. Same as Webflow above — Project Settings → SEO → Extra head tags → add the meta tag, republish.
2. Add Cloudflare Modify Response Header rule for the true HTTP header.

<meta name="referrer" content="strict-origin-when-cross-origin">

Log in to your domain registrar, confirm your domain's expiry date, and enable auto-renew so your store never goes offline due to an expired domain.

On Webflow Commerce

1. Same as Webflow: Dashboard → project → Publishing → Custom Domains → gear icon. Confirm payment method at Account Settings → Billing.

<!-- No HTML change required. Domain renewal is managed at your domain registrar's dashboard (e.g. GoDaddy, Namecheap, Cloudflare Registrar). Log in, find the domain, enable auto-renew, and confirm a valid payment method is on file. -->

Add a lang attribute to your site's <html> tag that matches the primary language of your store's content.

On Webflow Commerce

1. Same as Webflow: open Project Settings → General → Language and set the correct language code.
2. Webflow Commerce inherits the lang attribute from your project's locale settings automatically.
3. Publish and verify via View Source.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Store</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Renew your TLS/SSL certificate before it expires and enable automatic renewal so your store never goes offline or shows security warnings.

On Webflow Commerce

1. SSL is managed the same as Webflow standard hosting — automatically provisioned and renewed.
2. Check Project Settings → Hosting in the Webflow Dashboard to confirm each domain shows an active SSL status.

<!-- SERVER-SIDE redirect is strongly preferred. Example nginx config snippet below. -->
<!-- nginx: force HTTPS -->
<!-- server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
} -->