Shopify: So programmieren Sie dynamische Theme-Titel und Meta-Beschreibungen für SEO mit Liquid

Shopify Template Liquid - SEO-Titel und Meta-Beschreibung anpassen

Wenn Sie meine Artikel in den letzten Monaten gelesen haben, werden Sie feststellen, dass ich viel mehr über E-Commerce geteilt habe, insbesondere in Bezug auf Shopify. Meine Firma hat ein hochgradig angepasstes und integriertes Shopify Plus Website für einen Kunden. Anstatt Monate und Zehntausende von Dollar für die Erstellung eines neuen Themes auszugeben, haben wir den Kunden überredet, uns zu erlauben, ein gut gebautes und unterstütztes Theme zu verwenden, das sich bewährt hat. Wir gingen mit Wokiee, ein Mehrzweck-Shopify-Theme mit vielen Funktionen.

Es dauerte noch Monate der Entwicklung, um die Flexibilität zu integrieren, die wir basierend auf Marktforschung und Feedback unserer Kunden brauchten. Im Mittelpunkt der Implementierung stand, dass Closet52 eine E-Commerce-Site für den Direktkundenverkehr ist, auf der Frauen problemlos zugreifen können Kleider online kaufen.

Da Wokiee ein Mehrzweckthema ist, konzentrieren wir uns stark auf die Suchmaschinenoptimierung. Wir glauben, dass die organische Suche im Laufe der Zeit die niedrigsten Kosten pro Akquisition und Käufer mit der höchsten Kaufabsicht sein wird. In unserer Untersuchung haben wir festgestellt, dass Frauen Kleider mit 5 wichtigen Entscheidungsbeeinflussern kaufen:

  • Kleiderstile
  • Kleiderfarben
  • Preise für Kleider
  • Kostenloser Versand
  • Problemloser Umtausch

Titel und Meta-Beschreibungen sind entscheidend um Ihre Inhalte zu indexieren und richtig anzuzeigen. Wir wollen natürlich ein Title-Tag und Meta-Beschreibungen, die diese Schlüsselelemente enthalten!

  • Das Titel-Tag in einer Überschrift Ihrer Seite ist entscheidend, um sicherzustellen, dass Ihre Seiten für die relevanten Suchen richtig indiziert werden.
  • Das meta description wird auf Suchmaschinen-Ergebnisseiten (SERPs) angezeigt, die zusätzliche Informationen bereitstellen, die den suchenden Benutzer zum Durchklicken verleiten.

Die Herausforderung besteht darin, dass Shopify häufig Titel und Metabeschreibungen über verschiedene Seitenvorlagen hinweg teilt – Startseite, Sammlungen, Produkte usw. Also musste ich eine Logik schreiben, um die Titel und Metabeschreibungen richtig dynamisch zu füllen.

Optimieren Sie Ihren Shopify-Seitentitel

Die Theme-Sprache von Shopify ist flüssig und ziemlich gut. Ich werde nicht auf alle Details der Syntax eingehen, aber Sie können einen Seitentitel ziemlich einfach dynamisch generieren. Eine Sache, die Sie hier beachten müssen, ist, dass Produkte Varianten haben. Wenn Sie also Varianten in Ihren Seitentitel integrieren, müssen Sie die Optionen durchlaufen und die Zeichenfolge dynamisch erstellen, wenn die Vorlage a ist PRODUKTE Vorlage.

Hier ist ein Beispiel für einen Titel für a kariertes Pulloverkleid.

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

Und hier ist der Code, der dieses Ergebnis erzeugt:

{%- 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>

Der Code gliedert sich wie folgt auf:

  • Page Titel – Integrieren Sie zuerst den eigentlichen Seitentitel… unabhängig von der Vorlage.
  • Tags – Integrieren Sie Tags, indem Sie mit einer Seite verknüpfte Tags verbinden.
  • Produktfarben – Durchlaufen Sie die Farboptionen und erstellen Sie eine durch Kommas getrennte Zeichenfolge.
  • Metafelder – Diese Shopify-Instanz hat die Kleiderlänge als Metafeld, das wir einschließen möchten.
  • Preis – den Preis der ersten Variante einbeziehen.
  • Laden Name – fügen Sie den Namen des Shops am Ende des Titels hinzu.
  • Separator – Anstatt das Trennzeichen zu wiederholen, machen wir es einfach zu einer Zeichenfolgenzuweisung und wiederholen es. Wenn wir uns also entscheiden, dieses Symbol in Zukunft zu ändern, ist es nur an einer Stelle.

Optimieren Sie die Meta-Beschreibung Ihrer Shopify-Seite

Beim Crawlen der Site haben wir festgestellt, dass jede aufgerufene Theme-Vorlagenseite die SEO-Einstellungen der Homepage wiederholt. Wir wollten eine andere Meta-Beschreibung hinzufügen, je nachdem, ob es sich bei der Seite um eine Startseite, eine Sammlungsseite oder eine tatsächliche Produktseite handelt.

Wenn Sie sich nicht sicher sind, wie Ihr Vorlagenname lautet, fügen Sie einfach eine HTML-Notiz in Ihr Thema. Flüssigkeit Datei und Sie können die Quelle der Seite anzeigen, um sie zu identifizieren.

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

Dadurch konnten wir alle Vorlagen identifizieren, die die Meta-Beschreibung der Site verwendeten, sodass wir die Meta-Beschreibung basierend auf der Vorlage ändern konnten.

Hier ist die Meta-Beschreibung, die wir auf der obigen Produktseite haben möchten:

<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.">

Hier ist dieser 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 }}">

Das Ergebnis ist ein dynamischer, umfassender Satz von Titeln und Meta-Beschreibungen für jede Art von Vorlage oder detaillierte Produktseite. In Zukunft werde ich den Code höchstwahrscheinlich mithilfe von case-Anweisungen umgestalten und ihn ein wenig besser organisieren. Aber im Moment erzeugt es eine viel schönere Präsenz auf den Ergebnisseiten von Suchmaschinen.

Übrigens, wenn Sie einen großen Rabatt wünschen ... wir würden uns freuen, wenn Sie die Site mit einem 30% Rabatt-Gutschein testen, verwenden Sie den Code HIGHBRIDGE beim Auschecken.

Jetzt Kleider kaufen

Offenlegung: Ich bin ein Partner für Shopify und Themeforest und ich verwende diese Links in diesem Artikel. Closet52 ist ein Kunde meiner Firma, Highbridge. Wenn Sie Hilfe bei der Entwicklung Ihrer E-Commerce-Präsenz mit Shopify benötigen, wenden Sie sich bitte an Kontaktieren Sie uns.