移动体验 / 方法解读

移动端网页如何通过 h-event 属性标记活动时间与地点

移动端网页可以通过 h-event 类名及其属性标记活动时间与地点,帮助搜索引擎识别活动信息。

检查活动页面的 HTML 结构是否包含 h-event 根类名

首先打开移动端网页的活动详情页源代码,查找是否存在 class 属性值为 h-event 的容器元素。如果未找到,说明该页面尚未使用微格式标记活动信息。确认存在后,检查该容器内是否嵌套了描述活动名称、时间、地点等信息的子元素。

确保 h-event 容器内包含必要的属性类名,例如用于活动名称的 p-name,用于开始时间的 dt-start,用于结束时间的 dt-end,以及用于地点的 p-location。这些类名必须正确放置在对应的 HTML 元素上,例如活动名称应放在 h1 或 h2 标签中,时间应放在 time 标签的 datetime 属性中。

验证时间属性是否使用了正确的 datetime 格式

在移动端网页源代码中定位 dt-start 和 dt-end 类名,检查其对应的 time 元素是否包含有效的 datetime 属性值。该值应遵循 ISO 8601 日期时间格式,例如 2019-06-29T09:00:00-07:00。如果 datetime 属性缺失或格式错误,解析器可能无法正确提取活动时间。

对于包含时区信息的 datetime 值,确保其格式正确且符合标准。例如,示例代码中的 2019-06-29T09:00:00-07:00 表示 UTC-7 时区。如果时间未指定时区,解析器可能会将其默认为本地时间,导致跨时区活动信息显示错误。

确认地点属性是否嵌套了 h-card 结构

检查 p-location 类名对应的元素是否嵌套了 h-card 类名,以提供更详细的地点信息。如果地点信息简单,可以直接使用 span 或 div 标签配合 p-location 类名。如果需要提供街道地址、城市、国家等详细信息,应使用 h-card 结构,并在其中包含 p-street-address、p-locality 等属性类名。

验证嵌套的 h-card 结构是否完整。例如,示例代码中嵌套的 h-card 包含了 p-name(Mozilla)、p-street-address(1120 NW Couch St)、p-locality(Portland)等属性。如果缺少这些属性,解析器可能无法提取完整的地点信息,从而影响活动信息的展示。

使用解析工具检查微格式数据的输出结果

将移动端网页的 URL 输入到支持微格式解析的在线工具中,检查解析结果是否正确提取了活动名称、时间、地点等信息。如果解析结果为空或信息不完整,说明 HTML 结构或属性类名存在错误。根据解析工具的反馈,调整 HTML 结构或修正属性类名。

确认解析结果中的 JSON 数据是否包含预期的属性值。例如,解析结果应包含 type 为 h-event 的对象,以及 properties 中的 name、start、end、location 等属性。如果解析结果与预期不符,说明 HTML 结构或属性类名存在错误。根据解析工具的反馈,调整 HTML 结构或修正属性类名。

资料与延伸阅读

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

  1. Using microformats in HTML - HTML | MDN ↗
← 更多移动体验文章返回顶部 ↑