Open Graph
Add or fix Open Graph tags so link shares on Facebook, LinkedIn, Slack, and Discord render compelling previews.
Overview
open-graph is an agent skill most often used in Launch (also Build) that implements Open Graph meta tags for rich social link previews.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill open-graphWhat is this skill?
- Covers the 4 essential tags: og:title, og:description, og:image, og:url with length and content guidelines
- Targets Facebook-originated Open Graph previews across LinkedIn, Slack, Discord, and similar surfaces
- Explicit scope boundary: use twitter-cards for X previews; title-tag and meta-description for SERP
- Optional first-use intro vs skip-to-output behavior for repeat invocations
- Cites higher click-through on properly tagged links versus bare URLs in skill positioning
- 4 essential Open Graph tags required on every shareable page
- Skill metadata version 1.1.0
- Positioning notes 2–3× more clicks versus bare URL links when OG is properly set
Adoption & trust: 812 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your links look broken or generic when shared because og:title, image, and description are missing or wrong.
Who is it for?
Indie founders publishing marketing sites, docs, or changelog pages they actively share on LinkedIn, Slack, or Discord.
Skip if: X/Twitter card markup alone, SERP title/meta rewrites without social context, or non-HTML surfaces that ignore OG.
When should I use this skill?
User mentions Open Graph, og:tags, og:title, og:image, og:description, Facebook preview, LinkedIn preview, or social share preview.
What do I get? / Deliverables
Shareable pages ship with the four core OG tags and aligned copy so social previews match the page—then use twitter-cards if you need X-specific cards.
- Complete og:title, og:description, og:image, and og:url markup for target pages
- Scope notes when to invoke twitter-cards or SERP-focused skills instead
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
OG tags affect how URLs look when distributed; Launch/seo is the canonical shelf alongside other on-page metadata skills in the same pack. Social share previews are on-page head metadata—grouped with SEO on-page work rather than paid distribution or ASO.
Where it fits
Add og:url and og:image to a new Next.js or static marketing route before merge.
Validate all four essential tags on launch pages prior to Product Hunt or LinkedIn posts.
Update og:description when repurposing a blog URL for newsletter and community shares.
How it compares
Social preview metadata skill—pair with title-tag/meta-description for Google snippets, not instead of them.
Common Questions / FAQ
Who is open-graph for?
Builders and marketers who control HTML or framework layouts and need correct og:tags before sharing URLs publicly.
When should I use open-graph?
At Launch before announcement posts, during Build when adding new public routes, and in Grow when refreshing campaign or content URLs you redistribute.
Is open-graph safe to install?
It guides static meta tag edits; review the Security Audits panel on this page and avoid embedding untrusted image URLs in og:image.
Workflow Chain
Then invoke: skill kostja94 marketing skills twitter cards
SKILL.md
READMESKILL.md - Open Graph
# SEO On-Page: Open Graph Guides implementation of Open Graph meta tags for social media previews (Facebook, LinkedIn, Slack, Discord, etc.). Pages with proper OG tags get 2–3× more clicks than bare URL links. **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Scope (Social Sharing) - **Open Graph**: Facebook-originated protocol; controls preview card when links are shared on social platforms ## The 4 Essential Tags Every shareable page requires these minimum tags: ```html <meta property="og:title" content="Your Page Title"> <meta property="og:description" content="Your description"> <meta property="og:image" content="https://yourdomain.com/image.png"> <meta property="og:url" content="https://yourdomain.com/page"> ``` | Tag | Guideline | |-----|-----------| | **og:title** | Keep under 60 chars; compelling; match page content | | **og:description** | 150–200 chars; conversion-focused | | **og:image** | Absolute URL (https://); 1200×630px recommended | | **og:url** | Canonical URL; deduplicates shares | ## Recommended Additional Tags | Tag | Purpose | |-----|---------| | **og:type** | Content type: `website`, `article`, `video`, `product` | | **og:site_name** | Website name; displayed separately from title | | **og:image:width** / **og:image:height** | Image dimensions (1200×630px) | | **og:image:alt** | Alt text for accessibility | | **og:locale** | Language/territory (e.g., `en_US`); for multilingual sites | ## Image Best Practices | Item | Guideline | |------|-----------| | **Size** | 1200×630px (1.91:1 ratio) for Facebook, LinkedIn, WhatsApp | | **Format** | JPG, PNG, WebP; under 5MB | | **URL** | Absolute URL with https://; no relative paths | | **Unique** | One unique image per page when possible | ## Common Mistakes - Using relative image URLs instead of absolute https:// - Images too small or wrong aspect ratio - Empty or placeholder values - Missing og:url (canonical) ## Implementation ### Next.js (App Router) ```tsx export const metadata = { openGraph: { title: '...', description: '...', url: 'https://example.com/page', siteName: 'Example', images: [{ url: 'https://example.com/og.jpg', width: 1200, height: 630, alt: '...' }], locale: 'en_US', type: 'website', }, }; ``` ### HTML (generic) ```html <meta property="og:title" content="Your Title"> <meta property="og:description" content="Your description"> <meta property="og:image" content="https://example.com/og.jpg"> <meta property="og:url" content="https://example.com/page"> <meta property="og:type" content="website"> <meta property="og:site_name" content="Your Site"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Alt text"> ``` ## Testing - **Facebook**: [Sharing Debugger](https://developers.facebook.com/tools/debug/) - **LinkedIn**: [Post Inspector](https://www.linkedin.com/post-inspector/) ## Related Skills - **social-share-generator**: Share buttons use OG tags for rich previews when users share; OG must be set for share buttons to show proper cards - **article-page-generator**: Use og:type `article` for article/post pages; article-specific tags (published_time, author) - **page-metadata**: Hreflang, other meta tags - **title-tag**: Title tag often mirrors og:title - **meta-description**: Meta description often mirrors og:descr