Open Graph

This handles Open Graph meta tags so your links look good when shared on Facebook, LinkedIn, Slack, and similar platforms. It covers the four essential tags (title, description, image, url), walks through image specs (1200×630px is the sweet spot), and includes Next.js and raw HTML examples. The skill correctly distinguishes between Open Graph and Twitter Cards, which is helpful since many developers conflate them. One thing to note: pages with proper OG tags supposedly get 2-3x more clicks than bare URLs, though that claim feels optimistic. The testing links to Facebook's Sharing Debugger and LinkedIn's Post Inspector are genuinely useful for debugging why your preview looks broken.

skills.sh installs: 1.2K
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add kostja94/marketing-skills --skill open-graph --agent claude-code

Installs into .claude/skills of the current project.

Files

SEO On-Page: Open Graph

Owns Open Graph writing and implementation rules for social previews. page-metadata owns the full-page lifecycle and release verification.

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:

<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">

SKILL.md on GitHub