Back to publishing

Social Sharing

Overview

When someone shares an aDNA.aDNA page on social media, a branded preview image and description appear automatically. This document describes the OG (Open Graph) image system, section-aware selection logic, and how to configure social previews for the vault and its GitHub repository.

OG Image System

Five branded OG images (1200x630px) cover the site’s content sections. Each uses the aDNA teal gradient palette with decorative DNA helix motifs and section-specific titles.

ImageFileSections Served
Defaultsite/public/images/og-default.pngHomepage, get-started, changelog, fallback
Learnsite/public/images/og-learn.pngConcepts, tutorials, comparisons (/learn/*)
Patternssite/public/images/og-patterns.pngPattern library (/patterns/*)
Referencesite/public/images/og-reference.pngSpecification, glossary (/reference/*, /glossary/*)
Communitysite/public/images/og-community.pngCommunity roles, adopter personas (/community/*, /adopters/*)

Generation

Images are generated from SVG templates using @resvg/resvg-js:

node site/scripts/generate-og-images.mjs

The script renders SVG with the aDNA brand gradient (#0A4F52 to #071E1F), accent circles, and section-specific text. Output lands in site/public/images/. Re-run after changing branding.

Section-Aware Selection

The SEOHead.astro component selects the correct OG image based on the current page path:

Path PrefixOG Image
/learn/og-learn.png
/patterns/og-patterns.png
/reference/, /glossary/og-reference.png
/community/, /adopters/og-community.png
Everything elseog-default.png

Every page also gets an auto-generated <meta name="description"> from the first paragraph of its content (truncated to 155 characters by the transform pipeline).

GitHub Repository Preview

The repository at github.com/LatticeProtocol/aDNA.aDNA can display a social preview image when linked from external sites. Upload og-default.png at:

Repository Settings > General > Social preview > Edit > Upload an image

This is a manual one-time step.

Sharing Checklist

When publishing new content to the site:

  • Verify the page’s URL falls under a recognized path prefix for OG selection
  • Check the auto-generated meta description is meaningful (first paragraph matters)
  • Test social preview with a link validator (e.g., OpenGraph.xyz or Twitter Card Validator)
  • For new site sections, add a path rule to SEOHead.astro and consider a new OG image

Self-Reference

This OG system was built during Phase 4.5 (M23) and demonstrates a practical application of the Dual Audience principle: developers see the implementation details (SVG templates, path-based selection, component architecture), while non-developers see branded previews that build trust before they even visit the site. The OG images themselves carry the aDNA visual identity into every social platform where a page link appears.