Social Media Sharing Configuration

Configure OpenGraph and Twitter Card metadata for optimal link previews across social platforms.

Problem

When links are shared on Twitter, LinkedIn, Slack, Discord, etc., no custom preview appears—no featured image, generic description, platform defaults to scraping whatever it finds.

Entry Points

Two distinct scenarios require metadata:

  1. Main Site (index.qmd, about.qmd) — site-level branding when sharing homepage
  2. Individual Posts (posts/*/index.qmd) — post-specific title, description, featured image

Solution

Quarto has built-in OpenGraph support. We configure it at site level in _quarto.yml and override per-post via frontmatter.

Architecture

_quarto.yml
├── website.open-graph: true        # Enable OG generation
├── website.twitter-card: true      # Enable Twitter cards
├── website.image: images/site-preview.png  # Default fallback
└── website.site-url: https://linearcontent.com

posts/*/index.qmd
├── image: preview.png              # Post-specific featured image
├── title: "..."                    # Already defined
└── description: "..."              # Already defined

Generated Output

Quarto auto-generates these meta tags when configured:

<!-- OpenGraph -->
<meta property="og:title" content="Post Title">
<meta property="og:description" content="Post description">
<meta property="og:image" content="https://linearcontent.com/posts/.../preview.png">
<meta property="og:url" content="https://linearcontent.com/posts/.../index.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="linear content">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Post Title">
<meta name="twitter:description" content="Post description">
<meta name="twitter:image" content="https://linearcontent.com/posts/.../preview.png">
<meta name="twitter:creator" content="@masta_g3">

Implementation

Phase 1: Create Default Site Image

Create fallback image first so the config doesn’t reference a missing file.

Specs: - Size: 1200×630px (optimal for Twitter/LinkedIn/Facebook) - Format: PNG or JPG - Content: Simple branding (site name, tagline, monospace aesthetic)

Files to add: - [ ] images/site-preview.png — default social preview image

Phase 2: Site-Level Configuration

Update _quarto.yml to enable OpenGraph and Twitter Cards:

website:
  title: "linear content"
  description: "thoughts on language, numeric computations, and other things."
  site-url: https://linearcontent.com

  # Social sharing
  open-graph: true
  twitter-card: true

  # Default image for pages without specific image
  image: images/site-preview.png

Files to modify: - [ ] _quarto.yml — add site-url, open-graph, twitter-card, image

Verification:

quarto render index.qmd
grep -E 'property="og:|name="twitter:' _site/index.html

Phase 3: Post-Level Images

Add image: field to post frontmatter pointing to a featured image.

Example for existing post:

# posts/20260103_llm-resampling/index.qmd
---
title: "Think Harder, Sample Once"
description: "Comparing single-shot LLM paper selection against multi-run consensus voting."
date: "2025-01-03"
categories: [nlp]
image: preview.png  # <-- Add this
resources:
  - "viz/models.json"
  - "viz/data/*"
---

Image generation options: 1. Screenshot of the viz at interesting state 2. Auto-generated from post title/description 3. Custom designed per-post

Files to modify: - [ ] posts/20260103_llm-resampling/index.qmd — add image: field - [ ] Future posts — include image: in template/workflow

File Changes Summary

File Change
images/site-preview.png Create default social image (1200×630)
_quarto.yml Add site-url, open-graph, twitter-card, image
posts/*/index.qmd Add image: preview.png to frontmatter

Minimal _quarto.yml Diff

website:
  title: "linear content"
  description: "thoughts on language, numeric computations, and other things."
+ site-url: https://linearcontent.com
+ open-graph: true
+ twitter-card: true
+ image: images/site-preview.png
  navbar:
    # ... existing config

Testing

After implementation:

  1. Build and check meta tags:

    quarto render
grep -A2 "og:image" _site/index.html
grep -A2 "og:image" _site/posts/20260103_llm-resampling/index.html

  2. Validate with online tools:

  3. Expected result:

    • Homepage shares with site-preview.png
    • Posts share with their specific preview.png

Image Generation (Deferred)

Images can be created later. Options:

  1. Manual: Take viz screenshots, design in Figma/Canva
  2. Automated: Script to generate from post metadata
  3. Hybrid: Template overlay on viz screenshots

Recommend starting with manual screenshots of viz posts at interesting states—quick, authentic, low effort.

Checklist