# 商家资料预览

把内容打进去，它就变成 Google 会画的那张卡片。为了画它，不会往外送任何东西。

> 在上线之前就看到你的 Google 商家资料长什么样：知识面板、手机上的地点卡片和本地搜索结果，全部由你打进去的名称、类别、营业时间、评分和照片画出来。已有的商家资料可以粘贴进来导入。做好的图能下载成 PNG 或 SVG。整个过程都发生在你的浏览器里。

This is an interactive browser tool at https://httcup.github.io/tools/business-profile-preview/. Files are processed on the device running that browser. Any deliberate sharing or optional network feature is described on the page. What follows is its written explanation; open the address to use it.

## Your 商家资料和它们的图 are **processed in your browser**. No processing upload.

你打进去的每一个字段，都是被这个页面里大约一千行你能读的 JavaScript 画成一张图的，而这中间没有哪一步会去联系谁。不会去查你的商家，不会去核对地址，也不会去取一颗星星。这个工具压根就没有任何网络功能——这一点在这里格外要紧，因为一份商家资料往往既是店面，也是某个人的家庭住址，而那个电话号码，多半就响在他自己兜里。

- ✗ 不上传
- ✗ 不注册
- ✗ 无水印
- ✓ 断网可用
- ✓ 开源

## 怎样在 Google 商家资料上线之前先预览它

1. **如果你已经有一份资料，就从它开始。** 在 Google 上打开你的商家，把整张卡片选中——名称、星星，以及底下那几行——复制，粘贴到这个页面顶上那个折叠框里。名称、类别、评分、评价数、地址、电话号码、网站，以及一整周的营业时间，都会被认出来，而且页面会回过头来告诉你它究竟填上了哪几项，好让猜错的地方看得见，而不是悄悄就算数了。如果你手里有 Business Profile API 导出的文件，那个也能打开。
2. **先把名称和类别弄对。** 它们两个加起来，比其余所有东西都重。名称是三个版面上唯一都会被截断的字段，而搜索结果里截得最狠——所以一个把城市和行当都缀在末尾的名字，在最可能来找你的人那里，读出来就是一个省略号。类别则是本地结果在放不下别的东西时唯一还容得下的那一行，也是一次搜索真正会去匹配的那个词。
3. **把一周填满，然后看看它说了什么。** 状态那一行是一份资料里唯一会自己变的部分：*营业中 · 21:00 关门* 会自己变成*已关门 · 周二 09:00 开门*，谁都不用去动它。这个页面是从营业时间和你自己的钟推出来的，所以把某一天改成休息，你立刻就能看到那天晚上来查你的人会被告知什么。一个结束早于开始的时段——22:00 到 02:00——会被读成跨过午夜，而这正是一家酒吧的意思。 打开*预览指定的日期和时间*，可按此设备的时区查看某个晚上或次日早晨。关闭后会再次跟随设备时钟。此选择不会保存在商家资料的 JSON 中。
4. **看看你挣到了哪几个按钮。** 没有地址，就没有*路线*。没有网站，就没有*网站*。没有电话号码，就没有*拨打电话*。这三个字段会变成名称底下那一排按钮，而缺了其中一个的资料，就是一份读者没法直接采取行动、得先去别处的资料。这是预览上最快能查的一件事，也是真实资料里最常缺的一件事。
5. **三个版面都要看，别只看第一个。** 同一份资料会被裁成三种长度。知识面板最宽裕，是别人已经知道你名字时看到的那个；手机卡片才是你大多数访客真正拿到的那个；本地结果那一条最窄，而正是在那里，一个从没听说过你的人要在你和另外两家之间做选择。一段在第一个版面里读着顺的介绍，到第三个版面里可能根本看不见。
6. **把图带走。** PNG 会按版面自身的尺寸导出，或者两倍、三倍，而这是唯一一种不会让换行位置移动的放大。如果要放进文档里，那就把 SVG 也拿上——它是一个自成一体的文件，照片就在里面，所以打印出来是清晰的，而且不带指向任何地方的链接。存下来的资料是第三个下载，如果你打算过些时候再回来，该留的就是它。

