Shopify常用结构化数据实施SEO指南

阅读次数：12

以下是几种可直接在Shopify主题中使用的通用结构化数据JSON-LD模板及调用代码，每个方案会自动调用Liquid变量动态填充数据，无需手动修改。

Shopify首页WebSite网站类型和Organization组织类型结构化数据模板

为Shopify首页添加精心设计的结构化数据（JSON-LD），能帮助搜索引擎更好地理解您网站的核心信息，并有机会在搜索结果中展示更丰富的内容，从而提升品牌形象和点击率。

将以下Liquid代码添加到您的主题文件（通常是 theme.liquid 布局文件）的 <head> 部分。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "{{ shop.url }}#website",
      "name": "{{ shop.name | escape }}",
      "url": "{{ shop.url }}",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "{{ shop.url }}/search?q={query}",
        "query-input": "required name=query"
      }
    },
    {
      "@type": "Organization",
      "@id": "{{ shop.url }}#organization",
      "name": "{{ shop.name | escape }}",
      "url": "{{ shop.url }}",
      "description": "{{ shop.description | strip_html | escape }}",
      "logo": {
        "@type": "ImageObject",
        "url": "{% if settings.logo %}{{ settings.logo | image_url: width: 600 | prepend: 'https:' }}{% else %}https://via.placeholder.com/600x60?text=Your+Logo{% endif %}",
        "width": "600",
        "height": "60"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "{{ shop.phone | default: '+1-XXX-XXX-XXXX' }}",
        "contactType": "customer service",
        "areaServed": "US" // 请根据您的业务范围修改，如 "CN", "WW" 等
      },
      "sameAs": [
        "{{ settings.social_facebook_link | default: 'https://www.facebook.com/yourpage' }}",
        "{{ settings.social_instagram_link | default: 'https://www.instagram.com/yourprofile' }}",
        "{{ settings.social_twitter_link | default: 'https://www.twitter.com/yourhandle' }}"
        // 请在此处添加或替换为您品牌的其他社交媒体主页链接
      ]
    }
  ]
}
</script>

WebSite网站类型和Organization组织类型结构化数据核心对象及SEO价值详解

这个模板包含了两个对首页至关重要的核心对象，它们共同描绘了您网站的完整图景：

对象类型核心作用与SEO价值
WebSite定义网站身份：向搜索引擎声明这是一个网站实体。其中的 SearchAction 尤其重要，它让搜索引擎了解您站内的搜索结构，有时可能直接在搜索结果中提供站内搜索框，提升用户体验。
Organization彰显品牌形象：代表您的公司或品牌。提供完整的联系信息、Logo和社交媒体链接，有助于建立信任度和权威性。当您的网站内容在搜索结果显示时，可能会伴随显示品牌的Logo，增强品牌识别度。

定制与部署WebSite网站类型和Organization组织类型结构化数据指南

  1. 替换示例数据：请务必将模板中的示例数据替换为您店铺的实际信息。

    • Logo：代码已尝试动态调用主题设置中的Logo（{{ settings.logo | image_url }}）。如果您的主题设置方式不同，可能需要手动修改Logo的URL路径。
    • 电话和社交媒体链接：同样尝试调用主题设置中的链接（如 {{ settings.social_facebook_link }}）。如果未设置，代码会使用占位符（如 https://www.facebook.com/yourpage），请务必将其修改为您品牌真实的社交媒体主页链接。删除 | default: ... 部分或填入真实链接。
    • 业务区域：将 "areaServed" 的值修改为您主要服务的国家或地区代码（如 "CN" 代表中国，"WW" 代表全球）。

  2. 代码放置：

    • 在Shopify后台，进入 在线商店 > 主题 > 编辑代码。
    • 找到 布局文件，通常是 theme.liquid。
    • 将上面提供的完整代码块粘贴到 <head> 标签内部，靠近开头或结尾的位置均可。

Shopify首页LocalBusiness本地商家类型结构化数据模板

如果你不仅有线上商城网站还有线下实体门店、实体办公地址的话，那么还可以为你的Shopify店铺首页添加本地商家(LocalBusiness)结构化数据。添加LocalBusiness结构化数据，能有效帮助本地客户在搜索引擎中找到您，并可能展示出丰富的商家信息，提升点击率。

