Every Wix 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 Wix

1. Wix automatically generates and submits a sitemap for your store. Verify it at yoursite.com/sitemap.xml.
2. Wix Dashboard › Marketing & SEO › Get Found on Google: follow the SEO Setup Checklist to connect Google Search Console and submit your sitemap.
3. Wix Dashboard › Marketing & SEO › SEO Tools › SEO Patterns: ensure the Product Pages pattern is set to 'Indexed' (not noindex).
4. For each product: Wix Editor › Product Page › SEO (Wix SEO Wiz or the Settings panel) — confirm 'Hide this page from search results' is NOT checked.
5. Wix Dashboard › Store Products: confirm all products are set to 'Visible' — hidden products are excluded from the sitemap.
6. Check internal links: ensure your store navigation menu (added via Editor › Menus & Pages) includes links to all main product collections/categories.

<!-- 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>

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

On Wix

1. Images: In the Wix Editor, click any image → Settings → ensure 'Fit' or 'Fill' mode is set and the image container has a fixed height. Wix renders its own image component with reserved space, but if you've set container height to 'auto' it can collapse before the image loads — set an explicit pixel height on the container.
2. Strips / sections: For each section strip, go to the strip settings and set a fixed minimum height rather than 'fit to content', especially for sections containing images or embeds.
3. Cookie banner: In Settings → Cookie Banner, choose 'bottom' position so it appears as an overlay, not a top push-down that shifts content.
4. Wix Chat / bookings widget: These are rendered by Wix natively with reserved space. If using a custom HTML embed (Add → Embed Code → HTML iframe), set an explicit height on the iframe element in the embed settings panel.
5. Fonts: Wix manages font loading internally; you cannot add font-display descriptors directly. Use Wix's built-in font choices (available in the Text settings panel) rather than custom uploaded fonts to minimise FOUT-related shifts.
6. Verify: Use Wix's built-in SEO tool (Marketing & SEO → SEO Tools → SEO Assistant) and cross-check with PageSpeed Insights; target CLS < 0.1.

<!-- CORRECT: explicit width and height prevent layout shift -->
<img
  src="/images/product-red-sneaker.jpg"
  alt="Red canvas sneaker, side view"
  width="800"
  height="800"
  loading="lazy"
>

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.

On Wix

