Open Graph & Social Previews

Free — GPL coresize Mplanned, not built

Generated from docs/plan/core/open-graph-social-previews/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Open Graph & Social Previews is a core feature that auto-generates Open Graph and Twitter Card meta tags for products and pages. It ensures social media previews display attractive product images, prices, and descriptions.

The problem

When merchants share products on social media, previews show placeholder text instead of attractive images and descriptions; clicks drop 60%.

What it does

• Render og:title, og:description, og:image, og:url, og:type for products and pages
• Render og:price and og:currency for products (dynamic price), twitter:card, twitter:title, twitter:description, twitter:image tags
• Support custom og:image per product (override auto-selected) and custom og:description
• Auto-select best product image if not specified, fallback to site logo/default image
• Admin dashboard: preview social cards (Facebook/Twitter appearance)
• Configurable default image for fallback, support for video og:video tag

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• Does NOT support Pinterest Rich Pins (reason: Pinterest-specific format, separate feature)
• Does NOT track social shares or engagement (reason: requires social platform APIs)
• Does NOT generate dynamic og:images (reason: image generation service required)
• Does NOT support Apple News format (reason: specific to Apple News+, low priority)

Data model

New fields on products: og_description (string, optional), og_image_id (foreign key to image, optional). Same fields on pages. og:price and og:currency derived from product.price and shop.currency.

API

• GET /api/products/:id/og-preview
• PATCH /api/products/:id {og_description, og_image_id}
• GET /api/og-preview/render?url=/products/shirt

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Product edit form with og:description field and image picker; social preview panel showing live preview on Facebook, Twitter, LinkedIn; fallback image upload; reset button to revert to auto-generated.

The seam — why this is core

Core owns: og tag storage, rendering, social preview UI, image selection logic.

Core owns the interface + honest og: tag generator; social previews are content metadata, not a credential or support commitment.

Dependencies

• Assumes product image API exists
• Assumes product price is accessible
• Assumes render engine can inject og meta tags

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• og:title is set to product name or custom meta_title if available
• og:description is custom og_description if provided, else auto-generated
• og:image is custom og_image if provided, else first product image
• og:image fallback is site logo if product has no images
• og:price is product.price in minor units, og:currency matches shop.currency
• og:type is ‘product’ for products, ‘article’ for blogs, ‘website’ for pages
• Twitter card type is ‘summary_large_image’ for products with images
• Social preview panel renders og tags identically to Facebook/Twitter display
• og tags rendered for all products, even archived ones
• All storage drivers generate identical og tags

Risks

Image selection: if og_image_id points to deleted image, og:image breaks. Price display: if og:price doesn’t include currency, social preview looks incomplete. Schema migration adding og_description and og_image_id.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.