您可以将以下JSON-LD代码模板添加到Shopify主题的theme.liquid布局文件的<head>部分。请务必将示例内容替换为您店铺的真实信息，切不可造假。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "{{ shop.url }}#localbusiness",
  "name": "{{ shop.name | escape }}",
  "description": "{{ shop.description | strip_html | escape }}",
  "url": "{{ shop.url }}",
  "telephone": "YOUR-PHONE-NUMBER", // 例如：+86-10-12345678
  "email": "YOUR-EMAIL-ADDRESS", // 例如：contact@example.com
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "YOUR-STREET-ADDRESS", // 例如：科技园路123号
    "addressLocality": "YOUR-CITY", // 例如：北京市
    "addressRegion": "YOUR-REGION", // 例如：海淀区
    "postalCode": "YOUR-POSTAL-CODE", // 例如：100000
    "addressCountry": "YOUR-COUNTRY-CODE" // 例如：CN
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "YOUR-LATITUDE", // 例如：39.9042
    "longitude": "YOUR-LONGITUDE" // 例如：116.4074
  },
  "openingHours": [
    "Mo-Fr 09:00-18:00",
    "Sa 10:00-16:00"
    // 请根据您的实际营业时间修改
  ],
  "priceRange": "$$", // 请根据您的业务情况修改，例如：$（低廉）、$$（中等）、$$$（昂贵）
  "image": [
    "{{ settings.logo | image_url: width: 800 | prepend: 'https:' }}"
  ],
  "sameAs": [
    "YOUR-SOCIAL-MEDIA-LINK-1", // 例如：https://www.facebook.com/yourpage
    "YOUR-SOCIAL-MEDIA-LINK-2" // 例如：https://www.instagram.com/yourprofile
  ]
}
</script>

LocalBusiness本地商家结构化数据关键字段说明与填写指南

为了让搜索引擎准确理解您的信息，请确保关键字段填写正确。下表是核心字段的详细说明：

字段是否必填说明与示例
name必填您的商家名称，通常与{{ shop.name }}一致。
address必填完整的实体地址，务必准确。这是本地搜索的核心依据。
telephone必填包含国家区号的电话号码，格式建议为+国家代码-地区代码-电话号码。
openingHours强烈建议遵循Mo, Tu, We, Th, Fr, Sa, Su HH:MM-HH:MM格式。可指定多个时间段。
geo (经纬度)强烈建议精确的地理坐标，有助于地图搜索定位。您可以用地图应用获取。
priceRange可选向客户示意消费水平。使用$符号数量表示。
sameAs可选指向您商家官方社交媒体主页的链接数组。

LocalBusiness结构化数据在Google搜索中具体会显示哪些额外信息？

添加 LocalBusiness 结构化数据，相当于给 Google 提供了一份清晰的“商家名片”。当用户在搜索时，这张“名片”上的信息能转化为搜索结果中更丰富、更吸引人的展示样式，从而显著提升点击率和本地客户的到访意愿。

下表详细列出了 LocalBusiness 结构化数据可能带来的具体展示效果及其对用户的价值。

显示的信息类型在搜索结果中的具体展示形式对用户的主要价值
核心商家信息在知识面板中突出显示商家名称、Logo、评分和价格范围。快速建立品牌认知，了解商家档次。
详细地址与坐标显示完整的街道地址、所在区域，并直接链接到谷歌地图进行路线规划。一键导航，轻松找到商家位置。
营业时间清晰列出每日营业时间，并特别标注“当前是否营业”（如“营业中”或“已打烊”）。避免白跑一趟，获取实时状态。
用户评价展示星级评分和评论数量（例如：⭐4.5 (128 条评论)）。提供社交证明，辅助决策。
特色服务对于餐厅，显示提供的菜系（如：意大利菜、中式点心）；对其他服务，可能显示部门（如：药店、汽车维修）。快速匹配需求，筛选合适商家。

