Shopify常用结构化数据实施SEO指南
以下是几种可直接在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组织类型结构化数据指南
替换示例数据:请务必将模板中的示例数据替换为您店铺的实际信息。
- Logo:代码已尝试动态调用主题设置中的Logo(
{{ settings.logo | image_url }})。如果您的主题设置方式不同,可能需要手动修改Logo的URL路径。 - 电话和社交媒体链接:同样尝试调用主题设置中的链接(如
{{ settings.social_facebook_link }})。如果未设置,代码会使用占位符(如https://www.facebook.com/yourpage),请务必将其修改为您品牌真实的社交媒体主页链接。删除| default: ...部分或填入真实链接。 - 业务区域:将
"areaServed"的值修改为您主要服务的国家或地区代码(如 "CN" 代表中国,"WW" 代表全球)。
- Logo:代码已尝试动态调用主题设置中的Logo(
代码放置:
- 在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本地商家结构化数据注意事项及实现更佳效果的关键要点
- 信息准确性是第一位的:请务必提供真实、准确且最新的商家信息。虚假信息会导致搜索引擎的惩罚。
- 处理可能的数据冲突:在添加此代码前,建议先用上述测试工具检查您的首页,看主题是否已自动生成
Organization或LocalBusiness数据**。如果已有,您可能需要评估是增强现有数据还是用此代码替换,以避免数据重复或冲突。 - 动态更新信息:如果您的营业时间在节假日有特殊安排,请记得及时更新代码中的
openingHours字段,确保向客户展示的信息始终准确。 - 提供精确且完整的数据:务必填写准确无误的信息,尤其是地址和经纬度坐标(精度建议至少5位小数),这能确保您在地图上的位置精准无误。营业时间需采用标准的
hh:mm:ss格式(如"09:00:00"到"18:00:00"),并覆盖一周中的所有营业日。 - 使用具体的子类型:不要只使用通用的
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类型结构化数据重要提示与建议
- 评论数据的集成:模板中的评论部分(
review和aggregateRating)是基于像 Judge.me 或 Ryviu 这类评论应用的元字段(metafields)设计的。您需要确保已安装并正确配置了这类应用,并且元字段路径(如product.metafields.reviews.rating.value)与您的应用设置匹配。如果未安装评论应用,可以暂时移除整个review和aggregateRating对象。 - Logo地址的调整:
publisher.logo的URL需要根据您主题的设置方式进行修改。示例中{{ settings.logo | image_url }}是一种常见方式,但如果您的主题不同,可能需要调整。 代码放置与测试:
- 将代码放置在产品模板的
<head>部分或<body>开头是比较推荐的做法。 - 在部署之前和之后,务必使用 Google富媒体搜索结果测试工具 进行测试。输入您的产品URL,检查是否有错误或警告,并预览在搜索结果中可能呈现的富媒体效果。
- 将代码放置在产品模板的
- 注意主题兼容性:许多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)。 | 描述的是完全相同的内容和层级关系,确保信息的一致性。 |
协同工作的关键要点
了解了基本分工后,要想让它们完美配合,你需要关注以下几个关键点:
- 保持数据一致是核心
这是最重要的原则。JSON-LD结构化数据中描述的路径(如名称、URL、顺序)必须与页面上可见的HTML面包屑导航完全一致。如果出现偏差,搜索引擎可能会认为存在误导而忽略你的标记。例如,HTML中显示为“首页 > 产品分类”,JSON-LD中也应是完全相同的名称和顺序。 清晰的实现步骤
通常,你可以按照以下步骤来部署:- 首先构建HTML导航:使用语义化的HTML标签创建用户可见的面包屑路径。注意最后一个条目(当前页面)通常不应是可点击的链接。
- 然后添加JSON-LD数据:将对应的JSON-LD脚本插入到页面的
<head>或<body>中。JSON-LD的优势在于它与HTML内容是分离的,更易于维护和动态生成。
避免常见误区
- 不要将面包屑作为主导航:它的作用是辅助导航,显示当前位置和路径,不应取代网站的主导航菜单。
- 不要忽略无障碍访问:在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">›</span>
<span>{{ page.title }}</span>
{% elsif template contains 'product' %}
<span aria-hidden="true">›</span>
{% if collection.url %}
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">›</span>
<span>{{ product.title }}</span>
{% elsif template contains 'collection' and collection.handle %}
<span aria-hidden="true">›</span>
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
<span aria-hidden="true">›</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ collection.title }}</span>
{% endif %}
{% elsif template == 'blog' %}
<span aria-hidden="true">›</span>
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">›</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ blog.title }}</span>
{% endif %}
{% elsif template == 'article' %}
<span aria-hidden="true">›</span>
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">›</span>
<span>{{ article.title }}</span>
{% else %}
<span aria-hidden="true">›</span>
<span>{{ page_title }}</span>
{% endif %}
</nav>
{% endunless %}代码关键逻辑说明
这段代码的核心在于使用Liquid模板语言动态判断页面类型并生成相应的导航路径。
| 逻辑部分 | 功能说明 |
|---|---|
{% unless ... %} | 排除首页(index)、购物车页(cart)等不需要面包屑的页面。 |
aria-label | 为使用屏幕阅读器的用户提供导航说明,符合无障碍访问标准。 |
条件判断(if template contains ...) | 识别当前页面类型(如产品页、博客文章页),并输出对应的层级链接。 |
| 动态变量 | 使用 {{ collection.title }}、{{ product.title }} 等变量自动调用当前页面的真实数据。 |
部署到您的Shopify主题
创建Snippet文件:
- 在Shopify后台,进入 在线商店 > 主题 > 编辑代码。
- 在左侧的代码文件列表中,点击 “Snippets” 文件夹下的 “添加新的Snippet”。
- 将文件命名为
breadcrumbs(确保名称准确),并将上面的核心代码粘贴进去,然后保存。
在主题模板中调用:
- 继续在代码编辑器中,找到并打开布局文件
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不利。别担心,只要按照一套清晰的流程来操作,就能安全地整合与管理你的结构化数据。
下面这张流程图梳理了从诊断到验证的完整步骤,你可以跟着它一步步来:
接下来,我们详细解读每个环节的关键操作。
第一步:诊断现有数据
在修改任何代码之前,首要任务是了解你的主题已经生成了哪些结构化数据。
- 核心工具:使用 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后台的“在线商店”>“主题”中,点击“操作”>“复制”进行备份)。这样,如果修改中出现问题,你可以轻松恢复到之前的状态。
常见问题解答
我应该优先添加哪种结构化数据?
对于Shopify商店,优先级最高的无疑是 Product(产品) 类型,因为它直接影响搜索结果中的价格、库存和星级评价,对点击率和转化率提升最快。其次是 Organization/WebSite(组织/网站) 和 BreadcrumbList(面包屑),它们用于构建品牌形象和网站结构。
我应该用Shopify App还是手动添加代码?
Shopify App(如 JSON-LD for SEO)更简单、更安全,适合不熟悉代码的商家,但通常需要付费。手动添加代码(如本文所示)是免费的,并提供100%的控制权和灵活性,但需要您小心操作并进行充分测试。
添加了结构化数据,Google就一定会显示富媒体结果(如星级和价格)吗?
不保证。 添加结构化数据只是让您获得了“资格”,但Google会根据搜索查询、设备、用户位置和算法来最终决定是否显示富媒体结果。正确添加是获得展示机会的必要前提。
部署后,我如何知道Google已经抓取了我的新数据?
首先,使用“Google富媒体结果测试工具”验证代码是否正确。部署后,登录 Google Search Console (GSC),在“增强”报告部分(如“商品”、“博客文章”)查看。GSC会显示已成功编入索引的页面、以及任何错误或警告。
最常见的“商品”结构化数据错误是什么?
最常见的是缺少 offers (价格和货币) 或 aggregateRating / review (评论) 字段。如果您不收集评论,请确保从代码中完全删除 aggregateRating 和 review 这两个JSON对象,否则Google会报告警告。
代码中的“gtin”是什么?我从哪里获取?
GTIN (全球贸易项目代码) 是产品的唯一条形码,例如 UPC、EAN 或 JAN。您通常从产品制造商处获取。如果您的产品(如手工艺品)没有GTIN,可以省略该字段,但拥有GTIN对于Google Shopping和搜索排名非常重要。
我的产品还没有评论,aggregateRating部分该怎么处理?
如果您没有评论数据,最佳做法是完全删除代码中的 aggregateRating 和 review 这两个JSON对象。提交空值、"0"或虚假数据都可能导致Google显示错误或忽略您的标记。
如果我的Shopify Liquid变量(如shop.phone)是空的,会怎样?
这可能会导致JSON-LD代码语法错误(例如一个不完整的键值对)。文章中的代码使用了 | default: 过滤器来提供一个备用值(占位符),这是一种很好的做法。请确保所有调用的变量在Shopify后台都有值。
在theme.liquid中添加这么多JSON-LD脚本会拖慢我的网站速度吗?
影响极小。JSON-LD脚本是异步解析的,并且通常放置在<head>中,它们不会阻塞页面的视觉渲染(如LCP/FCP)。其带来的SEO收益远大于微乎其微的性能开销。
代码中的@id字段有什么用?@id 为该数据项提供了一个全局唯一的标识符(通常是页面的URL加上一个锚点,如 #product)。这对于高级用法(如在不同数据块之间建立关系)非常重要,能帮助Google更清晰地连接和理解数据实体。
为什么首页模板使用了@graph,而其他模板没有?@graph 是一种将多个独立的结构化数据类型(如WebSite和Organization)“打包”到同一个<script>标签下的高级方法。它告诉Google:“这个页面上同时存在这两个实体,它们是并列关系”。其他页面通常只有一个主要实体(如Product),因此不需要@graph。
Organization中的Logo尺寸必须是600x60吗?
不是。这只是模板中的一个示例值。Google官方建议Logo至少为112x112像素,并且最好是矩形(不要太高或太宽)。请使用您网站的真实Logo URL,并确保图像清晰可访问。
代码中的priceValidUntil(价格有效期)有什么用?
它用于告知Google这个价格的有效期限。模板中将其设置为一年后(plus: 31536000秒)是一种常见的做法,以确保价格在短期内被视为“当前”有效。Google会定期重新抓取页面以获取更新,所以这通常不是问题。
我的Shopify商店有多种语言,结构化数据需要怎么处理?
您的结构化数据内容应该是动态的。当用户切换到法语版时,您的JSON-LD中的 name 和 description 字段也应该自动输出法语内容。Shopify的 hreflang 标签会告诉Google不同语言版本的URL,Google会分别抓取每个版本并读取其对应的(已翻译的)结构化数据。
我的产品页面有视频,如何添加VideoObject结构化数据?
您可以在Product类型中嵌套一个 video 属性,或者创建一个单独的 VideoObject 脚本。您需要提供视频的名称 (name)、描述 (description)、缩略图URL (thumbnailUrl) 和视频文件URL (contentUrl) 或YouTube等平台的嵌入URL (embedUrl)。
文章建议使用具体的LocalBusiness子类型,在哪里可以找到这个列表?
您可以在 Schema.org 的官方网站上找到完整列表。搜索 "LocalBusiness",您会看到所有子类型,如 Store -\> ApparelStore (服装店)、AutomotiveBusiness (汽车业务)、Restaurant (餐厅) 或 HealthAndBeautyBusiness -\> DaySpa (日间水疗) 等。越具体越好。