這個頁面的程式碼沒跑起來。

直接從資料夾裡開啟 index.html,瀏覽器會攔下 JavaScript 模組,於是你選好一张封面照片之後,頁面不會有任何反應。改用 http 把這個資料夾提供出去:

powershell -ExecutionPolicy Bypass -File serve.ps1

然後開啟 http://localhost:8080/。

商家资料预览 — 上线之前先看看你的 Google 商家资料长什么样

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

語言: 繁體中文
檢視原始碼
你的商家资料和它们的图不會上傳。這裡根本沒有伺服器。

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

即時檢查: 檢查中…

離線: 檢查中…

别只听我们说:打开开发者工具,盯着 Network 那一栏,然后把你的地址和电话号码打进这些框里。没有哪一个请求会带走其中的一个字符。或者干脆拔掉网线,整张预览图照样能做出来。

已经有一份资料了?从它开始

这个页面没法去把你的资料取回来——它压根没有联系任何人的办法,而这正是它的用意。所以换个方向,把资料带过来:在 Google 上打开你的商家,选中,复制,粘贴到下面。凡是认出来的都会填进去,并且一项一项回报给你,好让猜错的地方看得见,而不是悄悄就算数了。

名称、评分、类别、地址、电话号码、网站,以及一整周的营业时间,都能认出来。照片不行:一张图没法以文字的形式穿过剪贴板,所以照片请在第 1 步里加。

存下来的资料,就是这个页面在第 4 步写出来的那份 JSON。它也能直接从 Google Business Profile API 的导出文件里读出一个地点——就是 title、storefrontAddress、regularHours 那种结构——而那正是你自己那份资料导出来的样子。

1 说说这家商家

这里的每一个框,都是 Google 会在某处显示的字段,而页脚那张预览图会随着你打字重画。最值得花心思的是名称和类别:名称是三个版面上唯一都会被截断的字段,而类别是搜索结果在放不下别的东西时唯一还容得下的那一行。

主要类别 一行,用 Google 自己的说法——这是大多数搜索真正会去匹配的那个词。你打字时,这个框会给出大约两百个日常行当作为建议,但它什么都收:Google 自己的清单大约有四千条,而你能挑哪一条,只有它说了算。

把评分和评价数都留空,卡片显示的就是一份新资料该显示的东西:一行「还没有评价」,而不是五颗空星。这是刻意的——五颗空星一眼看过去跟一颗星没什么两样,而这个页面存在的意义,就是让你自己那份资料不会有任何地方让你意外。

属性 用逗号隔开——堂食, 外带, 无障碍通道。一张卡片最多显示六个。

属性 在这里、在这个页面里读取,并重画到小得能放进图里的尺寸。它从来不会离开你的机器,而文件里记录的拍摄地点和时间,在被重画的那一刻就没了。

封面照片

2 它在哪儿,怎么联系

这三项决定了这份资料能拿到哪几个按钮。没有地址,就没有路线;没有网站,就没有网站;没有电话号码,就没有拨打电话。这是预览上最快能查的一件事,也是真实资料里最常缺的一件事。

地址 写成一行,就像一份资料印出来的那样。

这家商家是上门服务的 管道工、上门宠物美容、只做外送的厨房。Google 显示的会是服务范围而不是街道地址,上面那个框也就变成那个范围。

网站 显示时不带 https://,也不带 www.,一份资料就是这么印的。

3 什么时候开门

这是一份资料上唯一会自己变的一行。把一周填满,预览就会按你自己的钟算出此刻它说的是什么——营业中 · 21:00 关门,或者 已关门 · 周二 09:00 开门——而这是弄清楚「周日傍晚来查你的人被告知了什么」的唯一办法。

4 看看它,然后把它带走

同一份资料,裁成三种长度。在它们之间切换看看:放得进知识面板的,未必放得进搜索结果,而搜索结果正是那些原本不知道你名字的人找到一家商家的地方。

真东西上用的字体是 Google Sans,那不是你机器上会有的字体,而版式会随着每一次改版而变——所以间距当个近似看就好。真正精确的,是值得预览的那一部分:每个字段在它被给到的宽度里,还能剩下多少。

这是一幅画,不是截图。并非由 Google 制作、认可,也与 Google 无关。

以 Markdown 檢視

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

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

說得更細的版本

How to preview a Google Business Profile before it goes live What your Google listing will look like on a desktop search, on a phone and in the local pack: how long a name survives, why the category does more work than the description, which fields turn into buttons, and what the Open or Closed line says when nobody is watching.

常見問題

这个是 Google 做的吗?

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

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

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

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

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

这张预览图有多准?

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

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

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

那行“营业中”或“已关门”,到底取决于什么?

取决于你填的那一周,以及你正在读这段话的这台机器上的钟。这里没有时区字段,因为一份资料本身也没有:Google 是按商家自己所在地的当地时间把状态显示给访客的,而这个页面在不问任何人任何事的前提下,能做到的最接近的事,就是用你的钟。所以如果你和这家商家在同一个时区,这一行就是准的;不在同一个时区,它就是偏的——而这一点,页面会写在那一周下面,而不是留着让你自己去发现。

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

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

那三种预览之间差在哪里?

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

我加的照片会被上传吗?

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

我能把打好的内容存下来,过些时候再回来吗?

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

它离线能用吗?

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