移动体验 / 方法解读

移动端微数据 itemprop 属性为何无法正确提取内容?

检查 itemprop 属性是否被正确放置在具有 itemscope 属性的元素内部或通过 itemref 关联。

智能手机屏幕上显示的编程代码
主题资料配图,非新闻现场照片 · 配图:programming code on a smartphone screen

检查 itemprop 属性是否位于 itemscope 元素内部

微数据通过 itemscope 属性定义一个项目范围,而 itemprop 属性用于为该项目的属性赋值。如果 itemprop 被放置在没有任何 itemscope 属性的元素上,它将无法被识别为某个特定项目的属性。检查时,应确保 itemprop 出现在 itemscope 元素的直接子元素或后代元素中。例如,在定义软件应用时,必须将应用名称和操作系统等属性包含在设置了 itemscope 的 div 容器内。

开发者工具可以辅助验证这一点。在浏览器中打开页面,使用开发者工具检查 HTML 结构,确认 itemprop 属性确实存在于 itemscope 定义的作用域内。如果 itemprop 位于作用域之外,搜索引擎将无法将其关联到该项目,导致结构化数据提取失败。确保层级关系正确是解决此类问题的第一步。

检查 itemref 属性是否正确关联了外部属性

当某些属性需要定义在 itemscope 元素外部时,可以使用 itemref 属性来关联。itemref 接受一个元素 ID 列表,这些 ID 指向文档中其他包含额外属性的元素。检查时,必须确保 itemref 引用的 ID 在文档中真实存在,且这些元素本身包含 itemprop 属性。如果 ID 不存在或元素缺少 itemprop,关联将无效。

验证步骤包括:首先在 HTML 中查找 itemref 指定的 ID,确认对应的元素确实存在。然后检查该元素是否包含 itemprop 属性。例如,如果 itemref 指向 id 为 'price' 的元素,该元素必须包含 itemprop='price'。如果 itemref 引用了不存在的 ID,或者引用的元素没有 itemprop,搜索引擎将无法获取这些外部属性,从而影响数据的完整性。

验证 itemprop 属性的值是否为有效的名称值对

itemprop 属性由属性名和属性值组成。属性名必须来自定义的词汇表,如 schema.org,而属性值则通过 span 或 meta 等元素提供。检查时,应确认 itemprop 的值是有效的词汇表属性名,并且对应的 span 或 meta 元素正确设置了内容。如果属性名拼写错误或值未正确设置,搜索引擎将无法解析该属性。

以软件应用示例为例,属性名 'name' 和 'operatingSystem' 必须准确无误。对应的 span 元素应包含 'Angry Birds' 和 'ANDROID' 等值。如果使用了错误的属性名,或者 span 元素为空,结构化数据将不完整。使用 Schema Markup Validator 等工具可以快速检测这些错误,确保 itemprop 的名称和值符合规范。

使用 Schema Markup Validator 验证结构化数据

完成上述检查后,应使用 Schema Markup Validator 对页面进行验证。该工具可以提取页面中的微数据,并检查其是否符合 Schema.org 等词汇表规范。验证时,输入页面 URL 或粘贴 HTML 代码,工具会显示提取的结构化数据及其状态。如果 itemprop 或 itemref 配置错误,工具将提示具体的错误信息,如缺少 itemscope 或无效的 itemref ID。

根据验证结果,修正 HTML 代码中的问题。例如,如果工具报告找不到某个 itemprop,检查是否缺少 itemscope 或 itemref 配置错误。修正后重新验证,直到工具显示所有项目结构正确。这一步是确保微数据能够被搜索引擎正确提取和索引的关键。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Using microdata in HTML - HTML | MDN ↗
  2. 配图:programming code on a smartphone screen ↗
← 更多移动体验文章返回顶部 ↑