open-graph
When the user wants to add or optimize Open Graph metadata for social sharing. Also use when the user mentions "Open Graph," "og:tags," "og:title," "og:image," "og:description," "Facebook preview," "LinkedIn preview," or "social share preview." For X (Twitter) link previews, use twitter-cards. For SERP title/description, use title-tag and meta-description.
npx skills add kostja94/marketing-skills --skill open-graph --agent cursor
Same command for any agent — swap --agent for claude-code, codex, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Scope (Social Sharing)
- The 4 Essential Tags
- Recommended Additional Tags
- Image Best Practices
- Common Mistakes
- Implementation
- Next.js (App Router)
- HTML (generic)
- Testing
- Related Skills
What does the open-graph skill do?
When the user wants to add or optimize Open Graph metadata for social sharing. Also use when the user mentions "Open Graph," "og:tags," "og:title," "og:image," "og:description," "Facebook preview," "LinkedIn preview," or "social share preview." For X (Twitter) link previews, use twitter-cards. For SERP title/description, use title-tag and meta-description.
How do I install it?
Run `npx skills add kostja94/marketing-skills --skill open-graph --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From kostja94/marketing-skills, a repository with 848 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.