Shopify: Putting the collection back in breadcrumbs, after fixing the SEO

allen
allen
  • 980 次浏览

One of the most common Shopify SEO tips is to remove the | within: collection filter on the collection template, so that your product links concentrate the link juice to one URL. See the “Duplicate product pages” section of Moz’s guide.

最常见的 Shopify SEO 技巧之一是删除集合模板上的 | within: collection 过滤器，以便您的产品链接将链接效果集中到一个 URL。请参阅 Moz 指南的“重复产品页面”部分。

However a side affect of this is that on the product template, the breadcrumbs often rely on using that hint to decide the collection in the breadcrumbs. Leaving you with no breadcrumbs, or a list that just points to your homepage, nowhere else.
然而，这样做的一个副作用是，在产品模板上，面包屑通常依赖于使用该提示来决定面包屑中的集合。不会给您留下任何面包屑，或者一个仅指向您的主页的列表，而不是其他任何地方。

This is because the link between a collection and product is a “many to many” connection, meaning a product can exist in many collections and collection can contain many products. So deciding the right collection to link back to from the product page becomes difficult.
这是因为集合和产品之间的链接是“多对多”连接，这意味着一个产品可以存在于多个集合中，并且集合可以包含多个产品。因此，决定从产品页面链接回的正确集合变得很困难。

The default Shopify method of effectively passing the collection to the products page using the within filter mentioned above, works only from a human perspective, however I would argue that someone is more likely to use the browser back button or gesture, rather than clicking the on page link back to the collection (only my opinion, if you have stats from your store share in the comments).
使用上述内部过滤器将集合有效传递到产品页面的默认 Shopify 方法仅从人的角度起作用，但我认为有人更有可能使用浏览器后退按钮或手势，而不是单击返回该集合的页面链接（仅是我的意见，如果您在评论中分享了商店的统计数据）。

How to decide which collection to link to?
如何决定链接到哪个集合？

You could pick the first collection in the product.collections array, however this will likely be the alphabetically first one, so probably not ideal, especially if you have any “All…” titled categories. Better solutions include…
您可以选择 product.collections 数组中的第一个集合，但这可能是按字母顺序排列的第一个集合，因此可能不理想，特别是如果您有任何“全部...”标题类别。更好的解决方案包括……

Product Type or Vendor 产品类型或供应商

If you have collections for product type or vendor, this might be a good choice as there is only one vendor/type per product, so there will be consistency and you will have several products that point to a collection. This of course doesn’t help stores with single vendor or types.
如果您有产品类型或供应商的集合，这可能是一个不错的选择，因为每个产品只有一个供应商/类型，因此会保持一致性，并且您将有多个指向集合的产品。这当然对单一供应商或单一类型的商店没有帮助。

The liquid snippet below can be used to create a breadcrumb list which includes vendor and type collections. Provided you have collections created with products in them, where the vendor/type handle matches the collection handle.
下面的液体片段可用于创建包含供应商和类型集合的面包屑列表。假设您创建了包含产品的集合，其中供应商/类型句柄与集合句柄匹配。

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
  </li>
  {%- assign vendor_handle = product.vendor | handle -%}
  {%- if collections[vendor_handle].products.size > 0 -%}
  {%- assign vendor_collection = collections[vendor_handle] -%}
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="{{ vendor_collection.url }}"><span itemprop="name">{{ vendor_collection.title }}</span></a>
  </li>
  {%- endif -%}
  {%- assign type_handle = product.type | handle -%}
  {%- if collections[type_handle].products.size > 0 -%}
  {%- assign type_collection = collections[type_handle] -%}
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="{{ type_collection.url }}"><span itemprop="name">{{ type_collection.title }}</span></a>
  </li>
  {%- endif -%}
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">{{ product.title }}</span>
  </li>
</ol>

Metafields 元字段

You can use metafields to select a collection or possibly list of collections you want to use as your breadcrumbs for the product per product. Adding these in bulk to many products also got easier now you can access Metafields with definitions in the Bulk Editor.
您可以使用元字段来选择要用作每个产品的面包屑的集合或可能的集合列表。将这些批量添加到许多产品中也变得更加容易，现在您可以在批量编辑器中访问具有定义的元字段。

So if we set up a metafield definition like the one below
因此，如果我们设置如下所示的元字段定义

We can then use a snippet of liquid code similar to this Breadcrumb markup to create a breadcrumb trail that displays Home, Collection, Product when we have a value, then fallback to just Home, Product if not.
然后，我们可以使用类似于此面包屑标记的一段液体代码来创建一个面包屑路径，当我们有值时显示 Home, Collection, Product ，如果没有值则回退到 Home, Product 。

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
  </li>
  {%- if product.metafields.custom.related_collection.value -%}
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="{{ product.metafields.custom.related_collection.value.url }}"><span itemprop="name">{{ product.metafields.custom.related_collection.value.title }}</span></a>
  </li>
  {%- endif -%}
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">{{ product.title }}</span>
  </li>
</ol>

You could expand this to have a List of Collections and iterate over them to create multiple levels of collections too.
您可以将其扩展为具有集合列表并迭代它们以创建多个级别的集合。

Hopefully these give you some options or ideas to handling breadcrumbs to your Shopify product page.
希望这些能为您提供一些选项或想法来处理 Shopify 产品页面的面包屑。

0
0