部署LocalBusiness本地商家结构化数据注意事项及实现更佳效果的关键要点

  1. 信息准确性是第一位的​：请务必提供真实、准确且最新的商家信息。虚假信息会导致搜索引擎的惩罚。
  2. ​处理可能的数据冲突​：在添加此代码前，建议先用上述测试工具检查您的首页，看主题是否已自动生成 Organization 或 LocalBusiness 数据**。如果已有，您可能需要评估是增强现有数据还是用此代码替换，以避免数据重复或冲突。
  3. 动态更新信息​：如果您的营业时间在节假日有特殊安排，请记得及时更新代码中的 openingHours 字段，确保向客户展示的信息始终准确。
  4. 提供精确且完整的数据：务必填写准确无误的信息，尤其是地址和经纬度坐标（精度建议至少5位小数），这能确保您在地图上的位置精准无误。营业时间需采用标准的 hh:mm:ss 格式（如 "09:00:00" 到 "18:00:00"），并覆盖一周中的所有营业日。
  5. 使用具体的子类型：不要只使用通用的 LocalBusiness 类型，而应根据您的业务选择最具体的子类型，例如 Restaurant（餐厅）、DaySpa（水疗中心）或 ElectronicsStore（电子产品商店）等。这有助于 Google 更精确地理解您的业务性质。

多地点经营的商家LocalBusiness结构化数据设置

为多地点经营的Shopify商家设置多个LocalBusiness结构化数据，能在本地搜索中脱颖而出。核心思路是为每个实体地点创建独立且准确的结构化数据片段。

下表概括了实现这一目标的主要步骤和核心要点：

步骤关键操作说明与提示
1. 创建与确认地点在Shopify后台“设置”>“地点”中，准确填写每个实体店或仓库的名称和完整地址。这是数据准确性的基础。确保每个地点的信息（如电话、营业时间）是独立且最新的。
2. 生成结构化数据代码为每个已创建的地点，手动编写或使用专业APP生成独立的LocalBusiness类型JSON-LD代码。代码中必须包含每个地点独有的核心信息：名称、电话、地址、营业时间等。使用具体的子类型（如Store）效果更佳。
3. 部署代码到网站将生成的多个JSON-LD代码块，一并添加到网站全局模板（如theme.liquid的<head>部分）。最直接的方法是将所有地点的代码集中放置。也可通过高级主题编辑或专业APP实现更精准的管理。
4. 测试与验证使用Google富媒体结果测试工具，逐一输入各地点的完整URL进行测试，确保无错误且预览效果正确。这是上线前不可或缺的环节，能确保搜索引擎正确理解您的多地点信息。

代码示例与关键属性

以下是一个简化的代码框架，展示了如何为两个不同地点构建独立的LocalBusiness结构化数据。请务必将示例数据替换为您每个地点的真实、完整信息。

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Store", // 请根据业务类型使用更具体的子类型，如 "BikeStore", "JewelryStore" 等
    "@id": "https://your-store.com/#location-newyork", // 为每个地点设置唯一的ID
    "name": "Your Brand - New York Flagship Store",
    "telephone": "+1-212-555-0100",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main Street",
      "addressLocality": "New York",
      "addressRegion": "NY",
      "postalCode": "10001",
      "addressCountry": "US"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 40.7505,
      "longitude": -73.9934
    },
    "openingHours": ["Mo-Fr 10:00-21:00", "Sa 10:00-20:00", "Su 11:00-18:00"],
    "url": "https://your-store.com/pages/new-york-store"
  },
  {
    "@context": "https://schema.org",
    "@type": "Store",
    "@id": "https://your-store.com/#location-sanfrancisco", // 第二个地点的唯一ID
    "name": "Your Brand - San Francisco Store",
    "telephone": "+1-415-555-0100",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "456 Market Street",
      "addressLocality": "San Francisco",
      "addressRegion": "CA",
      "postalCode": "94105",
      "addressCountry": "US"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 37.7899,
      "longitude": -122.3969
    },
    "openingHours": ["Mo-Sa 10:00-20:00", "Su 12:00-17:00"],
    "url": "https://your-store.com/pages/san-francisco-store"
  }
]
</script>

Shopify博客文章页面BlogPosting博客文章类型结构化数据模板