1. Open the Wix Editor. In the left panel, go to Add Apps → Manage Apps and remove any app whose functionality you no longer actively use — every Wix app can add JavaScript weight.
2. In the Wix Editor, select any embedded HTML/custom code widgets (via Settings → Custom Code or via Velo) and check whether their scripts can be moved to load 'After body start' or set to load on interaction rather than on page load.
3. Go to Settings → Custom Code (in the Dashboard). For third-party scripts (chat, analytics, pixels), set the 'Load' timing to 'Load when page is ready' or 'Load after user interaction' if that option is available for your script.
4. In Velo (Wix's dev environment), review any `$w.onReady()` code that runs large synchronous operations. Break heavy logic into smaller async steps using `async/await` and `setTimeout` to avoid blocking the main thread.
5. Use PageSpeed Insights with your live Wix URL and the Chrome DevTools Performance panel to identify which specific interactions have the highest INP.

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.

On Wix

1. IDENTIFY LCP IMAGE: Run PageSpeed Insights on your Wix site URL. The LCP is usually the large image/strip at the top of your homepage.
2. WEBP: Wix automatically serves images in WebP to supporting browsers — no conversion needed. Ensure your source image is high quality JPEG/PNG uploaded through the Wix Media Manager.
3. OPTIMISE IMAGE SIZE: In the Wix Editor, click the hero image/strip › Settings › change the image to the smallest dimensions that still look sharp (e.g., 1500px wide for a full-width banner). Oversized source images slow delivery even after auto-conversion.
4. PRELOAD (LIMITED): Wix does not allow direct <head> tag editing on standard plans. Upgrade to Wix Studio or use Wix's Velo (Dev Mode) to inject a preload link via the wix-seo API: import wixSeo from 'wix-seo'; wixSeo.setLinks([{rel: 'preload', href: 'YOUR_IMAGE_URL', as: 'image'}]);
5. DEFER JS: Wix controls most JS loading internally. Minimise third-party apps (Wix App Market) that inject scripts — every unused app adds render-blocking weight. Remove apps you do not actively use.
6. LAZY-LOAD: Wix applies lazy-loading automatically; for the hero image, position it as a 'strip background' or 'above-the-fold' element so Wix's engine prioritises it. Wix Studio users can set fetchpriority via custom properties.
7. VERIFY: Re-run PageSpeed Insights after publishing changes.

<!-- Step 1: Preload the LCP hero image -->
<link
  rel="preload"
  as="image"
  href="/images/hero-banner.webp"
  imagesrcset="/images/hero-banner-400.webp 400w,
               /images/hero-banner-800.webp 800w,
               /images/hero-banner-1500.webp 1500w"
  imagesizes="100vw"
  fetchpriority="high"
>

<!-- Step 2: Hero <img> tag — eager, high priority, no lazy-load -->
<img
  src="/images/hero-banner-1500.webp"
  srcset="/images/hero-banner-400.webp 400w,
          /images/hero-banner-800.webp 800w,
          /images/hero-banner-1500.webp 1500w"
  sizes="100vw"
  alt="[Descriptive alt text for your hero image]"
  width="1500"
  height="600"
  loading="eager"
  fetchpriority="high"
>

Write a unique, page-specific meta description for every page on your store so Google can display a compelling, accurate snippet for each one in search results.

On Wix

1. Open the Wix Editor for your site, then in the left panel click the Pages & Menu icon, hover over the page you want to edit, and click the three-dot menu → SEO Basics (or 'Page Settings').
2. In the SEO panel that opens, scroll to 'Meta Tags' or 'What's this page about?' and enter a unique meta description for that page.
3. For product pages in Wix eCommerce: go to the Wix Dashboard → Store Products, click on a product, scroll down to the 'SEO' section, and update the meta description there.
4. For collection/category pages: navigate to the relevant collection page in your dashboard, open its SEO settings, and update the description.
5. Use the Wix SEO Wiz (Dashboard → Marketing & SEO → Get Found on Google) to identify pages missing or duplicating descriptions.
6. Click 'Save' and publish your site, then verify in Google Search Console.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Shop women's running shoes at Acme Store — lightweight, cushioned designs for road and trail. Free shipping on orders over $50.">
  <title>Women's Running Shoes | Acme Store</title>
</head>

Give every page a unique, descriptive title tag that accurately reflects that page's specific content.

On Wix

1. In the Wix Editor, click on any page: Pages & Menu (left panel) → hover the page → three-dot menu → SEO Basics → edit 'Title tag'.
2. For dynamic pages (e.g. a product catalog connected to a Wix dataset): Pages & Menu → Dynamic Pages → SEO tab → use the dynamic field picker to insert item-specific fields (e.g. {title}) so each generated URL gets a unique title automatically.
3. Use the Wix SEO Wiz or the Site-level SEO dashboard (Marketing & SEO → Get Found on Google) to spot pages still using default titles.
4. For Wix Stores products: Wix Dashboard → Store Products → Edit Product → SEO tab → 'Title tag'.

<head>
  <title>Merino Wool Running Socks – Free UK Shipping | BrandName</title>
</head>

Point the rel=canonical on every faceted/filter URL to its clean parent category URL (or add noindex), so Google treats filtered pages as a single authoritative page instead of thousands of duplicates.

On Wix

1. Wix eCommerce category/collection pages with filters generate URL parameters for filter state. Wix manages canonical tags automatically and generally sets them to the clean page URL.
2. Go to your Wix dashboard → SEO → SEO Settings → Structured Data and Canonicals to review how Wix handles canonical tags sitewide.
3. For specific pages: open the page in the Wix Editor, click on the page settings (gear icon), then go to SEO (Google) → Advanced SEO → and check the 'Additional tags' field. You can manually add a canonical link tag here if Wix is not setting it correctly: <link rel='canonical' href='https://yoursite.com/your-category-page-url'>.
4. If you use Wix's Product Filters widget, test a filtered URL (e.g., yoursite.com/shop?category=pants&color=navy) by right-clicking → View Page Source and checking the canonical tag in the <head>.
5. If Wix is outputting the filtered URL as canonical, contact Wix Support or use the 'Additional tags' override per page. Note: Wix does not currently offer bulk server-side canonical override for dynamically generated filter URLs without custom Velo (Wix's dev platform) code.
6. For Velo (Wix's coding platform): use the wix-seo module in a page's code to dynamically set the canonical URL: import wixSeo from 'wix-seo'; wixSeo.setLinks([{rel: 'canonical', href: 'https://yoursite.com/shop'}]);
7. Verify with Google Search Console URL Inspection.

<head>
  <!-- Canonical points to the CLEAN category URL, not the filtered variant -->
  <link rel="canonical" href="https://www.example.com/womens-pants">
</head>

Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.

On Wix

1. In the Wix Editor, click the image on the canvas → click the 'Settings' (gear) icon in the image toolbar → find the 'What's in the image? Tell Google' or 'Alt Text' field → type your description → click Done.
2. For Wix Stores product images: Wix Dashboard → Store Products → [select product] → click the product image → in the pop-up, click 'Edit' (pencil icon) → add alt text in the provided field → Save.
3. Wix Blog images: Open the blog post in the editor → click the image → Settings → fill in the Alt Text field.

<!-- BEFORE (missing alt — bad) -->
<img src="/images/red-leather-bag.jpg">

<!-- AFTER (descriptive alt — correct) -->
<img src="/images/red-leather-bag.jpg" alt="Red leather crossbody bag with gold buckle clasp">

<!-- Decorative image (intentionally empty alt — correct) -->
<img src="/images/divider-line.png" alt="">

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 Wix

1. In the Wix Editor, click any image on the page → click 'Settings' (the gear icon) in the toolbar that appears → fill in the 'What's in the image? (Alt Text)' field.
2. For Wix Stores product images: go to the Wix Dashboard → Store Products → click a product → under the product image, click 'Edit' → add alt text in the alt text field. Repeat for all product images.
3. For bulk updates across many products, use the Wix CSV import/export: go to Store Products → More Actions → Export Products; fill in the 'image alt text' column in the spreadsheet; re-import.
4. For Wix Blog post images, open the blog post editor, click each image → Settings → Alt Text.
5. Note: Wix does not expose direct template code to owners, so image-by-image or CSV bulk update is the available approach.

<!-- 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">

Improve your Lighthouse/PageSpeed performance score by reducing page weight, eliminating render-blocking resources, optimising images, and addressing Core Web Vitals so Google ranks your store higher in search results.

On Wix

1. Wix handles server infrastructure, CDN, and GZIP automatically — you cannot control these directly, but you can control what you put on pages.
2. Reduce the number of Wix Apps installed: Dashboard → Manage Apps → remove any app not actively used, as each adds JS payload.
3. Compress and resize images before uploading: use Squoosh (squoosh.app) to convert to WebP and resize to actual display dimensions before adding to Wix Media Manager. Wix will then serve them efficiently.
4. In the Wix Editor, avoid stacking multiple large video backgrounds, animated GIFs, or auto-playing videos above the fold — these are the most common causes of high LCP on Wix.
5. Turn on Wix's built-in performance features: Dashboard → Settings → Performance → enable 'Turbo' mode (if available on your plan) and ensure lazy loading is on.
6. Remove unused custom code blocks: Dashboard → Settings → Custom Code → delete any tracking pixels or widgets you no longer need.
7. Re-test with PageSpeed Insights and consider upgrading to a higher Wix plan if your current plan limits performance features.

<!-- In <head>: preconnect to critical third-party origins to reduce connection latency -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload your Largest Contentful Paint image (hero/banner) so it loads earlier -->
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">

<!-- Hero image: eager load, explicit dimensions to prevent CLS -->
<img
  src="/images/hero.webp"
  alt="Descriptive alt text for your hero image"
  width="1200"
  height="600"
  fetchpriority="high"
  decoding="async"
>

<!-- All other images: lazy load, explicit dimensions to prevent CLS -->
<img
  src="/images/product-shot.webp"
  alt="Descriptive product alt text"
  width="800"
  height="800"
  loading="lazy"
  decoding="async"
>

<!-- Defer non-critical third-party scripts (analytics, chat, pixels) -->
<script src="https://example-analytics.com/tracker.js" defer></script>

<!-- Load non-critical CSS asynchronously to unblock render -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>

Shorten your meta description to 150–160 characters so Google displays it in full instead of cutting it off with "…" in search results.

On Wix

1. Open the Wix Editor and click the page you want to edit in the Pages & Menu panel.
2. Click the three-dot (•••) menu next to the page name → 'SEO Basics' (or open Site → SEO → SEO Basics from the left sidebar).
3. Edit the 'Description' field in the 'Google preview' panel. Wix shows a character counter.
4. For product pages in Wix Stores: go to the Wix dashboard → Store Products → click the product → scroll to 'SEO' → edit 'Meta Description'.
5. Click Save / Publish.

<meta name="description" content="Award-winning Bang & Olufsen headphones, speakers and TVs. Visit our Malaysia showroom at The Gardens Mall, Level 2. Free shipping on orders over RM500.">

Expand your meta description to 120–160 characters so Google displays a compelling, complete snippet in search results that drives more clicks to your store.

On Wix

1. Open the Wix Editor for your site.
2. Click on the page you want to edit in the Pages panel on the left → click the three-dot menu next to the page name → 'SEO Basics'.
3. In the 'Description' field, enter your 120–160 character description → Done.
4. For product pages in Wix Stores: go to your live site's Wix Stores dashboard → select the product → scroll to 'SEO' section → edit the meta description directly.
5. Publish your site for changes to take effect.

<meta name="description" content="Shop the official Nike national team jerseys — advanced Dri-FIT heat tech meets bold heritage design. Free shipping on orders over $75. Explore the full collection now.">

Add a self-referencing canonical tag to every page so Google knows which URL is the definitive version of that content.

On Wix

1. Wix automatically adds canonical tags to all pages — no manual action is required for standard pages.
2. To override or verify the canonical for a specific page: in the Wix Editor, click on the page → go to Page Settings (gear icon) → SEO (Google) tab → expand 'Additional SEO Settings' → you can paste a custom canonical URL in the 'Additional meta tags' field as `<link rel='canonical' href='YOUR_URL' />`.
3. For Wix eCommerce product pages, canonical tags are managed automatically; if you suspect issues, check Wix SEO → SEO Setup Checklist in your dashboard.
4. Use Google Search Console's URL Inspection tool to confirm the canonical Wix outputs is the one Google sees.

<link rel="canonical" href="https://www.yourstore.com/your-page/" />

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

On Wix

1. Open the Wix Editor for the page in question.
2. Click on the text element at the top of your page content that serves as the main heading. In the text toolbar that appears, open the 'Paragraph' style dropdown and change it to 'Heading 1'.
3. If no heading text element exists, click the blue '+' (Add Elements) → Text → choose 'Title' or 'Heading 1', drag it to the top of the content area, and type your descriptive heading.
4. For product pages in Wix eCommerce: the product name is automatically rendered as an H1 by the Wix product page template — ensure Product Name is filled in under Wix Stores → Products → edit product.
5. Publish the site, then verify by using browser DevTools (F12 → Elements, search 'h1') or View Page Source.

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

Write and add a unique meta description (120–160 characters) to every page that is missing one, so Google can display an accurate, compelling snippet in search results.

On Wix

1. In the Wix Editor, click on the page you want to edit in the Pages panel (left sidebar) → click the three-dot menu next to the page name → 'SEO Basics' or 'SEO (Google)' → fill in the 'Meta Description' field.
2. Alternatively, use the Wix SEO Wiz: Dashboard → Marketing & SEO → SEO Tools → SEO Wiz → follow the guided checklist which surfaces missing descriptions.
3. For a Wix Stores product: Dashboard → Store Products → click the product → scroll down to 'SEO' section → fill in 'Meta Description'.
4. For dynamic pages (product pages, blog posts): In the Editor, open the dynamic page → connect the SEO fields to your database collection fields using the SEO panel's 'Connect' option so descriptions populate automatically.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Shop our full range of handmade leather wallets. Free shipping on orders over $50. Slim, durable & personalised — order yours today.">
  <title>Handmade Leather Wallets | YourStoreName</title>
</head>

Add an og:description meta tag to every page so that social media platforms display a compelling, accurate preview when your pages are shared.

On Wix

1. Open your site in the Wix Editor.
2. For standard pages: click the page in the Pages menu → the three-dot menu → SEO Basics. Scroll down to the 'Social Share' section and fill in the 'Description' field — Wix uses this as og:description.
3. For dynamic product pages in Wix Stores: go to the Store Manager → Products → edit a product → scroll to 'SEO & Social Media' (or 'Advanced SEO') → fill in the social description field.
4. For Wix Studio advanced users: use Velo (Dev Mode) to set custom meta tags programmatically with wixSeo.setMetaTags() in the page's onReady handler.
5. Publish your site and validate the tag using Facebook Sharing Debugger.

<head>
  <!-- Open Graph / Social Sharing -->
  <meta property="og:type"        content="website" />
  <meta property="og:url"         content="https://www.example.com/page-url/" />
  <meta property="og:title"       content="Page Title – Brand Name" />
  <meta property="og:description" content="A concise, compelling summary of this page in 100–160 characters that encourages clicks." />
  <meta property="og:image"       content="https://www.example.com/images/social-preview.jpg" />
</head>

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

On Wix

1. In the Wix Editor, click on the page you want to edit in the Pages panel on the left.
2. Click the three-dot (…) menu next to the page name → 'SEO' → this opens the SEO settings panel for that page.
3. Scroll down to 'Social Share' → click 'Edit social image' → upload your 1200×630 px image for that specific page.
4. For your site's default og:image (used when no page-specific image is set), go to the Wix Dashboard → SEO → Social Share → upload a default social image.
5. For Wix Stores product pages, go to the Wix Dashboard → Store → Products → select a product → ensure a product image is set; Wix automatically uses the first product image as og:image.
6. Publish your site and validate using Facebook's Sharing Debugger.

Add an og:title meta tag to every page so your store's title appears correctly when shared on social media platforms like Facebook, LinkedIn, and Pinterest.

On Wix

1. Wix automatically generates og:title tags for most pages using your page's SEO title. To set the SEO title: open the Wix Editor, click on the page you want to edit, then go to Pages & Menu → hover over the page → click the '...' menu → SEO Basics.
2. In the SEO Basics panel, fill in the 'Title tag' field. Wix will use this value as the og:title when your page is shared on social media.
3. For product pages in Wix eCommerce: go to your Wix Dashboard → Stores → Products → click a product → scroll to the 'SEO' section and fill in the 'Page title' field.
4. To set a custom og:title beyond what Wix auto-generates (advanced): in the Wix Editor go to the page → Settings → Advanced SEO → paste custom Open Graph meta tags in the 'Additional tags' area: <meta property="og:title" content="Your Custom Title Here" />
5. Verify by sharing a page URL in Facebook Sharing Debugger to confirm the og:title is correct.

<head>
  <!-- Other head tags -->
  <meta property="og:title" content="Amazing Product Name | Your Store Name" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.yourstore.com/page-url" />
  <meta property="og:description" content="Short description of this page for social sharing." />
  <!-- Other head tags -->
</head>

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

On Wix

1. Open the Wix Editor for your site.
2. Click on the page you want to edit in the Pages & Menu panel on the left.
3. Click the three-dot menu (…) next to the page name → 'SEO Basics' (or go to the top menu: Page Design → Page SEO).
4. In the 'What's this page about?' / 'Title tag' field, type your descriptive title (30–60 characters).
5. For product pages in Wix eCommerce: go to your site's Dashboard → Store Products → select the product → scroll to the 'SEO' section → edit the 'Page title' field.
6. Click Save and publish.

<!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>

Remove all but one H1 tag from each page so every page has exactly one clear, descriptive primary heading.

On Wix

1. Open your site in the Wix Editor and navigate to the page type with the issue (e.g. a Product Page, a Collection Page, or the Homepage).
2. Click each text element that appears to be a major heading. In the text toolbar, check the paragraph style dropdown — only one element per page should be set to 'Heading 1'.
3. For all other section headings, change the style to 'Heading 2', 'Heading 3', etc., using the same text toolbar dropdown.
4. For dynamic pages (Wix Stores product pages), open the dynamic page template in the Editor; the product name field should be H1 and all other text blocks should be H2 or lower.
5. Wix does not give direct HTML access, so heading levels are controlled entirely through the text style dropdown — there is no code file to edit.
6. Use a browser extension (e.g. Web Developer Toolbar) or headless audit tool to verify the rendered H1 count after publishing.

<!-- CORRECT: One H1 per page -->
<h1>Blue Running Shoes – Men's Lightweight Trainers</h1>

<!-- Major sections use H2 -->
<h2>Product Details</h2>
<p>Breathable mesh upper, responsive foam midsole...</p>

<h2>Customer Reviews</h2>
<!-- Sub-sections within a major section use H3 -->
<h3>Top Review: 5 Stars</h3>
<p>Best shoes I've ever bought!</p>

<!-- WRONG: Multiple H1 tags — do NOT do this -->
<!--
<h1>Blue Running Shoes</h1>
<h1>Product Details</h1>
<h1>Customer Reviews</h1>
-->

Remove or replace the noindex directive on any page you want to appear in Google search results.

On Wix

1. Global setting: In the Wix Editor or Wix Dashboard, go to Settings → SEO → SEO Preferences (or 'Get Found on Google'). Confirm 'Let search engines index your site' is turned ON.
2. Per-page setting: In the Wix Editor, right-click the page in the Pages panel → SEO (Google) → Advanced SEO tab → Robots tag. Remove 'noindex' from the tag field or set it to 'index, follow'.
3. Wix Studio: Open the Pages panel → hover over the page → Settings → SEO → Advanced → Robots meta tag. Correct the value there.
4. Wix SEO Wiz / Site Inspector: Run Wix's built-in SEO checker to see if any pages are flagged as noindex and use the direct links it provides to correct each page.
5. After saving, use Google Search Console URL Inspection to request re-indexing.

<meta name="robots" content="index,follow">

Audit every page whose canonical tag points to a different URL, then either correct it to self-reference or confirm the cross-reference is intentional and correct.

On Wix

1. Wix sets canonical tags automatically for all site pages. To override or correct a canonical, use the built-in SEO settings.
2. In your Wix dashboard, go to Site Pages (Pages & Menu) and click the three-dot menu next to the affected page, then select 'SEO Basics'.
3. Scroll to the 'Advanced SEO' section and look for the 'Canonical URL' field — if it contains a non-matching URL, clear the field so Wix defaults to the page's own URL, or enter the correct self-referencing URL.
4. For product pages in Wix eCommerce: go to Store → Products, open the product, click 'SEO' in the sidebar, expand 'Advanced SEO', and correct or clear the Canonical URL field.
5. Click Save, then use Wix's SEO Assistant or view the live page source to confirm the canonical tag is correct.

<link rel="canonical" href="https://www.example.com/your-page-url/">

Set a unique, page-specific og:url meta tag on every page that exactly matches that page's canonical URL.

On Wix

1. In the Wix Editor, click on the page you want to update in the Pages panel.
2. Go to Pages → (hover the page) → Settings → SEO tab → scroll down to 'Social share preview / Open Graph'. Wix automatically sets og:url to the page's canonical URL from this panel.
3. If pages are showing a wrong og:url, check whether you have a Wix app or custom code widget injecting a conflicting tag: go to Add Apps → Manage Apps and review any SEO or social-meta apps.
4. For Wix stores, go to the relevant product/collection page, open its SEO settings, and verify the Social Preview section shows the correct page URL.
5. Use Wix's built-in SEO Wiz or the Google tag manager integration if you need more granular control, but for most cases the per-page Social Preview settings are sufficient.
6. After saving, use the Facebook Sharing Debugger to scrape a product and a static page to confirm og:url is correct.

<meta property="og:url" content="https://www.example.com/exact-page-path/" />
<link rel="canonical" href="https://www.example.com/exact-page-path/" />

Fix broken internal links pointing to pages that return a 404 error by either removing those links or setting up a 301 redirect from the missing URL to the correct replacement page.

On Wix

1. In the Wix dashboard, go to Marketing & SEO → SEO Tools → URL Redirect Manager.
2. Click '+ New Redirect'. Enter the old broken URL and the new destination URL. The redirect type defaults to 301. Save.
3. To fix internal links in page content, open the Wix Editor, navigate to the page containing the broken link, click the linked element, click the link icon, and update or remove the link.
4. For links in menus, use the Editor to open the menu widget, edit the menu items, and update the broken URL.
5. Wix does not allow editing server-side template files, so all link fixes must be done through the visual Editor.
6. Verify by visiting the old URL in a browser and confirming it lands on the correct destination page.

<!-- BEFORE: broken internal link -->
<a href="/old-products/discontinued-item">Shop Now</a>

<!-- AFTER: updated to correct URL -->
<a href="/products/replacement-item">Shop Now</a>

Reduce your page load time to under 1.5 seconds by optimizing images, eliminating render-blocking resources, and enabling caching and compression.

On Wix

1. Enable Turbo mode / Performance: In your Wix dashboard go to Settings > Performance and make sure 'Minify HTML, CSS & JS' and 'Browser caching' are enabled. Wix has rolled these out as automatic optimizations but verify they are active for your site.
2. Images: In the Wix Editor, click any image and use the Image Settings to upload images at the correct size. Wix automatically converts images to WebP when served, so the main task is uploading correctly-sized source images rather than oversized originals.
3. Video/animations: In the Wix Editor, select any autoplay background videos or heavy animations on your homepage and either remove them or replace with a static image — these are the single biggest Wix speed offenders.
4. Apps: Go to your Wix dashboard > App Market > Manage Apps and remove any Wix App you have installed but do not actively use — each one can add JavaScript to your pages.
5. Fonts: In the Wix Editor go to Site Design > Text Themes and switch to a font already available in Wix's system font list (e.g. Helvetica Neue, Arial) for the body text to eliminate an extra font download.
6. Check Core Web Vitals: In the Wix dashboard go to Marketing & SEO > SEO Tools > Core Web Vitals to see your field data, then use PageSpeed Insights for lab data to identify remaining issues.

Update every internal link that passes through a redirect chain to point directly at the final destination URL, eliminating all intermediate hops.

On Wix

1. Use an external crawler (Screaming Frog pointed at your published Wix URL) to identify internal links creating redirect chains and note their final destinations.
2. Open the Wix Editor for your site. Click on the element (button, text, image) that contains the chained link, click 'Link' in the toolbar, and replace the URL in the 'Web Address' field with the final destination URL. Click 'Done' and publish.
3. For links in the site's navigation menu: open the Editor, click the menu widget, select 'Manage Menu', and update or add the correct final URL for the affected menu item.
4. For links in the Wix footer or header strips: click directly on the footer/header element in the Editor, select the linked text or button, edit the link to the final URL, and republish.
5. If you use Wix Redirects (Settings → SEO → Redirects), review each rule; if a redirect destination is itself a redirecting URL, update it to point directly to the final 200 URL.
6. After publishing, re-crawl the live site to confirm chains are resolved.

<!-- BEFORE: link points to an intermediate URL that itself redirects -->
<a href="https://example.com/old-page">Our Story</a>

<!-- AFTER: link points directly to the final destination URL -->
<a href="https://example.com/about-us">Our Story</a>

Add a noindex robots meta tag to all internal search result pages and block the search URL path in robots.txt to prevent Google from crawling and indexing thin, duplicate search results.

On Wix

1. Wix does not expose a direct search-template editor, but you can control indexing via the Wix SEO settings.
2. In the Wix Editor, click on your Search Results page in the Pages & Menu panel.
3. Open Page Settings → SEO (Basic) tab → uncheck 'Show this page in search results' (or look for the 'Let search engines index this page' toggle and turn it OFF). Wix will inject the noindex tag automatically.
4. For robots.txt: in the Wix Editor go to Settings → SEO → robots.txt and add Disallow: /search under [User-agent: *], then save.
5. Verify by using the Wix SEO Assistant or Google Search Console URL Inspection on a sample search URL (typically structured as /search/results?q=).

<meta name="robots" content="noindex,follow">

Write a 100–200 word description for every category page explaining what products it contains and who they are for, so Google can rank it for category-level keywords.

On Wix

1. In the Wix Editor, open your Wix Stores dashboard and go to Catalog → Collections.
2. Select the collection whose page you want to update.
3. Wix does not have a native 'collection description' field like Shopify. Instead, open the Wix Editor, navigate to the Collection/Category page, click an existing Text element above or below the product gallery, and type your description there — or click '+ Add' → 'Text' to insert a new text block.
4. Write your 100–200 word description in that text block. Position it above the product grid for best SEO impact.
5. If you use Wix Studio, you can bind a Text element to a CMS Collection field for dynamic categories — go to the CMS panel, open your Products Collection, add a 'Description' text field, fill it in, and connect ('bind') a text element on the page to that field.
6. Publish the site when done.

<section class="category-description">
  <h1>Women's Waterproof Hiking Boots</h1>
  <p>
    Our women's waterproof hiking boots are built for trail runners, weekend
    trekkers, and serious mountaineers who refuse to let wet weather slow them
    down. Every pair in this collection features a fully sealed waterproof
    membrane, aggressive rubber outsoles for grip on loose or muddy terrain,
    and reinforced ankle support to protect against sprains on uneven ground.
    Whether you're day-hiking a local forest trail or taking on a multi-day
    alpine route, you'll find boots here rated for every conditions and
    experience level. Lightweight options keep pack weight low on fast-and-light
    adventures, while insulated models keep feet warm below freezing. Browse the
    full range below to find your perfect fit.
  </p>
</section>

Expand your category page description to at least 100 words of genuinely helpful, keyword-rich content that explains what shoppers will find in that category.

On Wix

1. In your Wix Editor, navigate to the category (collection) page for your Wix Stores site.
2. Click on the page area where the category description should appear. If no text block exists, click the '+' Add button and insert a Text element above or below the product grid.
3. Type or paste your 100+ word description directly in the text element.
4. To make this dynamic per category, use Wix CMS (formerly Wix Content Manager): create a 'Categories' collection with a long-text Description field, connect the text element to that field via 'Connect to Data', and use Wix Repeaters or dynamic pages so each category pulls its own description automatically.
5. Publish the site when done.

<section class="category-description">
  <h2>Shop Our Women's Running Shoes</h2>
  <p>
    Discover our curated collection of women's running shoes, designed for every
    type of runner — from casual joggers to marathon enthusiasts. Whether you
    need extra cushioning for long-distance road running, a lightweight racer
    for speed training, or a grippy trail shoe for off-road adventures, you'll
    find the perfect fit here.
  </p>
  <p>
    We stock top brands including Brooks, ASICS, New Balance, and Hoka, all
    rigorously tested for comfort, durability, and performance. Each pair is
    available in a wide range of widths and sizes, so you never have to
    compromise on fit. Browse by surface type, cushion level, or pronation
    support to narrow down your ideal shoe in seconds.
  </p>
  <p>
    Not sure where to start? Check out our
    <a href="/guides/running-shoe-guide">Running Shoe Buying Guide</a> or
    explore our <a href="/collections/running-accessories">Running Accessories</a>
    collection to complete your kit.
  </p>
</section>

Either populate the empty category with products, or add a noindex tag and remove it from your navigation so Google does not waste crawl budget on a page with no content.

On Wix

1. Open the Wix Editor or Wix Dashboard.
2. Option A — Add products: Go to Store Products → Add New Product or reassign existing products to this category via each product's Categories field.
3. Option B — Noindex: In the Wix dashboard go to SEO → SEO Settings. Use the SEO patterns or open the specific category page via Pages & Menu → (your store page) → SEO. Under 'Advanced SEO', click 'Add tag' in the meta tags section and add: <meta name='robots' content='noindex, follow'>. Save and republish.
4. Option C — Remove from nav: In the Editor, open Pages & Menu, find the category page, click the three-dot menu, and choose 'Hide from menu'. Then go to SEO Settings for that page and toggle 'noindex'.
5. Option C — Delete: Use the store's category management (Wix eCommerce dashboard → Categories) to delete the category, and set up a redirect under SEO → URL Redirects Manager.

<meta name="robots" content="noindex, follow">

Add more products to sparse category pages, or consolidate very thin categories into broader, related ones so every indexed category page delivers genuine value to shoppers and search engines.

On Wix

1. Open your Wix store dashboard and go to Catalog → Collections.
2. Open a sparse collection and add products by clicking 'Add Products' and selecting from your catalog.
3. To add descriptive text: in the Wix Editor, navigate to the collection page, click the product gallery/grid, and add a Text element above it with category intro copy.
4. To merge collections: move products to the surviving collection, delete the sparse one, and in SEO → 301 Redirects (Site → SEO → Redirects) add a redirect from the old collection URL to the new one.
5. To noindex: in the Wix Editor select the collection page → click the SEO panel (the helmet icon) → under 'Advanced SEO' → 'Meta Tags' add <meta name="robots" content="noindex, follow">, or turn off 'Let search engines index this page' if available.

<meta name="robots" content="noindex, follow">

Add a canonical tag to every filtered, sorted, and paginated collection/category URL pointing back to the clean (unfiltered) category URL, so Google consolidates duplicate pages and focuses crawl budget on your real content.

On Wix

1. Wix automatically adds canonical tags to store collection pages. For standard Wix eCommerce filter URLs, Wix typically outputs a self-referencing canonical, which may not consolidate duplicate filter pages.
2. Go to your Wix dashboard → SEO → SEO Settings. Check the 'Canonical Tags' section — Wix lets you set canonical URLs for individual pages via the SEO panel.
3. For collection pages: open the page in the editor, click the page SEO settings (three dots → SEO), and manually set the canonical URL to the clean collection URL if the filtered version is being indexed.
4. To prevent filter parameter URLs from being crawled/indexed at all (an alternative to canonicals), go to SEO → Crawlers & Indexing → URL Parameter Handling, and add your filter parameters (e.g. 'sort', 'filter', 'page') to the ignore list.
5. For Wix Stores specifically, the faceted filtering URLs are often hash-based (#filter) and may not be indexed by Google at all — verify first in Google Search Console Coverage report before implementing changes.

<head>
  <!-- All other head tags -->
  <link rel="canonical" href="https://www.example.com/collections/hoops">
</head>

Server-render your product descriptions in the initial HTML so that all crawlers — including Google, AI search bots, and social media scrapers — can read your content without executing JavaScript.

On Wix

1. Wix renders product pages server-side for its native Wix Stores product pages — these are generally crawlable without action.
2. If you have a custom Wix Velo (formerly Corvid) setup that fetches and displays product data using $w.onReady() and dynamic imports, Google may miss the content during fast crawls.
3. In Wix Studio / Editor: go to your Product Page template. Ensure the Product Description element is added from the Wix Stores widgets panel (not a plain text box populated by Velo fetch). The native widget is server-rendered.
4. For structured data: Wix automatically generates Product JSON-LD for Wix Stores product pages. Verify it is present using Google Search Console → URL Inspection on a product URL.
5. If you need to add or enrich JSON-LD, use Wix's SEO Settings panel: go to the product page in the Editor, open Page Settings → SEO, and add custom structured data in the 'Additional Tags' (structured data) field — Wix injects this server-side.
6. Do NOT add JSON-LD via a Velo $w script that runs client-side — it will not be seen by crawlers.

Expand your product descriptions to at least 300 words by adding specifications, use cases, and benefits so search engines have enough content to rank and shoppers have enough information to buy.

On Wix

1. Open the Wix Editor and navigate to your Wix Stores product page, OR go to Wix Dashboard → Catalog → Products.
2. Click the product to edit it.
3. In the 'Product Info' tab, find the 'Description' field.
4. Click into the text area and expand the description to 300+ words using the rich-text toolbar for bold, lists, and paragraph breaks.
5. Click 'Save'. Publish your site to make the changes live, then use Google Search Console to request re-indexing.

<section class="product-description">
  <h2>About the [Product Name]</h2>
  <p>
    The [Product Name] is a [category] designed for [target audience]. Whether you need
    [use case 1] or [use case 2], this [product] delivers [core benefit] without
    [common pain point].
  </p>

  <h3>Key Features &amp; Specifications</h3>
  <ul>
    <li><strong>Material:</strong> [e.g. 100% organic cotton, BPA-free polypropylene]</li>
    <li><strong>Dimensions:</strong> [W × H × D] / Weight: [X kg / X lbs]</li>
    <li><strong>Colour options:</strong> [Colour 1], [Colour 2], [Colour 3]</li>
    <li><strong>Compatibility:</strong> [e.g. Works with iOS 14+ and Android 10+]</li>
    <li><strong>Warranty:</strong> [X-year manufacturer warranty]</li>
  </ul>

  <h3>Why Shoppers Choose [Product Name]</h3>
  <p>
    Unlike [generic alternatives], the [Product Name] [specific differentiator]. This means
    [tangible benefit for the shopper], saving you [time / money / effort].
  </p>
  <p>
    Ideal for [persona / scenario], the [Product Name] has been tested to [standard or
    certification] and ships ready to use — no assembly required.
  </p>

  <h3>How to Use</h3>
  <p>
    [Step-by-step or scenario-based usage instructions in 2–4 sentences. Include any
    important setup, safety, or care notes here.]
  </p>

  <h3>In the Box</h3>
  <ul>
    <li>1 × [Product Name]</li>
    <li>1 × [Accessory or manual]</li>
    <li>1 × [Charging cable / carry bag / etc.]</li>
  </ul>
</section>

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 Wix

1. Open the Wix Editor or Wix dashboard and go to Store Products (via the left panel or dashboard → eCommerce → Products).
2. Click the product to open its details page.
3. In the 'Product Info' tab, locate the 'Description' text field and click 'Edit' to open the rich-text editor. Write or paste your description here.
4. To set a custom SEO meta description: click the 'SEO' tab within the product editor and fill in the 'Meta Description' field.
5. Click 'Save' and use Wix's 'Preview' to confirm the description appears on the product 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>

Expand every product description to at least 300 words of unique, keyword-rich content that answers real shopper questions and gives Google enough text to understand and rank the page.

On Wix

1. Open the Wix Editor and navigate to your product page via the Wix Stores dashboard: Wix Dashboard → Store Products → [select product].
2. Click into the 'Description' field and expand it with your new copy using the rich-text toolbar (bold, bullets, paragraphs).
3. Alternatively, go to Wix Dashboard → Store → Products → select product → scroll to 'Description' and edit inline.
4. Publish the site after saving to make the changes live, then submit the URL in Google Search Console.

<section class="product-description" aria-label="Product description">
  <h2>About This Product</h2>
  <p>
    Write your opening paragraph here (2–3 sentences introducing the product,
    its primary benefit, and who it is for). Aim for a natural, engaging tone
    that mirrors how your customers talk about this type of product.
  </p>

  <h3>Key Features</h3>
  <ul>
    <li><strong>Feature One:</strong> Explain the benefit, not just the spec.</li>
    <li><strong>Feature Two:</strong> Include the detail a shopper needs to decide.</li>
    <li><strong>Feature Three:</strong> Use the words your customers actually search for.</li>
    <li><strong>Feature Four:</strong> Keep each bullet to one clear point.</li>
  </ul>

  <h3>Materials &amp; Specifications</h3>
  <p>
    Describe materials, dimensions, weight, compatibility, or other technical
    details relevant to your product category. Specificity builds trust and
    captures long-tail searches (e.g. "100% organic cotton", "fits 13-inch laptops").
  </p>

  <h3>How to Use</h3>
  <p>
    Walk the customer through setup, application, or use in plain language.
    Answer the most common pre-purchase questions here so shoppers feel confident.
  </p>

  <h3>Why Our Customers Love It</h3>
  <p>
    Reinforce with a sentence or two of social proof context or a unique selling
    point that differentiates this product from generic alternatives.
  </p>
</section>

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

On Wix

1. Open the Wix Editor and navigate to the page containing the product image, or go to Wix Stores → Products and open the product.
2. Click the product image to select it.
3. In the 'Product Images' section of the product editor, hover over the image and click the Settings (pencil/gear) icon.
4. Enter descriptive text in the 'What's in the image?' (alt text) field.
5. Click Apply / Done and Publish your site.
6. For store product images, you can also bulk-manage images via Wix Stores → Products → select a product → Media section.

<!-- 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 `brand` property to your Product schema markup so search engines can match your listings to brand-specific queries.

On Wix

1. Wix automatically generates Product schema for Wix Stores products, but brand support depends on your plan and product data.
2. In the Wix Editor, go to your product page → click the product widget → open Product Settings and ensure the 'Brand' field (under Additional Info or custom fields) is populated for each product.
3. For custom schema injection: go to Wix Editor → click the page → Page Settings → Advanced → paste your JSON-LD into the 'Custom Code' (head) section, or use the Wix SEO Settings panel.
4. Alternatively, use a Wix app such as 'SEO Wizard' or 'Semrush SEO' from the Wix App Market to manage structured data with brand fields.
5. Test a live product URL with Google's Rich Results Test after changes are published.

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 Wix

1. Open the Wix Editor → Wix Stores → Products → [select a product].
2. In the product settings panel, look for the 'Additional Info' or 'SKU & Barcode' section and enter the GTIN in the 'Barcode' field.
3. Wix eCommerce automatically includes this value in the Product structured data it generates — no code editing required.
4. For MPN, add a Custom Field via Catalog → Products → Custom Fields, label it 'MPN', and populate it per product. Then contact Wix support or use Velo (Wix's dev platform) to inject the MPN into the JSON-LD via a Velo page code block.
5. Verify by using Google's Rich Results Test on the live product URL.

Add a visible stock availability label and an `availability` property to your Product structured data so Google can display rich results and shoppers know immediately whether a product is in stock.

On Wix

1. Wix automatically adds Product structured data on Wix Stores product pages, including availability, when products have stock management enabled.
2. Go to your Wix Dashboard → Wix Stores → Products → click a product → scroll to *Inventory* → set 'Track Inventory' to ON and ensure the stock quantity is entered correctly so Wix can set `InStock` or `OutOfStock` automatically.
3. For products where you do NOT track inventory, set the *In Stock* toggle manually in the same Inventory panel.
4. To add a custom visible label, use the Wix Editor to open the product page, add a Text element near the Add to Cart button, and use Wix Velo (code panel) to dynamically set the text: `$w('#stockLabel').text = product.inStock ? 'In Stock' : 'Out of Stock';`
5. Publish and validate the product page in the Rich Results Test.

<!-- Product structured data with availability -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Your Product Name",
  "description": "A short description of your product.",
  "sku": "YOUR-SKU-123",
  "image": "https://www.example.com/images/product.jpg",
  "brand": {
    "@type": "Brand",
    "name": "Your Brand Name"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/products/your-product",
    "priceCurrency": "USD",
    "price": "29.99",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  }
}
</script>

<!-- Visible stock label near Add-to-Cart button -->
<p class="stock-status" style="font-weight:bold; color:#2a7a2a;">&#10003; In Stock</p>

Add at least one high-quality image to every product page so shoppers can see what they're buying and Google can surface your products in Image Search.

On Wix

1. Open the Wix Editor or Wix Dashboard and go to Store Products (via the left panel or dashboard sidebar).
2. Click the product that is missing images to open it.
3. In the 'Media' section, click '+ Add Images or Video' and upload your product photos from your device or Wix Media library.
4. Hover over each uploaded image, click the pencil/edit icon, and add descriptive alt text in the 'What's in the image?' field.
5. Click 'Save' (or 'Publish' to push changes live) and visit the product page URL to confirm images appear.

<figure class="product-gallery">
  <img
    src="/images/products/black-leather-wallet-front.jpg"
    alt="Black leather wallet with RFID blocking, front view"
    width="800"
    height="800"
    loading="eager"
  />
  <img
    src="/images/products/black-leather-wallet-open.jpg"
    alt="Black leather wallet open showing card slots and cash pocket"
    width="800"
    height="800"
    loading="lazy"
  />
</figure>

Add a structured specifications table or list to every product page so shoppers, search engines, and AI tools can instantly find and use key product details.

On Wix

1. Open the Wix Editor and navigate to a product page (Wix Stores product pages are dynamic — click 'Manage Pages' → 'Shop' → 'Product Page').
2. Click inside the product page layout and add a new section below the product description. Use 'Add Elements' → 'Table' to insert a Wix Table widget, then fill in the spec rows.
3. Alternatively, add a 'Accordion' or 'Collapsible Text' element (Add Elements → Interactive) and paste spec content inside.
4. For store-wide specs, use Wix's Product Info tab: in the Wix dashboard go to Catalog → Products → (select product) → 'Additional Info' tab → add a new section titled 'Specifications' and enter your table content using the rich-text editor's HTML embed option.
5. Click 'Publish' and test the page on mobile preview.

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

On Wix

1. Wix eCommerce product pages render prices server-side by default. If a price is missing from HTML, it is likely because a custom Velo (Wix Code) script is hiding and then replacing the price element.
2. Open the Wix Editor → click the product price element → check Connected Data and ensure it is bound to the product price field from the Wix Stores dataset (not fetched in $w.onReady via a client-side API call).
3. For Wix Studio (Velo) custom pages: ensure the price is set on the element during the server-side rendering phase using the beforeRender hook where available, or pre-populate the element value before page load rather than after.
4. For structured data on Wix: go to Settings → SEO → Structured Data Markup; Wix Stores automatically injects Product schema with price for standard product pages. For custom pages, use the Structured Data Markup tool to add JSON-LD manually.
5. Use Google's Rich Results Test with your live product URL to confirm the price is parsed correctly.

Add at least 4 product images (multiple angles, detail shots, and lifestyle/in-use photos) to every product page to improve click-through rates, conversions, and Google Images visibility.

On Wix

1. Open Wix Editor → Wix Stores → Products → [select your product].
2. In the product editor, click the main image area or the '+ Add Media' button to open the Media Manager.
3. Upload additional images and click 'Add to Page' to attach them to the product gallery.
4. To edit alt text: in the Media Manager, right-click an image → 'Edit Image' → fill in the 'What's in the image?' (alt text) field.
5. Drag images within the product media panel to set display order, then click 'Save'.

<figure class="product-gallery">
  <!-- Main hero image -->
  <img
    src="/images/red-leather-wallet-front.webp"
    alt="Red leather bifold wallet — front view"
    width="2000"
    height="2000"
    loading="eager"
    fetchpriority="high"
  />
</figure>

<!-- Thumbnail strip -->
<ul class="product-thumbnails" role="list">
  <li>
    <img
      src="/images/red-leather-wallet-front-thumb.webp"
      alt="Red leather bifold wallet — front view"
      width="200"
      height="200"
      loading="lazy"
    />
  </li>
  <li>
    <img
      src="/images/red-leather-wallet-back-thumb.webp"
      alt="Red leather bifold wallet — back view"
      width="200"
      height="200"
      loading="lazy"
    />
  </li>
  <li>
    <img
      src="/images/red-leather-wallet-interior-thumb.webp"
      alt="Red leather bifold wallet — interior card slots"
      width="200"
      height="200"
      loading="lazy"
    />
  </li>
  <li>
    <img
      src="/images/red-leather-wallet-lifestyle-thumb.webp"
      alt="Red leather bifold wallet shown in a shirt pocket"
      width="200"
      height="200"
      loading="lazy"
    />
  </li>
</ul>

Rewrite every product page title tag to include the specific product name plus at least one differentiating attribute (variant, material, brand, or model) so Google and shoppers can instantly tell what the page is about.

On Wix

1. Open the Wix Editor or Wix Studio and navigate to your store product page.
2. In the Wix Editor, go to your site's dashboard: Stores → Products, click the product, then select 'SEO' tab inside the product editor.
3. Update the 'Title tag' field with your descriptive product title.
4. Alternatively, go to the site dashboard → SEO → SEO Tools → Structured Data Markup for store-wide patterns.
5. For bulk updates, use the Wix SEO Wiz or export/import products via the Wix Stores CSV export (the 'pageTitle' column maps to the title tag).
6. Click Publish to make changes live.

<head>
  <title>Magnetic Card Holder Phone Mount – MagSafe Compatible – BrandName</title>
  <meta name="description" content="Attach your cards securely to any MagSafe-compatible iPhone with BrandName's slim magnetic card holder mount. Holds 1–3 cards. Available in black and white.">
</head>

Remove product variant URLs (e.g. ?variant= or ?sku= query strings) from your XML sitemap and keep only the canonical base product URL for each product.

On Wix

1. Wix manages the sitemap automatically; store owners cannot directly edit the XML file.
2. Go to your Wix Dashboard → Marketing & SEO → SEO Tools → SEO Settings, and verify 'Let Wix create and manage your sitemap' is enabled — this uses the safe, canonical-only version.
3. Ensure product pages are set to 'Indexed' (not hidden) so the canonical page appears: Dashboard → Marketing & SEO → SEO Tools → SEO Patterns → Product Pages.
4. If you have Wix eCommerce, Wix automatically uses the clean product URL without variant parameters in the sitemap — no further action is needed unless a third-party Wix app is generating a custom sitemap.
5. Re-submit yoursite.com/sitemap.xml in Google Search Console.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <!-- CORRECT: canonical base product URL -->
  <url>
    <loc>https://www.example.com/products/blue-sneaker</loc>
    <lastmod>2024-06-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>

  <!-- WRONG — never include variant query strings:
  <url>
    <loc>https://www.example.com/products/blue-sneaker?variant=12345</loc>
  </url>
  <url>
    <loc>https://www.example.com/products/blue-sneaker?sku=blue-large</loc>
  </url>
  -->

</urlset>

Add a canonical tag to every product variant URL pointing back to the base product page, so Google consolidates ranking signals on one URL instead of splitting them across hundreds of duplicates.

On Wix

1. Wix automatically sets canonical tags on product pages through its native eCommerce and SEO tools.
2. Go to your Wix Dashboard → Marketing & SEO → SEO Tools → SEO Settings to review site-level SEO defaults.
3. For individual product pages, open the Editor, click on a product page, then click the SEO panel (gear/settings icon) → Advanced SEO → Canonical URL. Ensure this is set to the base product URL or left blank (Wix will self-canonicalise correctly by default).
4. If you use Wix's native product options (colour, size), Wix does NOT generate separate URLs for variants — options are handled client-side without changing the URL. If you see variant URLs being indexed, it may be from a third-party app; check the app's settings for canonical output.
5. Use Wix's SEO Inspector (available in the Editor) or Google Search Console URL Inspection to confirm the canonical tag on any product URL.

<head>
  <!-- All variant URLs (e.g. ?color=Red, ?size=M, ?variant=123) point canonical to the base product URL -->
  <link rel="canonical" href="https://www.example.com/products/my-product-name">
</head>

Identify and fix every page returning an HTTP 5xx server error so search engines can crawl and index those URLs again.

On Wix

1. Open the Wix Editor for your site and click Preview to confirm whether the error is site-wide or page-specific.
2. Go to your Wix Dashboard > Apps > Manage Apps and remove or disconnect any recently added app to test if it is the source of the error.
3. If you use Velo (Wix's dev platform), open the relevant page code in the Wix Editor > Dev Mode and check the browser console for JavaScript errors; also check Velo's backend .jsw files for syntax errors or failed data fetches.
4. For Wix Stores product/collection pages, go to the Wix Editor, select the relevant dynamic page, and verify the dataset and database collection connections are intact under Connect to Data.
5. If the error persists and is not caused by your own code, contact Wix Support via the Help Center — Wix hosts the infrastructure and must resolve platform-level 500 errors.
6. After the fix, use Google Search Console > URL Inspection > Request Indexing.

# Run this in your terminal to check the HTTP status code of any URL
curl -o /dev/null -s -w "HTTP Status: %{http_code}\n" https://www.example.com/your-page

# A healthy page returns:
# HTTP Status: 200

# A broken page returns (example):
# HTTP Status: 500

Reduce your page load time to under 3 seconds by compressing images, eliminating render-blocking scripts and styles, and improving server response speed.

On Wix

1. In the Wix Editor, go to Site → SEO → Core Web Vitals (or use Wix's built-in 'Site Speed' dashboard) to see Wix's own performance suggestions.
2. Images: Click each image in the editor → Change Image → ensure uploaded images are no wider than their displayed size. Enable Wix's WebP auto-conversion (on by default) and lazy loading via image settings.
3. Remove unused Wix Apps: Go to the Wix App Market dashboard → Manage Apps and remove any app not actively contributing to your store.
4. Reduce the number of animations and video backgrounds — each one adds significant page weight on Wix.
5. In Editor settings, ensure 'Turbo' (Wix's performance mode) is enabled if available on your plan.
6. Wix handles CDN and server caching automatically; your biggest levers are reducing page-level asset weight (images, apps, animations).

<img
  src="product-image.webp"
  alt="Descriptive product alt text"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

Add meaningful, original written content to pages that contain fewer than 300 words so Google has enough substance to rank and display them confidently.

On Wix

1. Open the Wix Editor and navigate to the thin page using the Pages panel on the left.
2. Click directly on the text area (or add a new Text element via Add → Text) and write your expanded content. For product pages, access the Wix Stores product editor via the Store Manager → Products → click the product → expand the 'Description' section.
3. For collection/category pages in Wix Stores, add a Text element above or below the product gallery widget to include an introductory paragraph about the collection.
4. For blog posts: Blog Manager → Posts → click the post → expand the body content in the post editor.
5. Use Wix's built-in SEO panel (accessible via the page settings gear → SEO) to check the page's content and meta information after updating.

<section class="product-description">
  <h2>About This Product</h2>
  <p>
    The Merino Wool Crew-Neck Sweater is crafted from 100% ethically sourced
    Grade-A Merino wool, making it naturally temperature-regulating, moisture-
    wicking, and soft enough to wear directly against the skin. Perfect for
    layering in autumn and winter, or as a standalone piece during mild spring
    evenings.
  </p>

  <h3>Key Features</h3>
  <ul>
    <li>100% Merino wool — no synthetic blends</li>
    <li>Available in sizes XS–3XL with a relaxed, unisex fit</li>
    <li>12 colours, each piece individually yarn-dyed for depth</li>
    <li>Ribbed cuffs and hem for a tailored finish</li>
    <li>Machine washable on a gentle 30°C wool cycle</li>
    <li>Certified by the Responsible Wool Standard (RWS)</li>
  </ul>

  <h3>Sizing &amp; Fit</h3>
  <p>
    This sweater is cut with a relaxed, slightly oversized silhouette. If you
    prefer a closer fit, we recommend sizing down. See our full <a href="/size-guide">size guide</a>
    for chest, waist, and sleeve measurements.
  </p>

  <h3>Care Instructions</h3>
  <p>
    Machine wash cold on a gentle/wool cycle. Lay flat to dry — do not tumble
    dry, iron at high heat, or dry-clean. With proper care, Merino wool retains
    its shape and softness for years.
  </p>

  <h3>Frequently Asked Questions</h3>
  <dl>
    <dt>Is Merino wool itchy?</dt>
    <dd>
      No. Merino fibres are finer than standard wool (under 19.5 microns),
      which means they bend against the skin rather than prick it, making this
      sweater comfortable even for people who normally find wool irritating.
    </dd>
    <dt>How does Merino wool compare to cashmere?</dt>
    <dd>
      Merino is more durable and easier to care for than cashmere, while still
      offering exceptional softness. It's an ideal everyday choice for those
      who want luxury without high maintenance.
    </dd>
    <dt>Can I return or exchange this item?</dt>
    <dd>
      Yes. We accept returns and exchanges within 30 days of delivery, provided
      the item is unworn and in its original packaging. See our
      <a href="/returns">returns policy</a> for full details.
    </dd>
  </dl>
</section>

Shorten your page title tag to 60 characters or fewer so it displays fully — without truncation — in Google search results.

On Wix

1. Open the Wix Editor for your site.
2. Click on the page you want to edit in the Pages & Menu panel, then click the three-dot menu (⋮) next to the page name and select 'SEO Basics' (or 'SEO Settings').
3. Edit the 'Title tag' field directly, keeping it ≤60 characters.
4. For product pages in Wix eCommerce: go to your Wix Dashboard → Store Products, open the product, scroll to the 'SEO' section, and edit the 'Page title'.
5. Click Save/Publish to apply changes.

<head>
  <meta charset="UTF-8">
  <title>Running Shoes for Men | YourBrand</title>
</head>

Expand your page title to between 30 and 60 characters so Google displays it fully in search results and shoppers can immediately understand what the page is about.

On Wix

1. Open the Wix Editor for your site.
2. For any page: click the Pages & Menu icon (top left) → hover over the page → click the three-dot menu → select 'SEO Basics' (or 'Page SEO').
3. In the SEO panel that opens, update the 'Title tag' field to your new 30–60 character title.
4. For product pages in Wix eCommerce: go to the Wix Dashboard → Store Products → select the product → scroll to 'SEO' on the right side → update 'Page Title'.
5. Wix shows a live character count and a snippet preview — use it to verify length before publishing.
6. Click 'Save' and then 'Publish' to make the change live.

<head>
  <meta charset="UTF-8">
  <title>Men's Merino Wool Beanies – BrandName</title>
</head>

Move your JSON-LD structured data from client-side JavaScript injection to server-rendered HTML so that AI crawlers and search engines can read it in the raw page source.

On Wix

1. In the Wix Editor open your site and go to the page you want to add schema to.
2. Click Add → Embed Code → Embed HTML (Custom Code) and place the JSON-LD block in the <head> section — IMPORTANT: use Wix's 'Add Custom Code' feature under Settings → Custom Code, NOT Velo (JavaScript) for schema, as Velo runs client-side.
3. In the Wix dashboard go to Settings → Custom Code → click '+ Add Custom Code', paste your complete <script type="application/ld+json">…</script> block, select 'Head' as placement, and set it to load on the relevant pages.
4. For dynamic product pages (Wix Stores), use the Wix SEO Wiz or Wix's built-in structured data support — Wix automatically outputs Product schema server-side for Wix Stores items; verify this is enabled under Store → Settings → SEO.
5. View the page source to confirm the JSON-LD appears in the raw HTML. Note: Wix's custom code placed in 'Head' IS server-rendered; code injected via Velo's $w() or window events is NOT.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Your Product Name",
  "description": "A clear description of your product.",
  "sku": "YOUR-SKU-123",
  "brand": {
    "@type": "Brand",
    "name": "Your Brand Name"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/products/your-product",
    "priceCurrency": "USD",
    "price": "49.99",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "128"
  }
}
</script>

Add a structured-data author field (schema.org Person) to every article or blog post so AI engines and Google can identify and trust who wrote the content.

On Wix

1. In the Wix Editor, open your Blog Post page. Go to the Blog Manager and select a post.
2. Wix automatically adds some structured data for blog posts using the post author's display name from the contributor profile.
3. To enrich it: go to Settings (gear icon) → Roles & Permissions → click the author's name → ensure their Display Name and About Me bio are filled in.
4. For sameAs links, use Wix's SEO Settings (found under the Marketing & SEO menu → SEO Tools → Structured Data Markup) — Wix lets you add custom JSON-LD here per page type.
5. Paste the full JSON-LD author snippet in the custom structured data field for Blog Post page type.
6. Validate with the Rich Results Test.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "How to Choose the Best Running Shoes",
  "datePublished": "2024-03-10T09:00:00+00:00",
  "dateModified": "2024-06-20T14:00:00+00:00",
  "author": {
    "@type": "Person",
    "name": "Alex Johnson",
    "url": "https://www.yourstore.com/about/alex-johnson",
    "sameAs": [
      "https://www.linkedin.com/in/alexjohnson",
      "https://twitter.com/alexjohnson"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Store Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.yourstore.com/assets/logo.png",
      "width": 300,
      "height": 60
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.yourstore.com/blog/how-to-choose-running-shoes"
  }
}
</script>

Render all FAQ answers in the server-delivered HTML so that both Google and your FAQ structured data can see every question and answer — not just the one currently open in a JavaScript accordion.

On Wix

1. Open the Wix Editor for your FAQ page.
2. If you are using the Wix Accordion / FAQ app widget, check whether it supports 'Expand All' rendering or server-side output — most Wix accordion widgets are JavaScript-rendered. Switch to a plain Text + Collapsible Text element combination, or use the Wix FAQ app which has structured-data support.
3. To inject FAQPage JSON-LD, go to your site Dashboard → SEO → SEO Settings (or use the Wix SEO Wiz) and add a custom JSON-LD snippet via Settings → Advanced SEO → <head> tags for that specific page.
4. Alternatively, use a Velo (Wix code) snippet: in the page's code panel (Page Code), add the JSON-LD block to the page <head> via wixWindow or a custom HTML element embedding the <script type='application/ld+json'> block.
5. Validate with the Rich Results Test.

<section>
  <details>
    <summary>What is your return policy?</summary>
    <p>We accept returns within 30 days of purchase. Items must be unused and in original packaging. Contact support@example.com to start a return.</p>
  </details>

  <details>
    <summary>How long does shipping take?</summary>
    <p>Standard shipping takes 3–5 business days. Express shipping (1–2 business days) is available at checkout.</p>
  </details>

  <details>
    <summary>Do you ship internationally?</summary>
    <p>Yes, we ship to over 40 countries. International orders typically arrive within 7–14 business days.</p>
  </details>

  <details>
    <summary>Can I change or cancel my order?</summary>
    <p>Orders can be changed or cancelled within 1 hour of placement. After that, please wait for delivery and use our return process.</p>
  </details>
</section>

Fix the AggregateRating.ratingValue in your structured data so it is a valid number between 1 and 5 (or your declared scale's minimum and maximum).

On Wix

1. Wix injects AggregateRating structured data automatically for Wix Stores products when reviews exist and the Wix Reviews app is installed and active.
2. In your Wix dashboard, go to App Market and confirm 'Wix Reviews' (or 'Product Reviews') is installed on your store.
3. Open a product page in the Editor and confirm reviews are enabled for that product — some products may have reviews toggled off individually.
4. If you have added custom structured data via Wix's 'Add Structured Data Markup' panel (Settings → Advanced → Structured Data Markup), review that custom JSON-LD and correct or remove any ratingValue: 0 entries. Suppress the AggregateRating block entirely if the product has no reviews.
5. For Wix Studio / custom Velo code, locate the structured data injected via $w.onReady or wixSeo.setStructuredData and apply the same conditional: only include AggregateRating when reviewCount > 0 and ratingValue >= 1.
6. Publish your site changes and validate in the Google Rich Results Test.

Restructure page content to lead with a direct, concise answer, use question-format headings, and add FAQ structured data so search engines and AI assistants can surface your answers prominently.

On Wix

1. Open the Editor and click the page you want to edit.
2. Click on the first text block in the main content area and rewrite it as a 160-character direct-answer summary; drag it above any other body text if necessary.
3. Select each subheading text element, rewrite it as a question (e.g., 'How do I…?'), and set its style to Heading 2 or Heading 3 using the text toolbar.
4. Add FAQ schema: In the Editor go to Add (+) → Interactive → Accordion/FAQ widget. Wix's native FAQ widget outputs FAQPage structured data automatically when you enable it.
5. Alternatively, use Wix's 'Add Apps' → search 'Wix FAQ' (free, built-in); populate it with your Q&A pairs and Wix will include the FAQPage JSON-LD in the page source.
6. To manually inject JSON-LD on any Wix page: go to Settings (or Page Settings) → Advanced → Custom Code → Add Code → paste before </body>.

<!-- Answer-first page structure template -->

<!-- 1. Direct-answer summary (≤160 characters) -->
<p class="answer-summary">
  [Product Name] does [core benefit] by [key mechanism] — ideal for [target customer].
</p>

<!-- 2. Question-format H2 subheading -->
<h2>What does [Product Name] do?</h2>
<p>Direct 1–2 sentence answer here. Then expand with supporting detail below.</p>

<!-- 3. Another question-format heading -->
<h2>Who is [Product Name] designed for?</h2>
<p>Direct answer. Then elaborate.</p>

<!-- 4. FAQ section (visible on page — required for FAQPage schema) -->
<section id="faq">
  <h2>Frequently Asked Questions</h2>

  <h3>How long does shipping take?</h3>
  <p>Standard shipping takes 3–5 business days. Express options are available at checkout.</p>

  <h3>What is your return policy?</h3>
  <p>We accept returns within 30 days of delivery on unused items in original packaging.</p>

  <h3>Is [Product Name] compatible with [common concern]?</h3>
  <p>Yes. [One-sentence direct answer with any important caveats.]</p>
</section>

<!-- 5. FAQPage JSON-LD (copy the JSON-LD snippet above and paste here or in <head>) -->

Collect at least 5 published reviews so Google will display star ratings in search results alongside your product listings.

On Wix

1. Open the Wix Editor and ensure you have added the 'Wix Product Reviews' widget to your product pages (available from Add → Store Elements → Product Reviews).
2. In the Wix dashboard go to Store → Reviews to view and manage existing reviews.
3. Enable automated review request emails: in the Wix dashboard go to Automations → create a new automation triggered by 'Order delivered', add action 'Send email' using the review request template.
4. Wix automatically generates AggregateRating structured data for products that have reviews — no code change needed. Verify by using Google's Rich Results Test once you have 5+ reviews.
5. To import existing reviews, use the Wix CSV import feature in Store → Reviews → Import Reviews.

<!-- Product structured data with AggregateRating -->
<!-- Note: Google will only show review stars when reviewCount >= 5 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Your Product Name",
  "image": [
    "https://example.com/images/product-front.jpg",
    "https://example.com/images/product-side.jpg"
  ],
  "description": "A clear, accurate description of your product.",
  "sku": "SKU-12345",
  "mpn": "MPN-12345",
  "brand": {
    "@type": "Brand",
    "name": "Your Brand"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "12",
    "bestRating": "5",
    "worstRating": "1"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/your-product",
    "priceCurrency": "USD",
    "price": "49.99",
    "priceValidUntil": "2026-12-31",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Your Store Name"
    }
  }
}
</script>

Add Article schema markup (JSON-LD) to every blog post and editorial page so Google can identify and rich-result-enhance your content in search.

On Wix

1. Open the Wix Editor for your site.
2. Go to your Blog Post page template. In the left panel, click 'Add Elements' → 'Embed Code' → 'Custom Code'.
3. Alternatively, go to Settings → Custom Code → Add Code → choose 'Head' and 'Apply to specific pages' → select Blog Post pages.
4. Paste the JSON-LD script block. Note: Wix does not expose dynamic blog variables in custom code, so you will need to hard-code values per post or use the Wix SEO Wiz / Wix's built-in structured data which Wix injects automatically for blog posts in many templates — verify first by running a live blog URL through the Rich Results Test before adding manual code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to Choose the Right Running Shoes</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "How to Choose the Right Running Shoes",
    "description": "A complete guide to selecting running shoes based on your gait, terrain, and training goals.",
    "image": {
      "@type": "ImageObject",
      "url": "https://www.example.com/images/running-shoes-guide.jpg",
      "width": 1200,
      "height": 630
    },
    "author": {
      "@type": "Person",
      "name": "Jane Smith",
      "url": "https://www.example.com/authors/jane-smith"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Example Store",
      "logo": {
        "@type": "ImageObject",
        "url": "https://www.example.com/logo.png",
        "width": 250,
        "height": 60
      }
    },
    "datePublished": "2024-03-15",
    "dateModified": "2024-06-01",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://www.example.com/blog/how-to-choose-running-shoes"
    },
    "url": "https://www.example.com/blog/how-to-choose-running-shoes"
  }
  </script>
</head>
<body>
  <!-- page content -->
</body>
</html>

Add BreadcrumbList structured data (JSON-LD) to every page so Google can display your site's navigation path directly in search results.

On Wix

1. In the Wix Editor, open the page you want to update and click the Settings (gear) icon for that page, or use the Wix SEO Settings panel.
2. Scroll to the Advanced SEO section and paste the JSON-LD script block into the 'Add structured data markup' text area — Wix injects this into the page's <head>.
3. For site-wide dynamic breadcrumbs on product/category pages in Wix Stores, use Wix's built-in SEO Settings (found under Marketing & SEO › SEO Tools › Structured Data Markup), which can apply markup patterns across page types.
4. Alternatively, use the Wix Velo (dev mode) to programmatically inject the JSON-LD via the page's wix-seo module: import wixSeo from 'wix-seo'; wixSeo.setStructuredData([{ ... your BreadcrumbList object ... }]);
5. Validate each page type with Google's Rich Results Test.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Women's Clothing",
      "item": "https://www.example.com/womens-clothing/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Dresses",
      "item": "https://www.example.com/womens-clothing/dresses/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Blue Wrap Dress",
      "item": "https://www.example.com/womens-clothing/dresses/blue-wrap-dress/"
    }
  ]
}
</script>

