门店详情页核心是确保地址、电话、营业时间、地图等信息可快速识别与调用:电话用<a href="tel:...">且号码仅含数字、+、括号、短横;地图需按设备匹配协议链接(如iOS用maps://、安卓微信用高德URI);营业时间须通过openingHoursSpecification结构化数据+<time>标签双重标注。

门店详情页的核心不是堆砌 HTML 标签,而是让地址、电话、营业时间、地图这些关键信息被用户快速识别、准确调用、无缝跳转——尤其在手机上,tel: 和 maps:// 这类协议能否生效,比页面多漂亮更重要。
怎么让点击电话自动拨号(且不触发浏览器警告)
直接写 <a href="tel:13800138000">400-xxx-xxxx</a> 是最稳妥的方案。注意三点:
- 号码里只保留数字、+、括号、短横(如
+86-138-0013-8000可以,但空格、中文“-”、全角符号会失效 - 不要用 JavaScript 绑定
click再调window.location.href = 'tel:...',iOS Safari 会拦截并报Navigation is blocked - 如果后端吐出的是带标签的富文本(比如 CMS 输出的
<span>400-xxx-xxxx</span>),得用 JS 清洗后包裹成<a href="tel:...">,不能只加onclick
怎么嵌入地图并确保手机点开就是导航(高德/百度/苹果原生)
别用 iframe 嵌静态地图图,它不解决“一键导航”。正确做法是提供多个协议链接,按设备自动匹配:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- iOS 用户点「导航」应唤起 Apple Maps:
href="maps://?q=北京市朝阳区建国路87号"(地址需 URL 编码) - 安卓微信内优先走高德:
href="iosamap://navi?sourceApplication=xxx&poiname=门店名&lat=39.9087&lon=116.4555&dev=1" - 通用 fallback 用百度地图 Web URI:
href="bdapp://map/direction?origin=now&destination=北京市朝阳区建国路87号&mode=driving" - 必须搭配
target="_blank"和rel="noopener",否则部分安卓 WebView 会白屏
营业时间怎么写才被搜索引擎和 Siri 正确识别
光写“周一至周五 9:00-18:00”不够。结构化数据才是关键:
立即学习“前端免费学习笔记(深入)”;
- 在
<script type="application/ld+json">中写openingHoursSpecification,包含dayOfWeek、opens、closes字段(值必须是"09:00"这种格式,不能是"9:00") - HTML 里仍要保留可读文本,但建议用
<time datetime="2023-01-01T09:00">9:00</time>包裹时间,提升语义性 - 节假日临时调整不要覆盖主时段,单独加一条
<div class="holiday-hours">春节假期:1月21日-27日 10:00-16:00</div>并用aria-label注明
真正难的不是写出地图链接,而是地址字符串是否能被高德、百度、iOS 的地图 App 准确解析——同一个“朝阳大悦城”,有的写“朝阳区朝阳北路101号”,有的写“朝阳大悦城L3层”,后者在某些地图里根本定位不到。上线前务必用真机点开每个链接验证。


