将以下Liquid代码片段添加到您的博客文章模板（通常是 article.liquid 或 blog-article.liquid 文件）的 <head> 部分或正文内容开头。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ shop.url }}{{ article.url }}"
  },
  "headline": "{{ article.title | escape }}",
  "description": "{{ article.excerpt_or_content | strip_html | truncatewords: 60 | escape }}",
  "image": [
    "{% if article.image %}{{ article.image | image_url: width: 800 | prepend: 'https:' }}{% endif %}"
  ],
  "datePublished": "{{ article.published_at | date: '%Y-%m-%dT%T%:z' }}",
  "dateModified": "{{ article.updated_at | date: '%Y-%m-%dT%T%:z' }}",
  "author": {
    "@type": "Person",
    "name": "{{ article.author | escape }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ shop.name | escape }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ shop.metaobjects.shop_logo.logo_image | image_url: width: 600 | prepend: 'https:' }}"
    }
  },
  "articleSection": "{{ blog.title | escape }}"
}
</script>

请注意：代码中 publisher.logo.url 部分需要您根据自己主题的设置方式进行修改。例如，如果您的logo存放在settings中，可能需要改为 {{ settings.logo | image_url }}。请根据您的主题结构进行调整。

BlogPosting博客文章类型结构化数据关键字段说明与SEO价值

字段必填/建议说明SEO价值
headline必填文章主标题增强搜索结果展示
datePublished/dateModified必填发布时间和修改时间帮助Google显示最新内容
author必填作者信息增强内容权威性
publisher必填发布机构信息显示品牌Logo和名称
image建议文章特色图片可能获得图片富媒体展示
articleSection建议文章分类帮助Google理解内容相关性

Shopify产品页面Product类型结构化数据模板

将以下Liquid代码添加到产品模板文件中（例如 product-template.liquid 或通过创建一个Snippet在主题中引用）。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "@id": "{{ shop.url }}{{ product.url }}#product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {%- if product.featured_media -%}
  "image": [
    "{{ product.featured_media | image_url: width: 800 | prepend: 'https:' }}"
  ],
  {%- endif -%}
  "description": "{{ product.description | strip_html | escape }}",
  {%- if product.selected_or_first_available_variant.sku != blank -%}
  "sku": "{{ product.selected_or_first_available_variant.sku }}",
  {%- endif -%}
  {%- if product.selected_or_first_available_variant.barcode != blank -%}
  "gtin": "{{ product.selected_or_first_available_variant.barcode }}",
  {%- endif -%}
  "brand": {
    "@type": "Brand",
    "name": "{{ product.vendor | escape }}"
  },
  {%- if product.metafields.reviews.rating.value != blank -%}
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "{{ product.metafields.reviews.rating.value }}",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "Customer"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{ product.metafields.reviews.rating.value }}",
    "reviewCount": "{{ product.metafields.reviews.rating_count }}"
  },
  {%- endif -%}
  "offers": [
    {%- for variant in product.variants -%}
    {
      "@type": "Offer",
      {%- if variant.sku != blank -%}
      "sku": "{{ variant.sku }}",
      {%- endif -%}
      "availability": "https://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
      "price": "{{ variant.price | divided_by: 100.00 }}",
      "priceCurrency": "{{ cart.currency.iso_code }}",
      "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' }}",
      "url": "{{ shop.url }}{{ variant.url }}"
    }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ],
  "publisher": {
    "@type": "Organization",
    "name": "{{ shop.name | escape }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ settings.logo | image_url: width: 600 | prepend: 'https:' }}"
    }
  }
}
</script>

Product类型结构化数据核心字段说明与SEO价值

为了让您更好地理解每个部分的作用，下表总结了关键字段的说明及其对SEO的益处：

字段/对象说明SEO价值
name / description产品名称和描述（去除HTML标签）。帮助搜索引擎准确理解页面核心内容。
image产品主图URL。可能使图片在搜索结果中显示，增加吸引力。
brand产品品牌（通常对应Shopify中的Vendor）。增强品牌识别度和信任度。
offers至关重要。包含每个变体（如不同颜色、尺寸）的价格、库存状态、货币和唯一URL。使Google能直接在搜索结果中显示价格和库存，极大提升点击率。
review / aggregateRating产品评论和聚合评分（平均分和评论总数）。使搜索结果能展示星级评分，显著增加产品可信度和点击吸引力。
publisher商品的发布者，即您的公司或品牌信息。增强品牌形象和权威性。