Add FAQPage schema markup to any page that contains a Frequently Asked Questions section so Google can display your answers as rich results directly in search.

On Wix

1. In your Wix dashboard, go to Settings → Custom Code (under the Advanced section).
2. Click '+ Add Custom Code', paste your JSON-LD <script> block, name it 'FAQPage Schema', set 'Add Code to Pages' to the specific FAQ page (or all pages if FAQ appears site-wide), and set 'Place Code in' to 'Head'.
3. Click Apply and publish your site.
4. Alternatively, use the Wix SEO Wiz or install a third-party SEO app from the Wix App Market (e.g., 'SEOmatic') that supports custom schema injection per page.
5. Verify the live page in Google's Rich Results Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Frequently Asked Questions | Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What is your return policy?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We accept returns within 30 days of purchase. Items must be unused and in their original packaging."
        }
      },
      {
        "@type": "Question",
        "name": "How long does shipping take?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Standard shipping takes 5–7 business days. Expedited options are available at checkout."
        }
      }
    ]
  }
  </script>
</head>
<body>
  <h1>Frequently Asked Questions</h1>
  <h2>What is your return policy?</h2>
  <p>We accept returns within 30 days of purchase. Items must be unused and in their original packaging.</p>
  <h2>How long does shipping take?</h2>
  <p>Standard shipping takes 5–7 business days. Expedited options are available at checkout.</p>
</body>
</html>

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 Wix

1. Open the Wix Editor and navigate to the specific page that contains how-to content.
2. Click the page Settings (gear icon next to the page name in the Pages panel) > Advanced > Custom Code (or go to Settings > Custom Code in the main dashboard).
3. Click '+ Add Custom Code', paste your complete JSON-LD HowTo block, set it to load in the <head>, choose 'Load code once' or 'Load code on each new page', scope it to 'Specific pages' and select only this page.
4. Publish the site 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 LocalBusiness JSON-LD structured data to your store so search engines and AI answer engines can surface your business name, address, phone number, and hours in rich results and direct answers.

On Wix

1. In the Wix Editor, click on the page where you want the schema (typically the homepage).
2. Click the page settings gear icon or go to Pages & Menu → the three-dot menu next to your page → SEO.
3. Scroll to the 'Structured Data Markup (JSON-LD)' field (also called 'Advanced SEO' → 'Structured Data').
4. Paste your complete JSON-LD object into that field and save.
5. Alternatively use the Wix SEO Wiz (Marketing & SEO → SEO Tools → SEO Setup Checklist) which can generate basic LocalBusiness schema for you.
6. Publish your site and verify with Google's Rich Results Test.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Store",
    "name": "Your Business Name",
    "url": "https://www.yourdomain.com",
    "logo": "https://www.yourdomain.com/logo.png",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main Street",
      "addressLocality": "Springfield",
      "addressRegion": "IL",
      "postalCode": "62701",
      "addressCountry": "US"
    },
    "telephone": "+1-217-555-0100",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
        "opens": "09:00",
        "closes": "18:00"
      }
    ]
  }
  </script>
</head>
<body>
  <!-- page content -->
</body>
</html>

Add an Organization schema markup block to your store's homepage (and/or sitewide template) so search engines and AI assistants can definitively identify your brand.

On Wix

1. In the Wix Editor, open your site and go to Settings (the gear icon in the left panel).
2. Select 'Custom Code' (under Advanced), then click '+ Add Custom Code'.
3. Paste your complete <script type='application/ld+json'>…</script> Organization block into the code field.
4. Set 'Add Code to Pages' to 'All pages', and 'Place Code in' to 'Head'.
5. Click Apply and publish your site.
6. Verify using the Rich Results Test on your published site URL.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Acme Store",
  "url": "https://www.acmestore.com",
  "logo": {
    "@type": "ImageObject",
    "url": "https://www.acmestore.com/images/logo.png",
    "width": 250,
    "height": 250
  },
  "sameAs": [
    "https://www.facebook.com/acmestore",
    "https://www.instagram.com/acmestore",
    "https://twitter.com/acmestore",
    "https://www.linkedin.com/company/acmestore",
    "https://www.youtube.com/c/acmestore"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer service",
    "email": "hello@acmestore.com"
  }
}
</script>

Add Product schema markup (JSON-LD) to every product page so search engines can display rich results — including price, availability, and ratings — directly in search.

On Wix

1. Wix injects basic Product schema automatically for Wix Stores products — verify this is present by pasting a live product URL into Google's Rich Results Test.
2. To enhance or customise the schema (e.g. add brand, GTIN, or richer offers data), use Wix's built-in 'SEO Settings' panel: in the Editor, click a product page → open the SEO panel → use the 'Structured Data Markup' or 'Additional Meta Tags' field to add a JSON-LD block.
3. Alternatively, add custom JSON-LD via Wix Velo (Developer Mode): open the page code panel and inject the schema using the wix-seo module's setStructuredData() method with your product data.
4. Validate the final output with Google's Rich Results Test.

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

On Wix

1. In the Wix Editor, click on the page you want to edit.
2. Open the left panel and click the page settings icon (Page SEO or Page Settings).
3. Scroll down to find 'Advanced SEO' → 'Schema Markup' (or '<head> tags'). Wix provides a structured data field where you can paste JSON-LD directly per page.
4. Paste your WebPage JSON-LD block into this field for each page.
5. Alternatively, use the Wix SEO Wiz or a Wix App Market app such as 'SEO Schema Markup by Storeya' to manage schema globally.
6. Validate the live page URLs with 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>

Change every datePublished (and dateModified) value in your structured data from a human-readable string to a strict ISO-8601 date — formatted as YYYY-MM-DD or YYYY-MM-DDThh:mm:ss+hh:mm — so search engines can reliably parse your content's freshness.

On Wix

1. Wix automatically generates structured data for Blog Posts and uses ISO-8601 dates internally — if you see a non-ISO date it is coming from a custom HTML embed or third-party app.
2. To check: in the Wix Editor, look for any HTML Embed elements (Add → Embed → Custom Code or Embed a Widget) that contain JSON-LD with date fields.
3. Click on the embed, open the code, and manually update any date values to YYYY-MM-DD format.
4. For site-wide custom code, go to Settings → Custom Code, find the relevant code block, and edit the date strings.
5. If you use a Wix app that injects schema (e.g., a blog or events app), check that app's settings panel for date format options.
6. Use Google's Rich Results Test on the live Wix page URL to confirm the corrected date is being read.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Headline",
  "datePublished": "2025-03-12",
  "dateModified": "2025-03-12",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  }
}
</script>

