SEO Programming: The Code That Matters for SEO

SEO programming means writing and fixing the code of a website so search engines can crawl, render and index it, and so pages load fast and send clear signals about what they are. You do not need to be a developer to do SEO, but reading HTML, understanding how JavaScript changes a page and running small scripts will make you faster and far more useful to your developers.

This guide is for e-commerce marketers, SEO leads and Shopify store owners who want to know which code actually matters for SEO. You'll get the HTML elements Google reads, real code examples for product and collection pages, how JavaScript rendering affects indexing, a Python script you can run today and a step-by-step audit of your own templates.

What is SEO programming?

SEO programming is the overlap between search engine optimization and web development. It covers the code that controls whether search engines can find your pages (links, robots.txt, sitemaps), whether they can see your content (server HTML versus JavaScript), how they understand it (titles, headings, canonical tags, structured data) and how fast it loads for shoppers (images, scripts, Core Web Vitals).

The term also gets used for automating SEO work with code, such as scripts that crawl a site, pull Search Console data or check thousands of product pages at once. Both meanings matter for an online store, and both are covered below.

Why code matters more on e-commerce sites

Stores are built from templates. One product template might render 5,000 product pages, and one collection template might render every category and filter combination. That cuts both ways: a single mistake in a template, like a stray noindex or a canonical pointing to the wrong URL, is copied to every page that uses it. A single fix is copied too. That leverage is why a few lines of code can matter more than a month of new content.

Do you need to know how to code for SEO?

No, but you need to read code. Most SEO work on a store is research, content and links. The technical part is smaller, yet it decides whether the rest gets seen. If you can open a page's source, find the canonical tag and spot that a filter link has no href, you can catch problems that would otherwise sit unnoticed for months.

Here is a practical way to think about which languages to learn and why.

If you only learn one thing, learn HTML. It is the language Google indexes, and every other layer either produces HTML or changes it.

How Google crawls, renders and indexes code

Google's JavaScript SEO basics guide describes three phases: crawling, rendering and indexing. Googlebot fetches the URL, queues pages that return a 200 status for rendering, runs the JavaScript in a headless version of Chromium, then reads the rendered HTML for links and content to index.

That means there are two versions of every page that matter for SEO:

• The raw HTML, which is what the server sends before any JavaScript runs. You see it with View Source.
• The rendered HTML, which is the page after scripts have run. You see it in the URL Inspection tool in Search Console or in your browser's element inspector.

When the two differ, you need to know which one carries your important content and signals. The HTTP Archive's 2025 Web Almanac measured the gap across millions of pages: rendering adds words to the typical page, which means some content only exists after JavaScript runs.

Google can render JavaScript, so rendered content can be indexed. The risk is in the details. Google says it can only follow links in <a> elements with an href, that a noindex in the original HTML may stop it from rendering the page at all, and that a canonical injected by JavaScript should match the one in the original HTML. The same Web Almanac chapter found rendering changed the canonical on 3.02% of mobile sites, which is exactly the kind of conflict Google warns about.

The HTML every SEO should know

Most of the signals Google reads live in a handful of elements. The 2025 Web Almanac shows how unevenly sites use them: almost every page has a title, but a third of pages have no meta description and only about two in three declare a canonical.

The head of a product page

This is a clean <head> for a product page. Each line does one job: the title and description shape the search snippet, the canonical names the URL you want indexed and the viewport tag makes the page mobile friendly.

<head>
  <title>Merino Wool Runner | Lightweight Running Shoe | Example Co</title>
  <meta name="description" content="Breathable merino running shoe with free returns. Sizes 6 to 14.">
  <link rel="canonical" href="https://www.example.com/products/merino-runner">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Use the free meta tag checker or title tag checker to see what any live page is sending.

Links Google can follow

Filters, mega menus and "quick view" buttons are often built with click handlers instead of real links. Shoppers can use them, but Googlebot cannot follow a link without a URL.

<!-- Crawlable: Google can follow this -->
<a href="/collections/running-shoes">Running shoes</a>

<!-- Not crawlable: no href, so Google has no URL to follow -->
<span onclick="goTo('running-shoes')">Running shoes</span>

Canonicals and noindex in Shopify Liquid

Shopify themes usually output the canonical with Liquid's canonical_url object. Check that your theme's theme.liquid includes it once, in the head:

<link rel="canonical" href="{{ canonical_url }}">

To keep internal search result pages out of the index, a common pattern is a conditional meta robots tag in theme.liquid:

{% if template contains 'search' %}
  <meta name="robots" content="noindex">
{% endif %}

Our guide to canonical tags covers variant and collection URLs in more depth.

Images that help speed instead of hurting it

Set width and height so the layout does not jump, write alt text that describes the product and only lazy-load images below the fold. Lazy-loading the main product image delays your Largest Contentful Paint, one of the Core Web Vitals.

<!-- Main product image: load it right away -->
<img src="/images/merino-runner.jpg" alt="Merino Wool Runner in charcoal, side view"
     width="1200" height="1200" fetchpriority="high">

<!-- Images further down the page: lazy-load them -->
<img src="/images/merino-runner-sole.jpg" alt="Merino Wool Runner sole tread"
     width="800" height="800" loading="lazy">

robots.txt

robots.txt controls crawling, not indexing. Use it to keep crawlers out of cart, checkout and internal search, and point them at your sitemap. Test any change with the robots.txt tester before you publish it, because one wrong Disallow line can block a whole store.

User-agent: *
Disallow: /cart
Disallow: /checkout
Disallow: /search

Sitemap: https://www.example.com/sitemap.xml

