Iter 44: OG share image (1200×630) + summary_large_image cards everywhere

31d0eafc7fd962d4cfbe233d732072c296a0f545 · 2026-05-04 09:42:48 -0700 · SteveStudio2

Iter 42-43 added share metadata text but no og:image. Social previews on
LinkedIn / X / Slack / Discord / Facebook rendered as small summary
cards (text-only). Now full preview cards with brand image.

Image (public/og.svg → public/og.png via Playwright render):
- 1200×630 noir gradient bg
- Subtle italic 'I' watermark in deep right (4% opacity, 780px)
- Volume strip masthead: 'Volume I · Edition 2026 · Counsel & Bar'
- CB monogram top-right
- Italic-metal display 'Every California-licensed attorney, indexed.'
  ('indexed.' in italic-metal, rest in ivory)
- Lede in ink-soft: 'Drawn from the State Bar of California public roll.
  Independently audited. Methodology v1.0 published.'
- Footer strip with hairline rule:
  · 'lawyers.agentabrams.com' (italic-metal)
  · 'A DIRECTORY · NOT A REFERRAL SERVICE · NOT THE STATE BAR'
    (ink-mute caps, §6155 disambiguation in the share preview itself)

Wiring (all 4 high-traffic surfaces):
- og:image, og:image:width=1200, og:image:height=630, og:image:alt
- twitter:card upgraded summary → summary_large_image
- twitter:image points to same og.png

Deployed to prod via rsync (og.png 200KB, og.svg 1.5KB, plus updated
HTML for 3 static pages and leads.ts for dynamic routes). Verified
live: og.png 200/204782 bytes; 4-5 og:image meta tags per surface.

Brand language now travels with every shared link — including the
§6155 'NOT THE STATE BAR' disambiguation, baked into the image itself
in case a regulator screenshots a social preview.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M public/audit.html
M public/index.html
M public/methodology.html
A public/og.png
A public/og.svg
M src/server/leads.ts

Diff

commit 31d0eafc7fd962d4cfbe233d732072c296a0f545
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Mon May 4 09:42:48 2026 -0700

    Iter 44: OG share image (1200×630) + summary_large_image cards everywhere
    
    Iter 42-43 added share metadata text but no og:image. Social previews on
    LinkedIn / X / Slack / Discord / Facebook rendered as small summary
    cards (text-only). Now full preview cards with brand image.
    
    Image (public/og.svg → public/og.png via Playwright render):
    - 1200×630 noir gradient bg
    - Subtle italic 'I' watermark in deep right (4% opacity, 780px)
    - Volume strip masthead: 'Volume I · Edition 2026 · Counsel & Bar'
    - CB monogram top-right
    - Italic-metal display 'Every California-licensed attorney, indexed.'
      ('indexed.' in italic-metal, rest in ivory)
    - Lede in ink-soft: 'Drawn from the State Bar of California public roll.
      Independently audited. Methodology v1.0 published.'
    - Footer strip with hairline rule:
      · 'lawyers.agentabrams.com' (italic-metal)
      · 'A DIRECTORY · NOT A REFERRAL SERVICE · NOT THE STATE BAR'
        (ink-mute caps, §6155 disambiguation in the share preview itself)
    
    Wiring (all 4 high-traffic surfaces):
    - og:image, og:image:width=1200, og:image:height=630, og:image:alt
    - twitter:card upgraded summary → summary_large_image
    - twitter:image points to same og.png
    
    Deployed to prod via rsync (og.png 200KB, og.svg 1.5KB, plus updated
    HTML for 3 static pages and leads.ts for dynamic routes). Verified
    live: og.png 200/204782 bytes; 4-5 og:image meta tags per surface.
    
    Brand language now travels with every shared link — including the
    §6155 'NOT THE STATE BAR' disambiguation, baked into the image itself
    in case a regulator screenshots a social preview.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/audit.html       |   7 +++++-
 public/index.html       |   8 ++++++-
 public/methodology.html |   7 +++++-
 public/og.png           | Bin 0 -> 204782 bytes
 public/og.svg           |  59 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/server/leads.ts     |   7 +++++-
 6 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/public/audit.html b/public/audit.html