Add a `sameAs` array to your Organization schema, linking to your verified social profiles, Wikipedia page, LinkedIn, and other authoritative sources so search engines can confidently identify your brand as a known entity.

On Wix

1. In the Wix Editor, click on your site's pages panel → go to your Homepage (Organization schema should live here).
2. Click the page settings gear (Page SEO) → Advanced SEO tab → find the 'Additional tags' / 'Schema markup' field.
3. Paste the complete Organization JSON-LD block (with sameAs) into that field and save.
4. Alternatively, use the Wix SEO Wiz or install an SEO app from the Wix App Market (e.g., 'SEOmatic') that provides a structured data manager.
5. Publish your site and validate with Google's Rich Results Test.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Brand Name",
  "url": "https://www.yourdomain.com",
  "logo": "https://www.yourdomain.com/images/logo.png",
  "sameAs": [
    "https://www.linkedin.com/company/your-company",
    "https://www.facebook.com/yourpage",
    "https://twitter.com/yourhandle",
    "https://www.instagram.com/yourhandle",
    "https://www.youtube.com/@yourchannel",
    "https://en.wikipedia.org/wiki/Your_Brand",
    "https://www.wikidata.org/wiki/QXXXXXXX"
  ]
}
</script>

Ensure every page that should appear in AI-powered answers and rich results is actually reachable by crawlers, then add structured data so search engines and AI systems can read and surface its content.

On Wix

1. In the Wix Editor or Wix Studio, confirm the page is published and not hidden: Pages & Menu → right-click the page → check it is not set to 'Hide from menu' combined with no direct URL, or marked as a Members-only page unintentionally.
2. Go to Settings → SEO → Robot settings and confirm the page is not set to 'Hide from search engines' (noindex toggle).
3. For broken URLs, use the Wix 301 Redirects tool: Settings → SEO → URL Redirect Manager → Add Redirect.
4. To add structured data (JSON-LD), go to the page in the Editor → Settings (page settings) → Advanced → Structured Data (or use the Wix SEO Wiz). For custom schema, add a Custom HTML widget (from the Add menu → Embed → Custom Code) and paste your JSON-LD script block, OR use Settings → Custom Code (site-level) to inject schema on specific pages.
5. For product pages in Wix Stores, structured data is partially auto-generated; use the Wix SEO settings per product to ensure visibility.
6. Submit the corrected URL in Google Search Console and test with the Rich Results Test.

Audit every element that uses ARIA attributes and ensure each attribute is permitted for that element's role — removing or correcting any mismatched aria-* attributes.

On Wix

1. Open the Wix Editor for your site.
2. Click the element flagged in your audit. In the element's settings panel, look for an 'Accessibility' section — some Wix elements expose aria role and label fields here.
3. If the ARIA attribute was added via Wix Velo (Dev Mode), open the Velo code panel: the relevant file is usually the page's .js file or a public/private module. Locate the $w() selector for the element and remove or correct the aria-* property being set programmatically.
4. If the bad attribute comes from a Wix App Market widget, report it to the app developer via the app's support channel — you cannot edit third-party app markup directly.
5. Preview the page and re-run axe DevTools to confirm the violation is gone.

<!-- WRONG: aria-checked is not allowed on role="button" -->
<div role="button" aria-checked="true">Toggle</div>

<!-- CORRECT option A: use a role that supports aria-checked -->
<div role="checkbox" aria-checked="true" tabindex="0">Toggle</div>

<!-- CORRECT option B: remove the unsupported attribute and use a native element -->
<button type="button" aria-pressed="true">Toggle</button>


<!-- WRONG: aria-expanded is not allowed on a <li> with no interactive role -->
<li aria-expanded="true">Menu Item</li>

<!-- CORRECT: put aria-expanded on the button that controls the submenu -->
<li>
  <button type="button" aria-expanded="true" aria-controls="submenu-1">Menu Item</button>
  <ul id="submenu-1">
    <li><a href="/page">Sub-page</a></li>
  </ul>
</li>


<!-- WRONG: aria-required on a <div> with no form-field role -->
<div aria-required="true">Enter your email</div>

<!-- CORRECT: aria-required belongs on the actual input, or use the native required attribute -->
<label for="email">Email <span aria-hidden="true">*</span></label>
<input type="email" id="email" name="email" required aria-required="true" />

Remove or replace any ARIA `role` attribute that is not permitted on the HTML element it is applied to — in particular, do not add `role="textbox"` (or other interactive roles) to elements that already have a native semantic role which conflicts with it.

On Wix

1. Open the Wix Editor for the relevant page.
2. Click on the element that contains the invalid `role` attribute. If it is a Wix built-in widget, you cannot directly edit its HTML; contact Wix Support and report the accessibility violation.
3. If the element is inside a Custom Element or an HTML iFrame widget (Insert → Embed → Custom Embeds → Embed a Widget / HTML iFrame), click the widget and then Edit Code to open its HTML/JS source.
4. Remove or correct the invalid `role` attribute in that code block, click Apply, then re-audit.

<!-- ❌ WRONG: role="textbox" is not permitted on <select> -->
<select role="textbox" name="country">
  <option value="us">United States</option>
</select>

<!-- ✅ FIX A: Remove the invalid role — <select> already has the correct native semantics -->
<select name="country">
  <option value="us">United States</option>
</select>


<!-- ❌ WRONG: role="textbox" on a <div> with no keyboard/input handling -->
<div role="textbox" class="fake-input">Enter your name</div>

<!-- ✅ FIX B: Replace with a real <input> element -->
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">


<!-- ❌ WRONG: role="textbox" on a <p> element -->
<p role="textbox">Some editable text</p>

<!-- ✅ FIX C: If you need an editable region, use contenteditable + the permitted role -->
<!-- role="textbox" IS permitted on elements with contenteditable, like a <div> -->
<div role="textbox"
     contenteditable="true"
     aria-multiline="false"
     aria-label="Your name">
</div>

Give every button, link, and menuitem a clear, accessible name so screen readers can announce what it does.

On Wix

1. Open your site in the Wix Editor (or Wix Studio Editor).
2. Click the flagged element (button, icon, or link) to select it.
3. In the panel on the left or in the element's settings, look for 'Accessibility' or 'Settings' → 'Accessible Label' / 'ARIA Label' field — Wix exposes this for buttons and links in the Editor.
4. Type a short, descriptive label (e.g., 'Open navigation menu') in that field.
5. If the option is not visible in the visual editor, switch to 'Dev Mode' (Wix Editor: turn on Dev Mode via the top bar) and add `aria-label` directly in the element's properties panel or in the Velo (JavaScript) code for that element: `$w('#myButton').setAttribute('aria-label', 'Open cart');`
6. Publish the site and re-test with axe.

<!-- OPTION 1: aria-label on an icon-only button -->
<button type="button" aria-label="Open cart">
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
    <line x1="3" y1="6" x2="21" y2="6"/>
    <path d="M16 10a4 4 0 01-8 0"/>
  </svg>
</button>

<!-- OPTION 2: visually-hidden span inside the button -->
<button type="button">
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
  </svg>
  <span class="sr-only">Open cart</span>
</button>

<!-- OPTION 3: aria-labelledby pointing to existing visible text -->
<h2 id="cart-heading">Your Cart</h2>
<button type="button" aria-labelledby="cart-heading">View</button>

<!-- OPTION 4: icon-only link with aria-label -->
<a href="/cart" aria-label="View shopping cart">
  <img src="cart-icon.svg" alt="" role="presentation" />
</a>

Add a visible or programmatic accessible name to every dialog element so screen readers can announce what the dialog is about when it opens.

On Wix

