feat(social): add Open Graph and Twitter Card metadata + hero graphic

Added social media preview support to improve shareability on Facebook,
Twitter, LinkedIn, and other platforms.

Changes:
- Added social preview image (1200x630px blueprint graphic)
- Implemented Open Graph metadata (og:title, og:description, og:image, etc.)
- Implemented Twitter Card metadata (twitter:card, twitter:image, etc.)
- Added Facebook page reference (og:see_also)
- Integrated hero graphic into architecture.html (visual anchor)

Pages updated:
- index.html
- architecture.html
- values.html
- docs.html
- researcher.html
- implementer.html
- leader.html

Social metadata includes:
- Page-specific titles and descriptions
- 1200x630px social preview image
- Proper image dimensions for optimal rendering
- Facebook page link: https://www.facebook.com/agenticgovernance

Fixes: Facebook "Link unavailable" error when sharing site URLs
Impact: Improves content discoverability and shareability (Community value)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/about/values.html

@@ -5,6 +5,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Values & Principles | Tractatus AI Safety Framework</title>
   <meta name="description" content="Our core values: sovereignty, transparency, harmlessness, and community. Including our commitment to Te Tiriti o Waitangi and indigenous data sovereignty.">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/about/values.html">
+  <meta property="og:title" content="Values & Principles | Tractatus Framework">
+  <meta property="og:description" content="Sovereignty, Transparency, Harmlessness, Community - enforced through architectural principles, not training. Including Te Tiriti o Waitangi commitment and indigenous data sovereignty.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/about/values.html">
+  <meta name="twitter:title" content="Values & Principles | Tractatus Framework">
+  <meta name="twitter:description" content="Sovereignty, Transparency, Harmlessness, Community - enforced through architectural principles, not training. Including Te Tiriti o Waitangi commitment and indigenous data sovereignty.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
   <link rel="stylesheet" href="/css/fonts.css?v=0.1.2.1761600551809">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1761600551809">
   <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1761600551809">

public/architecture.html

@@ -5,6 +5,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>System Architecture | Tractatus AI Safety Framework</title>
   <meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/architecture.html">
+  <meta property="og:title" content="Five Architectural Principles for AI Safety | Tractatus">
+  <meta property="og:description" content="Governance woven into deployment architecture. Deep Interlock, Structure-Preserving, Gradients, Living Process, Not-Separateness - adapted from Christopher Alexander's pattern languages.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/architecture.html">
+  <meta name="twitter:title" content="Five Architectural Principles for AI Safety | Tractatus">
+  <meta name="twitter:description" content="Governance woven into deployment architecture. Deep Interlock, Structure-Preserving, Gradients, Living Process, Not-Separateness - adapted from Christopher Alexander's pattern languages.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
+
   <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
   <link rel="stylesheet" href="/css/fonts.css?v=0.1.0.1761283486841">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761283486841">
@@ -78,6 +97,14 @@
             Read Documentation
           </a>
         </div>
+
+        <!-- Hero Graphic: Architectural Blueprint -->
+        <div class="mt-12 max-w-4xl mx-auto">
+          <img src="/images/social-preview.png"
+               alt="Tractatus Framework architectural diagram showing human agency at the center with interconnected governance services forming a structural network"
+               class="rounded-lg shadow-2xl border-2 border-blue-300/30"
+               loading="lazy">
+        </div>
       </div>
     </div>
   </section>

public/docs.html

@@ -8,6 +8,24 @@
   <meta http-equiv="Expires" content="0">
   <title>Framework Documentation | Tractatus AI Safety</title>
   <meta name="description" content="Comprehensive documentation for the Tractatus AI Safety Framework - external governance services for Claude Code and agentic AI systems. Learn about instruction persistence, boundary enforcement, and pluralistic deliberation.">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/docs.html">
+  <meta property="og:title" content="Documentation | Tractatus Framework">
+  <meta property="og:description" content="Implementation guides, API reference, and operational examples of architectural AI governance constraints.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/docs.html">
+  <meta name="twitter:title" content="Documentation | Tractatus Framework">
+  <meta name="twitter:description" content="Implementation guides, API reference, and operational examples of architectural AI governance constraints.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
   <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
 
   <!-- PWA Manifest -->

public/implementer.html

@@ -6,6 +6,24 @@
   <title>Framework Implementation Guide | Tractatus</title>
   <meta name="description" content="Technical documentation for integrating Tractatus framework: architecture, API reference, and code examples from production implementation.">
 
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/implementer.html">
+  <meta property="og:title" content="For Implementers | Tractatus Framework">
+  <meta property="og:description" content="Implementation guide for integrating Tractatus governance constraints into AI agent deployments.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/implementer.html">
+  <meta name="twitter:title" content="For Implementers | Tractatus Framework">
+  <meta name="twitter:description" content="Implementation guide for integrating Tractatus governance constraints into AI agent deployments.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
+
   <link rel="manifest" href="/manifest.json">
   <meta name="theme-color" content="#3b82f6">
   <link rel="icon" type="image/svg+xml" href="/favicon-new.svg">

public/index.html

@@ -6,6 +6,24 @@
   <title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
   <meta name="description" content="Production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, enforcement.">
 
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/">
+  <meta property="og:title" content="Tractatus AI Safety Framework">
+  <meta property="og:description" content="Architectural constraints for human agency. Five principles from living systems thinking enforced structurally, not aspirationally.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/">
+  <meta name="twitter:title" content="Tractatus AI Safety Framework">
+  <meta name="twitter:description" content="Architectural constraints for human agency. Five principles from living systems thinking enforced structurally, not aspirationally.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
+
   <!-- PWA Manifest -->
   <link rel="manifest" href="/manifest.json">
 

public/leader.html

@@ -6,6 +6,24 @@
   <title>For Decision-Makers | Tractatus AI Safety Framework</title>
   <meta name="description" content="Structural AI governance for organisations deploying LLM systems at scale. Research framework addressing architectural gaps in AI safety.">
 
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/leader.html">
+  <meta property="og:title" content="For Leaders | Tractatus Framework">
+  <meta property="og:description" content="Strategic overview of architectural AI governance for organizational decision-makers.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/leader.html">
+  <meta name="twitter:title" content="For Leaders | Tractatus Framework">
+  <meta name="twitter:description" content="Strategic overview of architectural AI governance for organizational decision-makers.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
+
   <!-- PWA Manifest -->
   <link rel="manifest" href="/manifest.json">
 

public/researcher.html

@@ -6,6 +6,24 @@
   <title>For Researchers | Tractatus AI Safety Framework</title>
   <meta name="description" content="Research foundations, empirical observations, and theoretical basis for architectural approaches to AI governance. Early-stage framework exploring structural constraints on LLM systems.">
 
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agenticgovernance.digital/researcher.html">
+  <meta property="og:title" content="For Researchers | Tractatus Framework">
+  <meta property="og:description" content="Research-oriented view of AI governance architecture: operational metrics, audit logs, and architectural principles from production use.">
+  <meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:site_name" content="Tractatus Framework">
+  <meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://agenticgovernance.digital/researcher.html">
+  <meta name="twitter:title" content="For Researchers | Tractatus Framework">
+  <meta name="twitter:description" content="Research-oriented view of AI governance architecture: operational metrics, audit logs, and architectural principles from production use.">
+  <meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
+
   <!-- PWA Manifest -->
   <link rel="manifest" href="/manifest.json">