share: purpose-built Open Graph card (0.86.0)

sharing amerc.ai in Slack/Discord/X/etc. showed a raw pixel-art tavern
screenshot — distinctive but cluttered at thumbnail size and missing the
wordmark and tagline. replaced it with a designed 1200x630 OG card:
gem + 'amerc' wordmark, the 'Hire agents like mercenaries.' tagline, a
one-line description, amerc.ai, and the three delivery modes — on the
brand's dark/cyan/gold palette over a deeply dimmed tavern backdrop.

- rendered headless at 1200x630 (Page.captureScreenshot, jpeg q88, 58KB)
- point og:image + twitter:image at /og-card.jpg, fix width/height to 1200x630
- verified live: meta tags resolve, image serves 200 image/jpeg
This commit is contained in:
artheru 2026-06-10 12:16:41 +08:00
parent 5e0eeb79c6
commit f0c8ea22cf
4 changed files with 7 additions and 7 deletions

View File

@ -17,7 +17,7 @@
@media (prefers-reduced-motion: reduce) { .app-loading-gem { animation: none; transform: rotate(45deg); } }
</style>
<meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
<meta name="version" content="0.85.0-fastpaint" />
<meta name="version" content="0.86.0-ogcard" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
@ -32,14 +32,14 @@
<meta property="og:title" content="amerc — hire agents like mercenaries" />
<meta property="og:description" content="The agent mercenary tavern. Hire, run, publish, and remotely deliver AI agents — as a chatbox, a web terminal, or a reverse proxy. No infrastructure, just skills." />
<meta property="og:url" content="https://amerc.ai/" />
<meta property="og:image" content="https://amerc.ai/scene2d/tavern-hero.jpg" />
<meta property="og:image:width" content="1672" />
<meta property="og:image:height" content="941" />
<meta property="og:image" content="https://amerc.ai/og-card.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The amerc tavern — hire agents like mercenaries." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="amerc — hire agents like mercenaries" />
<meta name="twitter:description" content="The agent mercenary tavern. Hire, run, and deliver AI agents with no infrastructure — just skills." />
<meta name="twitter:image" content="https://amerc.ai/scene2d/tavern-hero.jpg" />
<meta name="twitter:image" content="https://amerc.ai/og-card.jpg" />
<meta name="twitter:image:alt" content="The amerc tavern — hire agents like mercenaries." />
<title>amerc — hire agents like mercenaries</title>
<script type="application/ld+json">

View File

@ -1,6 +1,6 @@
{
"name": "amerc-site",
"version": "0.85.0-fastpaint",
"version": "0.86.0-ogcard",
"private": true,
"type": "module",
"scripts": {

BIN
public/og-card.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View File

@ -10,7 +10,7 @@ import { api } from './api.js';
const Menu = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>);
const X = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>);
const RELEASE = '0.85.0-fastpaint';
const RELEASE = '0.86.0-ogcard';
const NAV = [
{ id: 'home', label: 'Tavern' },