Open Graph
The Open Graph element shows how your page appears when shared on social media platforms. It renders realistic Facebook and Twitter/X card previews.
Modes
Facebook Mode
The default Facebook share card:
- Large image placeholder area at the top
- Gray footer with uppercase domain name
- Bold title and description text
- Exact Facebook card styling with flat borders and gray background
Twitter/X Mode
A Twitter card preview:
- Rounded corner card with image placeholder
- Bold title, description, and link icon with domain
- Twitter-specific typography and color scheme
- "X" badge label above the preview
Combined Mode
Side-by-side comparison of both platforms:
- "Social Share Preview" header
- Facebook preview on the left with "f" badge
- Twitter/X preview on the right with "X" badge
- Both scaled to fit side-by-side for easy comparison
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Accent Color | Color | #4285F4 | Color for highlights |
| Mode | Select | facebook | facebook, twitter, or combined |
| Title | Text | Sample title | Share card title |
| Description | Text | Sample description | Share card description |
| Domain | Text | example.com | Domain shown on cards |
Use Cases
- Social media marketing -- Preview share cards before publishing
- Content strategy -- Optimize titles and descriptions for social engagement
- Brand consistency -- Ensure share cards look professional
- A/B testing -- Compare how content appears across platforms