## The longer version

[如何在上线前预览 Google 商家资料](https://httcup.github.io/tools/guides/preview-a-google-business-profile/): 桌面、手机和本地结果里资料长什么样：名称保留多少、类别作用、哪些字段成为按钮，以及无人看时营业状态怎样。

## Also in the box

- [图片压缩](https://httcup.github.io/tools/compress-image/): 说个大小，剩下的它来算。
- [图片缩放](https://httcup.github.io/tools/resize-image/): 说个尺寸，拉个框，挑个格式。
- [Image Layout](https://httcup.github.io/tools/image-layout/): Put your pictures together. Keep them on your machine.
- [HEIC 转 JPG](https://httcup.github.io/tools/heic-to-jpg/): iPhone 拍的照片，换成什么都打得开的格式。

## Questions

### 这个是 Google 做的吗？

不是。本站与 Google 没有任何关联，未获其认可，也不存在任何联系；Google Business Profile 是 Google 的商标，这里提到它，只是为了说清楚这个页面预览的是什么。你看到的是在你自己的浏览器里、用你打进去的内容画出来的一幅图——不是截图，不是你那份资料的实时视图，也没有连着你的 Google 账号。你在这里做的任何事都不会改变你真正的资料；要改那个，你得去 Google。

### 它能自动导入我现有的资料吗？

不能，而且值得把原因说清楚：把你的资料取回来，就意味着这个页面能够联系服务器，而一个能联系服务器的页面，就是一个能把你的字段送出去的页面。那个本事，正是整个网站刻意不去拥有的东西。所以导入是反过来做的——你把资料复制下来粘贴进去，页面从文字里尽量读出它能读的部分，再告诉你它填上了哪些字段。Business Profile API 导出的 JSON 可以直接打开。

### 我打进去的东西会被送到哪里吗？

不会。这个工具的代码里没有 `fetch`,没有 `XMLHttpRequest`，也没有 `sendBeacon`,而页面的 `Content-Security-Policy` 列出了它可以联系的每一个地址，其中没有一个属于本站。这件事在这里比在大多数页面上更要紧：一份商家资料，常常就是某个人的家庭住址，和一个响在他兜里的电话号码。

### 这张预览图有多准？

在“放得下什么”这件事上准，在“看起来什么样”这件事上是近似。真东西上用的字体是 Google Sans，那不是你机器上会有的字体，而间距会随着搜索和地图的每一次改版而变——所以像素上的精确程度，当个印象看就好。真正精确的，是值得预览的那一部分：你的名称在每一种宽度下还剩下多少，类别在最窄的版面上还读不读得出来，以及你的字段挣到了哪几个按钮。

### 为什么我刚建的资料一颗星都不显示？

因为 Google 就是这么显示的，也因为五颗空星一眼看过去，跟一颗星没什么两样。把评分和评价数都留空，卡片就会说还没有评价，而这正是一份还没人评价过的资料该有的诚实预览。两个都填上数字，星星就出来了，并且按这个数字实际所占的比例填充——4.6 是四颗星再加五分之三颗，不是五颗。

### 那行“营业中”或“已关门”，到底取决于什么？

取决于填写的一周营业时间，默认使用此设备的本地时钟，每分钟更新状态。也可指定本地日期和时间来查看一周中的某个时段。预览使用此设备的时区，不会转换为商家时区，也不支持节假日特别营业时间。如果商家位于其他地区，请输入要查看的当地时间。此选择不包含在保存的商家资料 JSON 中。

### 这张图能用在方案、路演材料或者给客户的报告里吗？

可以。没有水印，没有账号，做多少张都不限，文件里也没有任何指回这里的东西。那就是你自己的字段，在你自己的机器上画成的一张图。唯一值得跟收到它的人说一句的，是它到底是什么——一份“资料会长成什么样”的模拟图——因为一幅像到这个程度的画，很容易被当成某个已经存在的东西的截图。

### 那三种预览之间差在哪里？

差在宽度，因而也差在还能留下多少。**知识面板**是你在桌面端搜自己名字时右边那张高卡片：最宽裕，也是你自己去查自己时看到的那个。**手机**卡片才是你大多数访客真正拿到的那个。**搜索结果**是本地三连里的一条，就是上面顶着一张地图的那个三家一组的区块，它最窄，而正是在那里，一个从没听说过你的人要在你和另外两家之间做选择。

### 我加的照片会被上传吗？

不会。它是在这个页面里解码的，按卡片用得上的尺寸重画到一张 canvas 上，再作为数据嵌进图里。由此有两件事：文件从来没有离开过你的机器，而它记录的拍摄地点和时间也全都没了，因为一张 canvas 是没有元数据的。如果原件对你有价值，那就把原件留着——进到预览图里的是一份副本。

### 我能把打好的内容存下来，过些时候再回来吗？

可以，以文件的形式。*保存资料*会把 JSON 写到你的磁盘上，里面有每一个字段和那张照片，再在这里打开那个文件，一切都会回来。两次访问之间这个浏览器里什么都不存，也没有账号可登——这是刻意的：一家店的地址、电话和营业时间，不是我们该替人保管的东西。

### 它离线能用吗？

能。页面加载一次之后，断开网络它照样能用——字段、绘图、PNG,全都还在。这也是证明“什么都没被上传”最简单的办法：一个要把你的资料送出去才能画出卡片的工具，在你拔线的那一刻就会停下来。

## How the privacy claim is verifiable

- **处理在这个浏览器里完成。** 本工具在浏览器里处理输入和结果，处理代码不把它们上传去处理。Content-Security-Policy 限制可用资源和连接目的地，但已允许的主机仍可接收请求。策略不检查载荷，不能单独证明什么都没有发出。请把具体操作的请求与源码核对，或断网完成该本地操作。
- **这里没有任何东西会去取什么。** `src/` 里没有 `fetch`,没有 `XMLHttpRequest`，也没有 `sendBeacon`。这同时也是它没法替你把资料查回来的原因，以及为什么“导入”意味着粘贴：能去取回来的本事，恰恰就是能把东西送出去的本事。
- **照片是在这里读的，进来的路上就被剥干净了。** 封面照片是在这个页面里解码的，在进入成品图之前会被重画到一张 canvas 上，这既限定了它的尺寸，也丢掉了文件里记录的拍摄地点和时间。最后留在预览图里的是那幅画面，不是你选的那个文件。
- **下载下来的，就是屏幕上的那个。** PNG 不是另做一次、可能跟预览对不上的渲染：交给浏览器画到 canvas 上的，是同一份标记。这也是为什么拔了网线也能下载——里面没有要去取的字体，也没有外链的图片，整张图就是一个自成一体的文件。
- **存下来的资料是一个文件，不是一个账号。** 这个页面写出来的 JSON 会存到你的磁盘上，不去别处，而再把它打开，是这个工具记得任何事情的唯一方式。两次访问之间浏览器里什么都不留，因为一家店的地址和营业时间，不是我们该替人保管的东西。
- **Google 会加载什么，以及它拿不到什么。** 广告和统计脚本来自 Google,捐赠按钮来自 Buy Me a Coffee。它们谁也拿不到你打进去的任何东西——这里头的讽刺我们看得见，而这道界限是真的：把你的字段变成一张图的每一行代码，都由这个源提供，也都列在代码库里。
- **它离线也能用。** 断开网络，这个工具一点都不会变，因为它里面从来就没有过一个网络步骤。这是最简单的一条证明。

**Check it yourself.** None of the above has to be taken on trust. This page is generated from the templates and config in the repository by a build script you can read and run yourself, and the result is committed to the `dist` branch — so you can diff what is served against what a build of the sources produces: https://github.com/httcup/tools

The files worth reading first are `config/site.toml` for the Content-Security-Policy，`src/surfaces.js` 是那三张卡片本身——里面每一个坐标都是写死在那儿的——`src/profile.js` 是这个页面上唯一一处算术，也就是此刻这家店开着还是关着，而 `src/parse-listing.js` 管的是你粘贴进来的那份资料会经历什么。