Skip to content

SEO Features

Jump to bottom
Anthony Baggett edited this page Nov 21, 2025 · 1 revision

SEO Features

Built-in SEO optimization for better search engine visibility and social media sharing.

Meta Tags

Implemented in snippets/head-meta.liquid and included in all pages.

Essential Meta Tags

Charset and Viewport:

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

Page Title:

<title>
  {% if page_title != blank %}
    {{ page_title }} | {{ shop.name }}
  {% else %}
    {{ shop.name }}
  {% endif %}
</title>

Meta Description:

{% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
{% elsif shop.description %}
  <meta name="description" content="{{ shop.description | escape }}">
{% endif %}

Canonical URL:

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

Canonical URLs prevent duplicate content issues by telling search engines which version of a page is authoritative.

Open Graph Tags

Open Graph tags control how your pages appear when shared on Facebook, LinkedIn, and other social platforms.

Basic Open Graph

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ page_title | default: shop.name }}">
<meta property="og:type" content="website">
<meta property="og:description" content="{{ page_description | default: shop.description }}">

Dynamic Open Graph Type

The og:type changes based on page template:

  • Product pages: og:type="product"
  • Article pages: og:type="article"
  • All other pages: og:type="website" 
{% if template contains 'product' %}
  <meta property="og:type" content="product">
{% elsif template contains 'article' %}
  <meta property="og:type" content="article">
{% else %}
  <meta property="og:type" content="website">
{% endif %}

Product-Specific Tags

Product pages include additional pricing metadata:

{% if template contains 'product' %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency }}">
  <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
{% endif %}

Featured Images

{% if page_image %}
  <meta property="og:image" content="http:{{ page_image | img_url: '1200x630' }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{% endif %}

Recommended image size: 1200×630 pixels (1.91:1 ratio)

Twitter Cards

Twitter Cards control how your pages appear when shared on Twitter/X.

Summary Card with Large Image

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ page_title | default: shop.name }}">
<meta name="twitter:description" content="{{ page_description | default: shop.description }}">

Twitter Site Handle

Add your Twitter username in theme settings, then reference it:

{% if settings.twitter_handle != blank %}
  <meta name="twitter:site" content="@{{ settings.twitter_handle }}">
{% endif %}

Featured Images

{% if page_image %}
  <meta name="twitter:image" content="http:{{ page_image | img_url: '1200x630' }}">
{% endif %}

Recommended image size: 1200×628 pixels minimum

Structured Data

Structured data (JSON-LD) helps search engines understand your content and can trigger rich results in search.

Breadcrumb List

Implemented in snippets/breadcrumbs.liquid:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title }}",
      "item": "{{ shop.url }}{{ collection.url }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.title }}"
    }
  ]
}
</script>

SEO Benefits:

  • Can appear as breadcrumb trail in Google search results
  • Helps search engines understand site hierarchy
  • Improves navigation clarity for users

Product Schema

Product pages are marked up with schema-ready attributes:

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">{{ product.title }}</h1>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <meta itemprop="price" content="{{ product.price | money_without_currency }}">
    <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
    <link itemprop="availability" href="https://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
  </div>
</div>

SEO Benefits:

  • Rich results with price, availability, and ratings
  • Shopping graph inclusion
  • Enhanced mobile search results

Performance Optimization

Fast page loads are a confirmed ranking factor for SEO.

Preconnect to CDN

Establish early connections to Shopify CDN:

<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="dns-prefetch" href="https://cdn.shopify.com">

Optimized Asset Loading

Vite build process:

  • Minified JavaScript and CSS
  • Tree-shaking removes unused code
  • Hashed filenames for cache busting
  • Code splitting for optimal bundle sizes

Lazy loading:

<img src="{{ image | img_url: '800x' }}" loading="lazy" alt="{{ image.alt }}">

Responsive Images

Use srcset for responsive image delivery:

<img
  src="{{ image | img_url: '800x' }}"
  srcset="{{ image | img_url: '400x' }} 400w,
          {{ image | img_url: '800x' }} 800w,
          {{ image | img_url: '1200x' }} 1200w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="{{ image.alt }}">

Benefits:

  • Smaller images on mobile devices
  • Faster page loads
  • Better Core Web Vitals scores

URL Structure

Clean URLs

Shopify generates clean, SEO-friendly URLs:

  • Products: /products/product-handle
  • Collections: /collections/collection-handle
  • Articles: /blogs/blog-handle/article-handle
  • Pages: /pages/page-handle

Canonical URLs

Every page includes a canonical URL tag to prevent duplicate content penalties:

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

Handles:

  • Variant URLs (e.g., /products/shirt?variant=123)
  • Collection filtered URLs (e.g., /collections/all?filter.tag=blue)
  • Paginated URLs (e.g., /collections/all?page=2)

XML Sitemap

Shopify automatically generates XML sitemaps at:

  • /sitemap.xml (main index)
  • /sitemap_products_1.xml (products)
  • /sitemap_collections_1.xml (collections)
  • /sitemap_pages_1.xml (pages)
  • /sitemap_blogs_1.xml (blog posts)

Submit to Search Engines:

  1. Google Search Console: Submit https://yourstore.com/sitemap.xml
  2. Bing Webmaster Tools: Submit sitemap URL

Robots.txt

Shopify provides /robots.txt automatically. It includes:

  • Sitemap location
  • Disallow rules for checkout and cart
  • Crawl-delay if needed

View your robots.txt: https://yourstore.com/robots.txt

Image Optimization

Alt Text Best Practices

Always provide descriptive alt text:

<!-- Good -->
<img src="{{ image }}" alt="Blue cotton t-shirt with crew neck">

<!-- Bad -->
<img src="{{ image }}" alt="Product image">

<!-- Decorative images -->
<img src="{{ decoration }}" alt="" role="presentation">

Image File Names

Use descriptive filenames before uploading:

  • ✅ blue-cotton-crew-neck-tshirt.jpg
  • ❌ IMG_1234.jpg

Shopify CDN

All images are served through Shopify's global CDN with:

  • WebP format conversion (when supported)
  • Automatic compression
  • Responsive image variants
  • Edge caching worldwide

Content Optimization

Heading Hierarchy

Use proper heading structure:

  • One H1 per page (usually product/page/article title)
  • H2 for main sections
  • H3 for subsections
  • Never skip heading levels

Internal Linking

Link related products, collections, and articles:

{% render 'product-recommendations' %}
{% render 'article-related' %}
{% render 'breadcrumbs' %}

SEO Benefits:

  • Distributes page authority
  • Helps search engines discover content
  • Improves site crawlability
  • Reduces bounce rate

Blog SEO

Article Meta Tags

Article pages include additional metadata:

<meta property="article:published_time" content="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%S%z' }}">
<meta property="article:author" content="{{ article.author }}">

{% for tag in article.tags %}
  <meta property="article:tag" content="{{ tag }}">
{% endfor %}

Related Articles

Include related content to improve time on site:

{% render 'article-related',
  article: article,
  source: 'same-tags',
  limit: 3
%}

Monitoring and Improvement

Core Web Vitals

Monitor these key metrics:

  • LCP (Largest Contentful Paint): < 2.5s
  • FID (First Input Delay): < 100ms
  • CLS (Cumulative Layout Shift): < 0.1

Tools:

SEO Audit Tools

  • Google Search Console - Index coverage, mobile usability, Core Web Vitals
  • Screaming Frog - Crawl your site like a search engine
  • Ahrefs / SEMrush - Backlink analysis and keyword research
  • Shopify SEO Apps - JSON-LD structured data, rich snippets

Next Steps

← Back to Home

Clone this wiki locally