Accueil › Blog › SEO
SEO

Shopify Liquid pour le SEO : snippets utiles pour les thèmes en 2026

5 zones SEO de Shopify vivent dans Liquid, pas dans l'admin. Snippets pratiques pour meta tags, JSON-LD, hreflang et OG qui scalent à des milliers d'URL.

Lionel Fenestraz · 1 juin 2026 · 11 min de lecture · Mis à jour : juin 2026
Éditeur de code montrant des snippets Liquid dans un fichier theme.liquid de Shopify
Dans cet article

Liquid est ce qui sépare un Shopify avec un SEO improvisé d’un Shopify qui passe bien à l’échelle sur des milliers d’URL. L’interface d’admin de Shopify n’expose qu’une partie de ce que le thème contrôle : les title tags, meta descriptions, canonicals, schema.org, hreflang et Open Graph vivent dans Liquid, pas dans le panneau d’administration. Toucher à ces fichiers fait la différence entre un thème générique et un thème optimisé.

Ce guide rassemble les snippets Liquid que j’utilise le plus souvent quand j’audite ou que je réécris le SEO technique d’un Shopify. Chacun résout un problème concret que l’UI Shopify ne permet pas de corriger correctement.

En 30 secondes :

  • Liquid est le langage de templates open-source de Shopify, en production depuis 2006 et écrit en Ruby (Shopify Liquid, 2024)
  • 5 domaines SEO clés dépendent de Liquid : meta tags dynamiques, schema.org, hreflang, Open Graph et robots customisé
  • Shopify expose des dizaines d’objets Liquid (product, collection, shop, page, blog, article, request, canonical_url…) qu’on peut combiner pour du SEO dynamique (Shopify Liquid Reference, 2025)
  • Le fichier theme.liquid est le plus rentable à optimiser : les changements se propagent à toutes les URL
  • Les snippets de cet article nécessitent l’accès au theme code editor (Online Store > Themes > Edit code) ou de travailler sur un thème custom

Qu’est-ce qui rend Liquid pertinent pour le SEO ?

Liquid est le langage de templates que Shopify utilise pour rendre du HTML dynamiquement. Quand un utilisateur ouvre une page produit, Shopify exécute le thème avec l’objet product peuplé et renvoie du HTML statique au navigateur. Pour le SEO, cela signifie que toutes les balises que Google et les crawlers IA lisent sont construites dans Liquid avant le rendu.

Contrairement à d’autres CMS, Shopify n’a pas de plugins SEO universels. Yoast n’existe pas ici. Les apps SEO de Shopify (SEO Manager, Smart SEO, etc.) sont des wrappers qui injectent du code dans le thème. Si vous comprenez Liquid, vous n’avez pas besoin de l’app, et vous obtenez presque toujours un contrôle plus fin.

Les objets Liquid que j’utilise le plus en SEO technique sont product, collection, shop, page, request.canonical_url, current_page et localization. Combinés avec les filtres comme default, escape, strip_html, truncate et image_url, ils couvrent 90 % des besoins.

Comment générer title, description et canonical dynamiques en Liquid ?

Les templates par défaut de Shopify génèrent des titres génériques du type « Produit X – Ma Boutique ». Ça gaspille l’espace SERP. Le snippet suivant, placé dans le <head> de theme.liquid, génère des titres optimisés avec des fallbacks explicites par template :

{% if template contains 'product' %}
  <title>{{ product.title }} – {{ product.vendor }} | {{ shop.name }}</title>
  <meta name="description" content="{{ product.description | strip_html | truncate: 155 }}">
{% elsif template contains 'collection' %}
  <title>{{ collection.title }} | {{ shop.name }}</title>
  <meta name="description" content="{{ collection.description | strip_html | default: collection.title | truncate: 155 }}">
{% elsif template == 'index' %}
  <title>{{ shop.name }} – {{ shop.description }}</title>
  <meta name="description" content="{{ shop.description | truncate: 155 }}">
{% else %}
  <title>{{ page_title }} | {{ shop.name }}</title>
  <meta name="description" content="{{ page_description | default: shop.description | truncate: 155 }}">
{% endif %}

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

Trois détails importants ici. D’abord, le filtre strip_html évite que du HTML de l’éditeur enrichi pollue la meta description. Ensuite, truncate: 155 garde la description dans la limite SERP. Enfin, {{ canonical_url }} est la variable native de Shopify et respecte automatiquement le domaine principal et les paramètres UTM exclus, donc vous n’avez pas à la construire manuellement.

Comment injecter du JSON-LD à grande échelle avec Liquid ?

Le schema.org dans Shopify est l’un des endroits où on perd le plus de trafic de recherche enrichie. La plupart des thèmes incluent un Product schema basique, mais il manque BreadcrumbList, FAQ et Organization. Le snippet suivant, dans un bloc {% if template contains 'product' %} dans le head, couvre le cas produit :