部署Product类型结构化数据重要提示与建议

  1. 评论数据的集成：模板中的评论部分（review 和 aggregateRating）是基于像 Judge.me 或 Ryviu 这类评论应用的元字段（metafields）设计的。您需要确保已安装并正确配置了这类应用，并且元字段路径（如 product.metafields.reviews.rating.value）与您的应用设置匹配。如果未安装评论应用，可以暂时移除整个 review 和 aggregateRating 对象。
  2. Logo地址的调整：publisher.logo 的URL需要根据您主题的设置方式进行修改。示例中 {{ settings.logo | image_url }} 是一种常见方式，但如果您的主题不同，可能需要调整。

  3. 代码放置与测试：

    • 将代码放置在产品模板的 <head> 部分或 <body> 开头是比较推荐的做法。
    • 在部署之前和之后，务必使用 Google富媒体搜索结果测试工具 进行测试。输入您的产品URL，检查是否有错误或警告，并预览在搜索结果中可能呈现的富媒体效果。
  4. 注意主题兼容性：许多Shopify 2.0主题已自带部分结构化数据。在添加此代码前，建议先使用上述测试工具检查您的产品页面，看看是否已有数据。如果已有，请评估是否需要补充或替换，以避免重复标记。

Shopify面包屑导航BreadcrumbList类型结构化数据代码模板

正确添加面包屑结构化数据，能帮助搜索引擎理解您网站的层级结构，并可能在搜索结果中显示路径链接，提升用户体验和点击率。

将以下不同类型页面的代码段添加到相应页面的模板文件中（如 product.liquid, collection.liquid, article.liquid 等），通常放置在 <head> 部分。

Shopify产品页面的面包屑结构化数据

产品页的面包屑路径通常为：首页 > 集合页 > 产品页。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title | escape }}",
      "item": "{{ shop.url }}/collections/{{ collection.handle }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.title | escape }}"
    }
  ]
}
</script>

Shopify集合页面的面包屑结构化数据

集合页的路径为：首页 > 集合页。如果您的集合有父级集合，可以添加更多层级。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title | escape }}"
    }
  ]
}
</script>

Shopify博客文章页面的面包屑结构化数据

博客文章的路径为：首页 > 博客主页 > 文章页。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ blog.title | escape }}",
      "item": "{{ shop.url }}{{ blog.url }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ article.title | escape }}"
    }
  ]
}
</script>

Shopify普通页面的面包屑结构化数据

如果您的页面有父页面，需要手动定义层级或通过元字段（metafields）实现。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "父页面名称",
      "item": "{{ shop.url }}/pages/父页面-handle"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ page.title | escape }}"
    }
  ]
}
</script>

面包屑导航结构化数据（JSON-LD）与可视化面包屑导航（HTML）的协同

面包屑导航的“可视化部分”（HTML）和“不可见部分”（结构化数据）就像一对默契的搭档，分别服务于用户和搜索引擎，共同提升页面的可用性和搜索表现。

下面这个表格可以让你快速了解它们各自的分工和协作方式。

特性维度可视化面包屑导航 (HTML)结构化数据 (JSON-LD)如何协同工作
主要受众👨💻 网站用户🤖 搜索引擎爬虫分别针对人类和机器提供最佳信息。
核心目的提供直观的导航路径，提升用户体验帮助理解网站结构，提升SEO和搜索展示共同目标是让用户（直接或间接通过搜索）更好地找到内容。
实现方式使用 <nav>、<ol>、<li>、<a> 等语义化HTML标签在页面上呈现可点击的路径。在 <script> 标签内使用 BreadcrumbList 等Schema.org词汇，以JSON-LD格式编写。两者并列存在，互不干扰，但描述的是同一套导航路径。
信息内容显示用户当前页面的层级路径（例如：首页 > 电子产品 > 手机）。用机器可读的格式，明确告诉搜索引擎每个列表项的名称(name)、链接(item)和位置(position)。描述的是完全相同的内容和层级关系，确保信息的一致性。

协同工作的关键要点

