Shopify: Πώς να προγραμματίσετε δυναμικούς τίτλους θεμάτων και μετα-περιγραφές για SEO χρησιμοποιώντας το Liquid

Shopify Template Liquid - Προσαρμόστε τον τίτλο SEO και την περιγραφή Meta

Αν διαβάζετε τα άρθρα μου τους τελευταίους μήνες, θα παρατηρήσετε ότι μοιράζομαι πολλά περισσότερα για το ηλεκτρονικό εμπόριο, ειδικά όσον αφορά Shopify. Η εταιρεία μου έχει δημιουργήσει ένα εξαιρετικά προσαρμοσμένο και ολοκληρωμένο ShopifyPlus ιστότοπος για έναν πελάτη. Αντί να ξοδέψουμε μήνες και δεκάδες χιλιάδες δολάρια για τη δημιουργία ενός θέματος από την αρχή, μιλήσαμε στον πελάτη να μας επιτρέψει να χρησιμοποιήσουμε ένα καλά κατασκευασμένο και υποστηριζόμενο θέμα που δοκιμάστηκε και δοκιμάστηκε. Πήγαμε με Γουόκι, ένα θέμα Shopify πολλαπλών χρήσεων που έχει πολλές δυνατότητες.

Χρειάστηκαν ακόμη μήνες ανάπτυξης για να ενσωματωθεί η ευελιξία που χρειαζόμασταν με βάση την έρευνα αγοράς και τα σχόλια των πελατών μας. Στον πυρήνα της υλοποίησης ήταν ότι το Closet52 είναι ένας ιστότοπος ηλεκτρονικού εμπορίου απευθείας στον καταναλωτή όπου οι γυναίκες θα μπορούσαν εύκολα να αγοράστε φορέματα online.

Επειδή το Wokiee είναι ένα θέμα πολλαπλών χρήσεων, ένας τομέας στον οποίο εστιάζουμε ιδιαίτερα είναι η βελτιστοποίηση μηχανών αναζήτησης. Με την πάροδο του χρόνου, πιστεύουμε ότι η οργανική αναζήτηση θα είναι το χαμηλότερο κόστος ανά απόκτηση και οι αγοραστές με την υψηλότερη πρόθεση αγοράς. Στην έρευνά μας, εντοπίσαμε ότι οι γυναίκες ψωνίζουν φορέματα με 5 βασικούς παράγοντες επιρροής αποφάσεων:

  • Στυλ φορεμάτων
  • Χρώματα φορεμάτων
  • Τιμές φορεμάτων
  • δωρεάν αποστολή
  • Επιστροφές χωρίς προβλήματα

Οι τίτλοι και οι μετα-περιγραφές είναι κρίσιμες ώστε το περιεχόμενό σας να ευρετηριαστεί και να εμφανίζεται σωστά. Έτσι, φυσικά, θέλουμε μια ετικέτα τίτλου και μετα-περιγραφές που να έχουν αυτά τα βασικά στοιχεία!

  • Το σεμινάριο ετικέτα τίτλου σε μια επικεφαλίδα της σελίδας σας είναι κρίσιμο για να διασφαλίσετε ότι οι σελίδες σας έχουν ευρετηριαστεί σωστά για τις σχετικές αναζητήσεις.
  • Το σεμινάριο περιγραφή meta εμφανίζεται στις σελίδες αποτελεσμάτων μηχανών αναζήτησης (SERP) που παρέχουν πρόσθετες πληροφορίες που παρακινούν τον χρήστη αναζήτησης να κάνει κλικ.

Η πρόκληση είναι ότι το Shopify μοιράζεται συχνά τίτλους και μετα-περιγραφές σε διαφορετικά πρότυπα σελίδων – σπίτι, συλλογές, προϊόντα κ.λπ. Έτσι, έπρεπε να γράψω κάποια λογική για να συμπληρώσω δυναμικά τους τίτλους και τις μετα-περιγραφές σωστά.

Βελτιστοποιήστε τον τίτλο της σελίδας Shopify

Η γλώσσα θέματος του Shopify είναι ρευστή και είναι αρκετά καλή. Δεν θα μπω σε όλες τις λεπτομέρειες της σύνταξης, αλλά μπορείτε να δημιουργήσετε δυναμικά έναν τίτλο σελίδας πολύ εύκολα. Ένα πράγμα που πρέπει να έχετε κατά νου εδώ είναι ότι τα προϊόντα έχουν παραλλαγές… επομένως η ενσωμάτωση παραλλαγών στον τίτλο της σελίδας σας σημαίνει ότι πρέπει να κάνετε κύκλο μέσα από τις επιλογές και να δημιουργήσετε δυναμικά τη συμβολοσειρά όταν το πρότυπο είναι προϊόν πρότυπο.