{% if template contains 'product' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": {{ product.title | json }},
  "image": {{ product.featured_image | image_url: width: 1200 | prepend: 'https:' | json }},
  "description": {{ product.description | strip_html | json }},
  "sku": {{ product.selected_or_first_available_variant.sku | json }},
  "brand": {
    "@type": "Brand",
    "name": {{ product.vendor | json }}
  },
  "offers": {
    "@type": "Offer",
    "url": {{ shop.url | append: product.url | json }},
    "priceCurrency": {{ shop.currency | json }},
    "price": {{ product.selected_or_first_available_variant.price | money_without_currency | replace: ',', '.' | json }},
    "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}"
  }
}
</script>
{% endif %}

Qu’est-ce qui rend ce snippet différent de la sortie par défaut de Shopify ? Le filtre | json. Il échappe les caractères spéciaux (guillemets, sauts de ligne, accents) qui sinon casseraient le JSON-LD. Sans ce filtre, une description avec une apostrophe libre laisse le schema invalide et Google arrête de le lire. Si vous voulez approfondir comment combiner Product, BreadcrumbList et FAQ avec le même pattern, j’ai écrit un guide dédié sur le schema markup dans Shopify.

Quand le schema échoue en silence. Beaucoup de boutiques ont un schema mal formé et ne le savent pas parce que le preview dans Google Rich Results Test semble correct. L’erreur fréquente : prix avec une virgule au lieu d’un point ("price": "29,99" casse, "price": "29.99" fonctionne). Le filtre replace: ',', '.' du snippet évite cette erreur.

Comment gérer hreflang dans Shopify avec Liquid ?

Shopify Markets a produit la plus grande amélioration SEO multi-langue depuis des années, mais les balises hreflang automatiques ne sont pas toujours correctes, surtout quand on a des domaines différents par marché. Le snippet suivant dans theme.liquid génère un hreflang dynamique à partir de l’objet localization :

{% if localization.available_languages.size > 1 or localization.available_countries.size > 1 %}
  {% for language in localization.available_languages %}
    <link rel="alternate"
          hreflang="{{ language.iso_code }}"
          href="https://{{ shop.domain }}/{{ language.iso_code }}{{ canonical_url | remove_first: shop.url }}">
  {% endfor %}
  <link rel="alternate" hreflang="x-default" href="{{ canonical_url }}">
{% endif %}

Trois règles que je vois violer à chaque audit d’un Shopify international. Une : chaque URL traduite doit avoir un hreflang bidirectionnel (fr ↔ en, pas seulement fr → en). La boucle for résout ça. Deux : la balise x-default est obligatoire si plusieurs langues existent. Trois : l’iso_code doit être valide (en-GB, en-US, pas en-UK ni english). L’objet language de Shopify renvoie des codes valides par défaut.

Si votre boutique utilise des sous-domaines ou des domaines séparés par marché plutôt que des sous-répertoires, le snippet ci-dessus ne fonctionne pas — il faut mapper chaque marché à son domaine dans un bloc case/when. Je couvre ça plus en détail dans Shopify SEO pour ecommerce 2026.

Comment configurer un Open Graph dynamique en Liquid ?

Les cartes Facebook, LinkedIn et les previews WhatsApp dépendent d’Open Graph. Shopify ne génère pas d’OG correct par défaut sur les anciens thèmes. Le snippet :

<meta property="og:title" content="{{ page_title | default: shop.name | escape }}">
<meta property="og:description" content="{{ page_description | default: shop.description | escape | truncate: 155 }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name | escape }}">
<meta property="og:type" content="{% if template contains 'product' %}product{% elsif template contains 'article' %}article{% else %}website{% endif %}">

{% if template contains 'product' and product.featured_image %}
  <meta property="og:image" content="{{ product.featured_image | image_url: width: 1200 | prepend: 'https:' }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="{{ 1200 | divided_by: product.featured_image.aspect_ratio | round }}">
  <meta property="product:price:amount" content="{{ product.price | money_without_currency }}">
  <meta property="product:price:currency" content="{{ shop.currency }}">
{% elsif settings.share_image %}
  <meta property="og:image" content="{{ settings.share_image | image_url: width: 1200 | prepend: 'https:' }}">
{% endif %}

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

Le filtre escape évite que les guillemets dans le titre cassent le HTML. L’og:type change selon le template, ce que LinkedIn et Facebook attendent. La hauteur calculée avec aspect_ratio garde la bonne proportion sans recadrage.

Quelles erreurs dans theme.liquid blessent le plus le SEO ?

J’ai audité des dizaines de Shopify et les patterns qui reviennent sont toujours les mêmes. Les cinq plus coûteux :

Le premier, c’est le filtre escape manquant sur les meta tags. Une seule apostrophe dans page_title casse le HTML du head, et j’ai vu des sites perdre les rich snippets pendant des mois à cause exactement de ça. Le second : schema.org dupliqué, quand les apps SEO installent leur propre JSON-LD sans désinstaller celui du thème et que deux schemas Product apparaissent sur la même page. Google lit ça comme ambigu et arrête d’afficher le prix dans la SERP.

  • Canonical pointant vers l’URL avec paramètres de tracking. L’astuce : utiliser {{ canonical_url }} (variable native) au lieu de {{ request.path }} ou de la construire manuellement. La variable native exclut déjà les paramètres UTM.
  • Images sans lazy loading ni attributs width/height. Liquid peut générer les deux automatiquement avec le filtre image_url et les modificateurs width. Faire ça améliore les Core Web Vitals.
  • Et le plus coûteux de tous : blocs noindex oubliés en production. Une balise <meta name="robots" content="noindex"> mise pendant le développement et jamais retirée est la cause numéro un des boutiques qui ne rankent rien après le lancement. Cherchez-la toujours dans un audit initial — plus d’une fois ç’a été le seul vrai problème.