了解了基本分工后，要想让它们完美配合，你需要关注以下几个关键点：

  1. 保持数据一致是核心
    这是最重要的原则。JSON-LD结构化数据中描述的路径（如名称、URL、顺序）必须与页面上可见的HTML面包屑导航完全一致。如果出现偏差，搜索引擎可能会认为存在误导而忽略你的标记。例如，HTML中显示为“首页 > 产品分类”，JSON-LD中也应是完全相同的名称和顺序。

  2. 清晰的实现步骤
    通常，你可以按照以下步骤来部署：

    • 首先构建HTML导航：使用语义化的HTML标签创建用户可见的面包屑路径。注意最后一个条目（当前页面）通常不应是可点击的链接。
    • 然后添加JSON-LD数据：将对应的JSON-LD脚本插入到页面的<head>或<body>中。JSON-LD的优势在于它与HTML内容是分离的，更易于维护和动态生成。

  3. 避免常见误区

    • 不要将面包屑作为主导航：它的作用是辅助导航，显示当前位置和路径，不应取代网站的主导航菜单。
    • 不要忽略无障碍访问：在HTML中使用 <nav aria-label="Breadcrumb"> 等属性，可以帮助使用屏幕阅读器的用户更好地理解导航结构。
    • 不要忘记测试：使用Google提供的https://search.google.com/test/rich-results工具来验证你的结构化数据是否正确无误，并预览在搜索结果中可能出现的富媒体摘要样式。

可视化面包屑导航（HTML）是给用户看的“路标”，而结构化数据（JSON-LD）是给搜索引擎看的“地图说明”。它们各司其职，又通过描述同一套网站层级结构而紧密协同，共同致力于提升网站的导航效率和搜索可见度。

Shopify可视化面包屑导航（HTML）动态调用模板代码

将以下代码保存为一个新的Snippet文件，例如命名为 breadcrumbs.liquid。

{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>

  {% if template contains 'page' %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page.title }}</span>

  {% elsif template contains 'product' %}
    <span aria-hidden="true">&rsaquo;</span>
    {% if collection.url %}
      {{ collection.title | link_to: collection.url }}
    {% endif %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ product.title }}</span>

  {% elsif template contains 'collection' and collection.handle %}
    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}

  {% elsif template == 'blog' %}
    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ blog.title }}</span>
    {% endif %}

  {% elsif template == 'article' %}
    <span aria-hidden="true">&rsaquo;</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ article.title }}</span>

  {% else %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ page_title }}</span>
  {% endif %}
</nav>
{% endunless %}

代码关键逻辑说明

这段代码的核心在于使用Liquid模板语言动态判断页面类型并生成相应的导航路径。

逻辑部分功能说明
{% unless ... %}排除首页(index)、购物车页(cart)等不需要面包屑的页面。
aria-label为使用屏幕阅读器的用户提供导航说明，符合无障碍访问标准。
条件判断（if template contains ...）识别当前页面类型（如产品页、博客文章页），并输出对应的层级链接。
动态变量使用 {{ collection.title }}、{{ product.title }} 等变量自动调用当前页面的真实数据。

部署到您的Shopify主题

  1. 创建Snippet文件：

    • 在Shopify后台，进入 在线商店 > 主题 > 编辑代码。
    • 在左侧的代码文件列表中，点击 “Snippets” 文件夹下的 “添加新的Snippet”。
    • 将文件命名为 breadcrumbs（确保名称准确），并将上面的核心代码粘贴进去，然后保存。

  2. 在主题模板中调用：

    • 继续在代码编辑器中，找到并打开布局文件 layout/theme.liquid。

    • 在您希望显示面包屑导航的位置（通常是在 <main> 标签开始之后，或 {% if template != 'index' %} 条件块内），插入以下调用代码：

      {% render 'breadcrumbs' %}

进阶优化与注意事项

  • 自定义样式：代码中的 class="breadcrumb" 可用于添加CSS样式。您需要在 assets/theme.css.scss 或类似样式文件中定义 .breadcrumb 类的样式，以匹配您的网站设计。
  • 处理更复杂的层级：对于拥有多级父页面的普通页面（如：首页 > 支持中心 > 常见问题），可能需要通过为页面添加元字段（Metafields）来手动指定其父页面，然后在面包屑代码中调用这个元字段来实现。
  • 添加结构化数据：为了进一步提升SEO，您可以在上述HTML代码旁，额外添加一份 BreadcrumbList 类型的JSON-LD结构化数据，这能为搜索引擎提供更清晰的路径信息。
  • 预览与测试：保存所有修改后，务必在不同类型的页面（产品页、博客文章页等）进行预览，确保面包屑导航显示正确且链接有效。

