play.html would display custom thumbnails when shared on LINE. LINE, however, only renders compact cards — custom thumbnail images are not supported. A URL shortener via Cloudflare KV was technically feasible but violated our core principle: "Data must be self-contained within the URL." The code was written, deployed, tested, and reverted — all within half a day. That speed came from having principles that make decisions for you.
1. What We Wanted
TokiQR's play.html is the page that plays back voice, images, and text recorded in a QR code. All data is embedded in the URL parameters. No server query is needed.
When this URL is sent via LINE, a rich preview — title, description, and a custom image — would improve the recipient's experience. Serving OGP (Open Graph Protocol) meta tags to crawlers should have made this possible.
What We Built
We extended our existing Cloudflare Worker (a 52-line GAS proxy) with OGP functionality. The logic was straightforward:
- If the User-Agent is a crawler (LINE, Facebook, Twitter, etc.) → return dynamic OGP HTML
- If it's a normal browser → 302 redirect to GitHub Pages
The Worker parsed URL parameters to determine the data type (voice, image, or text) and generated appropriate OGP titles and descriptions. For Codec2 audio, it even calculated duration from the Base64 length — displaying something like "14.0 seconds of voice memory." Three OGP images were also created.
The implementation was complete. We deployed to Cloudflare, updated play.js to route shares through the Worker URL, and tested with curl. Crawler UAs received correct OGP HTML; normal UAs got 302 redirects. Technically, everything worked.
2. What Happened
When we actually sent the URL via LINE, the OGP title and description appeared correctly, along with a small icon. But the custom thumbnail image — the 1200x630px rich image — did not appear.
LINE's URL sharing only displays compact cards (small icon + title + description). The og:image custom image is not rendered in LINE's preview cards. This is by design.
This was not a bug. It was a platform design decision by LINE.
Furthermore, play.html URLs can reach nearly 4,000 characters (because the Base64-encoded audio data is in the query parameters). When a URL of this length is pasted in a LINE message, the URL itself dominates the message — a visual problem that exists before any thumbnail considerations.
3. The Temptation of Short URLs
A technical solution existed. Using Cloudflare Workers KV (Key-Value Store) for URL shortening could compress a 4,000-character URL to roughly 20 characters. LINE messages would look clean.
However, this solution directly violates our design principle.
TokiQR's core is that data is self-contained in the URL parameters. No server query is needed. Scan the QR code, open it in a browser, and audio plays. Cloudflare, GAS, GitHub — none of them matter.
The moment we introduce URL shortening, this self-containment breaks. The short URL mapping is stored in Cloudflare KV. If KV disappears, every short URL becomes a permanent dead link. The permanence of data would depend on the lifespan of an external service.
Short URLs are convenient. But they replace the self-containment of a 4,000-character URL with the external dependency of a 20-character one.
The principle defined in our previous essay, "Cloudflare & GAS — Using Is Not the Same as Depending," activated here. The operational layer may depend on external services, but the permanence layer must depend on nothing. URL shortening is a permanence-layer problem. So we rejected it.
4. Principles Make Decisions for You
The rejection of short URLs was instantaneous. Time spent deliberating: virtually zero.
This was not a matter of judgment skill. The principle made the decision.
When design principles are clearly articulated, encountering a new problem doesn't require fresh thinking. You simply check against the principle. The answer appears.
| Question | Principle Check | Decision |
|---|---|---|
| Introduce URL shortening? | Permanence layer would depend on external KV | Reject |
| Keep the OGP Worker? | LINE's limitation prevents achieving the goal | Revert all code |
| Revert noindex too? | Personal data URLs should not be search-indexed | Keep noindex only |
All three decisions were made without hesitation. The principles were clear. Without them, the conversation would have drifted into "short URLs would improve the experience, maybe we should just add it for now" — branching into technical feasibility, user experience, and cost discussions that could have consumed hours.
5. The Value of Trying
Was this entire effort wasted? We don't think so.
Before trying, we did not know that LINE doesn't render custom thumbnails, or that play.html's lengthy URLs would visually break LINE messages. These were facts discovered only through implementation, deployment, and testing.
And precisely because we tried, the decision to revert carried conviction. There is a meaningful difference between "I heard LINE doesn't show thumbnails" and "I built it, deployed it, and confirmed it myself."
Additionally, the OGP effort produced a useful side effect: adding noindex to play.html. URLs containing personal voice data have no reason to be search-indexed. This improvement emerged naturally during the process and has value independent of OGP.
Timeline of Half a Day
| Step | Action |
|---|---|
| Plan | Design Cloudflare Worker OGP proxy |
| Implement | Extend Worker, generate 3 OGP images, modify play.js |
| Deploy | Deploy to Cloudflare, verify with curl |
| Validate | Send via LINE, confirm custom thumbnail not displayed |
| Decide | Reject short URLs, revert all code, keep noindex |
| Restore | Revert Worker, play.js, and OGP images |
Six steps completed in half a day. The "revert" decision took no time because principles were clear. The revert itself took no time because Git made it trivial.
6. Conclusion — Principles Are Decision Caches
Design principles are decision caches.
Think deeply once, articulate it clearly,
and every similar question gets an instant answer.
In projects without clear design principles, the same category of decision gets debated repeatedly. "Should we add an external dependency?" "Is it acceptable for user experience?" "Is it okay if it's temporary?" Arguing from scratch every time is a waste.
At TokiStorage, we have articulated: "The permanence layer depends on nothing external." That is why short URLs were instantly rejected. That is why the moment we confirmed LINE's limitation, we could revert everything. No need to pause and deliberate each time.
Try, check against principles, revert. The ability to run this cycle at speed — that is the practical value of design principles. Principles are not ideals. They are tools that accelerate decisions.