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

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

1. 1Admin › Online Store › Preferences: ensure your store is password-protected only while in development. On live stores, remove the password so crawlers can access the site.
2. 2Shopify auto-generates a sitemap at yourstore.com/sitemap.xml that includes products and collections. Verify it in Admin › Online Store › Themes › Actions › Edit code — check theme.liquid for any accidental noindex tags on collection or product templates.
3. 3In Google Search Console, go to Indexing › Sitemaps, enter yourstore.com/sitemap.xml and click Submit. Monitor the 'Discovered URLs' count against your actual product count.
4. 4Check navigation: Admin › Online Store › Navigation. Ensure every collection (category) is reachable from a menu. Products without a collection link may only be reachable via the sitemap.
5. 5For large catalogs using Shopify's built-in pagination, confirm each paginated collection page URL (e.g., /collections/shoes?page=2) is linked via the 'Next' button rendered as a standard <a> tag — Shopify's default themes do this correctly, but custom themes may break it.
6. 6Install a sitemap or SEO app (e.g., Plug In SEO or SEO Manager) to audit which products are missing from the sitemap or carry noindex tags.

{% comment %}
  CORRECT: Only noindex pages that should be hidden (e.g., search, cart).
  Do NOT noindex product or collection templates.
{% endcomment %}
{% if template == 'search' or template == 'cart' %}
  <meta name="robots" content="noindex, follow">
{% else %}
  <meta name="robots" content="index, follow">
{% endif %}

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

1. 1Images: In your theme editor (Online Store → Themes → Edit code), open the Liquid snippet that renders product/collection images — typically sections/product-template.liquid or snippets/product-image.liquid. Find every <img> tag and add width and height attributes matching the rendered dimensions, e.g. width='800' height='800'. Alternatively install the free 'Booster SEO' or 'TinyIMG' app which patches image dimensions automatically across your theme.
2. 2Lazy-loading: Shopify's Dawn and most modern themes already add loading='lazy' and explicit dimensions via Liquid's | image_url filter with width parameter. If yours does not, update image_url calls to use: {{ image | image_url: width: 800 }} and render the img tag with width and height set.
3. 3Announcement bar / cookie banner: In the theme editor (Customize → Header), move any announcement bar to a server-rendered position rather than injecting it via JavaScript after load. For third-party cookie apps, choose ones that render as fixed overlays (bottom of viewport), not top-push banners.
4. 4Fonts: In your theme's layout/theme.liquid, add font-display: optional to any @font-face declarations. If using Shopify's font picker, edit the generated CSS in assets/base.css to add the descriptor.
5. 5Ads / embeds: Wrap any review widgets (e.g. Judge.me, Yotpo) or social feed apps in a <div style='min-height:200px'> container in the relevant section file so space is reserved before the widget JS loads.
6. 6Verify: Use PageSpeed Insights on your homepage and top product pages; confirm CLS < 0.1 on both mobile and desktop.

{%- liquid
  assign img_width  = 800
  assign img_height = 800
  assign img_src    = product.featured_image | image_url: width: img_width
-%}
<img
  src="{{ img_src }}"
  alt="{{ product.featured_image.alt | escape }}"
  width="{{ img_width }}"
  height="{{ img_height }}"
  loading="lazy"
  decoding="async"
>

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

1. 1Go to Online Store → Themes → (your theme) → Edit code.
2. 2Open theme.liquid (or layout/theme.liquid). Find any render-blocking `<script>` tags for third-party apps (chat, reviews, pop-ups) and add the `defer` or `async` attribute, or move them just before `</body>`.
3. 3In the Shopify admin, go to Online Store → Preferences and disable any built-in scripts you don't need (e.g., welcome pop-up overlays).
4. 4Go to Apps and review every installed app. Remove apps whose scripts are not actively driving revenue — each app injects JavaScript that can inflate INP. Check the App Blocks in the theme editor and remove unused ones.
5. 5For custom JavaScript in assets/theme.js or assets/global.js, open those files and refactor heavy click/submit handlers: extract expensive work into a `setTimeout` or use `scheduler.yield()` so the browser can paint between steps.
6. 6Use Shopify's Speed Score (Online Store → Themes) and PageSpeed Insights to verify improvement after each change.

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

1. 1IDENTIFY LCP IMAGE: Run PageSpeed Insights on your storefront URL. Note the filename of the LCP image (usually the first banner/hero in your theme's index section).
2. 2CONVERT TO WEBP: Shopify automatically serves WebP when you upload a standard JPEG/PNG — verify by right-clicking your live hero image and checking the URL ends in .webp or contains 'format=webp'. If not, ensure you are using a modern theme (Dawn or equivalent).
3. 3PRELOAD: Go to Online Store › Themes › your active theme › Edit code. Open 'layout/theme.liquid'. Inside the <head> tag, add: <link rel='preload' as='image' href='{{ section.settings.image | image_url: width: 1500 }}' fetchpriority='high'>. For a hardcoded URL use your CDN path directly.
4. 4NO LAZY-LOAD: In your hero section's Liquid file (e.g., sections/image-banner.liquid), find the <img> tag for the hero and remove loading='lazy' or change it to loading='eager'. Also add fetchpriority='high'.
5. 5DEFER JS: In theme.liquid, add 'defer' to non-critical <script src='...'> tags that appear in <head>.
6. 6APPS: Install a performance app such as 'Crush.pics' or 'TinyIMG' for bulk WebP conversion, or 'Booster: Page Speed Optimizer' for automatic render-blocking JS deferral.
7. 7VERIFY: Re-run PageSpeed Insights and check Google Search Console › Experience › Core Web Vitals.

{%- comment -%} Preload LCP hero image — place high in <head> in layout/theme.liquid {%- endcomment -%}
{%- if section.settings.image -%}
  {%- assign hero_url_1x = section.settings.image | image_url: width: 1500 -%}
  {%- assign hero_url_2x = section.settings.image | image_url: width: 3000 -%}
  <link
    rel="preload"
    as="image"
    href="{{ hero_url_1x }}"
    imagesrcset="{{ hero_url_1x }} 1500w, {{ hero_url_2x }} 3000w"
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}