Shopify: Liquid를 사용하여 SEO용 동적 테마 제목 및 메타 설명을 프로그래밍하는 방법

Shopify 템플릿 액체 - SEO 제목 및 메타 설명 사용자 정의

지난 몇 달 동안 제 기사를 읽으셨다면 제가 전자상거래, 특히 Shopify. 우리 회사는 고도로 맞춤화되고 통합된 쇼피파이 플러스 클라이언트를 위한 사이트. 테마를 처음부터 구축하는 데 몇 달과 수만 달러를 소비하는 대신, 우리는 고객에게 테스트를 거쳐 잘 구축되고 지원되는 테마를 사용할 수 있도록 했습니다. 우리는 함께 갔다 우키, 수많은 기능을 갖춘 다목적 Shopify 테마.

시장 조사와 고객의 피드백을 기반으로 우리가 필요로 하는 유연성을 통합하는 데 여전히 수개월의 개발이 필요했습니다. 구현의 핵심은 Closet52가 여성이 쉽게 온라인으로 드레스 구매.

Wokiee는 다목적 테마이기 때문에 검색 엔진 최적화에 중점을 두고 있습니다. 시간이 지나면 자연 검색이 획득당 비용이 가장 낮고 구매자가 구매 의도가 가장 높을 것이라고 믿습니다. 우리의 연구에서 우리는 여성이 5가지 주요 결정 영향 요인과 함께 드레스를 쇼핑한다는 사실을 확인했습니다.

  • 드레스 스타일
  • 드레스의 색상
  • 드레스 가격
  • 무료 배송
  • 번거롭지 않은 반품

제목과 메타 설명이 중요합니다. 콘텐츠의 색인을 생성하고 올바르게 표시할 때. 따라서 물론 이러한 핵심 요소가 포함된 제목 태그와 메타 설명이 필요합니다!

  • 또한 제목 태그 관련성 검색을 위해 페이지의 색인이 올바르게 생성되도록 하려면 페이지 머리글에 표시하는 것이 중요합니다.
  • 또한 메타 설명 검색 사용자가 클릭하도록 유도하는 추가 정보를 제공하는 검색 엔진 결과 페이지(SERP)에 표시됩니다.

문제는 Shopify가 홈, 컬렉션, 제품 등 다양한 페이지 템플릿에서 제목과 메타 설명을 공유하는 경우가 많다는 것입니다. 따라서 제목과 메타 설명을 적절하게 동적으로 채우는 로직을 작성해야 했습니다.

Shopify 페이지 제목 최적화

Shopify의 테마 언어는 액체 그리고 꽤 좋습니다. 구문의 모든 세부 사항을 다루지는 않겠지만 페이지 제목을 매우 쉽게 동적으로 생성할 수 있습니다. 여기서 명심해야 할 한 가지는 제품에 변형이 있다는 것입니다. 따라서 페이지 제목에 변형을 통합하면 템플릿이 제품 주형.

다음은 제목의 예입니다. 격자 무늬 스웨터 드레스.

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

다음은 그 결과를 생성하는 코드입니다.

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

코드는 다음과 같이 나뉩니다.

  • 페이지 제목 – 템플릿에 관계없이 실제 페이지 제목을 먼저 통합합니다.
  • 태그 – 페이지와 연결된 태그를 결합하여 태그를 통합합니다.
  • 제품 색상 – 색상 옵션을 반복하고 쉼표로 구분된 문자열을 만듭니다.
  • 메타필드 – 이 Shopify 인스턴스에는 포함하려는 메타필드로 드레스 길이가 있습니다.
  • 가격 – 첫 번째 변형의 가격을 포함합니다.
  • 가게 이름 – 제목 끝에 상점 이름을 추가합니다.
  • 분리 기호 – 구분 기호를 반복하는 대신 문자열 할당을 만들고 반복합니다. 그렇게 하면 나중에 해당 기호를 변경하기로 결정하면 한 곳에서만 가능합니다.

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 no-hassle 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 == '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 }}">

그 결과 모든 유형의 템플릿 또는 자세한 제품 페이지에 대한 동적이고 포괄적인 제목 및 메타 설명 세트가 생성됩니다. 앞으로는 case 문을 사용하여 코드를 리팩토링하고 좀 더 잘 구성할 것입니다. 그러나 현재로서는 검색 엔진 결과 페이지에서 훨씬 더 멋진 존재감을 뽐내고 있습니다.

그건 그렇고, 당신이 큰 할인을 원한다면… 우리는 당신이 30% 할인 쿠폰으로 사이트를 테스트하고 싶습니다. HIGHBRIDGE 체크 아웃 할 때.

지금 드레스 쇼핑하기

공개 : 나는 제휴사입니다 ShopifyThemeforest 이 기사의 링크를 사용하고 있습니다. Closet52는 우리 회사의 고객이며, Highbridge. Shopify를 사용하여 전자 상거래를 개발하는 데 도움이 필요하면 contact.