Shopify : Comment programmer des titres de thèmes dynamiques et des méta descriptions pour le référencement à l'aide de Liquid

Shopify Template Liquid - Personnalisez le titre SEO et la méta description

Si vous avez lu mes articles ces derniers mois, vous remarquerez que je partage beaucoup plus sur le commerce électronique, notamment en ce qui concerne Shopify. Mon entreprise a construit un système hautement personnalisé et intégré Shopify Plus site pour un client. Plutôt que de dépenser des mois et des dizaines de milliers de dollars pour créer un thème à partir de zéro, nous avons convaincu le client de nous permettre d'utiliser un thème bien construit et pris en charge qui a fait ses preuves. Nous sommes allés avec Wokiee, un thème Shopify polyvalent doté de nombreuses fonctionnalités.

Il a encore fallu des mois de développement pour intégrer la flexibilité dont nous avions besoin en fonction des études de marché et des retours de nos clients. Au cœur de la mise en œuvre était que Closet52 est un site de commerce électronique direct aux consommateurs où les femmes pourraient facilement acheter des robes en ligne.

Parce que Wokiee est un thème polyvalent, un domaine sur lequel nous nous concentrons est l'optimisation des moteurs de recherche. Au fil du temps, nous pensons que la recherche organique sera le coût par acquisition le plus bas et les acheteurs avec la plus forte intention d'achat. Dans notre recherche, nous avons identifié que les femmes achètent des robes avec 5 influenceurs clés :

  • Styles de robes
  • Couleurs de robes
  • Prix ​​des robes
  • Livraison Gratuite
  • Retours sans tracas

Les titres et les méta descriptions sont essentiels à obtenir votre contenu indexé et affiché correctement. Alors, bien sûr, nous voulons une balise de titre et des méta descriptions qui contiennent ces éléments clés !

  • Le étiquette de titre dans un en-tête de page est essentiel pour garantir que vos pages sont correctement indexées pour les recherches pertinentes.
  • Le meta description est affiché dans les pages de résultats des moteurs de recherche (SERP) qui fournissent des informations supplémentaires qui incitent l'utilisateur de recherche à cliquer.

Le défi est que Shopify partage souvent des titres et des méta-descriptions sur différents modèles de page - accueil, collections, produits, etc. J'ai donc dû écrire une logique pour remplir correctement les titres et les méta-descriptions de manière dynamique.

Optimisez le titre de votre page Shopify

Le langage thématique de Shopify est liquide et c'est plutôt bon. Je n'entrerai pas dans tous les détails de la syntaxe, mais vous pouvez générer dynamiquement un titre de page assez facilement. Une chose que vous devez garder à l'esprit ici est que les produits ont des variantes… donc incorporer des variantes dans le titre de votre page signifie que vous devez parcourir les options et créer dynamiquement la chaîne lorsque le modèle est un Les produits modèle.

Voici un exemple de titre pour un robe pull à carreaux.

<title>Plaid Sweater Dress on sale today for $78.00 » Multi Knee-Length » Closet52</title>

Et voici le code qui produit ce résultat :

{%- capture seo_title -%}
  {{- page_title -}}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}{{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}{%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " on sale today for " }}{{ product.variants[0].price | money }}{{ my_separator }}{% for product_option in product.options_with_values %}{% if product_option.name == 'Color' %}{{ product_option.values | join: ', ' }}{% endif %}{% endfor %}{% if product.metafields.my_fields.dress_length != blank %} {{ product.metafields.my_fields.dress_length }}{%- endif -%}{%- endif -%}{{ my_separator }}{{ shop.name }}
{%- endcapture -%}
  
<title>{{ seo_title | strip_newlines }}</title>

Le code se décompose ainsi :

  • Titre de la page – incorporer le titre de la page en premier… quel que soit le modèle.
  • Tags – incorporer des balises en joignant des balises associées à une page.
  • Couleurs du produit – parcourez les options de couleur et créez une chaîne séparée par des virgules.
  • Champs méta – cette instance Shopify a la longueur de la robe en tant que champ méta que nous souhaitons inclure.
  • Prix – inclure le prix de la première variante.
  • Nom de la boutique – ajouter le nom de la boutique à la fin du titre.
  • Séparateur – plutôt que de répéter le séparateur, nous en faisons simplement une affectation de chaîne et le répétons. De cette façon, si nous décidons de changer ce symbole à l'avenir, ce n'est qu'à un seul endroit.

Optimisez la méta description de votre page Shopify

Lorsque nous avons exploré le site, nous avons remarqué que toute page de modèle de thème appelée répétait les paramètres de référencement de la page d'accueil. Nous voulions ajouter une méta description différente selon que la page était une page d'accueil, une page de collections ou une page de produit réelle.

Si vous n'êtes pas sûr du nom de votre modèle, ajoutez simplement une note HTML dans votre theme.liquid fichier et vous pouvez afficher la source de la page pour l'identifier.

<!-- Template: {{ template }} -->

Cela nous a permis d'identifier tous les modèles qui utilisaient la méta description du site afin que nous puissions modifier la méta description basée sur le modèle.

Voici la méta description que nous voulons sur la page du produit ci-dessus :

<meta name="description" content="Turn heads in this classic hunter green plaid sweater dress. Modern updates make it a must-have: the stand-up neckline, three-quarter sleeves and the perfect length. On sale today for $78.00! Always FREE 2-day shipping and hassle-free returns at Closet52.">

Voici ce code :

{%- capture seo_metadesc -%}
  {%- if page_description -%}
    {%- if template == 'list-collections' -%}
      {{ "Find a beautiful dress for your next occasion. Here are all of our beautiful dress collections." | strip }} 
    {%- else -%}
    {{- page_description | strip | escape -}} 
      {%- if template == 'product' -%}
        {{ " On sale today for " }}{{ product.variants[0].price | money }}!
      {%- endif -%}
   {%- endif -%}
  {%- endif -%}
  {{ " Always FREE 2-day shipping and hassle-free returns at " }}{{ shop.name | strip }}.
{%- endcapture -%}
  
<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

Le résultat est un ensemble dynamique et complet de titres et de méta descriptions pour tout type de modèle ou de page de produit détaillée. À l'avenir, je vais très probablement refactoriser le code en utilisant des instructions case et en l'organisant un peu mieux. Mais pour l'instant, il produit une présence beaucoup plus agréable dans les pages de résultats des moteurs de recherche.

D'ailleurs, si vous souhaitez bénéficier d'une remise exceptionnelle… nous serions ravis que vous testiez le site avec un coupon de 30% de réduction, utilisez le code HIGHBRIDGE lors de la vérification.

Achetez des robes maintenant

Divulgation: je suis affilié pour Shopify et Themeforest et j'utilise ces liens dans cet article. Closet52 est un client de mon cabinet, Highbridge. Si vous souhaitez de l'aide pour développer votre présence dans le commerce électronique à l'aide de Shopify, veuillez nous contacter.