Si vous voulez une revue systématique du theme code avant de toucher à quoi que ce soit, un audit SEO technique de Shopify économise des heures de tests. La plupart des problèmes Liquid se détectent en moins de 30 minutes quand on sait où regarder.

Questions fréquentes

Faut-il savoir coder pour éditer theme.liquid ?

Éditer des fichiers .liquid pour le SEO ne nécessite pas d’être développeur, mais il faut connaître le HTML basique et comprendre la logique Liquid ({% if %}, {% for %}, filtres). Les snippets de cet article fonctionnent en copier-coller, mais je recommande toujours de dupliquer le thème avant (Online Store > Themes > Actions > Duplicate) pour avoir un rollback si quelque chose casse.

Dans quels fichiers du thème va-t-on travailler ?

La plupart des snippets SEO vont dans layout/theme.liquid, à l’intérieur de la section <head>. Pour les schemas spécifiques par template, vous pouvez créer un snippet séparé (ex : snippets/seo-schema.liquid) et l’appeler avec {% render 'seo-schema' %} depuis theme.liquid. Pour du SEO spécifique au produit, les templates templates/product.liquid ou sections/main-product.liquid sont aussi valables.

Les apps SEO de Shopify remplacent-elles l’édition de Liquid ?

Seulement partiellement. Les apps comme SEO Manager ou Smart SEO injectent du code dans le thème automatiquement. Elles fonctionnent bien pour les sites sans développeurs, mais limitent la personnalisation. Si votre site a 5 000+ produits, des exigences de schema avancées ou des marchés internationaux avec plusieurs langues, vous allez presque toujours devoir toucher Liquid directement.

Comment tester que les changements Liquid ne cassent rien ?

Trois étapes avant de publier : (1) utiliser le preview du thème dupliqué, (2) valider le JSON-LD dans Google Rich Results Test et Schema.org Validator, et (3) vérifier le <head> avec view-source sur un produit, une collection et la home. Si vous avez Search Console connecté, regardez la section Enhancements 1 à 2 semaines plus tard pour des erreurs nouvelles.

Et Shopify 2.0 et les thèmes Online Store 2.0 ?

Les thèmes Online Store 2.0 (Dawn, Sense, Refresh, etc.) utilisent des sections modulaires et des metafields plus accessibles. La logique Liquid reste la même ; seul l’endroit où vous placez le code change. Pour les schemas produits enrichis, les metafields de Shopify 2.0 permettent de capturer des attributs spécifiques (matériau, ingrédients, GTIN) directement depuis l’admin et de les rendre dans le JSON-LD via Liquid.

En quoi le SEO Liquid diffère-t-il du SEO WordPress ?

Liquid génère le HTML sur le serveur de Shopify, sans plugins JavaScript. C’est plus proche d’un thème PHP de WordPress que de Gutenberg moderne. L’avantage : le SEO est rendu en statique et rapide. L’inconvénient : tout changement nécessite l’accès au code editor du thème ou un développeur. J’ai comparé les deux approches dans SEO Shopify vs WordPress.

Sources

  1. Shopify. Liquid : Open-source template language. https://shopify.github.io/liquid/. 2024.
  2. Shopify Dev. Liquid objects reference. https://shopify.dev/docs/api/liquid/objects. 2025.
  3. Shopify Dev. Liquid reference (objects, tags, filters). https://shopify.dev/docs/api/liquid. 2025.
  4. Google Search Central. Product structured data documentation. https://developers.google.com/search/docs/appearance/structured-data/product. 2025.
  5. Google Search Central. Tell Google about localized versions of your page. https://developers.google.com/search/docs/specialty/international/localized-versions. 2025.

Votre Shopify ne classe pas et vous ne savez pas si c’est le thème ou les URL ? Je propose des audits SEO techniques pour boutiques Shopify — revue systématique du theme code, schema, hreflang et performance. 30 minutes d’appel initial gratuit pour voir si ça a du sens.

Lionel Fenestraz — Consultant Google Ads & Meta Ads Freelance
Lionel Fenestraz
Consultant PPC & CRO Freelance · Google Partner · CXL Certified · Google Ads Search Certified
Plus de 7 ans à gérer des campagnes Google Ads et Meta Ads pour des marques de location saisonnière, B2B et ecommerce. Trilingue ES/EN/FR.
LinkedIn À propos Certif. Google Ads ↗ Réserver un appel →
Premier appel gratuit

Vos campagnes publicitaires
pourraient-elles mieux performer ?

30 minutes pour analyser votre situation et vous dire exactement ce que je changerais. Sans pitch, sans proposition commerciale.

Réserver un appel →
30 min · Google Meet · Sans engagement