Shopify generates robots.txt for you and lets you customize it with a robots.txt.liquid template. Read our robots.txt best practices before editing it.

JavaScript SEO: rendering choices for stores

Headless storefronts built with React, Next.js, Vue or Hydrogen put rendering decisions in your hands. web.dev's Rendering on the web defines the main options, and Google's documentation now calls dynamic rendering "a workaround and not a long-term solution," recommending server-side rendering, static rendering or hydration instead.

Handle missing products correctly

Single-page apps often show "product not found" on a page that still returns a 200 status. Google treats that as a soft 404. Its guide suggests redirecting to a URL that returns a real 404, or adding a noindex with JavaScript. A simplified version of Google's own example:

fetch(`/api/products/${productId}`)
  .then(response => response.json())
  .then(product => {
    if (product.exists) {
      showProductDetails(product);
    } else {
      // Send Google to a URL that returns a real 404 status
      window.location.href = '/not-found';
    }
  });

Use real URLs, not fragments

Use the History API for routing so each product and filter state that should rank has its own path, such as /collections/running-shoes/womens, rather than #womens. Google says it cannot reliably resolve fragment-based URLs.

Structured data with JSON-LD

Structured data tells Google exactly what a page is about: a product, its price, its availability and its reviews. Product structured data can make your listings eligible for richer results such as price and availability. JSON-LD is the format Google recommends, and the Web Almanac found 43% of mobile home pages used it in 2025, up from 40% in 2024.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Merino Wool Runner",
  "image": ["https://www.example.com/images/merino-runner.jpg"],
  "sku": "MWR-001",
  "brand": { "@type": "Brand", "name": "Example Co" },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/products/merino-runner",
    "price": "129.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Generate this from your product data, not by hand, so price and stock never drift from what the page shows. On Shopify that means outputting values from Liquid objects in the product template. You can build a starting block with the schema markup generator, then test the live page with the schema validator and Google's Rich Results Test. Our guide to schema markup for e-commerce lists which types to use on each page.

Python for SEO automation

Python is the most common language for SEO automation because it is readable and has mature libraries for fetching pages, parsing HTML and handling spreadsheets. Good first projects for a store:

• Check titles, canonicals and meta robots across every product URL in your sitemap.
• Pull Search Console data through its API and flag pages whose clicks fell month over month.
• Find products with duplicate titles or missing descriptions in a catalog export.
• Compare two crawls before and after a theme change.

This script checks the status code, title, canonical and meta robots for a list of URLs. Install the libraries with pip install requests beautifulsoup4, swap in your own URLs and run it.

import requests
from bs4 import BeautifulSoup

urls = [
    "https://www.example.com/products/merino-runner",
    "https://www.example.com/collections/running-shoes",
]

for url in urls:
    r = requests.get(url, timeout=10, headers={"User-Agent": "seo-check/1.0"})
    soup = BeautifulSoup(r.text, "html.parser")
    title = soup.title.get_text(strip=True) if soup.title else "MISSING"
    canonical = soup.find("link", rel="canonical")
    robots = soup.find("meta", attrs={"name": "robots"})
    print(url, r.status_code, title,
          canonical["href"] if canonical else "NO CANONICAL",
          robots["content"] if robots else "no meta robots", sep=" | ")

Note the limit: requests fetches the raw HTML only. If your store renders content with JavaScript, compare these results with the rendered page in Search Console's URL Inspection tool, or use a headless browser library such as Playwright for a rendered check.

Programmatic SEO is a different job

"SEO programming" sometimes gets confused with programmatic SEO, which means generating many pages from a database and a template, such as one page per product compatibility or per city. It can work for stores with real, structured data behind each page. It fails when the pages are thin variations of each other. The code is the easy part; unique, useful data for each page is the hard part.

Common code mistakes that hurt store SEO

These are the template-level problems worth checking first, because each one can affect hundreds or thousands of URLs at once.

If you see several of these at once, a full technical SEO audit is a better use of time than fixing them one by one.

How to audit your store's code step by step

You can do a useful first pass in an afternoon, without changing anything on the site.

1. Pick one URL per template. Your home page, one collection, one product, one blog post and one page with filters applied.
2. Read the raw HTML. Use View Source and check the title, meta description, canonical, meta robots and whether your main content and links are present before any JavaScript runs.
3. Compare with the rendered HTML. Run each URL through URL Inspection in Search Console and look for content, links or tags that only appear, disappear or change after rendering.
4. Check links. Make sure navigation, filters and pagination use <a href> links to real URLs. Our internal link checker helps here.
5. Validate structured data. Test product and organization markup and confirm prices and availability match the page.
6. Test robots.txt and the sitemap. Confirm important templates are allowed and the sitemap lists only indexable, canonical URLs.
7. Measure speed on mobile. Run PageSpeed Insights on the product and collection templates and note LCP, INP and CLS. Our guide to Core Web Vitals on Shopify explains each fix.
8. Write tickets developers can act on. For each issue, name the template, the exact element, the expected output and how to test it.

The free SEO checker runs several of these checks on a single URL at once, which is a quick way to start step 2.

Where to start this week

Start with the highest-leverage templates: product and collection pages. Read their raw HTML, confirm the canonical and robots tags are right, make sure every link Google needs has an href, and check that Product JSON-LD matches what shoppers see. Then pick one repetitive task, such as checking titles across your catalog, and script it in Python.

You do not need to become a developer. You need to know enough code to find the problem, describe the fix precisely and confirm it shipped. If you would rather have a team handle the technical SEO on your store, talk to us.