1. Open the Wix Editor for your site.
2. Wix generates dialogs (lightboxes) via Add → Lightbox. Click on the lightbox component to select it.
3. Open the lightbox settings panel. In the Accessibility section (if available in your plan), enter a descriptive name in the 'ARIA label' field.
4. If no ARIA label field is available, add a prominent text element at the top of the lightbox that serves as a heading — Wix's accessibility engine will use it as the accessible name in many cases.
5. For custom coded dialogs in Velo (Wix's dev platform), open the page code, locate the dialog element, and set element.accessibility.ariaLabel = 'Your dialog name'; or element.accessibility.ariaLabelledBy = headingElement.
6. Publish the site and verify with the axe DevTools browser extension.

<!-- Preferred: point to the dialog's own heading -->
<div role="dialog" aria-modal="true" aria-labelledby="cart-dialog-title">
  <h2 id="cart-dialog-title">Shopping Cart</h2>
  <p>You have 3 items in your cart.</p>
  <button type="button">Close</button>
</div>

<!-- Alternative: use aria-label when there is no visible heading -->
<div role="dialog" aria-modal="true" aria-label="Shopping Cart">
  <p>You have 3 items in your cart.</p>
  <button type="button">Close</button>
</div>

Remove `aria-hidden="true"` from any element that contains focusable children (links, buttons, inputs), or remove those focusable children from the keyboard tab order so they cannot receive focus while hidden from assistive technology.

On Wix

1. Wix renders most ARIA attributes automatically and you have limited direct control over the HTML. First, check whether the flagged element comes from a Wix App Market widget (e.g., a chat widget, cookie banner, or slider) — if so, check the widget's settings panel for an accessibility option or contact the app developer.
2. If the issue is in a Wix-native element (e.g., a Wix Slideshow or Wix Menu), open the Wix Editor, select the element, and check its Settings and Accessibility panels (right-click → Accessibility) for ARIA options.
3. For advanced control, upgrade to Wix Studio (formerly Editor X), where you can add custom attributes and inject JavaScript via the Velo (Wix Code) IDE. In the Velo IDE, open the relevant page's .js file and add code to set tabindex='-1' on focusable children of hidden containers using $w() selectors.
4. If the issue persists and originates in Wix's own platform rendering, report it through Wix's accessibility feedback channel, as platform-level HTML is outside your direct control.

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 Wix

1. Open the Wix Editor for your site. Click on the form or input element that is flagged.
2. In the left panel, click the element's Settings (gear icon) or the Accessibility panel (if available in your plan) and look for 'Accessible Label' or 'ARIA Label' fields — Wix exposes these for many elements.
3. If the element is a Wix Forms field, go to the field settings and ensure the 'Field Title' / 'Label' is filled in and set to visible (not hidden with CSS). A visible label is always preferred.
4. For elements where Wix does not expose an ARIA label field natively, use Wix Velo (Developer Mode): enable Dev Mode → click the element → use $w('#inputId').accessibility.ariaLabel = 'Descriptive label'; in your page code.
5. Publish your site and verify with the WAVE browser extension.

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

Add a descriptive accessible name (via aria-label, aria-labelledby, or a visible <label>) to every element with role="meter" so screen readers can announce what the meter represents.

On Wix

1. In the Wix Editor, select the meter/progress widget on your page.
2. Open the element's Settings or Accessibility panel (the icon that looks like a person) if available for that widget type.
3. Enter a descriptive accessible name in the 'Accessible label' or 'Aria label' field.
4. If the widget does not expose an accessibility field, switch to Wix Studio (which provides full HTML/CSS/ARIA control via Custom Code or Dev Mode) or replace the widget with a custom HTML embed that includes the correct ARIA attributes.
5. For a custom HTML embed: go to Add → Embed → Custom Code / HTML iframe, then paste a complete <meter> element with aria-label, aria-valuenow, aria-valuemin, and aria-valuemax attributes.
6. Preview and test with the axe DevTools browser extension.

<!-- Option A: aria-label directly on the element -->
<meter
  role="meter"
  aria-label="Average customer rating"
  aria-valuenow="3.8"
  aria-valuemin="0"
  aria-valuemax="5"
  value="3.8"
  min="0"
  max="5">
  3.8 out of 5
</meter>

<!-- Option B: aria-labelledby pointing to an existing visible element -->
<h3 id="rating-heading">Average customer rating</h3>
<meter
  role="meter"
  aria-labelledby="rating-heading"
  aria-valuenow="3.8"
  aria-valuemin="0"
  aria-valuemax="5"
  value="3.8"
  min="0"
  max="5">
  3.8 out of 5
</meter>

<!-- Option C: visually hidden label for div-based meters -->
<span id="stock-label" class="visually-hidden">Items remaining in stock</span>
<div
  role="meter"
  aria-labelledby="stock-label"
  aria-valuenow="4"
  aria-valuemin="0"
  aria-valuemax="20">
</div>

<!-- CSS for visually-hidden helper class -->
<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Add an accessible name (aria-label or aria-labelledby) to every progress bar element so screen readers can announce its purpose.

On Wix

1. Open the Wix Editor for your site. Progress bars are typically added as Wix Progress Bar widgets or through custom HTML embed boxes.
2. Click the progress bar element on the canvas → click Settings (the gear icon) or the Accessibility panel (if available in your Wix version) — some Wix components expose an 'Accessible Name' or 'ARIA label' field directly in settings.
3. If no accessibility field is available, click the progress bar → Add to site / Manage → look for a 'Screen reader text' option.
4. For custom HTML progress bars embedded via Add → Embed → HTML iFrame: open the HTML editor and add aria-label='…' directly to the element markup inside the iframe.
5. For Wix Stores review-rating bars injected automatically, use the Wix Accessibility Wizard (found in the main Wix Editor menu under Accessibility) — it will flag unlabelled bars and guide you through adding labels.
6. Publish your site and verify with the axe DevTools browser extension.

<!-- Option 1: aria-label (no visible label on page) -->
<div
  role="progressbar"
  aria-label="Checkout step progress"
  aria-valuenow="2"
  aria-valuemin="1"
  aria-valuemax="4"
  style="width: 50%; height: 8px; background: #4caf50;"
></div>

<!-- Option 2: aria-labelledby (visible label already exists on page) -->
<h2 id="progress-heading">Order Progress</h2>
<div
  role="progressbar"
  aria-labelledby="progress-heading"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
  style="width: 60%; height: 8px; background: #4caf50;"
></div>

<!-- Option 3: Native <progress> element with <label> -->
<label for="file-upload-progress">File upload progress</label>
<progress id="file-upload-progress" value="70" max="100">70%</progress>

Remove or replace any ARIA attributes that are prohibited for the role assigned to each HTML element, so assistive technologies receive accurate, unambiguous information.

On Wix

1. Open the Wix Editor for your site.
2. Click on the element that contains the prohibited ARIA attribute to select it.
3. Open its Settings or Accessibility panel (available on certain widgets). If the attribute was set via Wix's built-in accessibility fields, clear or correct the conflicting value.
4. If the attribute originates in custom HTML (added via an HTML Embed / Velo code), open the embed or the relevant Velo (formerly Corvid) page code in the Code panel and locate + correct the attribute.
5. Publish the site and test with axe DevTools.

<!-- ❌ WRONG: aria-checked is prohibited on role='heading' -->
<div role="heading" aria-level="2" aria-checked="false">Product Title</div>

<!-- ✅ CORRECT: remove the prohibited aria-checked attribute -->
<div role="heading" aria-level="2">Product Title</div>


<!-- ❌ WRONG: aria-label is prohibited on role='none' / role='presentation' -->
<div role="none" aria-label="Decorative banner"></div>

<!-- ✅ CORRECT: role='none' means purely decorative — remove all ARIA attributes -->
<div role="none"></div>


<!-- ❌ WRONG: aria-expanded is prohibited on a static <p> (implicit role='paragraph') -->
<p aria-expanded="true">Read more about our returns policy.</p>

<!-- ✅ CORRECT: move aria-expanded to the interactive control that actually toggles content -->
<button aria-expanded="true" aria-controls="returns-detail">Read more about our returns policy</button>
<div id="returns-detail">Full returns policy text here.</div>


<!-- ❌ WRONG: aria-required is prohibited on a <div role='alert'> -->
<div role="alert" aria-required="true">Please fill in all fields.</div>

<!-- ✅ CORRECT: remove aria-required; it belongs only on form inputs -->
<div role="alert">Please fill in all fields.</div>

Add all required ARIA attributes (such as aria-expanded and aria-controls) to every interactive element that uses an ARIA role, so assistive technologies can communicate widget state to users.

On Wix

1. Wix's standard drag-and-drop editor has limited direct HTML access. First check if the affected widget (e.g. a menu or accordion) is a native Wix component — if so, check Wix's support pages for any built-in accessibility settings or contact Wix support, as they occasionally push fixes via platform updates.
2. If using Wix Editor X / Wix Studio, open the page, select the element, go to the Settings or Accessibility panel in the right sidebar to see if aria properties can be set there.
3. For custom-coded elements, use Wix Velo (Dev Mode): enable Dev Mode from the top bar, select the element, and in the Properties & Events panel set the aria attributes via code: $w('#myButton').setAttribute('aria-expanded', 'false'); and update on click.
4. To dynamically toggle: in Wix Velo, write an onClick handler that reads the current value and toggles it: $w('#myButton').setAttribute('aria-expanded', currentState ? 'true' : 'false');
5. Preview and test with a browser-based accessibility checker such as the axe extension.

<!-- Trigger button (e.g. accordion header or dropdown toggle) -->
<button
  id="section1-toggle"
  aria-expanded="false"
  aria-controls="section1-panel"
>
  Product Details
</button>

<!-- Controlled panel -->
<div
  id="section1-panel"
  role="region"
  aria-labelledby="section1-toggle"
  hidden
>
  <p>Panel content goes here.</p>
</div>

<script>
  const toggle = document.getElementById('section1-toggle');
  const panel  = document.getElementById('section1-panel');

  toggle.addEventListener('click', function () {
    const isExpanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', String(!isExpanded));
    panel.hidden = isExpanded;
  });
</script>

Add the required child ARIA roles (e.g. `role="option"` inside `role="listbox"`, or `role="group"`/`role="option"` inside `role="combobox"`) so every composite ARIA widget contains the child roles the ARIA specification demands.

On Wix

1. Wix's drag-and-drop editor generates its own HTML and ARIA attributes; you cannot directly edit the rendered role attributes for built-in Wix widgets.
2. For custom widgets built with Velo (Wix's JavaScript API): open the Velo editor, locate the relevant custom element or Repeater component, and set ARIA attributes programmatically using $w('#element').setAttribute('role', 'option') on each child item in the onReady or data-binding callback.
3. For built-in Wix components (e.g. dropdown menus, galleries) that are generating the violation, report the issue to Wix Support — Wix controls the underlying accessibility of its own components.
4. Consider replacing a non-accessible built-in widget with a custom HTML embed (Insert → Embed → Custom Code) where you control the full ARIA markup.
5. After any change, verify with the axe DevTools browser extension.

Wrap every ARIA role that requires a parent container (e.g. `menuitem`, `option`, `listitem`) inside the correct parent element carrying the matching ARIA role (e.g. `menu`/`menubar`, `listbox`, `list`).

On Wix

1. In the Wix Editor, select the menu or component that contains the flagged element.
2. Open Wix's Accessibility Settings panel (if available for that widget) and check for ARIA role options.
3. For components that don't expose ARIA controls, use Wix's 'Custom Code' feature (Settings → Custom Code → Add Code → Head or Body) to inject a small JavaScript snippet that wraps the elements in the correct parent role after the DOM is ready.
4. Alternatively, switch to Wix Studio (which offers more control over HTML/ARIA attributes) and use a Custom Element or HTML Component to rebuild the affected widget with correct ARIA structure.
5. Test with the axe DevTools browser extension after publishing.

<!-- INCORRECT: menuitem with no required parent -->
<nav>
  <a href="/shop" role="menuitem">Shop</a>
  <a href="/about" role="menuitem">About</a>
  <a href="/contact" role="menuitem">Contact</a>
</nav>

<!-- CORRECT: menuitem children wrapped in role="menubar" -->
<nav>
  <ul role="menubar">
    <li role="none"><a href="/shop" role="menuitem">Shop</a></li>
    <li role="none"><a href="/about" role="menuitem">About</a></li>
    <li role="none"><a href="/contact" role="menuitem">Contact</a></li>
  </ul>
</nav>

<!-- CORRECT: option children wrapped in role="listbox" -->
<div role="listbox" aria-label="Select a size">
  <div role="option" aria-selected="false">Small</div>
  <div role="option" aria-selected="true">Medium</div>
  <div role="option" aria-selected="false">Large</div>
</div>

<!-- CORRECT: tab children wrapped in role="tablist" -->
<div role="tablist" aria-label="Product details">
  <button role="tab" aria-selected="true" aria-controls="panel-desc">Description</button>
  <button role="tab" aria-selected="false" aria-controls="panel-reviews">Reviews</button>
</div>
<div id="panel-desc" role="tabpanel">Description content here.</div>
<div id="panel-reviews" role="tabpanel" hidden>Reviews content here.</div>

Audit every element that has a `role` attribute and replace any invalid or misspelled role value with a valid WAI-ARIA role from the official specification.

On Wix

1. Wix does not expose raw HTML editing for most site elements; however, custom HTML can be injected via the HTML iframe widget (Add → Embed → Custom Code or HTML iFrame).
2. If the invalid role is inside a custom HTML/embed block: open the HTML iFrame in the Wix Editor, click Enter Code, and correct or remove the `role` attribute.
3. For roles added by Wix's own components, report the issue to Wix Support — you cannot directly edit core component markup.
4. If you are using Wix Studio (Velo / Wix Studio advanced mode), open the relevant page, switch to Developer Mode, and edit the component properties in the Properties & Events panel or in Page Code to remove/correct the role.
5. After updating, republish the site and recheck with axe DevTools.

<!-- INVALID: typo -->
<!-- <div role="buton">Add to Cart</div> -->

<!-- FIXED: correct spelling -->
<div role="button" tabindex="0">Add to Cart</div>

<!-- BETTER: use native HTML instead of ARIA role wherever possible -->
<button type="button">Add to Cart</button>

<!-- INVALID: invented role -->
<!-- <section role="product-card"> -->

<!-- FIXED: remove non-existent role; let native <section> semantics apply -->
<section aria-label="Product card">

<!-- INVALID: abstract/structural-only role used on a concrete element -->
<!-- <ul role="list widget"> -->

<!-- FIXED: 'list' is valid; 'widget' is abstract and not allowed -->
<ul role="list">

<!-- INVALID: deprecated presentational role used incorrectly -->
<!-- <img role="presentation" alt="Red sneaker"> -->

<!-- FIXED: use role="presentation" only for decorative images with empty alt -->
<img role="presentation" alt="">

Add a visible or programmatic accessible name to every toggle control (checkbox, switch, or button with role="switch") so screen readers can announce what the control does.

On Wix

1. Open the Wix Editor for your site.
2. Click on the toggle/checkbox element that is missing a label. In Wix's native checkbox widget, ensure the 'Label' field in the element settings panel contains visible, descriptive text.
3. For custom-coded toggles added via Wix Velo (formerly Corvid), open the Page Code or Site Code panel and locate the toggle element. Add element.accessibility.ariaLabel = 'Descriptive label' in the page's onReady function using the Velo Accessibility API.
4. For third-party app widgets (e.g. cookie banners, wishlist apps), check the app's own settings panel for an accessible label option, or contact the app developer.
5. Use the Wix Preview mode and test with a browser screen reader or the axe DevTools extension to confirm the accessible name is being read aloud.

<!-- PATTERN 1: Wrap input + label text in a <label> element (simplest) -->
<label>
  <input type="checkbox" name="newsletter"> Subscribe to newsletter
</label>

<!-- PATTERN 2: Link a separate <label> to an input via for/id -->
<input type="checkbox" id="dark-mode" name="dark-mode">
<label for="dark-mode">Enable dark mode</label>

<!-- PATTERN 3: Icon-only toggle button — use aria-label -->
<button type="button" aria-label="Enable dark mode" aria-pressed="false">
  <!-- SVG or icon here; the button has no visible text -->
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
</button>

<!-- PATTERN 4: Custom div/span switch with role="switch" -->
<div role="switch" tabindex="0" aria-checked="false" aria-label="Receive marketing emails">
  <span class="switch-track"></span>
</div>

Give every tooltip element an accessible name so screen readers can announce its content to users who cannot see the screen.

On Wix

1. Open the Wix Editor for your site and click on the element that contains or triggers the tooltip.
2. If the tooltip is a built-in Wix widget (e.g., a hover tooltip on a Wix form field), open its Settings panel — look for a 'Tooltip text' or 'Accessibility label' field and enter a clear description.
3. If you added a custom tooltip using Velo (Wix's dev platform), open the Velo code panel and set $w('#tooltipElement').label = 'Your description'; or add the aria-label via the element's accessibility settings in the inspector.
4. For tooltips in custom HTML iframes (Added via 'Embed Code'), edit the HTML directly to include descriptive inner text or aria-label on the role="tooltip" element.
5. Publish your site, then test with VoiceOver or NVDA, or run the axe browser extension on the live page.

<!-- Trigger element references the tooltip via aria-describedby -->
<button type="button" aria-describedby="shipping-tip">
  Shipping info
  <span class="icon-help" aria-hidden="true">?</span>
</button>

<!-- Tooltip element: inner text IS the accessible name -->
<div id="shipping-tip" role="tooltip">
  Standard shipping takes 2–3 business days. Express options available at checkout.
</div>

Find and replace every misspelled or non-existent ARIA attribute name (e.g. `aria-labeledby`) with the correct, spec-defined name (e.g. `aria-labelledby`) across your entire site's HTML and templates.

On Wix

1. Open the Wix Editor for your site.
2. If the invalid ARIA attribute is in a custom HTML element, click on that element → Settings → and edit the HTML/JavaScript code directly to correct the attribute name.
3. If it is in a Wix Velo (code) file, open the Dev Mode panel (turn on Dev Mode if not already active) and search your page or site code files for the misspelled attribute.
4. Correct the attribute name in the code and publish your site.
5. If the issue originates from a Wix App or a Wix-native widget (e.g. Wix Stores product gallery), you cannot edit that output directly — report it to Wix Support or the app developer via the Wix App Market.
6. After publishing, use the axe DevTools extension on your live site to confirm the fix.

<!-- WRONG: aria-labeledby is not a valid ARIA attribute (one 'l' is a typo) -->
<input type="search" aria-labeledby="search-heading">

<!-- CORRECT: aria-labelledby (double 'l') is the valid ARIA attribute -->
<input type="search" aria-labelledby="search-heading">
<h2 id="search-heading">Search our store</h2>

<!-- Other common invalid → valid corrections:
  aria-role        → role  (not an ARIA attribute at all; 'role' is a plain HTML attribute)
  aria-labeledby   → aria-labelledby
  aria-describeby  → aria-describedby
  aria-owns-id     → aria-owns
-->

Audit every ARIA attribute on your pages and correct any that have invalid or mismatched values so assistive technologies can interpret them correctly.

On Wix

1. Open the Wix Editor for the relevant page.
2. Click the element flagged in the accessibility audit to select it.
3. Open its Settings or Accessibility panel — some Wix components expose ARIA label fields here; correct any mis-filled value.
4. For custom HTML elements added via the Wix HTML iframe widget (Add → Embed → Custom Code), click the widget and select 'Enter Code' to edit the raw HTML/JS and fix the ARIA attribute value.
5. If the issue is inside a Wix app (e.g. Wix Stores product page, Wix Bookings), the ARIA output is controlled by Wix — report the issue via the Wix Accessibility feedback channel, as third-party app code cannot be edited directly.
6. Publish and re-verify with the axe DevTools browser extension on the live URL.

<!-- WRONG: aria-expanded with a number instead of boolean string -->
<button aria-expanded="1">Menu</button>

<!-- CORRECT: must be exactly the string "true" or "false" -->
<button aria-expanded="false">Menu</button>

<!-- WRONG: aria-describedby pointing to an ID that doesn't exist -->
<input type="email" aria-describedby="email-hint" />
<!-- (no element with id="email-hint" on the page) -->

<!-- CORRECT: the referenced element must exist in the DOM -->
<input type="email" aria-describedby="email-hint" />
<p id="email-hint">We'll never share your email with anyone.</p>

<!-- WRONG: aria-checked with a non-standard value -->
<div role="checkbox" aria-checked="yes">Subscribe</div>

<!-- CORRECT: aria-checked accepts "true", "false", or "mixed" -->
<div role="checkbox" aria-checked="false">Subscribe</div>

<!-- WRONG: aria-hidden with an invalid value -->
<span aria-hidden="hidden">decorative icon</span>

<!-- CORRECT: aria-hidden accepts only "true" or "false" -->
<span aria-hidden="true">decorative icon</span>

Add valid `autocomplete` attribute values to every form field that collects personal information, using the exact tokens specified by the HTML standard.

On Wix

1. Open the Wix Editor and select the form widget (Wix Forms) you want to fix.
2. Click the form → Settings → click a specific field → look for an 'Advanced' or 'Accessibility' tab where Wix exposes the autocomplete setting for that field type.
3. For Wix Studio, open the page in the Dev Mode panel (toggle 'Dev Mode' in the top bar); select the input element and add the `autocomplete` property in the Properties & Events panel on the right.
4. In Wix Velo (Dev Mode), you can also set it in code: `$w('#inputEmail').autocomplete = 'email';` inside the page's `onReady` function.
5. For Wix eCommerce checkout fields, Wix controls the checkout HTML — submit a feature request via Wix Support if the checkout fields lack proper autocomplete tokens, as direct HTML editing of the Wix checkout is not available.
6. Publish the site and validate with the axe DevTools browser extension.

<!-- Name fields -->
<input type="text" name="fname" autocomplete="given-name" />
<input type="text" name="lname" autocomplete="family-name" />
<input type="text" name="fullname" autocomplete="name" />

<!-- Contact fields -->
<input type="email" name="email" autocomplete="email" />
<input type="tel" name="phone" autocomplete="tel" />

<!-- Address fields (shipping) -->
<input type="text" name="address1" autocomplete="shipping address-line1" />
<input type="text" name="address2" autocomplete="shipping address-line2" />
<input type="text" name="city" autocomplete="shipping address-level2" />
<input type="text" name="state" autocomplete="shipping address-level1" />
<input type="text" name="zip" autocomplete="shipping postal-code" />
<select name="country" autocomplete="shipping country"></select>

<!-- Address fields (billing) -->
<input type="text" name="billing_address1" autocomplete="billing address-line1" />
<input type="text" name="billing_zip" autocomplete="billing postal-code" />

<!-- Payment fields -->
<input type="text" name="ccname" autocomplete="cc-name" />
<input type="text" name="ccnumber" autocomplete="cc-number" />
<input type="text" name="ccexp" autocomplete="cc-exp" />
<input type="text" name="cvc" autocomplete="cc-csc" />

<!-- Account fields -->
<input type="email" name="login_email" autocomplete="email" />
<input type="password" name="current_pass" autocomplete="current-password" />
<input type="password" name="new_pass" autocomplete="new-password" />
<input type="text" name="otp" autocomplete="one-time-code" />

Remove hard-coded text-spacing CSS values from inline `style` attributes so users can override them with their own stylesheets or browser settings.

On Wix

1. Open the Wix Editor and select the element that has the fixed text spacing.
2. In the Design panel on the right, look for Text Settings / Typography options — avoid setting spacing values using the inline style sliders if they produce locked values.
3. Go to the site's global CSS via Settings → Custom Code (or use Wix Studio's CSS Variables panel) and define a class with the desired spacing.
4. For Wix Studio: open the CSS panel, write a class rule, and apply the class to the element via the Properties panel — this outputs a class rather than an inline style.
5. If a Wix app (e.g. a reviews or product widget) generates the inline style, check the app's design settings; if no override is possible, add a corrective rule in the site's Custom CSS that targets the element with sufficient specificity (e.g. `.my-widget p { line-height: 1.5 !important; }`) to allow user overrides to win.
6. Re-publish and verify with axe DevTools in the browser.

<!-- BEFORE (fails WCAG 1.4.12 — inline style blocks user overrides) -->
<p style="line-height: 1.6; letter-spacing: 0.05em; word-spacing: 0.1em;">
  Product description text here.
</p>

<!-- AFTER (passes — spacing is in a stylesheet class) -->
<p class="product-description">
  Product description text here.
</p>

<!-- In your <head> or external .css file -->
<style>
  .product-description {
    line-height: 1.6;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
  }
</style>

Add a descriptive, screen-reader-accessible name to every button on your site so assistive technology users know what each button does.

On Wix

1. Open the Wix Editor for your site. Click on the icon button or element you need to fix.
2. In the element's settings panel, look for 'Settings' → 'Accessibility' or the 'Accessible Name' field that Wix exposes for buttons and interactive elements. Enter a clear, descriptive label (e.g. 'Open navigation menu').
3. For Wix stores, go to the store's product page in the Editor, click on the Add to Cart or other store buttons, open Settings, and check the Accessibility/ARIA label field.
4. If the button is inside a Wix App or block that does not expose an accessibility label field, report it via Wix Support — some app elements cannot be customized directly. As a workaround, replace the icon button with a text button where possible.
5. For custom HTML embedded via Wix's HTML iframe embed widget, edit your custom code directly in the widget's HTML editor and add the aria-label attribute to the button markup.
6. Preview the site and test with a screen reader to confirm the label is announced correctly.

<!-- PATTERN 1: Icon-only button — add aria-label directly on the button -->
<button type="button" aria-label="Open search">
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
          stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>
</button>

<!-- PATTERN 2: Button with an <img> icon — give the img a descriptive alt -->
<button type="button">
  <img src="/icons/cart.svg" alt="View shopping cart" width="24" height="24">
</button>

<!-- PATTERN 3: Button labelled by visible text elsewhere on the page -->
<h2 id="newsletter-heading">Subscribe to our newsletter</h2>
<!-- ... form fields ... -->
<button type="submit" aria-labelledby="newsletter-heading">Subscribe</button>

<!-- PATTERN 4: Visible text button — just ensure the text is real HTML text -->
<button type="button">Add to Cart</button>

<!-- PATTERN 5: Quantity stepper buttons -->
<button type="button" aria-label="Decrease quantity">−</button>
<input type="number" value="1" aria-label="Product quantity">
<button type="button" aria-label="Increase quantity">+</button>

Increase the contrast ratio between your text color and its background color to meet the WCAG 4.5:1 minimum, so all users — including those with low vision — can read your content clearly.

On Wix

1. Open the Wix Editor and click on the text element with low contrast.
2. In the text toolbar, click the font color icon and select a darker accessible color (use the hex input to enter your chosen value, e.g. #595959).
3. For site-wide secondary/body text, go to Design → Theme Manager (or Site Design → Text Themes) and update the relevant text preset color.
4. Click Publish when done.

/* BEFORE (fails WCAG 1.4.3 — ratio 4.47:1 on white) */
.secondary-text {
  color: #777777;
}

/* AFTER (passes WCAG 1.4.3 — ratio ~7.0:1 on white) */
.secondary-text {
  color: #595959;
}

Ensure every `<dl>` (definition list) element contains only properly nested `<dt>` and `<dd>` children, with no stray text, divs, or other elements placed directly inside it.

On Wix

1. Open the Wix Editor for your site. Wix generates most HTML automatically, so you cannot edit raw `<dl>` tags in a standard Wix site.
2. If a definition list appears in a Wix app or widget (e.g. Wix Stores product page), check for an app update or contact Wix Support to report the accessibility issue — Wix controls the underlying output.
3. For custom content you added via the HTML embed widget (Add → Embed → Custom Code / HTML iFrame), click that widget, open the HTML editor, and correct the `<dl>` structure there.
4. For Wix Studio sites, use the Dev Mode / Velo code panel to inspect and correct any custom-coded `<dl>` blocks.

<!-- ✅ CORRECT: only <dt> and <dd> as direct children -->
<dl>
  <dt>Material</dt>
  <dd>100% Organic Cotton</dd>

  <dt>Weight</dt>
  <dd>180 GSM</dd>

  <dt>Care Instructions</dt>
  <dd>Machine wash cold</dd>
  <dd>Tumble dry low</dd>
</dl>

<!-- ✅ ALSO CORRECT: <div> wrappers for layout/styling -->
<dl>
  <div>
    <dt>Material</dt>
    <dd>100% Organic Cotton</dd>
  </div>
  <div>
    <dt>Weight</dt>
    <dd>180 GSM</dd>
  </div>
</dl>

<!-- ❌ WRONG: stray <p>, <span>, or plain text directly inside <dl> -->
<!-- <dl>
  <p>Product Details</p>
  <dt>Material</dt>
  <dd>Cotton</dd>
</dl> -->

Wrap every `<dt>` (term) and `<dd>` (description) element inside a parent `<dl>` element so description list items have their required container.

On Wix

1. Open the Wix Editor for your site and locate the section or page where the scanner flagged the issue.
2. If the content was added via a 'HTML Embed' or custom code widget: click the element → 'Enter Code' → find the `<dt>` or `<dd>` tags and add the `<dl>` wrapper around them.
3. If the content is in a Wix app (e.g., Wix FAQ app, Wix Stores product description): check whether the app outputs accessible HTML — if not, consider replacing with a custom HTML Embed block where you control the markup.
4. For Wix Studio sites, use the Dev Mode code editor to inspect and edit custom components that render description list content.
5. After editing, use browser DevTools (Inspect Element) on the published or previewed page to verify `<dt>` and `<dd>` are children of `<dl>`.

<!-- CORRECT: dt and dd are direct children of dl -->
<dl>
  <dt>Shipping time</dt>
  <dd>3–5 business days</dd>

  <dt>Return policy</dt>
  <dd>30-day free returns</dd>

  <dt>Material</dt>
  <dd>100% organic cotton</dd>
</dl>

<!-- ALSO CORRECT: grouping pairs with div inside dl (HTML5 spec allows this) -->
<dl>
  <div>
    <dt>Shipping time</dt>
    <dd>3–5 business days</dd>
  </div>
  <div>
    <dt>Return policy</dt>
    <dd>30-day free returns</dd>
  </div>
</dl>

<!-- INCORRECT — do NOT do this: dt/dd outside a dl -->
<!-- <div>
  <dt>Shipping time</dt>
  <dd>3–5 business days</dd>
</div> -->

Add a descriptive, non-empty `<title>` element to every page so browsers, screen readers, and search engines can identify it.

On Wix

1. Open the Wix Editor for your site.
2. Click the page you want to fix in the Pages panel.
3. Click the three-dot menu (⋯) next to the page name → 'SEO Basics' (or go to Site → SEO → SEO Basics).
4. Fill in the 'Page title' field with your descriptive title.
5. Repeat for every page listed in your Pages panel.
6. For dynamic pages (e.g. product pages in Wix Stores): go to Site → SEO → SEO Patterns → Dynamic Pages and set a title pattern using variables like `{product.name} – {site.name}`.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Women's Running Shoes – Acme Sports</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Find every empty heading tag on your store and add visible, descriptive text (or remove the tag entirely) so screen readers and search engines can interpret your page structure.

On Wix

1. Open the Wix Editor and navigate to the page flagged with the empty heading.
2. Click on the element that appears as an empty or invisible heading (it may look like a blank text box).
3. In the toolbar, check the element type — if it is set to 'Heading 1–6' in the Text Settings panel, either type meaningful text into it or change its role to 'Paragraph' if no heading is needed.
4. To change the HTML role of a text element in Wix: select the element → Settings (gear icon) → Accessibility → set 'Heading level' to 'None' if the text is not a true heading.
5. Alternatively, delete the empty text element entirely if it adds no value.
6. Use Wix's built-in Accessibility Wizard (Dashboard → Settings → Accessibility Wizard) to scan for remaining issues.

<!-- ❌ WRONG: empty heading — announced as 'heading' with no label -->
<h2></h2>

<!-- ✅ CORRECT option 1: add visible, descriptive text -->
<h2>Featured Products</h2>

<!-- ✅ CORRECT option 2: visually-hidden text (visible to screen readers, hidden on screen) -->
<!-- Add this CSS once in your stylesheet: -->
<!--
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
-->
<h2><span class="sr-only">Featured Products</span></h2>

<!-- ✅ CORRECT option 3: aria-label when removing the tag is not possible -->
<h2 aria-label="Featured Products"></h2>

<!-- ✅ CORRECT option 4: not a heading at all — use a div instead -->
<div class="decorative-divider"></div>

Add visible or screen-reader-accessible text to every empty `<th>` table header cell so assistive technology users can understand what each column or row represents.

On Wix

1. In the Wix Editor, click on the Table element that contains the empty header.
2. Select the empty header cell and type a meaningful label directly into the cell.
3. If the table is built with Wix Repeaters or a custom HTML embed (Add → Embed → Custom Code / HTML iframe), open the HTML code panel and add text or an `aria-label` to the `<th>` element in the raw HTML.
4. For Wix Stores product comparison features, check the app's settings for column/row label fields.
5. Publish the site and verify with axe DevTools.

<!-- OPTION 1: Add visible text (best for most cases) -->
<table>
  <thead>
    <tr>
      <th>Feature</th>
      <th>Basic Plan</th>
      <th>Pro Plan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Storage</td>
      <td>5 GB</td>
      <td>50 GB</td>
    </tr>
  </tbody>
</table>

<!-- OPTION 2: Visually hidden text (for top-left corner cells) -->
<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<table>
  <thead>
    <tr>
      <th><span class="sr-only">Feature name</span></th>
      <th>Basic Plan</th>
      <th>Pro Plan</th>
    </tr>
  </thead>
</table>

<!-- OPTION 3: aria-label directly on the th element -->
<table>
  <thead>
    <tr>
      <th aria-label="Feature name"></th>
      <th>Basic Plan</th>
      <th>Pro Plan</th>
    </tr>
  </thead>
</table>

Add `aria-invalid="true"` and a linked `aria-describedby` error message to every form field that fails validation, so screen reader users are told exactly what went wrong.

On Wix

1. Open your site in the Wix Editor.
2. Click on the form widget (Wix Forms) to select it, then click 'Settings' in the toolbar.
3. Wix Forms has built-in error messages; ensure 'Show error messages' is enabled in the form settings panel — Wix renders these visually but ARIA support depends on your Wix version.
4. For full ARIA control, switch to Wix Studio (Wix's advanced editor) or use Wix Velo (developer mode): enable Velo via Settings → Developer Tools → Enable Velo.
5. In the Velo IDE, open the page code and use $w('#inputEmail').onCustomValidation() or the form's onSubmit handler to call element.validity and then manually set the associated error text element's text property and add/remove aria-invalid via custom HTML components.
6. For the most robust fix, replace the native Wix Form with a Custom HTML Element (<iframe>) that contains a fully accessible hand-coded form with proper ARIA, embedded via Add → Embed → Custom Code.
7. Preview and test with VoiceOver or NVDA.

<div class="field-wrapper">
  <label for="user-email">Email address <span aria-hidden="true">*</span></label>
  <input
    type="email"
    id="user-email"
    name="email"
    autocomplete="email"
    aria-required="true"
    aria-describedby="user-email-error"
  />
  <span
    id="user-email-error"
    class="field-error"
    role="alert"
    hidden
  ></span>
</div>

Add a clearly visible focus indicator to every interactive element so keyboard users can always see which element is currently selected.

On Wix

1. Open the Wix Editor for your site.
2. Click the Settings gear → Custom Code (or use the Add → Embed → Custom Code option in the Editor).
3. In the Head section, add a `<style>` block containing the universal `:focus` / `:focus-visible` CSS rule from the snippet below. This overrides Wix's default suppression.
4. Publish your site and use Tab to test focus visibility across page types.
5. Note: Wix's built-in components may still suppress focus in some cases; if so, use the Wix Accessibility Wizard (available in Editor → Tools) for additional guidance.

<style>
  /* Visible focus indicator fix — WCAG 2.4.7 */
  *:focus-visible {
    outline: 3px solid #005FCC !important;
    outline-offset: 2px !important;
    border-radius: 2px;
  }

  *:focus {
    outline: 3px solid #005FCC !important;
    outline-offset: 2px !important;
  }

  *:focus:not(:focus-visible) {
    outline: none !important;
  }
</style>

Add a descriptive `title` attribute to every `<iframe>` and `<frame>` element on your store so screen-reader users know what each embedded frame contains before entering it.

On Wix

1. Open your site in the Wix Editor. If you embedded an iframe using the HTML Embed widget (Add → Embed → HTML iframe), click the widget and choose Edit Code.
2. Inside the embed code, locate your <iframe> tag and add title="…" directly to it, then click Apply.
3. For Wix apps that inject iframes (e.g. Wix Chat, Wix Bookings), go to that app's settings panel and look for a label or accessibility option. If the iframe is added by a Wix system app with no configuration option, contact Wix Support to report the accessibility gap — you cannot directly edit Wix system-generated iframes.
4. Use the Wix Accessibility Wizard (available in the editor's left panel under Accessibility) to identify remaining frame-title issues.

<!-- Good: descriptive title -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  title="Google Map showing our store location at 123 Main St"
  width="600"
  height="450"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

<!-- Good: product video embed -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Product demo video: how to use the XYZ Widget"
  width="560"
  height="315"
  allowfullscreen
></iframe>

<!-- Good: decorative / empty frame — hide from assistive tech -->
<iframe
  src="blank.html"
  title=""
  aria-hidden="true"
  tabindex="-1"
></iframe>

Restructure your page headings so they follow a logical, sequential order (H1 → H2 → H3) with no levels skipped.

On Wix

1. Open the Wix Editor and navigate to the page you want to fix (use the Pages menu at the top left).
2. Click on each text element that is used as a heading. In the text toolbar that appears, open the 'Paragraph Styles' dropdown (it shows labels like 'Heading 1', 'Heading 2', etc.) and select the correct heading level for the element's position in the page hierarchy.
3. Note: Wix maps its 'Heading 1–6' paragraph styles to H1–H6 HTML tags, so choosing the correct style from the dropdown directly sets the semantic heading level in the HTML.
4. For Wix Blocks or repeater components (e.g., product grids), open the component editor and update the heading level on the title text element inside the repeater.
5. After publishing, use the axe DevTools browser extension on the live page to verify heading order is correct.

<!-- ONE H1 per page: the primary page title -->
<h1>Women's Running Shoes</h1>

<!-- H2 for major page sections -->
<h2>Filter by Category</h2>

  <!-- H3 for sub-sections within an H2 -->
  <h3>Shoe Type</h3>
  <h3>Brand</h3>

<h2>Featured Products</h2>

  <!-- H3 for individual product titles within the H2 section -->
  <h3>UltraRun Pro 5</h3>
  <h3>TrailBlaze X2</h3>

<h2>Customer Reviews</h2>

  <h3>Top Rated This Month</h3>

    <!-- H4 for sub-items within an H3 — only go deeper when content genuinely nests -->
    <h4>Review by Sarah M.</h4>
    <h4>Review by James T.</h4>

Add a valid `lang` attribute to the `<html>` element so browsers, screen readers, and search engines know what language your page is written in.

On Wix

1. In Wix, the `lang` attribute on the `<html>` element is controlled by your site's language setting, not by hand-editing HTML.
2. Go to your Wix Dashboard → Settings → Multilingual (or Language & Region).
3. Set your primary site language. Wix will automatically inject the correct `lang` attribute into the HTML for that language.
4. If you use Wix Multilingual, each language version of your site gets its own `lang` tag automatically.
5. After saving, use View Source on your live site to confirm `<html lang="en">` (or your language) is present.
6. Note: Wix does not allow direct editing of the `<html>` tag — the language setting is the only control point.

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

Add a valid BCP 47 language code to the `lang` attribute on your site's `<html>` element so browsers and assistive technologies know what language your content is written in.

On Wix

1. Wix sets the `lang` attribute automatically based on your site's language setting.
2. In the Wix Editor or Wix Studio, open Site Settings (gear icon) → Multilingual & Language → Site Language.
3. Ensure your primary site language is set correctly. Wix will then inject the correct `lang` attribute into the `<html>` tag automatically.
4. If you use Wix Multilingual, each language version of your site will have its own `lang` attribute set by the platform — no manual code change is needed.
5. Publish your site and use a browser's 'View Page Source' or an accessibility checker to confirm the `lang` attribute value is correct.

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

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

On Wix

1. Click any image on your page in the Wix Editor → click 'Settings' (gear icon) in the toolbar that appears → fill in the 'What's in the image? Tell Google' (alt text) field → click 'Done'.
2. For product images in Wix eCommerce: Wix Dashboard → Store Products → [Product] → Media section → hover over the image → click the pencil icon → edit the 'Alt text' field.
3. For Wix Galleries: click the gallery → Manage Media → click the three-dot menu on each image → 'Image Settings' → fill in the 'Alt Text' field.
4. Wix automatically uses your image title as a fallback, but writing a custom, descriptive alt text is strongly recommended for accessibility and SEO.

<!-- 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"> -->

Remove or clear the alt text on images whose description is already provided by visible text immediately surrounding them, so screen readers don't read the same information twice.

On Wix

1. Open the Wix Editor for your site.
2. Click the image element that is flagged (e.g., a product image in a gallery or repeater).
3. In the Settings panel that appears on the right (or via right-click → Settings), find the 'What's in the image?' or 'Alt Text' field.
4. Clear the alt text field completely and leave it blank — Wix will render alt="" for that image.
5. For Wix Stores product images, go to your Wix Dashboard → Store Products → click the product → scroll to the product image and edit the image; clear the 'Alt Text' field there as well.
6. Publish the site and re-test with the axe browser extension.

<!-- CORRECT: image inside a link that also has visible text -->
<a href="/products/red-sneakers">
  <img src="red-sneakers.jpg" alt="" width="300" height="300">
  <span>Red Sneakers</span>
</a>

<!-- INCORRECT: alt repeats the visible link text -->
<a href="/products/red-sneakers">
  <img src="red-sneakers.jpg" alt="Red Sneakers" width="300" height="300">
  <span>Red Sneakers</span>
</a>

<!-- INCORRECT: alt attribute missing entirely (screen reader reads filename) -->
<a href="/products/red-sneakers">
  <img src="red-sneakers.jpg" width="300" height="300">
  <span>Red Sneakers</span>
</a>

Add a visible label or accessible name to every input button so assistive technologies can announce what the button does.

On Wix

1. Wix renders most buttons as proprietary components, so empty `value` issues typically come from custom HTML widgets (Add Apps → Wix HTML iframe) or Velo (Dev Mode) custom forms.
2. Open the Wix Editor, click on any custom HTML widget or form element that contains the offending button.
3. If using a Wix HTML iframe: click Edit Code, locate the `<input>` tag, and add `value="Submit"` (or appropriate label).
4. If using Welo Dev Mode: open the relevant page's code panel and locate the button component — set the `label` or `value` property to a descriptive string.
5. For native Wix Button elements, ensure the button text field in the panel is not empty — native Wix buttons use inner text, not `value`, but the text must be non-empty.
6. Publish and test with the axe browser extension.

<!-- CORRECT: Submit button with descriptive value -->
<input type="submit" value="Place Order">

<!-- CORRECT: Button with descriptive value -->
<input type="button" value="Add to Cart">

<!-- CORRECT: Reset button with descriptive value -->
<input type="reset" value="Clear Form">

<!-- CORRECT: Icon-only button — use aria-label when no visible text is possible -->
<input type="submit" value="" aria-label="Search products">

<!-- WRONG: Empty value — screen readers cannot announce purpose -->
<!-- <input type="submit" value=""> -->

Add a descriptive `alt` attribute to every `<input type="image">` element so screen readers can announce its purpose to visually impaired shoppers.

On Wix

1. Wix does not expose raw HTML for standard site elements, but if you added an `<input type="image">` via Wix's Dev Mode (Velo), open your site in the Wix Editor, enable Dev Mode (Manage → Dev Mode), and locate the relevant page code or site code.
2. Find the element in the page's code panel and add the `alt` property: `$w('#myImageInput').alt = 'Submit search';` or set it in the HTML Component's markup.
3. If you embedded a third-party button (e.g. PayPal) via an HTML iframe/Embed widget, edit the embedded HTML block and add `alt="..."` to the `<input type="image">` tag inside it.
4. Publish the site and verify with axe DevTools.

<!-- BEFORE (broken): -->
<input type="image" src="buy-now.png">

<!-- AFTER (fixed): -->
<input type="image" src="buy-now.png" alt="Buy now">

<!-- Search button example: -->
<input type="image" src="search-icon.png" alt="Search products">

<!-- Custom checkout submit example: -->
<input type="image" src="checkout-btn.png" alt="Proceed to checkout">

Add a visible or programmatic label to every form input so assistive technologies can identify it for users.

On Wix

1. Open the Wix Editor and click on the form widget that contains the unlabelled field.
2. Select the specific input element and open its Settings panel. In the 'Field Label' or 'Placeholder' field, add a descriptive label. Wix renders the label text as a visible `<label>` element in the DOM.
3. If you want the label hidden visually, use the label styling options to reduce its opacity or overlap it — do NOT delete the label text itself, as that removes the accessible name.
4. For Wix Forms (the native forms app), go to App Market → Wix Forms → Manage Fields and ensure every field has a 'Field Title' entered.
5. For custom-coded sections using Velo (Wix Dev Mode), add `element.label = 'Descriptive text'` or use `$w('#inputId').label = 'Description'` in your page code.
6. Publish the site and validate with the axe browser extension.

<!-- Method 1: Explicit label (recommended) -->
<label for="user-email">Email address</label>
<input type="email" id="user-email" name="email" autocomplete="email">

<!-- Method 2: Implicit (wrapped) label -->
<label>
  Email address
  <input type="email" name="email" autocomplete="email">
</label>

<!-- Method 3: aria-label (use when no visible label is desired, e.g. icon-only search) -->
<input type="search" name="q" aria-label="Search products">

<!-- Method 4: aria-labelledby (point to existing visible text on the page) -->
<h2 id="newsletter-heading">Subscribe to our newsletter</h2>
<input type="email" name="subscribe" aria-labelledby="newsletter-heading">

<!-- Visually hidden label (visible to screen readers, hidden on screen) -->
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<label for="search-input" class="visually-hidden">Search products</label>
<input type="search" id="search-input" name="q" placeholder="Search...">

Add a visible text label to every form field so it is not labeled only by a hidden tooltip (title attribute) or supplementary description (aria-describedby).

On Wix

1. Open the Wix Editor for your site. Click on the form widget or input element that has the issue.
2. In the element settings panel, look for a 'Label' or 'Placeholder' option — ensure the Label field is filled in (not just the Placeholder, which disappears when the user types).
3. For Wix Forms (the native app), click the form → Settings → Field Settings and turn on 'Show label' for every field; enter meaningful label text.
4. For search bars added via Wix's Add menu → Search, the label is handled by Wix internally — update the accessible name by clicking the element → Settings → Accessible Name or 'Tooltip' field and providing a real text value in the aria-label equivalent.
5. If you use Wix's Dev Mode (Velo), you can set element.accessibilityAttributes.label = 'Search' on any $w('#inputElement') in your page code.
6. Publish the site and test with the WAVE browser extension.

<!-- CORRECT: Visible label paired to input -->
<div class="form-field">
  <label for="customer-email">Email address</label>
  <input
    type="email"
    id="customer-email"
    name="email"
    autocomplete="email"
  />
</div>

<!-- CORRECT: Visually-hidden label (readable by screen readers, invisible to sighted users) -->
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<div class="form-field">
  <label for="site-search" class="visually-hidden">Search the store</label>
  <input
    type="search"
    id="site-search"
    name="q"
    placeholder="Search..."
  />
</div>

<!-- CORRECT: aria-label as alternative when no <label> element is possible -->
<input
  type="search"
  name="q"
  aria-label="Search the store"
  placeholder="Search..."
/>

<!-- WRONG: title only — do NOT rely on this -->
<!-- <input type="search" name="q" title="Search the store" /> -->

<!-- WRONG: placeholder only — do NOT rely on this -->
<!-- <input type="email" name="email" placeholder="Email address" /> -->

Move your site's `<header>` element (or `role="banner"` landmark) so it is a direct child of `<body>`, not nested inside another landmark region.

On Wix

1. Wix generates its own HTML structure and places the site header in a top-level container automatically — you cannot directly edit the HTML.
2. Open the Wix Editor and check that your Header section is set as the page-level Header (not placed inside a section or a box that has been assigned a landmark role via the Accessibility Wizard).
3. Open Settings → Accessibility Wizard and step through it to ensure the header role is not duplicated or nested.
4. If you use Wix Blocks or custom elements that add a `<header>` tag inside content, edit those components to use a neutral `<div>` instead.
5. Use the axe DevTools extension on your published site to confirm the fix.

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

  <!-- CORRECT: <header> is a direct child of <body> -->
  <header>
    <a href="/"><img src="/logo.svg" alt="My Store home"></a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="/shop">Shop</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <!-- page content here -->
  </main>

  <footer>
    <!-- footer content here -->
  </footer>

</body>
</html>

Move your <aside> element (or role="complementary") to the top level of the page so it is not nested inside another landmark region.

On Wix

1. Wix generates its own HTML structure and does not expose raw landmark HTML for editing directly in the Wix Editor.
2. Open the Wix Editor and identify the sidebar/strip that is acting as the complementary region.
3. If the sidebar widget is inside a 'Container Box' or 'Section' that is itself inside another section, drag it out in the Editor layers panel so it is a top-level Section or sits alongside the main content Section.
4. For custom code blocks, open the Velo (Dev Mode) panel and check any `wix-ui-core` or custom HTML components — ensure `<aside>` elements in custom HTML iframes are not nested inside other landmark elements.
5. Use Wix's 'Accessibility Wizard' (Add → Accessibility) to add ARIA labels to sections, and label the sidebar section with a meaningful name.
6. Test with the axe DevTools browser extension on the live or preview URL to confirm the landmark is now top-level.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <!-- navigation links -->
    </nav>
  </header>

  <!-- Correct: <main> and <aside> are siblings, both top-level landmarks -->
  <div class="page-layout">
    <main id="main-content">
      <!-- primary page content -->
    </main>

    <aside aria-label="Related products">
      <!-- complementary / sidebar content -->
    </aside>
  </div>

  <footer>
    <!-- footer content -->
  </footer>
</body>
</html>

Move your site's footer element (or role="contentinfo") so it is a direct child of the page body, not nested inside another landmark region.

On Wix

1. Wix generates its own HTML structure automatically and does not expose the raw <footer> landmark tag for direct editing in the standard editor.
2. Open the Wix Editor, click on your Footer section at the bottom of the page.
3. Ensure your Footer strip is placed in the designated 'Footer' area of the editor (below all page sections and the body content area) — do not drag footer content strips into the main page body area, as Wix maps the Footer area to the correct landmark.
4. If you are using Wix Studio or have custom Velo code that injects HTML with role="contentinfo", open the Velo code panel and ensure any custom footer HTML is not injected inside a <main> or other landmark element.
5. After making changes, use the axe DevTools extension to audit the published site and confirm the contentinfo landmark is top-level.

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

  <header>
    <!-- Site logo, main navigation -->
  </header>

  <nav aria-label="Main navigation">
    <!-- Primary nav links -->
  </nav>

  <main>
    <!-- All primary page content goes here -->
    <h1>Page Title</h1>
    <p>Page content...</p>
  </main>

  <!-- CORRECT: <footer> is a direct child of <body>, after </main> -->
  <footer>
    <p>&copy; 2024 My Store. All rights reserved.</p>
    <nav aria-label="Footer navigation">
      <a href="/privacy">Privacy Policy</a>
      <a href="/contact">Contact</a>
    </nav>
  </footer>

</body>
</html>

Move the `<main>` element (or `role="main"`) so it is a direct child of `<body>`, not nested inside any other landmark element such as `<header>`, `<nav>`, `<aside>`, or `<footer>`.

On Wix

1. Wix generates HTML automatically from its editor layout; you cannot directly edit the raw HTML output.
2. Open the Wix Editor and inspect which section or strip contains your primary page content.
3. Ensure no 'Header' or 'Footer' section in the Wix Editor visually or logically wraps the page body content — Wix maps these to landmark regions internally.
4. Use the Wix Accessibility Wizard (Add → Accessibility → Accessibility Wizard) to check for landmark issues it can detect and auto-fix.
5. For persistent issues, contact Wix Support and reference WCAG 2.1 Success Criterion 1.3.6 / landmark structure, as the underlying HTML is platform-controlled.
6. If you use Wix Velo (developer mode), you can add `role` attributes to custom-coded sections to avoid conflicting landmarks, but the core `<main>` placement remains platform-managed.

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

  <header>
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/shop">Shop</a></li>
      </ul>
    </nav>
  </header>

  <!-- CORRECT: <main> is a direct child of <body>, NOT inside <header> or any other landmark -->
  <main id="main-content">
    <h1>Welcome to My Store</h1>
    <p>Browse our latest products below.</p>
  </main>

  <footer>
    <p>&copy; 2024 My Store</p>
  </footer>

</body>
</html>

Ensure your page has only one banner landmark (one `<header>` or `role="banner"` element that is not nested inside another landmark), so screen reader users can navigate your site reliably.

On Wix

1. In the Wix Editor, the site header is the strip at the very top that appears on every page (labeled 'Header' in the layers panel).
2. Open the Editor → click on any element in the header area → check the Layers panel to confirm only one strip is set as the page Header.
3. If you have added a second sticky strip or an announcement bar and set its ARIA role to 'banner', select that strip → go to its Settings/Accessibility panel → change the Landmark Role to 'none' or remove it.
4. In Wix Studio, open the Pages & Layers panel, expand the Header section, and ensure no other section outside the designated header has role='banner' assigned via the Accessibility settings.
5. Publish and test with the axe browser extension.

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

  <!-- CORRECT: Single top-level <header> = one banner landmark -->
  <header>
    <a href="/"><img src="logo.svg" alt="Acme Store"></a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/shop">Shop</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <!-- CORRECT: <header> nested inside <article> is NOT a banner landmark -->
      <header>
        <h1>Product Name</h1>
        <p>Posted: <time datetime="2024-01-01">January 1, 2024</time></p>
      </header>
      <p>Product description goes here.</p>
    </article>

    <!-- CORRECT: promotional strip uses <div>, not <header> -->
    <div class="promo-bar" role="region" aria-label="Promotional offer">
      <p>Free shipping on orders over $50!</p>
    </div>
  </main>

  <footer>
    <p>&copy; 2024 Acme Store</p>
  </footer>

</body>
</html>

Ensure your page has only one footer/contentinfo landmark by removing or re-marking any duplicate `<footer>` elements or `role="contentinfo"` attributes.

On Wix

1. Open the Wix Editor for your site. Click on the Footer section at the bottom of the page — in Wix, this is automatically rendered as a <footer role="contentinfo"> in the published HTML.
2. Wix does not allow direct HTML editing of the footer landmark itself, but check for any additional 'Footer' sections you may have added: in the Pages & Menu panel, look under each page for custom sections tagged as footers.
3. If you have added an HTML Embed widget (Add → Embed → HTML iframe or Custom Code) that contains a <footer> or role="contentinfo", open it and edit the custom HTML to change the element to a <div>.
4. For third-party apps from the Wix App Market that inject extra footer markup, check the app's settings panel for an 'HTML wrapper' or 'accessibility' option, or contact the app developer.
5. Use Wix's built-in SEO & Accessibility checker (Marketing & SEO → Get Found on Google → SEO Tools) and also test with the WAVE browser extension on the published site URL.

<!-- CORRECT: One site-wide footer landmark -->
<body>
  <header><!-- site header --></header>
  <main><!-- page content --></main>

  <!-- Secondary informational section — NOT a footer landmark -->
  <div class="promo-bar" aria-label="Promotional offers">
    <p>Free shipping on orders over $50!</p>
  </div>

  <!-- The ONE true contentinfo landmark -->
  <footer>
    <nav aria-label="Footer navigation">
      <ul>
        <li><a href="/privacy">Privacy Policy</a></li>
        <li><a href="/terms">Terms of Service</a></li>
        <li><a href="/contact">Contact Us</a></li>
      </ul>
    </nav>
    <p>&copy; 2024 My Store. All rights reserved.</p>
  </footer>
</body>

Find and remove every duplicate `<main>` element or `role="main"` attribute so that exactly one main landmark exists on each page.

On Wix

1. Wix controls its own HTML output, so you cannot directly edit template files. Instead, open the Wix Editor and check whether you have added any HTML iframes or Embed Code widgets (Insert → Embed Code → HTML iframe) that contain a '<main>' tag — remove it from the custom HTML block.
2. In Wix Studio, inspect any custom-coded sections or components for '<main>' or 'role="main"' in their HTML and replace with '<div>'.
3. Use the axe browser extension on the published site to confirm the fix. If the duplicate originates from Wix's own generated markup (not your custom code), report it via Wix Support as a platform accessibility bug.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>

  <header>
    <nav aria-label="Primary navigation">
      <!-- site-wide navigation -->
    </nav>
  </header>

  <!-- ✅ Only ONE <main> element per page -->
  <main id="main-content">
    <h1>Page Heading</h1>
    <!-- primary page content goes here -->
  </main>

  <footer>
    <!-- footer content -->
  </footer>

</body>
</html>

Add a single `<main>` landmark element (or `role="main"`) to every page so assistive technologies can identify and navigate directly to the primary content.

On Wix

1. Wix generates its own HTML and does not expose direct markup editing in the classic editor. Instead, go to your Wix Editor, click the area that holds your main page content, and in the Properties panel look for 'Accessibility' settings.
2. Use the Wix Accessibility Wizard (available in the editor's left toolbar under the accessibility icon) — it will flag missing landmarks and guide you through applying them.
3. For custom code injection: go to Settings → Custom Code → add a `<script>` in the body-end position that finds your main content container by its known ID and sets `el.setAttribute('role','main')` — but test carefully to avoid duplicate roles.
4. If using Wix Studio, open the Design panel for the main section block, switch to the HTML/Properties panel, and set the semantic element to `<main>` where available.
5. Re-test with the axe DevTools extension on your published site.

<!-- Skip link at the very top of <body> -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<header><!-- site header / nav here --></header>

<main id="main-content">
  <!-- ALL primary page content goes here:
       product details, blog post, category grid, etc. -->
</main>

<footer><!-- site footer here --></footer>

Add a unique aria-label (or aria-labelledby) to every repeated landmark role on the page so screen-reader users can tell them apart.

On Wix

1. Open your site in the Wix Editor (or Wix Studio).
2. Click on the navigation menu, footer navigation, or repeated section element that is causing the duplicate landmark.
3. In the left panel or right-click context menu, open 'Accessibility Settings' (the wheelchair icon or Settings → Accessibility).
4. Enter a unique, descriptive ARIA label in the 'ARIA Label' field for each element. For example, label your top navigation 'Main navigation' and your footer nav 'Footer navigation'.
5. Repeat for every repeated landmark type on the page.
6. Publish the site and verify with the axe DevTools browser extension.

<!-- BEFORE: two <nav> elements with no label — screen readers can't tell them apart -->
<nav>
  <ul><!-- main menu items --></ul>
</nav>

<nav>
  <ul><!-- footer links --></ul>
</nav>

<!-- AFTER: each <nav> has a unique aria-label -->
<nav aria-label="Main navigation">
  <ul><!-- main menu items --></ul>
</nav>

<nav aria-label="Footer navigation">
  <ul><!-- footer links --></ul>
</nav>

<!-- Alternative: use aria-labelledby when a visible heading already exists -->
<section aria-labelledby="filters-heading">
  <h2 id="filters-heading">Product Filters</h2>
  <!-- filter controls -->
</section>

<section aria-labelledby="recommendations-heading">
  <h2 id="recommendations-heading">You May Also Like</h2>
  <!-- recommended products -->
</section>

Increase the color contrast between inline links and their surrounding body text to at least 3:1, or add a non-color visual distinction (such as underline) so links are identifiable without relying on color alone.

On Wix

1. Open the Wix Editor for your site.
2. Click on a text element that contains a link, then select the linked text.
3. In the text toolbar, use the color picker to change the link text color to a compliant value (≥3:1 contrast vs. surrounding text).
4. For a site-wide fix, go to Site Design (paint-roller icon) → Text Themes → update the link style color there.
5. Alternatively, add custom CSS via Settings → Custom Code (Wix Business/Unlimited plans): add a { color: #YOUR_COLOR; text-decoration: underline; } targeting your site's content areas.
6. Note: Wix auto-underlines links by default in most themes; if underline has been removed, restoring it is the simplest compliant fix.

/* Option A: Change link color to one with ≥3:1 contrast against body text
   AND ≥4.5:1 contrast against the page background.
   Example: body text #3f3f3f on white background — #0057d8 passes both thresholds. */
a {
  color: #0057d8;
}

/* Option B: Keep your existing link color but add a non-color visual cue.
   An underline satisfies WCAG 1.4.1 without requiring the 3:1 color contrast. */
a {
  text-decoration: underline;
}

/* Best practice: combine both for maximum clarity */
a {
  color: #0057d8;
  text-decoration: underline;
}

/* If you want to scope this to body/content areas only: */
.content a,
.entry-content a,
article a,
p a {
  color: #0057d8;
  text-decoration: underline;
}

Add a descriptive, screen-reader-accessible text label to every link on your store so assistive technology can announce its purpose.

On Wix

1. Open the Wix Editor for your site. Click on any icon button or image link that is flagged.
2. With the element selected, click the 'Settings' (gear) icon or right-click and choose 'Link' to review the link — then click 'Accessibility' or 'Tooltip' settings.
3. In the element's Settings panel, find the 'Accessibility' section and enter a descriptive 'ARIA label' (e.g. 'Open Instagram profile'). Wix Editor supports aria-label fields for buttons and image elements.
4. For Wix menus and icon buttons added through the Add panel, select the element → Settings → Accessibility → type a label in the 'Label' field.
5. If using Wix Studio (Wix's advanced editor), you can inspect and set ARIA properties per-element in the Inspector panel under 'Accessibility'.
6. Publish the site and verify with the WAVE browser extension.

Fix all HTML lists so that only valid child elements appear directly inside `<ul>` and `<ol>` tags, and only `<ul>` or `<ol>` elements wrap `<li>` items.

On Wix

1. Open the Wix Editor for your site.
2. Click on any navigation menu element → click 'Settings' or 'Design' → use the built-in menu widget rather than manually coding a list; Wix's native menu component outputs correct list HTML automatically.
3. For custom HTML list content (e.g. in an HTML Embed widget), click the widget → 'Enter Code' and manually correct any malformed `<ul>`/`<ol>` markup in the code panel.
4. For Wix Studio (advanced): open the page, select the element, open the Properties & Events panel, and switch to Dev Mode (Enable Dev Mode in the top bar) to inspect and edit generated HTML via Velo if needed.
5. If using a Wix Blog or Wix Stores component, these output semantic HTML automatically — verify by running axe on the live page.
6. Publish the site and re-run your accessibility scan.

<!-- CORRECT: <ul> or <ol> with only <li> children -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <!-- CORRECT: nested list lives INSIDE an <li> -->
    <ul>
      <li>Nested item A</li>
      <li>Nested item B</li>
    </ul>
  </li>
</ul>

<!-- WRONG: <div> as a direct child of <ul> -->
<!-- <ul>
  <div>This breaks the list</div>
  <li>Item</li>
</ul> -->

<!-- WRONG: <li> with no list parent -->
<!-- <li>Orphaned item</li> -->

Ensure every `<li>` element is a direct child of a `<ul>` or `<ol>` element (or an element explicitly given `role="list"`), so that screen readers can correctly announce list structure to users.

On Wix

1. Open your site in the Wix Editor. Wix generates its own HTML, so you cannot directly edit the DOM of built-in widgets — but you can address this in two ways.
2. For lists inside rich-text elements (e.g. a text box with bullet points): click the text element → use the Wix text toolbar to apply the built-in 'Bulleted List' or 'Numbered List' formatting, which outputs correct `<ul><li>` markup.
3. For navigation menus or repeaters, Wix's built-in menu widgets output their own HTML. If the scanner is flagging a Wix built-in component, report the issue to Wix support — you cannot change the underlying markup of core widgets.
4. For custom HTML needs, add a Wix HTML iframe embed (Add → Embed → HTML iframe) and write your own accessible `<ul><li>` list markup directly inside it.
5. If you use Wix Studio (formerly Editor X), use the custom code panel (Settings → Custom Code) to inject or correct HTML markup in blocks that support it.
6. Publish the site and verify using the axe DevTools browser extension on the live URL.

<!-- CORRECT: unordered list -->
<ul>
  <li>Free shipping on orders over $50</li>
  <li>30-day returns</li>
  <li>2-year warranty</li>
</ul>

<!-- CORRECT: ordered list (e.g. steps) -->
<ol>
  <li>Add item to cart</li>
  <li>Enter shipping address</li>
  <li>Complete payment</li>
</ol>

<!-- CORRECT: list inside a <nav> (navigation pattern) -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- WRONG: <li> inside a <div> — do NOT do this -->
<!--
<div>
  <li>Item one</li>
  <li>Item two</li>
</div>
-->

<!-- LAST RESORT only: if the parent HTML tag truly cannot be changed,
     add role="list" to the parent element -->
<div role="list">
  <div role="listitem">Item one</div>
  <div role="listitem">Item two</div>
</div>

Remove or disable the `<meta http-equiv="refresh">` tag that forces an automatic page reload, or replace any redirect use-case with a server-side redirect instead.

On Wix

1. Wix does not expose raw `<head>` HTML directly for most pages, but custom code can be added via Settings → Custom Code (Wix Business & eCommerce plans) or via the Velo (Dev Mode) `<head>` code area.
2. Open the Wix Editor → click the page in question → go to Settings → Advanced → Custom Code (or in Velo: open `masterPage.js` or the page's code panel).
3. Search for any snippet containing `http-equiv` or `meta.*refresh` and delete it.
4. For redirects, use Wix's URL Redirect Manager: go to Marketing & SEO → SEO Tools → URL Redirect Manager → Add Redirect, and create a 301 redirect there.
5. Publish the site and verify the page source no longer contains the meta-refresh tag.

<!-- REMOVE — self-refresh every 30 seconds (WCAG fail) -->
<!-- <meta http-equiv="refresh" content="30"> -->

<!-- REMOVE — redirect to another URL after 5 seconds (WCAG fail) -->
<!-- <meta http-equiv="refresh" content="5; url=https://example.com/new-page"> -->

<!-- ALLOWED — 0-second instant redirect (no time limit imposed on user) -->
<!-- Only use this as a fallback alongside a server-side redirect -->
<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

Remove `user-scalable=no` (and any `maximum-scale` below 5) from your site's `<meta name="viewport">` tag so visitors can pinch-to-zoom on mobile devices.

On Wix

1. Wix automatically injects the viewport meta tag; site owners cannot edit it directly via the editor.
2. Open a support ticket with Wix or submit feedback requesting that they remove `user-scalable=no` from their generated viewport tag.
3. If you use Wix Studio (formerly Editor X) with custom code: go to Site → Custom Code in the dashboard and check if any custom <head> snippet overrides the viewport — remove `user-scalable=no` from it if so.
4. Monitor Wix platform release notes, as this is a known accessibility issue many Wix sites share and the platform periodically updates its output.

<meta name="viewport" content="width=device-width, initial-scale=1">

Remove or raise the `maximum-scale` value in your meta viewport tag so users can pinch-zoom on mobile devices.

On Wix

1. Wix automatically generates the viewport meta tag and does not expose it for direct editing in the standard editor.
2. Open your site in the Wix Editor and go to Settings (left panel) → Mobile → confirm 'Optimize for Mobile' is enabled — Wix's mobile-optimized mode uses a permissive viewport.
3. If you use Wix's Velo (developer mode), you can inject a corrected meta tag via the site's <head> section: go to Settings → Custom Code → Add Code in the <head> tag sitewide, and paste a corrected <meta name="viewport"> tag.
4. Alternatively, contact Wix Support and request confirmation that zoom is not blocked on your site.

<meta name="viewport" content="width=device-width, initial-scale=1">

Remove or restructure nested interactive elements so that no focusable control (button, link, input, etc.) is placed inside another interactive control, and never rely on tabindex="-1" or aria-hidden="true" to hide an inner interactive element from assistive technologies.

On Wix

1. Open the Wix Editor for your site. Click on the component that contains the nested interactive elements.
2. If the component is a built-in Wix widget (e.g., a Button inside a Repeater card that is itself clickable), remove one of the interactive behaviors: either remove the card's click action or remove the button, not both.
3. For Wix Velo (custom code) sites, open the relevant page code or a custom HTML component (Add → Embed → HTML iframe) and edit the markup directly to eliminate nesting.
4. If using a Wix App Market widget that produces the nested markup and cannot be edited, contact the app developer or replace the widget with a custom HTML embed where you control the markup.
5. Preview the page and use browser DevTools → Lighthouse → Accessibility or the axe extension to verify the fix.

<!-- ❌ WRONG: button nested inside a link (invalid HTML, unpredictable in screen readers) -->
<a href="/products/widget">
  <button type="button">View Product</button>
</a>

<!-- ✅ CORRECT: single interactive element styled as a button -->
<a href="/products/widget" class="btn btn-primary">View Product</a>


<!-- ❌ WRONG: link nested inside a button -->
<button type="button">
  <a href="/cart">Add to Cart</a>
</button>

<!-- ✅ CORRECT: use only the element that matches the action -->
<!-- If it navigates → use <a>; if it performs an action on the page → use <button> -->
<a href="/cart" class="btn btn-primary">Add to Cart</a>


<!-- ❌ WRONG: relying on tabindex or aria-hidden to suppress inner element -->
<a href="/products/widget">
  <button type="button" tabindex="-1" aria-hidden="true">View Product</button>
</a>

<!-- ✅ CORRECT: icons and decorative content inside interactive elements must be non-interactive -->
<button type="button">
  <svg aria-hidden="true" focusable="false" width="20" height="20">
    <use href="#icon-cart"></use>
  </svg>
  <span>Add to Cart</span>
</button>

Add a meaningful text alternative (via `title` attribute or `aria-label`) to every `<object>` element so screen readers can describe its content to users who cannot see it.

On Wix

1. Open the Wix Editor for your site.
2. If the <object> was added via an Embed HTML widget (the 'Embed & Social' → 'HTML iFrame' element), click the widget, then click 'Enter Code' to open the HTML editor.
3. In the HTML source, locate the <object> tag and add `title='Descriptive label here'` to it.
4. Click 'Update' to apply the change.
5. Note: Wix's standard components do not emit <object> tags — this issue most commonly arises from custom HTML embeds. If you cannot find it in an HTML widget, check any custom-coded Velo pages under the 'Dev Mode' tab.
6. Preview the page and validate with axe DevTools.

<!-- BEFORE (fails accessibility check) -->
<object data="product-catalog.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser does not support PDFs.</p>
</object>

<!-- AFTER: Option 1 — title attribute (preferred for <object>) -->
<object
  data="product-catalog.pdf"
  type="application/pdf"
  width="600"
  height="400"
  title="Winter 2024 Product Catalog (PDF)">
  <p>Your browser does not support PDFs.
    <a href="product-catalog.pdf">Download the catalog</a>.
  </p>
</object>

<!-- AFTER: Option 2 — aria-label (acceptable alternative) -->
<object
  data="product-catalog.pdf"
  type="application/pdf"
  width="600"
  height="400"
  aria-label="Winter 2024 Product Catalog (PDF)">
  <p>Your browser does not support PDFs.
    <a href="product-catalog.pdf">Download the catalog</a>.
  </p>
</object>

<!-- AFTER: Option 3 — purely decorative, hide from AT -->
<object
  data="decorative-animation.svg"
  type="image/svg+xml"
  width="200"
  height="200"
  aria-hidden="true">
</object>

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

On Wix

1. Open the Wix Editor and navigate to the page you want to fix.
2. Click on the text element that serves as the page's main title.
3. In the text toolbar that appears, open the 'Paragraph Styles' dropdown (it usually shows 'Paragraph' or 'Heading 2') and select 'Heading 1'.
4. If no suitable text element exists, click '+ Add' → 'Text' → 'Heading 1' and type the page title.
5. Ensure only one Heading 1 exists on the page — demote any duplicate H1s to H2.
6. Publish the site and verify with the axe DevTools extension in your browser.

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

Remove conflicting ARIA attributes (global ARIA properties and tabindex) from any element that has been marked as purely presentational with role="presentation" or role="none".

On Wix

1. Open the Wix Editor for your site. Identify the specific element flagged (use Chrome DevTools or axe to pinpoint it visually).
2. Click the element in the editor, open its Settings or Accessibility panel (the icon that looks like a person), and look for any custom ARIA label or role that has been set.
3. Remove any manually entered ARIA attributes that conflict with a presentational role.
4. For elements with role="presentation" set by Wix itself (e.g. decorative images), use the Image Settings panel and ensure the image is marked as 'Decorative' rather than given an alt text or label — Wix will then handle the role correctly.
5. If conflicting attributes were injected via Wix Velo (JavaScript), open the Velo Editor (Dev Mode) and search your page code for setAttribute calls setting role, aria-*, or tabindex, then resolve the conflict there.
6. Publish your site and re-scan with axe DevTools.

<!-- CORRECT: Decorative image — use empty alt, no role needed -->
<img src="decorative-swoosh.png" alt="" />

<!-- CORRECT: If role="none" is used on a layout table, remove all ARIA -->
<table role="none">
  <tr><td>Layout cell</td></tr>
</table>

<!-- CORRECT: Meaningful element — remove role="presentation" and use proper semantics -->
<img src="product-badge.png" alt="New arrival" />

<!-- BROKEN (do not do this): role="none" conflicts with aria-label -->
<!-- <img src="decorative-swoosh.png" role="none" aria-label="decorative swirl" /> -->

<!-- BROKEN (do not do this): role="presentation" conflicts with tabindex -->
<!-- <div role="presentation" tabindex="0">layout wrapper</div> -->

Wrap all visible page content inside HTML landmark regions (e.g. `<header>`, `<main>`, `<nav>`, `<footer>`) so screen-reader users can navigate the page by section.

On Wix

1. Wix generates its own HTML, so direct landmark editing is limited. Start by using Wix's built-in accessibility tools: in the Editor, open the Accessibility Wizard (? icon → Accessibility Wizard) and follow its guided steps.
2. For sections added via the Wix Editor, ensure every significant section has a meaningful name: select the section → click the Settings (gear) icon → set a Section Title. Wix uses this to generate accessible labels on landmarks.
3. Avoid leaving freeform text boxes, images, or buttons floating outside a named Section container — group all content into Sections.
4. For custom HTML embedded via the 'HTML iframe' / Embed Code widget, write proper landmark HTML inside that embed.
5. Test with WAVE or axe in your browser on the published site; any outstanding orphaned content may require using Wix's 'Dev Mode' (Velo) to inject ARIA attributes via code.

Add a meaningful aria-label (or aria-labelledby) to every element with role="img" so screen readers can announce what the image represents.

On Wix

1. In the Wix Editor, click on the element (icon, vector art, or decorative section) that has been flagged.
2. In the right-hand panel, look for 'Accessibility' settings — Wix exposes a 'What does this element do?' or 'ARIA label' field for many element types.
3. Type a meaningful description in the ARIA label field (e.g. 'Customer review: 5 stars').
4. For Wix Studio or custom-coded Velo components, open the Page Code panel and add the aria-label attribute programmatically: $w('#elementId').setAttribute('aria-label', 'Your description here');
5. For icon elements that are purely decorative, use the Accessibility panel to set them as 'Decorative' (role presentation / aria-hidden).
6. Publish and re-test with the axe browser extension.

<!-- Pattern 1: Inline element (icon font, emoji, span) -->
<span role="img" aria-label="Free shipping available">🚚</span>

<!-- Pattern 2: SVG element — use <title> + aria-labelledby (most robust) -->
<svg role="img" aria-labelledby="icon-free-shipping" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <title id="icon-free-shipping">Free shipping available</title>
  <use href="#icon-truck"></use>
</svg>

<!-- Pattern 3: SVG with aria-label only (simpler, slightly less support) -->
<svg role="img" aria-label="4.5 out of 5 stars" width="120" height="24" xmlns="http://www.w3.org/2000/svg">
  <!-- star paths here -->
</svg>

<!-- Pattern 4: div/section used as a decorative image — HIDE from screen readers -->
<div role="presentation" aria-hidden="true" class="decorative-banner"></div>

<!-- Pattern 5: referencing an existing visible caption -->
<figure>
  <div role="img" aria-labelledby="badge-caption" class="trust-badge"></div>
  <figcaption id="badge-caption">Verified Secure Checkout</figcaption>
</figure>

Make every scrollable region on your site reachable by keyboard by adding tabindex="0" (or placing focusable content inside it) so keyboard and assistive-technology users can scroll it.

On Wix

1. Open the Wix Editor for the relevant page.
2. Click the scrollable element (e.g. a text box set to scroll, or a Repeater/Box with overflow scroll).
3. In the right-hand panel, click the Accessibility icon (the person icon) or go to Settings → Accessibility, and set the Tab Stop / focusable option to enabled if available.
4. For custom HTML widgets: click the element → Settings → open the HTML/CSS code pane, then add tabindex="0" and aria-label to the container tag.
5. If the scrollable element is a Wix-native component with no accessibility panel, consider restructuring the content to avoid a non-interactive scroll container, or use a Wix Custom Element / Velo (Dev Mode) to inject the tabindex attribute via code.
6. Preview the page and test with Tab-key navigation.

<!-- BEFORE (inaccessible): -->
<div class="product-description" style="height: 200px; overflow-y: auto;">
  <p>This is a long product description that requires scrolling to read in full...</p>
</div>

<!-- AFTER (keyboard-accessible): -->
<div
  class="product-description"
  style="height: 200px; overflow-y: auto;"
  tabindex="0"
  aria-label="Product description"
  role="region"
>
  <p>This is a long product description that requires scrolling to read in full...</p>
</div>

Add a visible or programmatic label to every `<select>` dropdown so assistive technologies can announce its purpose to users.

On Wix

1. Wix renders its own UI components and you cannot directly edit the underlying HTML of Wix-native form elements or dropdowns.
2. For Wix-native dropdowns (e.g., in Wix Stores product pages), open the Editor, click the dropdown element, and in the Settings/Design panel check whether a visible label text field exists — fill it in. Wix uses this text as an accessible name internally.
3. For any custom HTML dropdowns added via the 'HTML iframe' (Embed Code) widget, you control the full HTML inside that widget — add a proper `<label for="…">` / `id` pair as shown in the Generic HTML snippet below.
4. For Wix Forms, click the form, select the dropdown field, and ensure the 'Placeholder' and 'Label' fields in the field settings panel are filled — Wix Forms uses the label text to generate an accessible name.
5. If the unlabeled select is part of a Wix Stores filter/sort bar, contact Wix support or raise a feedback request, as those components are not user-editable at the HTML level.
6. Test any embeddable/custom HTML you control with the axe browser extension.

<!-- Method 1: Visible label (preferred) -->
<label for="sort-order">Sort by</label>
<select id="sort-order" name="sort">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="newest">Newest</option>
</select>

<!-- Method 2: Visually hidden label (when visible label breaks design) -->
<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<label for="sort-order" class="visually-hidden">Sort by</label>
<select id="sort-order" name="sort">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="newest">Newest</option>
</select>

<!-- Method 3: aria-label (last resort, no visible label possible) -->
<select aria-label="Sort by" name="sort">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="newest">Newest</option>
</select>

<!-- Method 4: Wrapping label (implicit association — no for/id needed) -->
<label>
  Sort by
  <select name="sort">
    <option value="price-asc">Price: Low to High</option>
    <option value="price-desc">Price: High to Low</option>
    <option value="newest">Newest</option>
  </select>
</label>

Add a valid, focusable target element (with a matching `id`) for every "Skip to main content" link so keyboard and assistive-technology users can bypass repeated navigation.

On Wix

1. Wix's standard editor does not expose raw HTML for layout templates. The most reliable fix is to use the Wix Accessibility Wizard: in the Wix Editor, open the left panel → click the Accessibility icon (person icon) → run the Accessibility Wizard, which will flag missing skip links.
2. If you are on Wix Studio (formerly Editor X), go to the Pages & Menus panel, select your Master Page, and add a 'Skip to Content' button element as the very first element in the DOM order, linking it to the anchor of your main content section.
3. Set the skip link element's visibility to show only on keyboard focus using the Interactions panel: add a Focus interaction that changes the element's opacity/position from hidden to visible.
4. For full HTML control, migrate to Wix Studio and use the Custom Code feature (Settings → Custom Code) to inject the skip link markup and CSS into the `<head>` / `<body>` — note this is advanced and may conflict with Wix's own DOM.
5. Test by pressing Tab on the published site and verifying the skip link appears and its target is reachable.

Add a meaningful text alternative to every SVG image so screen readers can describe it to visually impaired shoppers.

On Wix

1. In the Wix Editor, click on the SVG element (vector art, icon, or logo) on your page to select it.
2. In the element settings panel, look for 'Accessibility' settings (available on most elements via the right-click menu > Accessibility, or the element's Settings panel). Enter a descriptive label in the 'ARIA Label' field.
3. For SVGs added as Vector Art from the Wix library: right-click the element > Accessibility Settings > fill in the 'Label (aria-label)' field with a meaningful description.
4. For purely decorative SVGs, set the element's role to 'None / Decorative' in the same Accessibility Settings panel, which causes Wix to render it with `aria-hidden="true"`.
5. If you are using Wix Studio (advanced), you can directly set ARIA attributes in the Properties panel under Accessibility for each element.
6. Publish the site and verify with an accessibility checker tool or browser extension.

<!-- MEANINGFUL SVG — use title + aria-labelledby -->
<svg role="img" aria-labelledby="svg-logo-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <title id="svg-logo-title">Acme Co. logo — home</title>
  <!-- SVG path data here -->
  <circle cx="50" cy="50" r="50" fill="#e63946"/>
</svg>

<!-- MEANINGFUL SVG — simpler aria-label alternative -->
<svg role="img" aria-label="Free shipping badge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <!-- SVG path data here -->
  <path d="M1 3h15v13H1z" fill="#2a9d8f"/>
</svg>

<!-- DECORATIVE SVG — hide from assistive technology -->
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 10">
  <!-- decorative divider path -->
  <rect width="200" height="10" fill="#f0f0f0"/>
</svg>

Remove or replace all positive tabindex values (tabindex="1" or higher) on your page elements, using tabindex="0" for focusable elements and tabindex="-1" only when programmatic focus is needed.

On Wix

1. Open your site in the Wix Editor.
2. Click on any element you suspect has a custom tab order set — in the Wix Editor, right-click the element and look for 'Accessibility Settings' or 'Settings'.
3. In the element's settings panel, look for a 'Tab Order' or 'Keyboard Focus' field and ensure it is not set to a custom positive number.
4. For Wix Studio or sites using Velo (Wix's developer platform): open the Velo Dev Mode panel, search your page code and site code files for 'tabIndex' (capital I), and change any value above 0 to 0 or -1 as appropriate.
5. Wix does not expose direct HTML editing for most elements, so if a widget or App Market component is the source, contact the app developer or replace the component.
6. Publish your site and verify keyboard tab order by testing with the Tab key in a browser.

<!-- ❌ WRONG: positive tabindex breaks natural tab order -->
<button tabindex="3">Submit</button>
<a href="/shop" tabindex="1">Shop Now</a>
<div tabindex="2">Custom widget</div>

<!-- ✅ CORRECT: native elements use no tabindex (natural order) -->
<button>Submit</button>
<a href="/shop">Shop Now</a>

<!-- ✅ CORRECT: non-native element made focusable in natural order -->
<div tabindex="0" role="button" aria-label="Custom widget">Custom widget</div>

<!-- ✅ CORRECT: element only focused by JavaScript (e.g., modal), not in tab flow -->
<div tabindex="-1" id="modal-container" role="dialog" aria-modal="true">...</div>

Add or correct the `lang` attribute on every HTML element that contains content in a different language, using a valid BCP 47 language code.

On Wix

1. Go to Settings → Multilingual (for multilingual sites) and ensure the correct language is assigned to each language version — Wix will output the correct lang attribute on the <html> tag for each language automatically.
2. For a single-language site go to Settings → Language & Region and confirm your site language is set correctly; Wix uses this to set the page lang attribute.
3. To add a lang attribute to an inline text element (e.g. a foreign-language quote), click the text element in the Wix Editor → click the </> Embed Code option or use a Custom Element, since Wix's standard text widget does not expose the lang attribute directly. Alternatively, use Wix Velo: select the element, open the Velo panel, and set element.setAttribute('lang', 'fr') in the page code.
4. For Wix Studio sites, use the DevMode / Custom Code panel to target specific elements and set valid lang attributes via JavaScript.

<!-- Primary page language on the root element -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Store</title>
  </head>
  <body>
    <p>Welcome to our store. Free shipping on orders over $50.</p>

    <!-- Inline passage in a different language: add lang to the wrapping element -->
    <p lang="fr">Bienvenue dans notre boutique. Livraison gratuite dès 50 €.</p>

    <!-- Inline span for a short foreign-language phrase within an English sentence -->
    <p>Our slogan is <span lang="de">Qualität zuerst</span>, which means "Quality first".</p>
  </body>
</html>

Strengthen your DMARC policy from p=none (monitor-only) to p=quarantine, then p=reject, so that emails fraudulently sent from your domain are blocked rather than silently allowed through.

On Wix

1. In Wix, go to the Dashboard → Settings → Domains (or Mailboxes if using Wix Email) and ensure the SPF and DKIM records Wix provides are published.
2. If you use Wix Ascend or any connected marketing email tool, complete that tool's DKIM setup as well.
3. DMARC itself is a separate TXT record. If your domain's DNS is managed by Wix, go to Dashboard → Settings → Domains → Manage DNS → Add Record. Add a TXT record: Name = _dmarc, Value = your DMARC string with p=quarantine (replacing p=none).
4. If DNS is managed externally (e.g. GoDaddy), make the edit there instead. Then monitor rua reports and progress to p=reject.

v=DMARC1; p=quarantine; sp=quarantine; pct=100; rua=mailto:dmarc-reports@yourdomain.com; ri=86400; aspf=r; adkim=r; fo=1;

Set a valid HTTP Strict-Transport-Security (HSTS) header with a max-age of at least 31536000 (one year) and includeSubDomains to force browsers to always use HTTPS for your store.

On Wix

1. Wix automatically serves all sites over HTTPS and manages the HSTS header at the platform level — you cannot manually configure HTTP response headers from the Wix editor or dashboard.
2. Ensure 'Force HTTPS' is enabled: in the Wix dashboard go to Settings → SSL/TLS Certificate → confirm the toggle for 'Force HTTPS redirects' is ON.
3. If you need custom security headers (e.g., for a Wix Velo / headless setup), you can set headers within Wix Velo (formerly Corvid) using the http-functions.js file — add a response header in your backend HTTP function.
4. Verify the live header using DevTools or an online HSTS checker to confirm the platform is sending the header correctly.

Strict-Transport-Security: max-age=31536000; includeSubDomains

Increase your HSTS max-age directive to at least 31536000 seconds (1 year) so browsers enforce HTTPS connections for a meaningful period.

On Wix

1. Wix manages HTTPS and HSTS centrally; you cannot edit HTTP response headers directly from the Wix dashboard for standard sites.
2. Ensure your Wix site has a connected custom domain and that 'Force HTTPS' is enabled: Wix Dashboard → Settings → Domains → click your domain → toggle 'Redirect to HTTPS' on.
3. If the scanner flags a short max-age, it is a platform-level header set by Wix infrastructure. Contact Wix Support and cite the specific finding — Wix may update their platform headers.
4. For Wix Headless (using Wix APIs with a custom front-end), set the HSTS header in your own hosting layer (e.g. Vercel, Netlify, or your Node.js server).
5. There is no Wix Marketplace app that controls HSTS; the header must be managed at the infrastructure level.

Strict-Transport-Security: max-age=31536000; includeSubDomains

Enable HTTPS by installing a valid SSL/TLS certificate and redirecting all HTTP traffic to the secure HTTPS version of your store.

On Wix

1. Wix automatically enables a free SSL certificate for every site — no manual certificate installation is needed.
2. In your Wix Dashboard, go to Settings → Domains.
3. Confirm the SSL toggle shows as active (turned on, shown in green) next to your connected custom domain.
4. Wix enforces HTTPS by default and redirects all HTTP traffic automatically; there is no additional redirect configuration required.
5. If the SSL toggle is off or shows an error, disconnect and reconnect your domain, or contact Wix Support to re-provision the certificate.

Remove or suppress the HTTP `Server` response header so your web server no longer advertises its software name and version number to the public internet.

On Wix

1. Wix is a fully managed SaaS platform — `Server` header configuration is controlled by Wix infrastructure and cannot be changed from the Wix Editor or dashboard.
2. If your audit flags a `Server` header on a Wix site, this is a platform-level behaviour; submit a feedback/support request to Wix via the Help Center.
3. As a workaround for compliance, document in your audit evidence that the server layer is managed by Wix (a SOC 2 certified vendor) and is outside merchant control.
4. Premium Wix sites connected to a custom domain can optionally route through Cloudflare as a proxy — in your domain registrar, point the domain's nameservers (or A record) to Cloudflare with proxying enabled, then use a Transform Rule to strip the `Server` header.

<!-- The Server header cannot be controlled from HTML.
     Apply the fix at your web server, CDN, or hosting control panel
     using one of the platform-specific configurations shown below. -->

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 Wix

1. Wix is a fully hosted platform; server response headers are controlled by Wix infrastructure and cannot be modified by store owners through the standard editor.
2. Wix does not expose X-Powered-By headers on standard storefronts.
3. If you are using Wix Headless (Wix's headless commerce offering) with a custom server, suppress the header in your server middleware as shown in the Node.js/Express code snippet below.
4. If a scanner flagged this on your Wix site, it may have originated from an embedded third-party widget or script — contact that vendor to request they suppress the header on their end.

<!-- 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. -->

Set the HttpOnly, Secure, and SameSite flags on all session and authentication cookies to prevent them from being stolen or misused by attackers.

On Wix

1. Wix controls its own session cookies at the platform level — you cannot directly modify their flags. If the scanner flags Wix-owned cookies (e.g. svSession), report this to Wix support; these are managed by Wix infrastructure.
2. For cookies set via Wix Velo (formerly Corvid) backend code, use the wixSession API or set cookies in a Wix HTTP Functions response: response.cookies = { name: { value: '...', httpOnly: true, secure: true, sameSite: 'Strict' } };
3. In Wix Editor: open Dev Mode (top bar → Dev Mode → Enable), then open Backend → http-functions.js to add/modify cookie-setting code.
4. Review any third-party apps installed from the Wix App Market that set cookies and contact vendors to confirm secure flags are in use.

// backend/http-functions.js
import { ok } from 'wix-http-functions';

export function get_setSecureCookie(request) {
    const response = ok();
    // Set a secure, httpOnly cookie via the Set-Cookie header
    response.headers = {
        'Set-Cookie': 'mySession=abc123; HttpOnly; Secure; SameSite=Strict; Path=/'
    };
    return response;
}

Add a Content-Security-Policy (CSP) HTTP response header to every page to block unauthorized scripts, styles, and resources from loading in your visitors' browsers.

On Wix

1. Wix does not currently allow custom HTTP response headers on standard Wix sites.
2. For Wix Studio / custom domains using a reverse proxy or Cloudflare, add the CSP header at the proxy/CDN layer (see Cloudflare approach).
3. As a partial measure, Wix Velo (developer mode) lets you inject a <meta http-equiv='Content-Security-Policy'> tag into the page <head> via the 'Custom Code' feature: go to Settings → Custom Code → Add Code to Head, and paste the meta tag. Note this is weaker than an HTTP header.
4. Raise this requirement with Wix Support or vote on Wix Feature Requests, as custom HTTP header support is a frequently requested feature.

Add a DMARC DNS TXT record at _dmarc.yourdomain.com to tell receiving mail servers how to handle emails that fail authentication checks for your domain.

On Wix

1. If your domain was purchased through Wix: go to Wix Dashboard → Domains → … (three dots) next to your domain → Manage DNS Records.
2. Click '+ Add Record', choose TXT, set Host to _dmarc, Value to v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com, TTL to 3600, and save.
3. If your domain DNS is external (pointed to Wix via nameservers but managed elsewhere), add the record in that external DNS provider's dashboard instead.
4. Wix sends transactional email from Wix infrastructure. Ensure your sender email domain is verified in Wix under Settings → Email Marketing or Wix Inbox to activate DKIM/SPF before enforcing a strict DMARC policy.

_dmarc.yourdomain.com. 3600 IN TXT "v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com; ruf=mailto:dmarc-forensic@yourdomain.com; sp=none; adkim=r; aspf=r"

Add a Permissions-Policy HTTP response header to your store to explicitly restrict which browser features (camera, microphone, geolocation, etc.) pages and embedded third-party scripts are allowed to access.

On Wix

1. Wix's fully hosted infrastructure does not allow custom HTTP response headers to be set from the dashboard as of 2024.
2. The recommended workaround is to proxy your Wix site through Cloudflare. In Cloudflare: Rules → Transform Rules → Modify Response Header → create rule for your hostname, Header name = 'Permissions-Policy', Value = 'camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()'. Save and deploy.
3. Monitor Wix's product updates — custom header support may be introduced in future versions of Wix Studio.
4. Verify the header is present in DevTools → Network → Response Headers after enabling Cloudflare.

<!-- NOT recommended — use a real HTTP header instead. Shown for reference only. -->
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()">

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 Wix

1. Wix controls all server infrastructure and does not allow custom HTTP response headers to be set by store owners at this time.
2. As a partial mitigation, use Wix's built-in Velo (Dev Mode): enable Dev Mode in your editor, open the masterPage.js file, and add the meta tag via code: $w.onReady(function(){ // Wix does not support setting HTTP headers via Velo; use the HTML embed workaround below. });
3. Go to your Wix Editor → Add Element → Embed → HTML iFrame, and in each page's <head> equivalent add: <meta name="referrer" content="strict-origin-when-cross-origin"> — note this only affects pages where the embed is placed.
4. The most complete solution is to route Wix through Cloudflare (point your DNS to Cloudflare as a proxy) and set the header in a Cloudflare Transform Rule.
5. Contact Wix Support to request native Referrer-Policy header support if a CDN option is not available to you.

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

Create and publish a /.well-known/security.txt file with at least a Contact: line so security researchers know how to report vulnerabilities responsibly.

On Wix

1. Wix does not allow custom files to be served at arbitrary paths like /.well-known/ from the standard editor.
2. Use Wix's built-in HTTP Functions (Velo by Wix) to create a serverless function that responds to GET requests on the path /_functions/security_txt and returns your security.txt content — then set up a 301 redirect from /.well-known/security.txt to that function URL using Wix's 301 Redirects tool (Settings → SEO → 301 Redirects).
3. Alternatively, if you manage DNS via Cloudflare, use a Cloudflare Worker to intercept and respond to /.well-known/security.txt requests before they reach Wix (see Shopify Cloudflare Worker steps).
4. Verify by visiting https://yourdomain.com/.well-known/security.txt.

Contact: mailto:security@yourdomain.com
Expires: 2026-12-31T23:59:00.000Z
Preferred-Languages: en
Policy: https://yourdomain.com/security-policy
Acknowledgments: https://yourdomain.com/security-acknowledgments

Add a DNS TXT record containing a valid SPF policy to your domain so that email receivers can verify which servers are authorised to send mail on your behalf.

On Wix

1. If your domain was purchased through Wix: Wix Dashboard → Domains → click your domain → Manage → Advanced → DNS Records.
2. If your domain was registered elsewhere and connected to Wix, log in to that registrar's DNS panel instead.
3. In the DNS Records panel, click '+ Add Record', select Type = TXT.
4. Set Host Name to '@' and Value to your SPF string, e.g.: v=spf1 include:_spf.google.com include:sendgrid.net -all
5. For Wix's own email product (Wix Email Marketing), check Wix's Help Center for the correct include: hostname to add for Wix-sent mail.
6. Click Save and verify with MXToolbox SPF Lookup after propagation.

v=spf1 include:_spf.google.com include:sendgrid.net include:spf.mailgun.org -all

Add the Strict-Transport-Security (HSTS) response header to every HTTPS page so browsers always use an encrypted connection to your store.

On Wix

1. Wix manages HTTPS and HTTP-to-HTTPS redirection automatically for all sites on Wix infrastructure.
2. HSTS headers are controlled by Wix's servers and are not configurable from the Wix dashboard by site owners.
3. Verify the header is present using browser DevTools or securityheaders.com. Wix has progressively deployed HSTS across its platform; if it is missing, contact Wix Support and reference the Strict-Transport-Security header requirement.
4. If your Wix site is behind Cloudflare (added via your domain registrar), log in to Cloudflare → SSL/TLS → Edge Certificates → HTTP Strict Transport Security (HSTS) and enable it with max-age=31536000.

<!-- HSTS cannot be set via an HTML meta tag. It MUST be sent as an HTTP response header. Use the server-level examples below. -->
<!-- Correct header value -->
<!-- Strict-Transport-Security: max-age=31536000; includeSubDomains -->

Add the `X-Content-Type-Options: nosniff` HTTP response header to every page and asset your store serves.

On Wix

1. Wix does not expose server-level HTTP header configuration in its standard admin.
2. If you have a Wix site on a custom domain routed through Cloudflare: Dashboard → your domain → Rules → Transform Rules → Modify Response Header → add `X-Content-Type-Options: nosniff` → Save & Deploy.
3. If you use Wix Velo (Dev Mode): open the Velo backend and add a `http-functions.js` entry that sets the header on any custom endpoints you control; note this does not cover Wix-rendered pages.
4. For full coverage on standard Wix pages, Cloudflare is the only practical option.

X-Content-Type-Options: nosniff

Add the X-Frame-Options HTTP response header set to DENY or SAMEORIGIN to prevent your store's pages from being embedded in iframes on other sites.

On Wix

1. Wix does not provide direct access to HTTP response headers from the admin dashboard — you cannot set X-Frame-Options natively on Wix-hosted sites.
2. For Wix sites, the best available mitigation is to use Wix's built-in Velo (Wix Code) to add a Content-Security-Policy meta tag equivalent in your site pages, though note that HTTP headers are more reliable than meta tags for framing protection.
3. Go to your Wix Editor → click 'Dev Mode' (or Velo) → open the site's masterPage.js → use wixWindow or HTTP functions to add headers if supported by your Wix plan.
4. Alternatively, place your Wix site behind Cloudflare (update your domain's nameservers to Cloudflare) and add the X-Frame-Options header via Cloudflare Transform Rules as described in the BigCommerce steps.
5. Contact Wix support to confirm the current platform capability for custom HTTP headers on your specific plan.

X-Frame-Options: SAMEORIGIN

Set up regular active security testing (DAST) on a staging copy of your store to catch vulnerabilities that passive header/cookie/TLS scans cannot find.

On Wix

1. Wix does not offer a server-level staging environment; use the built-in 'Dev Mode' preview or duplicate your site: Site → Duplicate Site from the dashboard to create a test copy.
2. On the duplicate site, keep it unpublished (it will have a wix.com subdomain that is not indexed).
3. Because Wix is a fully managed SaaS platform, deep server-level DAST is limited — focus on scanning your published site's externally accessible endpoints (login, contact forms, Wix Stores checkout) using OWASP ZAP in passive/spider mode against the duplicate's preview URL.
4. For any custom Velo (Wix Code) backend functions, review them manually against the OWASP Cheat Sheet for input validation and authentication.
5. Report significant findings to Wix Support or disable vulnerable third-party apps from Add Apps → Manage Apps.
6. Keep all Wix apps updated; most security fixes on the core platform are handled automatically by Wix.

<meta name="robots" content="noindex, nofollow">

Renew your SSL/TLS certificate before it expires to keep your store secure, trusted, and visible in search results.

On Wix

1. Wix automatically provisions and renews SSL for all Wix-hosted sites — no manual action is required for domains managed within Wix.
2. To verify: go to Wix Dashboard → Settings → Domains. Each connected domain should show 'SSL: Active'.
3. If SSL shows as inactive, click the domain, then click 'Enable SSL' and allow up to 24 hours for provisioning.
4. For externally purchased domains connected to Wix via nameservers, SSL is still managed by Wix once DNS propagation is complete.
5. For domains connected by pointing DNS records (A/CNAME) rather than transferring nameservers, confirm the DNS entries match Wix's required values exactly, as incorrect DNS blocks SSL issuance.

<!-- Place this in your maintenance/holding page only if HTTPS is temporarily unavailable -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Install a valid SSL/TLS certificate that exactly matches your store's domain name, so browsers trust your site and customer data is encrypted in transit.

On Wix

1. Wix automatically issues and renews free SSL certificates (via Let's Encrypt) for all sites, including custom domains.
2. Go to your Wix Dashboard → Settings → Domains. Verify your domain is connected and shows a green SSL indicator.
3. If SSL is not active, click on the domain → Manage → and look for 'Enable SSL'. Toggle it on. Wix may take up to 24 hours to fully provision the certificate.
4. If SSL remains broken, the most common cause is incorrect DNS configuration. Ensure Wix's required A record and CNAME are set at your domain registrar exactly as Wix instructs (Dashboard → Settings → Domains → DNS Records).
5. Wix does not allow uploading custom certificates — all SSL management is handled by Wix automatically once DNS is configured correctly.

Replace or reissue your SSL/TLS certificate so it is valid for the exact domain name your store uses, eliminating the hostname mismatch error.

On Wix

1. Wix provisions and manages SSL certificates automatically for all sites, including custom domains connected through Wix.
2. Go to: Wix Dashboard → Settings → Custom Domains.
3. Verify your domain is connected and the status shows a green checkmark. If not, click the domain and follow the 'Fix It' prompt.
4. Ensure your domain's DNS A record and CNAME record match the values Wix provides in the domain connection wizard (found under Settings → Custom Domains → Manage DNS).
5. Once DNS is correctly pointed to Wix, SSL is provisioned automatically — allow up to 24 hours.
6. Wix does not allow you to upload a custom SSL certificate on standard plans; the platform manages certificates entirely.

Enable HTTPS on your store by opening port 443 and installing a valid SSL/TLS certificate so every page is served over a secure connection.

On Wix

1. Wix automatically provisions a free SSL certificate and keeps port 443 open for all sites on its hosting infrastructure — you cannot change firewall settings yourself.
2. In Wix Editor or Dashboard, go to Settings → Domains.
3. Ensure your domain's DNS is pointed to Wix's name servers or has the correct CNAME/A records per Wix's instructions. Wix will auto-issue the certificate once DNS propagates.
4. If HTTPS is not loading, go to Dashboard → Settings → Domains and look for an 'Enable HTTPS' or 'SSL Certificate' status indicator. Click 'Enable SSL' if available.
5. If the issue persists after 48 hours of correct DNS, contact Wix Support from the dashboard — the problem is on Wix's infrastructure.

Update the Axios JavaScript library to its latest stable release to eliminate known security vulnerabilities in your storefront code.

On Wix

1. Wix Velo (the developer platform) allows custom JavaScript. Open your site in the Wix Editor → click Dev Mode → Velo to open the code panel.
2. Search your site code files and public/ folder for any import or require of axios, or any <script> tags loading it.
3. If Axios is imported via npm in Velo, open the Package Manager panel and update axios to the latest version.
4. If a Wix App (from the App Market) is loading the vulnerable version, contact the app developer to request an update, as you cannot directly modify app code.
5. After updating, use the Wix Preview mode and browser DevTools to verify the new version loads.

<!-- Load the latest Axios from jsDelivr CDN (always points to newest stable release) -->
<script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js" integrity="" crossorigin="anonymous"></script>

<!-- OR pin to a specific safe version (recommended for production stability) -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.9/dist/axios.min.js" crossorigin="anonymous"></script>

Update jQuery to the latest stable version (3.7+) to eliminate known cross-site scripting (XSS) and prototype-pollution vulnerabilities that attackers actively exploit.

On Wix

1. Wix manages jQuery internally as part of its platform — you cannot directly upgrade the version Wix core uses. Ensure your Wix site is always on the latest published version (Wix updates this automatically).
2. If you have added custom HTML via Wix Editor → Add → Embed → Custom Code or HTML iFrame widgets that include a manual jQuery <script> tag, click that element → Settings and update the CDN URL to 'https://code.jquery.com/jquery-3.7.1.min.js'.
3. Go to Wix Dashboard → Settings → Custom Code (under Advanced) and review any code snippets injected in the Head or Body — update any jQuery URLs found there.
4. For Wix Apps you have installed, contact the app developer if their widget loads an outdated jQuery; Wix App Market apps are the developer's responsibility to patch.
5. After saving, use DevTools → Network on your live site to verify no outdated jQuery version is loaded by your custom code.

<!-- Remove your old jQuery script tag and replace with this -->
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

Add a hard-fail (-all) or soft-fail (~all) terminator to your SPF DNS record so that mail servers reject or flag email sent from servers not explicitly authorized by your domain.

On Wix

1. In Wix, go to your Dashboard → Domains → click the relevant domain → Manage DNS Records.
2. Scroll to the TXT Records section and find the record beginning with `v=spf1`.
3. Click Edit (pencil icon) next to that record.
4. In the Value field, append `-all` or `~all` to the end of the existing value so it reads, e.g., `v=spf1 include:example.com -all`.
5. Click Save and wait for DNS propagation (Wix typically shows a warning that changes can take up to 48 hours).
6. If the domain's DNS is pointed to an external provider, you must make this change at that provider instead.

v=spf1 include:_spf.wix.com -all

Set the X-Content-Type-Options response header to exactly `nosniff` (once, not duplicated) on every page and asset your store serves.

On Wix

1. Wix automatically adds security headers including `X-Content-Type-Options: nosniff` to all Wix-hosted sites — you cannot and do not need to set this manually in the Wix editor.
2. If your scanner flags a duplicate, the issue is an upstream proxy or Cloudflare integration added to your domain.
3. Remove any Cloudflare or third-party header-injection rule that duplicates `X-Content-Type-Options`.
4. Contact Wix Support if you believe the platform itself is sending a malformed header.

Replace the weak X-Frame-Options header value with DENY or SAMEORIGIN to prevent clickjacking attacks on your store.

On Wix

1. Wix manages all HTTP response headers at the infrastructure level — you cannot set custom response headers directly from the Wix dashboard for standard pages.
2. If the weak header is coming from a Wix site: contact Wix Support (Help Center → Contact Us) to report the misconfigured X-Frame-Options header and request it be corrected to DENY or SAMEORIGIN.
3. If you use Wix Velo (custom code): you can set headers in HTTP Functions (http-functions.js) for API endpoints you build, but not for the main page responses served by Wix's CDN.
4. As a workaround for embedding prevention, use Wix's built-in 'iFrame blocking' settings if available in your plan, or ensure sensitive pages (Members area, checkout) are not embeddable by confirming with Wix support.

<!-- X-Frame-Options MUST be sent as an HTTP response header, not a meta tag. -->
<!-- Use the server-side or platform snippets below instead. -->

<!-- The modern equivalent you CAN set via meta tag (limited support): -->
<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none';">

Update your CMS and ecommerce platform to the latest stable version immediately to close known security vulnerabilities and maintain vendor support.

On Wix

1. Wix core is fully managed by Wix — no manual platform updates needed.
2. If your site was built on an older Wix template or uses legacy Wix Apps, go to your Wix Dashboard > Apps > Manage Apps and check for any apps showing an 'Update' button.
3. For Wix Velo (code) sites: review any npm packages added via the Packages & Apps panel in the Velo sidebar, and update outdated packages.
4. If you are on the legacy Wix ADI or an old site structure and Wix is prompting a site migration, follow Wix's guided migration to move to the current editor to retain support.

<!-- REMOVE or suppress this tag from your <head> — it advertises your CMS version to attackers -->
<!-- <meta name="generator" content="WordPress 5.8.1" /> -->

<!-- In WordPress, add this to your theme's functions.php to remove it: -->
<!-- remove_action('wp_head', 'wp_generator'); -->

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 Wix

1. For domains purchased through Wix: go to Wix Dashboard → Domains (left sidebar). Click the three-dot menu next to the domain → 'Manage Domain'. Under 'Domain Settings' toggle 'Auto-Renew' to ON.
2. Check that your billing details in Wix are up to date: Dashboard → Billing & Payments → Payment Methods.
3. For domains connected from an external registrar: log in to that registrar and manage auto-renew there.

<!-- 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. -->

Install Google Tag Manager on your store and configure it to fire GA4 with full ecommerce event tracking (view_item, add_to_cart, purchase, and more).

On Wix

1. In the Wix dashboard, go to Settings › Custom Code (under the 'Advanced' section).
2. Click '+ Add Custom Code', paste the GTM <script> snippet, set it to load in the <head>, apply to 'All Pages', and save.
3. Add a second custom code entry for the GTM <noscript> snippet, set it to load in the body (start of <body>).
4. For ecommerce events, connect your Wix store to GA4 via Settings › Integrations › Google Analytics — this provides basic purchase tracking. For full ecommerce event coverage (view_item, add_to_cart), use the Wix native GA4 integration alongside GTM or install the 'Littledata' app.
5. Publish your site and verify in GTM Preview mode.

<!-- Google Tag Manager (paste in <head>) -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) (paste immediately after <body>) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

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

On Wix

1. Wix automatically adds the correct lang attribute to <html> based on the language you set for your site.
2. To verify or change it: open Wix Editor → go to Settings (dashboard) → Multilingual / Language, and ensure your primary site language is correctly selected.
3. If you are using Wix Multilingual, each language version gets its own lang attribute automatically.
4. You cannot directly edit the <html> tag in Wix — the platform manages it. If the lang attribute is wrong, change the site language in Settings → General Info → Language & Region.

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

Update the `offers.availability` value in your Product structured data from `InStock` to `OutOfStock` (or `PreOrder`) whenever a product sells out, so Google's records always match your actual inventory.

On Wix

1. Wix automatically generates Product schema for Wix eCommerce stores and updates availability based on your inventory settings — but you must have inventory tracking turned on.
2. In the Wix dashboard, go to eCommerce (or Wix Stores) → Products → select a sold-out product → Inventory tab. Ensure 'Track Inventory' is enabled and the stock count is set to 0 (or the product is marked 'Out of Stock').
3. If you use Wix Velo (custom code) and have a custom JSON-LD script injecting Product schema, open the relevant page code in Velo and update the availability field to dynamically reference the product's stock status from the Wix Stores API.
4. Wix does not allow direct theme-file editing for schema outside of Velo, so there is no template file to edit; rely on correct inventory data and Wix's automatic schema generation.
5. After updating inventory, use Google's Rich Results Test to confirm the schema on the product page reflects `OutOfStock`.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Your Product Name",
  "image": "https://example.com/images/product.jpg",
  "description": "Short product description.",
  "sku": "YOUR-SKU-123",
  "brand": {
    "@type": "Brand",
    "name": "Your Brand"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/product-page",
    "priceCurrency": "USD",
    "price": "29.99",
    "availability": "https://schema.org/OutOfStock",
    "itemCondition": "https://schema.org/NewCondition"
  }
}
</script>

Add internal links pointing to every orphaned product page from relevant category pages, collection pages, or other on-site content so search crawlers and shoppers can discover them.

On Wix

1. Open the Wix Editor and go to your Wix Stores dashboard (Manage → Store → Products).
2. Open each orphaned product and assign it to a collection under the 'Collections' field. Save.
3. To create a new collection, go to Manage → Store → Collections → + New Collection, add the orphaned products, then publish.
4. In the Wix Editor, add the collection to your site navigation: click the Pages panel → Add Page or link an existing nav item to the collection page.
5. Add a 'Related Products' widget to the product page by clicking the product page in the Editor → Add Elements → Related Products widget, and configure it to pull from shared collections.

<!-- Add this inside a relevant category page, blog post, or 'Featured Products' section -->
<a href="/products/your-orphaned-product-slug">Product Display Name</a>

Add all canonical product URLs to your XML sitemap so search engines discover and index every product page quickly.

On Wix

1. Wix auto-generates a sitemap; go to your Wix Dashboard → Marketing & SEO → SEO Tools → Sitemaps to view and manage it.
2. Confirm each missing product page is Published: go to Dashboard → Store Products → click the product → ensure it is not hidden.
3. If a product is excluded from the sitemap, open the SEO Settings for that product (from the product editor, click SEO → SEO Basics) and ensure 'Allow search engines to index this page' is turned ON.
4. Use Wix's 'SEO Setup Checklist' (Dashboard → Marketing & SEO → Get Found on Google) to identify any indexing issues.
5. Submit the sitemap in Google Search Console: add your Wix site as a property, then go to Indexing → Sitemaps → add 'sitemap.xml' → Submit.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <!-- Example product page entry -->
  <url>
    <loc>https://www.example.com/products/blue-running-shoes</loc>
    <lastmod>2024-06-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>

  <!-- Repeat one <url> block per canonical product page -->
  <url>
    <loc>https://www.example.com/products/red-yoga-mat</loc>
    <lastmod>2024-05-20</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>

</urlset>

Move deeply buried product pages closer to the homepage by flattening your site's navigation structure so every product is reachable within 4 clicks (ideally 3) from the homepage.

On Wix

1. Open the Wix Editor and click on your site's menu/navigation element to edit it.
2. In Wix Stores, go to the Store Manager → Categories and review your category hierarchy. Wix supports only one level of subcategories in its native store, so if you have simulated deep nesting via page links, flatten those manually.
3. Add a 'Product Gallery' or 'Product Widget' section directly on your homepage (Add Elements → Store → Product Gallery) and curate it to show the products that were too deep — this creates a 1-click path.
4. In your site menu, add direct page links to the previously buried collection pages so they appear in the main navigation rather than only in sub-menus.
5. Use Wix's built-in 'Manage Pages' panel to ensure no page is more than 2 levels deep in the page hierarchy.

<!-- Featured Products section on homepage or top category page -->
<section aria-label="Featured Products">
  <h2>Featured Products</h2>
  <ul>
    <li><a href="/products/product-name-1">Product Name 1</a></li>
    <li><a href="/products/product-name-2">Product Name 2</a></li>
    <li><a href="/products/product-name-3">Product Name 3</a></li>
  </ul>
</section>

Ensure every resource (images, scripts, stylesheets, fonts, iframes) on your store is loaded over HTTPS, never HTTP, so browsers never block or warn about mixed content.

On Wix

1. Wix serves all its own assets over HTTPS automatically. Mixed content typically comes from custom HTML widgets or Velo (code) blocks.
2. In the Wix Editor, click on any HTML Embed or Custom Embed widget → Enter Code, and manually update any 'http://' src or href values to 'https://'.
3. If you use Wix Velo, open the code panel (Dev Mode) and search your page and site-level code files for 'http://' string literals — update them.
4. For third-party apps added via the Wix App Market, contact the app developer if their embed code references HTTP resources.
5. Re-test using browser DevTools Console on your published site.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Add a responsive viewport meta tag to every page so mobile browsers render your site at the correct width and scale.

On Wix

1. Wix automatically injects `<meta name="viewport" content="width=device-width, initial-scale=1">` into every published site — you do not need to add it manually.
2. If a mobile-friendly test still flags your site, ensure your site is not set to 'Desktop only': in the Wix Editor, check that the Mobile Editor is enabled (the phone icon in the top bar is not disabled).
3. Use the Wix Mobile Editor to review and fix any layout issues that may cause the page to appear broken even when the tag is present.
4. Re-run Google's Mobile-Friendly Test after confirming the Mobile Editor is active.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Remove or suppress HTTP response headers that advertise your server software name and version to the public internet.

On Wix

1. Wix manages all server infrastructure; you cannot directly edit 'Server' or 'X-Powered-By' headers from the Wix dashboard.
2. If you use Wix Velo (code-based features), you can add custom response headers in a backend web module ('http-functions.js'): use 'response.headers.set()' to overwrite values, but note Wix may still inject its own headers.
3. Place a CDN or reverse proxy (e.g. Cloudflare) in front of your Wix site, then use Cloudflare Transform Rules to delete or overwrite the disclosing headers at the edge.
4. For Wix Enterprise, contact Wix support to request header suppression — they may be able to configure it at the infrastructure level.

<!-- HTTP response headers cannot be set via HTML meta tags.
     Use the server-side or CDN configuration snippets below. -->

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

On Wix

1. Wix automatically provisions and renews free SSL certificates for all sites on premium plans.
2. To check: go to your Wix Dashboard → Settings → Domains, select your domain, and confirm the SSL padlock/status is green.
3. If SSL is shown as inactive, click 'Enable HTTPS' in the same panel.
4. Ensure your domain's DNS is pointed to Wix's nameservers or has the correct CNAME/A records — broken DNS prevents certificate issuance.

<!-- 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;
} -->