index 092e34c..46d836a 100644
--- a/public/audit.html
+++ b/public/audit.html
@@ -13,10 +13,15 @@
 <meta property="og:title" content="Site Audit · Counsel &amp; Bar">
 <meta property="og:description" content="1,016 California-licensed attorney sites scored against twelve published signals. Methodology v1.0 — independent of any commercial offering.">
 <meta property="og:url" content="https://lawyers.agentabrams.com/audit.html">
+<meta property="og:image" content="https://lawyers.agentabrams.com/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="Counsel &amp; Bar — site audit cohort, methodology v1.0">
 
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="Site Audit · Counsel &amp; Bar">
 <meta name="twitter:description" content="1,016 attorney sites scored. Methodology v1.0 published. Champagne-tier scoring; no traffic-light alerts next to real attorney names.">
+<meta name="twitter:image" content="https://lawyers.agentabrams.com/og.png">
 
 <script type="application/ld+json">
 {
diff --git a/public/index.html b/public/index.html
index 20f1e32..43caedb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,11 +15,17 @@
 <meta property="og:description" content="Every California-licensed attorney, indexed against the State Bar public roll. Independently audited against twelve published signals. We're a directory — not a referral service, not the State Bar.">
 <meta property="og:url" content="https://lawyers.agentabrams.com/">
 <meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://lawyers.agentabrams.com/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="Counsel &amp; Bar — every California-licensed attorney, indexed. A directory, not a referral service, not the State Bar.">
 
 <!-- Twitter / X -->
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="Counsel &amp; Bar — California attorney directory">
 <meta name="twitter:description" content="Every CA-licensed attorney, indexed. Independent audit, methodology v1.0 published. Not a referral service, not the State Bar.">
+<meta name="twitter:image" content="https://lawyers.agentabrams.com/og.png">
+<meta name="twitter:image:alt" content="Counsel &amp; Bar — every California-licensed attorney, indexed.">
 
 <!-- Structured data: Organization + WebSite -->
 <script type="application/ld+json">
diff --git a/public/methodology.html b/public/methodology.html
index c0b4590..0c47a6d 100644
--- a/public/methodology.html
+++ b/public/methodology.html
@@ -13,10 +13,15 @@
 <meta property="og:title" content="Audit methodology v1.0 · Counsel &amp; Bar">
 <meta property="og:description" content="Twelve technical and presentation signals, weighted, bounded, refresh-cadence published. What this score is and isn't, in writing.">
 <meta property="og:url" content="https://lawyers.agentabrams.com/methodology.html">
+<meta property="og:image" content="https://lawyers.agentabrams.com/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="Counsel &amp; Bar — audit methodology v1.0">
 
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="Audit methodology v1.0 · Counsel &amp; Bar">
 <meta name="twitter:description" content="Twelve published signals. Bounded scope. Independent of any commercial offering.">
+<meta name="twitter:image" content="https://lawyers.agentabrams.com/og.png">
 
 <script type="application/ld+json">
 {
diff --git a/public/og.png b/public/og.png
new file mode 100644
index 0000000..8472ed0
Binary files /dev/null and b/public/og.png differ
diff --git a/public/og.svg b/public/og.svg
new file mode 100644
index 0000000..85fd610
--- /dev/null
+++ b/public/og.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#131316"/>
+      <stop offset="60%" stop-color="#0a0a0c"/>
+      <stop offset="100%" stop-color="#050507"/>
+    </linearGradient>
+    <linearGradient id="metal" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#d4b683"/>
+      <stop offset="50%" stop-color="#b89968"/>
+      <stop offset="100%" stop-color="#8a7044"/>
+    </linearGradient>
+    <linearGradient id="rule" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="rgba(184,153,104,0)"/>
+      <stop offset="50%" stop-color="rgba(184,153,104,1)"/>
+      <stop offset="100%" stop-color="rgba(184,153,104,0)"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bg)"/>
+
+  <!-- Subtle italic-watermark "I" in the deep right -->
+  <text x="1080" y="600" font-family="Cormorant Garamond, Georgia, serif" font-style="italic" font-weight="300"
+        font-size="780" fill="#b89968" opacity="0.04" text-anchor="middle" letter-spacing="-30">I</text>
+
+  <!-- Volume strip: rule + Volume I + edition meta -->
+  <line x1="80" y1="105" x2="160" y2="105" stroke="url(#rule)" stroke-width="1"/>
+  <text x="180" y="111" font-family="Cormorant Garamond, Georgia, serif" font-style="italic" font-weight="400"
+        font-size="22" fill="#b89968" letter-spacing="0.5">Volume I</text>
+  <text x="290" y="111" font-family="Inter, system-ui, sans-serif" font-weight="500"
+        font-size="14" fill="#8b857a" letter-spacing="4" text-transform="uppercase">EDITION 2026 · COUNSEL &amp; BAR</text>
+
+  <!-- Monogram top-right -->
+  <g transform="translate(1080,75)">
+    <circle cx="20" cy="20" r="19" fill="none" stroke="url(#metal)" stroke-width="1.2"/>
+    <text x="20" y="27" font-family="Cormorant Garamond, Georgia, serif" font-weight="500" font-size="20"
+          fill="url(#metal)" text-anchor="middle">CB</text>
+  </g>
+
+  <!-- Headline: massive italic-metal display -->
+  <text x="80" y="280" font-family="Cormorant Garamond, Georgia, serif" font-weight="300"
+        font-size="100" fill="#f4f1ea" letter-spacing="-2">Every California-licensed</text>
+  <text x="80" y="385" font-family="Cormorant Garamond, Georgia, serif" font-weight="300"
+        font-size="100" fill="#f4f1ea" letter-spacing="-2">attorney, <tspan font-style="italic" font-weight="400" fill="url(#metal)">indexed.</tspan></text>
+
+  <!-- Lede: smaller ink-soft -->
+  <text x="80" y="455" font-family="Inter, system-ui, sans-serif" font-weight="300"
+        font-size="24" fill="#d8d2c5" letter-spacing="0.2">Drawn from the State Bar of California public roll.</text>
+  <text x="80" y="490" font-family="Inter, system-ui, sans-serif" font-weight="300"
+        font-size="24" fill="#d8d2c5" letter-spacing="0.2">Independently audited. Methodology v1.0 published.</text>
+
+  <!-- Bottom strip: domain + §6155 disclaimer -->
+  <line x1="80" y1="555" x2="1120" y2="555" stroke="#2a2724" stroke-width="1"/>
+  <text x="80" y="588" font-family="Cormorant Garamond, Georgia, serif" font-style="italic" font-weight="400"
+        font-size="22" fill="#b89968">lawyers.agentabrams.com</text>
+  <text x="1120" y="588" font-family="Inter, system-ui, sans-serif" font-weight="500"
+        font-size="13" fill="#8b857a" letter-spacing="3" text-anchor="end">A DIRECTORY · NOT A REFERRAL SERVICE · NOT THE STATE BAR</text>
+</svg>
diff --git a/src/server/leads.ts b/src/server/leads.ts
index 9bf8568..9a95d3e 100644
--- a/src/server/leads.ts
+++ b/src/server/leads.ts
@@ -69,10 +69,15 @@ function layout(title: string, body: string, opts: { user?: any; variant?: 'publ
 <meta property="og:title" content="${esc(title)} · Counsel &amp; Bar">
 <meta property="og:description" content="California's indexed attorney directory, drawn from the State Bar public roll. Independent. Not a referral service. Not the State Bar.">
 <meta property="og:locale" content="en_US">
+<meta property="og:image" content="https://lawyers.agentabrams.com/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="Counsel &amp; Bar — every California-licensed attorney, indexed.">
 
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="${esc(title)} · Counsel &amp; Bar">
 <meta name="twitter:description" content="California-licensed attorneys, indexed against the State Bar public roll. You choose who to call.">
+<meta name="twitter:image" content="https://lawyers.agentabrams.com/og.png">
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

← ee84e9e Iter 43: OG + JSON-LD propagated to /methodology, /audit, /f · back to Lawyer Directory Builder · Iter 45: SEO essentials — robots.txt, sitemap.xml, favicon ( 2ad78f2 →