Ακολουθεί ένα παράδειγμα τίτλου για α καρό φόρεμα πουλόβερ.

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

Και εδώ είναι ο κώδικας που παράγει αυτό το αποτέλεσμα:

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

Ο κώδικας αναλύεται ως εξής:

  • Τίτλος σελίδας – ενσωματώστε πρώτα τον πραγματικό τίτλο της σελίδας… ανεξάρτητα από το πρότυπο.
  • Ετικέτες – ενσωματώστε ετικέτες ενώνοντας ετικέτες που σχετίζονται με μια σελίδα.
  • Χρώματα προϊόντων – Περιηγηθείτε στις επιλογές χρώματος και δημιουργήστε μια συμβολοσειρά διαχωρισμένη με κόμματα.
  • Metafields – αυτό το παράδειγμα Shopify έχει το μήκος φορέματος ως μεταπεδίο που θέλουμε να συμπεριλάβουμε.
  • Τιμή – συμπεριλάβετε την τιμή της πρώτης παραλλαγής.
  • Κατάστημα Όνομα – προσθέστε το όνομα του καταστήματος στο τέλος του τίτλου.
  • Διαχωριστής – αντί να επαναλαμβάνουμε το διαχωριστικό, το κάνουμε απλώς ανάθεση συμβολοσειράς και το επαναλαμβάνουμε. Με αυτόν τον τρόπο, εάν αποφασίσουμε να αλλάξουμε αυτό το σύμβολο στο μέλλον, θα είναι μόνο σε ένα μέρος.

Βελτιστοποιήστε την περιγραφή της Meta της σελίδας Shopify

Όταν ανιχνεύσαμε τον ιστότοπο, παρατηρήσαμε ότι οποιαδήποτε σελίδα προτύπου θέματος που κλήθηκε επαναλάμβανε τις ρυθμίσεις SEO της αρχικής σελίδας. Θέλαμε να προσθέσουμε μια διαφορετική μετα-περιγραφή ανάλογα με το αν η σελίδα ήταν αρχική σελίδα, σελίδα συλλογών ή πραγματική σελίδα προϊόντος.

Εάν δεν είστε σίγουροι ποιο είναι το όνομα του προτύπου σας, απλώς προσθέστε μια σημείωση HTML στο δικό σας theme.liquid αρχείο και μπορείτε να δείτε την πηγή της σελίδας για να την αναγνωρίσετε.

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

Αυτό μας επέτρεψε να αναγνωρίσουμε όλα τα πρότυπα που χρησιμοποιούσαν τη μετα-περιγραφή του ιστότοπου, ώστε να μπορούμε να τροποποιήσουμε τη μετα-περιγραφή με βάση το πρότυπο.

Ακολουθεί η μετα-περιγραφή που θέλουμε στην παραπάνω σελίδα προϊόντος:

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

Εδώ είναι αυτός ο κωδικός:

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

Το αποτέλεσμα είναι ένα δυναμικό, ολοκληρωμένο σύνολο τίτλων και μετα-περιγραφών για κάθε τύπο προτύπου ή αναλυτική σελίδα προϊόντος. Προχωρώντας προς τα εμπρός, πιθανότατα θα αναδιαμορφώσω τον κώδικα χρησιμοποιώντας δηλώσεις περίπτωσης και θα τον οργανώσω λίγο καλύτερα. Αλλά προς το παρόν, παράγει μια πολύ καλύτερη παρουσία στις σελίδες αποτελεσμάτων μηχανών αναζήτησης.

Παρεμπιπτόντως, αν θέλετε μια μεγάλη έκπτωση… θα θέλαμε να δοκιμάσετε τον ιστότοπο με ένα κουπόνι έκπτωσης 30%, χρησιμοποιήστε κωδικό HIGHBRIDGE κατά το check out.

Αγορά για φορέματα τώρα

Αποκάλυψη: Είμαι συνεργάτης της Shopify και Themeforest και χρησιμοποιώ αυτούς τους συνδέσμους σε αυτό το άρθρο. Το Closet52 είναι πελάτης της εταιρείας μου, Highbridge. Εάν θέλετε βοήθεια για την ανάπτυξη της παρουσίας σας στο ηλεκτρονικό εμπόριο χρησιμοποιώντας το Shopify, παρακαλούμε επικοινωνήστε μαζί μας.