Agent skill

Open Graph

by kostja94 in kostja94/marketing-skills

When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or…

MITAuto-check passedMedia & Creative

Install Open Graph

skills CLI

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install kostja94/marketing-skills open-graph --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/kostja94/marketing-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/seo/on-page/open-graph .claude/skills/open-graph && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "open-graph" agent skill from https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph into .claude/skills/open-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "open-graph", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add kostja94/marketing-skills --skill open-graph -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install kostja94/marketing-skills open-graph --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kostja94/marketing-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/seo/on-page/open-graph .agents/skills/open-graph && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "open-graph" agent skill from https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph into .agents/skills/open-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "open-graph", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add kostja94/marketing-skills --skill open-graph -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install kostja94/marketing-skills open-graph --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kostja94/marketing-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/seo/on-page/open-graph .cursor/skills/open-graph && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "open-graph" agent skill from https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph into .cursor/skills/open-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "open-graph", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/kostja94/marketing-skills.git --path skills/seo/on-page/open-graph

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add kostja94/marketing-skills --skill open-graph -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install kostja94/marketing-skills open-graph --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kostja94/marketing-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/seo/on-page/open-graph .gemini/skills/open-graph && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "open-graph" agent skill from https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph into .gemini/skills/open-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "open-graph", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install kostja94/marketing-skills open-graph

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add kostja94/marketing-skills --skill open-graph -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/kostja94/marketing-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/seo/on-page/open-graph .github/skills/open-graph && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "open-graph" agent skill from https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph into .github/skills/open-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "open-graph", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add kostja94/marketing-skills --skill open-graph -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install kostja94/marketing-skills open-graph --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/kostja94/marketing-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/seo/on-page/open-graph .opencode/skills/open-graph && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "open-graph" agent skill from https://github.com/kostja94/marketing-skills/tree/main/skills/seo/on-page/open-graph into .opencode/skills/open-graph/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "open-graph", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: open-graph
GitHub stars: 1k
Token cost: ~1.3k tokens
SKILL.md length: 486 words
Files: 1
Skills in repo: 102
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or…

Optimize Open Graph metadata for social sharing
SKILL.md covers Scope (Social Sharing), The 4 Essential Tags, Recommended Additional Tags and Image Best Practices, plus 5 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Including og:title

What it does

Open Graph is an agent skill from kostja94/marketing-skills. When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or social share previews. For a full metadata lifecycle use page-metadata; for X-specific previews use twitter-cards.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Social media graphics. It works with LinkedIn and X (Twitter). The repository describes itself as: Agent Skills for Marketing — SEO, Social, Influencer & More. 160+ open-source skills for SEO, content, 40+ page types, paid ads, channels, and strategies. Add project context… The licence is MIT.

When your agent uses it

Optimize Open Graph metadata for social sharing
Including og:title
Facebook previews
LinkedIn previews

Example prompts

“/open-graph”

What it can do on your machine

Read from SKILL.md and the folder at commit 8dd89c5. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are html and typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- developers.facebook.com
- linkedin.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Open Graph loads about 1.3k tokens when it runs. Until then it costs about 80 tokens; SKILL.md has 486 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~80
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from kostja94/marketing-skills at commit 8dd89c5, republished under its MIT licence (© kostja94). 486 words, ~1,349 tokens.

Download SKILL.mdSave it as .claude/skills/open-graph/SKILL.md (or your agent's skills folder).

name: open-graph
description: When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or social share previews. For a full metadata lifecycle use page-metadata; for X-specific previews use twitter-cards.
metadata.version: 2.0.0

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.

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	Concise and useful in a sharing context; same page identity as SEO title, not necessarily identical text
og:description	Accurate social summary; may differ from the meta description without changing the promise
og:image	Absolute HTTPS URL; representative of the page; include dimensions when known
og:url	Stable public page identity; normally the same URL declared canonical

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	Use a high-resolution image and verify the target platforms' current requirements; 1200×630 is a common cross-platform starting point
Format	Use a platform-supported web image format and verify the deployed response
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)
Reusing a generic logo or unrelated image when a representative page image is available
Copying SEO title/description mechanically when the share context needs different wording

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

Show full SKILL.md (195 more words)Show less

Testing

Facebook: Sharing Debugger
LinkedIn: Post Inspector

Preview services cache metadata. Test the deployed absolute URL and refresh the cache when supported. Also inspect the raw initial HTML; a client-only tag insertion may not be available to every scraper.

Consistency boundary

Open Graph and SEO metadata may use different copy because search and social feeds are different contexts. They must still identify the same page, describe the same product or content, and avoid unsupported claims. Do not require string equality.

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: Full lifecycle, source-of-truth implementation, and production validation
title-tag, meta-description: Search copy; may differ while preserving page identity
twitter-cards: Twitter uses OG as fallback; add Twitter-specific tags for best results
canonical-tag: og:url should match canonical URL
og-image-generator: Programmatic OG image generation — 6 visual styles (Terminal/CLI, Magazine Editorial, Swiss Minimal, Pixel Retro, Brutalist, Newspaper), Satori+resvg, Puppeteer, AI image generation tools, and Agent-Native content-aware workflow. This skill covers how to SET the image tag; og-image-generator covers how to CREATE the image.

