Fermer

décembre 17, 2021

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


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 créé un site Shopify Plus hautement personnalisé et intégré 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 avons opté pour Wokieeun thème Shopify polyvalent doté d'une tonne de 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 commentaires de nos clients. Au cœur de la mise en œuvre, Closet52 est un site de commerce électronique directement destiné aux consommateurs où les femmes pourraient facilement acheter des robes en ligne.

Parce que Wokiee est un thème polyvalent, un domaine dans lequel nous sommes hautement axé sur 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 nos recherches, 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 pour que votre contenu soit 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 défi est que Shopify partage souvent des titres et des métadescriptions. à travers 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 du thème de Shopify est liquide et assez 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 modèle product.

Voici un exemple de titre pour une robe chandail à carreaux.

Robe chandail à carreaux en vente aujourd'hui pour 78,00 $ » Multi longueur genou » Closet52

Et voici le code qui produit ce résultat :

{%- capture seo_title -%}
  {{- titre de la page -}}
    {% assigner mon_separateur = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join : ', ' -%}{{ my_separator }}{{ 'general.meta.tags' | t : balises : balises_méta -}}{%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t : page : page_courante }}{%- endif -%}
    {%- if template == "product" -%}{{ " en vente aujourd'hui pour " }}{{ product.variants[0].price | argent }}{{ my_separator }}{% pour product_option dans 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 -%}
  
{{ seo_title | strip_newlines }}

Le code se décompose comme ceci :

  • Titre de la page – incorporer le titre de la page en premier… quel que soit le modèle.
  • Tags – incorporer les balises en joignant les balises associées à une page.
  • Product Colors – parcourez les options de couleur et créez une chaîne séparée par des virgules.
  • Metafields – cette instance Shopify a la robe. longueur en tant que champ méta que nous souhaitons inclure.
  • Price – inclure le prix de la première variante.
  • Shop Name – ajouter le nom de la boutique à la fin du titre.
  • Separator – 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 modifier ce symbole à l'avenir, ce n'est qu'à un seul endroit. 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 et vous pouvez afficher la source de la page pour l'identifier.

    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 :

    Voici ce code :

    {%- capture seo_metadesc -%}
      {%- si page_description -%}
        {%- if template == 'list-collections' -%}
          {{ "Trouvez une belle robe pour votre prochaine occasion. Voici toutes nos belles collections de robes." | déshabiller }}
        {%- autre -%}
        {{- page_description | bande | s'échapper -}}
          {%- si modèle == 'produit' -%}
            {{ " En vente aujourd'hui pour " }}{{ product.variants[0].price | de l'argent }}!
          {%- fin si -%}
       {%- fin si -%}
      {%- fin si -%}
      {{ " Livraison toujours GRATUITE en 2 jours et retours sans tracas sur " }}{{ shop.name | déshabiller }}.
    {%- endcapture -%}
      
    

    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 probablement refactoriser le code en utilisant des instructions de cas et en l'organisant un peu mieux. Mais pour l'instant, cela produit une présence beaucoup plus agréable dans les pages de résultats des moteurs de recherche. code HIGHBRIDGE lors de la vérification.

    Achetez des robes maintenant

    Divulgation : Je suis affilié à Shopify et Themeforest et j'utilise ces liens dans cet article. Closet52 est un client de mon cabinet, 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.




Source link