Shopify: Cách lập trình tiêu đề chủ đề động và mô tả meta cho SEO bằng Liquid

Shopify Template Liquid - Tùy chỉnh Tiêu đề SEO và Mô tả Meta

Nếu bạn đã đọc các bài viết của tôi trong vài tháng qua, bạn sẽ nhận thấy rằng tôi đã chia sẻ nhiều hơn về thương mại điện tử, đặc biệt là về Shopify. Công ty của tôi đã và đang xây dựng một ShopifyPlus trang web cho một khách hàng. Thay vì dành hàng tháng và hàng chục nghìn đô la để xây dựng một chủ đề từ đầu, chúng tôi đã đề nghị khách hàng cho phép chúng tôi sử dụng một chủ đề được xây dựng và hỗ trợ tốt đã được dùng thử và thử nghiệm. Chúng tôi đã đi với Cháo, một Chủ đề Shopify đa năng có rất nhiều tính năng.

Nó vẫn cần nhiều tháng phát triển để kết hợp tính linh hoạt mà chúng tôi cần dựa trên nghiên cứu thị trường và phản hồi của khách hàng. Cốt lõi của việc triển khai là Closet52 là một trang web thương mại điện tử trực tiếp đến người tiêu dùng, nơi phụ nữ có thể dễ dàng mua váy trực tuyến.

Bởi vì Wokiee là một chủ đề đa dụng, một lĩnh vực mà chúng tôi rất chú trọng là tối ưu hóa công cụ tìm kiếm. Theo thời gian, chúng tôi tin rằng tìm kiếm không phải trả tiền sẽ có giá mỗi chuyển đổi thấp nhất và những người mua sắm có ý định mua hàng cao nhất. Trong nghiên cứu của mình, chúng tôi xác định rằng phụ nữ mua sắm trang phục có 5 yếu tố ảnh hưởng đến quyết định chính:

  • Các kiểu váy
  • Màu sắc của váy
  • Giá của váy
  • Miễn phí vận chuyển
  • Trả lại không rắc rối

Tiêu đề và mô tả meta rất quan trọng để nội dung của bạn được lập chỉ mục và hiển thị đúng cách. Vì vậy, tất nhiên, chúng tôi muốn thẻ tiêu đề và mô tả meta có các yếu tố chính đó!

  • Mô hình thẻ tiêu đề trong tiêu đề trang của bạn là rất quan trọng để đảm bảo các trang của bạn được lập chỉ mục chính xác cho các tìm kiếm có mức độ liên quan.
  • Mô hình mô tả meta được hiển thị trong các trang kết quả của công cụ tìm kiếm (SERPs) cung cấp thông tin bổ sung thu hút người dùng tìm kiếm nhấp qua.

Thách thức là Shopify thường chia sẻ tiêu đề và mô tả meta trên các mẫu trang khác nhau - trang chủ, bộ sưu tập, sản phẩm, v.v. Vì vậy, tôi phải viết một số logic để tự động điền tiêu đề và mô tả meta đúng cách.

Tối ưu hóa tiêu đề trang Shopify của bạn

Ngôn ngữ chủ đề của Shopify là chất lỏng và nó khá tốt. Tôi sẽ không đi sâu vào tất cả các chi tiết của cú pháp, nhưng bạn có thể tạo động một tiêu đề trang khá dễ dàng. Một điều bạn phải ghi nhớ ở đây là các sản phẩm có các biến thể… vì vậy việc kết hợp các biến thể vào tiêu đề trang của bạn có nghĩa là bạn phải lặp lại các tùy chọn và tạo chuỗi động khi mẫu là sản phẩm bản mẫu.

Đây là một ví dụ về tiêu đề cho một váy len kẻ sọc.

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

Và đây là đoạn mã tạo ra kết quả đó:

{%- 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: "&quot;" -}}{%- 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>

Đoạn mã được chia nhỏ như thế này:

  • Page Title - kết hợp tiêu đề trang thực tế trước… bất kể mẫu nào.
  • Tag - kết hợp các thẻ bằng cách nối các thẻ được liên kết với một trang.
  • Màu sắc sản phẩm - lặp qua các tùy chọn màu và xây dựng một chuỗi được phân tách bằng dấu phẩy.
  • Metafields - phiên bản Shopify này có chiều dài trang phục như một metafield mà chúng tôi muốn đưa vào.
  • Giá cả - bao gồm giá của biến thể đầu tiên.
  • Tên cửa hàng - thêm tên shop vào cuối tiêu đề.
  • máy phân ly - thay vì lặp lại dấu phân cách, chúng tôi chỉ đặt nó thành một phép gán chuỗi và lặp lại nó. Bằng cách đó, nếu chúng ta quyết định thay đổi biểu tượng đó trong tương lai, nó chỉ ở một nơi.

Tối ưu hóa mô tả meta trang Shopify của bạn

Khi chúng tôi thu thập dữ liệu trang web, chúng tôi nhận thấy rằng bất kỳ trang mẫu chủ đề nào được gọi đều đang lặp lại cài đặt SEO trang chủ. Chúng tôi muốn thêm một mô tả meta khác tùy thuộc vào việc trang đó là trang chủ, trang bộ sưu tập hay trang sản phẩm thực tế.

Nếu bạn không chắc tên mẫu của mình là gì, chỉ cần thêm ghi chú HTML vào chủ đề thanh khoản và bạn có thể xem nguồn của trang để xác định nó.

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

Điều này cho phép chúng tôi xác định tất cả các mẫu đã sử dụng mô tả meta của trang web để chúng tôi có thể sửa đổi mô tả meta dựa trên mẫu.

Đây là mô tả meta mà chúng tôi muốn trên trang sản phẩm ở trên:

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

Đây là mã đó:

  {%- 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: "&quot;" -}}{%- 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 }}">

Kết quả là một tập hợp các tiêu đề và mô tả meta năng động, toàn diện cho bất kỳ loại mẫu nào hoặc trang sản phẩm chi tiết. Về sau, rất có thể tôi sẽ cấu trúc lại mã bằng cách sử dụng các câu lệnh trường hợp và sắp xếp nó tốt hơn một chút. Nhưng hiện tại, nó tạo ra sự hiện diện đẹp hơn nhiều trong các trang kết quả của công cụ tìm kiếm.

Nhân tiện, nếu bạn muốn được giảm giá nhiều… chúng tôi muốn bạn thử trang web với phiếu giảm giá 30%, hãy sử dụng mã HIGHBRIDGE khi trả phòng.

Mua váy ngay bây giờ

Tiết lộ: Tôi là một chi nhánh của ShopifyThemeForest và tôi đang sử dụng các liên kết đó trong bài viết này. Closet52 là một khách hàng của công ty tôi, Highbridge. Nếu bạn muốn được hỗ trợ trong việc phát triển sự hiện diện thương mại điện tử của mình bằng cách sử dụng Shopify, vui lòng Liên hệ với chúng tôi.