Files

Just SKILL.md in skills/seo/on-page/open-graph of kostja94/marketing-skills.

Open the folder on GitHubat commit 8dd89c5

Compare with similar skills

Open Graph next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Open Graph compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Open Graph this skillkostja94/marketing-skills	1k	—	~1.3k	Automated safety check: Pass	MIT	2 days ago
Web Asset Generatoralonw0/web-asset-generator	512	1 repos	~6.6k	Automated safety check: Pass	MIT	8 mo ago
Generate Brand Assetscrafter-station/skills	112	—	~1.3k	Automated safety check: Pass	MIT	1 mo ago
Social Card GenBrianRWagner/ai-marketing-claude-code-skills	440	—	~1.9k	Automated safety check: Pass	None	6 mo ago
Social Previewthatrebeccarae/claude-marketing	162	—	~2.1k	Automated safety check: Pass	MIT	4 mo ago
Ccfddl X Postsccfddl/ccf-deadlines	9.4k	—	~5.6k	Automated safety check: Pass	MIT	today

Similar skills

Web Asset Generator
alonw0/web-asset-generator
Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn.
512 GitHub starsUsed in 1 repo~6.6k tokens
Media & CreativeAuto-check passed
Generate Brand Assets
crafter-station/skills
Generate OG images and favicon based on project branding. An agent skill from crafter-station/skills.
112 GitHub stars~1.3k tokensUpdated 1 mo ago
Media & CreativeAuto-check passed
Social Card Gen
BrianRWagner/ai-marketing-claude-code-skills
Generate platform-specific social post variants (Twitter/X, LinkedIn, Reddit) from one source input.
440 GitHub stars~1.9k tokensUpdated 6 mo ago
AI & LLM EngineeringAuto-check passed
Social Preview
thatrebeccarae/claude-marketing
Generate Open Graph social preview images (1280x640) for GitHub repositories.
162 GitHub stars~2.1k tokensUpdated 4 mo ago
Marketing & SEOAuto-check passed
Ccfddl X Posts
ccfddl/ccf-deadlines
Prepare and, with a verified authenticated publishing route and authorization, publish daily conference-deadline countdown posts for @ccfddl on X/Twitter.
9.4k GitHub stars~5.6k tokensUpdated today
Media & CreativeAuto-check passed
Banner Creator
ReScienceLab/opc-skills
Create banners using AI image generation. An agent skill from ReScienceLab/opc-skills.
1.8k GitHub stars~1.3k tokensUpdated yesterday
Media & CreativeAuto-check passed

Questions about Open Graph

What does Open Graph do?

When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or…. Open Graph is an agent skill from kostja94/marketing-skills. When the user wants to add, audit, implement, or optimize Open Graph metadata for social sharing, including og:title, og:description, og:image, og:url, Facebook previews, LinkedIn previews, or social share previews.

When should I use Open Graph?

Open Graph fits situations like: optimize Open Graph metadata for social sharing; including og:title; facebook previews; linkedIn previews.

How do I install Open Graph in Claude Code?

Run `npx skills add kostja94/marketing-skills --skill open-graph -a claude-code`. Or copy the skill folder (skills/seo/on-page/open-graph in kostja94/marketing-skills) into .claude/skills/open-graph in your project. Claude Code loads it when a task matches its description.

How do I install Open Graph in Codex?

Run `npx skills add kostja94/marketing-skills --skill open-graph -a codex`. Or copy the skill folder (skills/seo/on-page/open-graph in kostja94/marketing-skills) into .agents/skills/open-graph in your project. Codex loads it when a task matches its description.

Can I use Open Graph in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kostja94/marketing-skills --skill open-graph -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/open-graph, .gemini/skills/open-graph, .github/skills/open-graph and .opencode/skills/open-graph in your project.

What does Open Graph need to run?

SKILL.md names no scripts, command-line tools or credentials: Open Graph is instructions for the agent only.

Does Open Graph access the network?

SKILL.md names 2 domains. As links in the text: developers.facebook.com and linkedin.com. This is read from the text; nothing was executed.

Is Open Graph safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Open Graph use?

Open Graph is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Open Graph use?

About 1.3k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Open Graph?

Skills that share tags, products or a category with Open Graph: Web Asset Generator (alonw0/web-asset-generator, 512 stars), Generate Brand Assets (crafter-station/skills, 112 stars), Social Card Gen (BrianRWagner/ai-marketing-claude-code-skills, 440 stars) and Social Preview (thatrebeccarae/claude-marketing, 162 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Open Graph?

kostja94 (a GitHub user) maintains it in kostja94/marketing-skills, which has 1,019 GitHub stars. The repository holds 102 skills in this directory. The repository was last updated on October 6, 2026.

Source: kostja94/marketing-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Open Graph

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

SEO On-Page: Open Graph

Scope (Social Sharing)

The 4 Essential Tags

Recommended Additional Tags

Image Best Practices

Common Mistakes

Implementation

Next.js (App Router)

HTML (generic)

Testing

Consistency boundary

Related Skills

Files

Compare with similar skills

Similar skills

More from kostja94/marketing-skills

Related

Questions about Open Graph