如果我的Shopify主题已经自带部分结构化数据，如何避免冲突？

当主题自带部分结构化数据时，盲目添加容易导致代码冲突或重复标记，反而对SEO不利。别担心，只要按照一套清晰的流程来操作，就能安全地整合与管理你的结构化数据。

下面这张流程图梳理了从诊断到验证的完整步骤，你可以跟着它一步步来：

shopify-json.png

接下来，我们详细解读每个环节的关键操作。

第一步：诊断现有数据

在修改任何代码之前，首要任务是了解你的主题已经生成了哪些结构化数据。

  • 核心工具：使用 Google富媒体结果测试工具（Google Rich Results Test），输入你商店的产品页或文章页URL，工具会详细列出所有检测到的结构化数据。
  • 评估内容：检查现有的Product或BlogPosting数据是否包含了核心信息，如产品名称、价格、库存状态、评论评分等。这能帮你判断是需要补充还是替换。

第二步：选择并实施解决方案

根据诊断结果，选择最适合你的方法。

方案一：在现有基础上增强（推荐优先尝试）
如果你的主题已经提供了质量不错的基础数据，最佳做法是保留它，然后通过更安全的方式补充缺失的信息。

  • 使用Metafield：对于需要动态添加的特定信息（如产品的gtin、brand等），可以尝试在主题编辑器中通过自定义元字段（Metafield）来添加。这样通常不会干扰主题原有的代码结构。

  • 使用Snippet：对于通用的、全站范围的数据（如Organization或WebSite），可以创建一个自定义的JSON-LD代码片段（Snippet），并只在主题的theme.liquid中插入一次。

    方案二：禁用默认数据后重新添加（如需深度定制）
    如果主题自带的标记不完整或你需要进行深度定制，可以考虑先禁用它们，然后使用更完整的代码替换。

  • 方法A：检查主题设置：一些现代Shopify主题（如Dawn、OS 2.0版本的主题）可能在设置中提供了关闭默认结构化数据的选项。请仔细浏览主题的“自定义”设置区域。
  • 方法B：修改模板代码：这是更直接但需要谨慎操作的方法。你需要找到生成结构化数据的模板文件（通常是product.liquid、article.liquid等），并注释掉或删除对应的代码段。操作前务必备份主题！
  • 方法C：使用专业APP：对于不熟悉代码的用户，可以考虑使用像 JSON-LD for SEO 或 Smart SEO 这样的专业APP。这些应用通常能自动识别并接管主题原有的结构化数据，避免冲突。

第三步：特别注意这些常见冲突页面

Shopify会自动生成一些页面，它们极易产生重复和低质量内容，需要特别处理。

  • 产品变体页、标签页：URL中包含/tagged/或?variant=的页面。建议在这些页面的<head>部分添加<meta name="robots" content="noindex, follow">标签，告诉搜索引擎不要索引但它们传递权重。
  • 集合（Collections）分页页、博客标签页：例如/collections/collection-name?page=2或/blogs/news/tagged/tagname。同样建议使用noindex, follow标签处理。
  • 供应商（Vendors）和类型（Types）页面：除非你特意要为每个供应商或产品类型创建高质量的内容页，否则也建议对/collections/vendors?q=...和/collections/types?q=...这类页面进行noindex处理。

第四步：测试与验证

任何修改后，都必须重新使用 Google富媒体结果测试工具 进行验证。

  • 确保没有错误或警告。
  • 检查结构化数据是否按预期显示，特别是你新添加的部分。
  • 预览它在搜索结果中可能呈现的富媒体效果（如星级评分、价格等）。

重要提醒

在进行任何操作之前，请务必备份你的当前主题（在Shopify后台的“在线商店”>“主题”中，点击“操作”>“复制”进行备份）。这样，如果修改中出现问题，你可以轻松恢复到之前的状态。

TAG

相关文章
本文标题：《Shopify常用结构化数据实施SEO指南》
本文链接：https://zhangwenbao.com/shopify-schema-seo-guide.html
版权声明：本文原创，转载请注明出处和链接。许可协议：CC BY-NC-SA 4.0
发表新评论