> Markdown twin of https://adna.network/how/publishing/social-sharing/
> Index: https://adna.network/llms.txt · Full corpus: https://adna.network/llms-full.txt
> State is a build-time snapshot generated 2026-08-30 (UTC); nothing here is live.

# Social Sharing — aDNA Publishing

## 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.

| Image | File | Sections Served |
|-------|------|----------------|
| Default | `site/public/images/og-default.png` | Homepage, get-started, changelog, fallback |
| Learn | `site/public/images/og-learn.png` | Concepts, tutorials, comparisons (`/learn/*`) |
| Patterns | `site/public/images/og-patterns.png` | Pattern library (`/patterns/*`) |
| Reference | `site/public/images/og-reference.png` | Specification, glossary (`/reference/*`, `/glossary/*`) |
| Community | `site/public/images/og-community.png` | Community roles, audience scenarios (`/community/*`, `/use-cases/*`) |

### Generation

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

```bash
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 Prefix | OG Image |
|-------------|----------|
| `/learn/` | og-learn.png |
| `/patterns/` | og-patterns.png |
| `/reference/`, `/glossary/` | og-reference.png |
| `/community/`, `/use-cases/` | og-community.png |
| Everything else | og-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](/how/publishing/vault-to-site)).

## GitHub Repository Preview

The repository at `github.com/aDNA-Network/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](/learn/concepts/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.

## Related

- [Vault-to-Site Pipeline](/how/publishing/vault-to-site) — the build pipeline that includes description generation
- [Content Mapping](/how/publishing/content-mapping) — the section architecture that OG selection mirrors
- [Dual Audience](/learn/concepts/dual-audience) — the principle this system demonstrates in practice
- [FAIR Envelope](/patterns/fair-envelope) — metadata best practices that extend to social metadata