Shopify : comment programmer des titres de thème dynamiques et des méta-descriptions pour le référencement à l’aide de Liquid

Si vous avez lu mes articles au cours des derniers mois, vous remarquerez que je partage beaucoup plus sur le commerce électronique, notamment en ce qui concerne Shopify. Mon entreprise a mis en place une solution hautement personnalisée et intégrée ShopifyPlus 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 été testé et testé. Nous sommes allés avec Wokieeun thème Shopify polyvalent qui a une tonne de capacité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 commentaires de nos clients. Au cœur de la mise en œuvre était que Closet52 est un site de commerce électronique direct au consommateur 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 fortement 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 l’intention d’achat la plus élevée. 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. Donc, bien sûr, nous voulons une balise de titre et des méta descriptions qui contiennent ces éléments clés !

• La balise de titre dans votre en-tête de page est essentiel pour vous assurer que vos pages sont correctement indexées pour les recherches pertinentes.
• La 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 la 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 dynamiquement les titres et les méta descriptions correctement.

Optimisez le titre de votre page Shopify

La langue du thème de Shopify est liquide et c’est plutôt bien. 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 produit 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 -%}
    {%- if template == "collection" -%}{{ "Order " }}{%- endif -%}
    {{- page_title -}}
    {%- if template == "collection" -%}{{ " Online" }}{%- endif -%}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}
      {%- if template == 'blog' -%} 
      {{ " Articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | capitalize | remove: """ -}}{%- endif -%}
      {%- else -%}
      {{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " only " }}{{ 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 -%}
    {% if template == "collection" %}{{ my_separator }}Free Shipping, No-Hassle Returns{% endif %}{{ my_separator }}{{ shop.name }}
  {%- endcapture -%}

<title>{{ seo_title | strip_newlines }}</title>

Le code se décompose ainsi :

• Titre de la page – incorporer d’abord le titre réel de la page… quel que soit le modèle.
• Mots clés – incorporer des balises en joignant des balises associées à une page.
• Couleurs du produit – parcourir les options de couleur et créer une chaîne séparée par des virgules.
• Métachamps – cette instance Shopify a la longueur de la robe comme 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 thème.liquide 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 en fonction du modèle.

Voici la méta description que nous voulons sur la page 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 no-hassle 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 == 'blog' -%}
          {{ " Here are our articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | downcase | remove: """ -}}{%- endif -%}.
          {%- endif -%}
          {%- if template == 'product' -%}
  			{{ " Only " }}{{ product.variants[0].price | money }}!
  		  {%- endif -%}
      {%- endif -%}   	
  	{%- endif -%}
    {%- if template == 'collection' -%}
            {{ "Find a beautiful dress for your next occasion by color, length, or size." | strip }}
    {%- endif -%}
    {{ " Always FREE 2-day shipping and no-hassle 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 la page détaillée du produit. À l’avenir, je vais très probablement refactoriser le code à l’aide d’instructions de cas et l’organiser 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.

Au fait, si vous souhaitez bénéficier d’une réduction importante… nous aimerions que vous testiez le site avec un coupon de réduction de 30 %, utilisez le code HIGHBRIDGE lors de votre commande.

Achetez des robes maintenant

Divulgation : je suis affilié pour Shopify et Thèmeforêt et j’utilise ces liens dans cet article. Closet52 est un client de mon entreprise, Highbridge. Si vous souhaitez obtenir de l’aide pour développer votre présence dans le commerce électronique à l’aide de Shopify, veuillez Nous contacter.