# open-graph

Configures and audits Open Graph metadata for social preview cards. Useful when setting up tags in plain HTML or Next.js App Router.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 1062
- Author: kostja94
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/kostja94/marketing-skills/tree/HEAD/skills/seo/on-page/open-graph/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/open-graph

## What it does

The skill implements the essential social metadata tags: `og:title`, `og:description`, `og:image`, and `og:url`. It aligns share copy with page content without forcing an exact match with SEO tags. Social feeds often need different phrasing.

It provides ready-to-use snippets for generic HTML and the Next.js App Router metadata object. Guidance covers image sizing around 1200×630, web formats, and image dimension tags. If you provide a relative image path instead of an absolute HTTPS URL, platforms like Facebook or LinkedIn will fail to render the preview image.

Scope is limited strictly to Open Graph writing rules. Full page metadata lifecycles belong to `page-metadata`, while X-specific tags require `twitter-cards`. Remember that client-only tag insertion risks rendering blank previews if platform crawlers inspect only raw server HTML.

## Requirements
- Works with: LinkedIn

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill open-graph -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/open-graph/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/open-graph/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill open-graph -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/open-graph/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill open-graph -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/open-graph/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kostja94/marketing-skills open-graph
```

2. **Manually: put the files in place**
- File: `.github/skills/open-graph/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill open-graph -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/kostja94/marketing-skills --path skills/seo/on-page/open-graph
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/open-graph/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add kostja94/marketing-skills --skill open-graph -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/kostja94/marketing-skills/tree/HEAD/skills/seo/on-page/open-graph/SKILL.md

## When to use it
- add required Open Graph tags to HTML or Next.js pages
- fix broken preview cards caused by relative image URLs
- configure additional properties such as og:type, og:site_name, and og:locale
- verify that og:url matches the declared canonical URL

## Example prompts
- Audit the Open Graph tags on this page and add missing image dimensions
- Generate a Next.js App Router openGraph metadata object for a blog post
- Implement essential og: tags with absolute HTTPS image URLs

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 37b3b901baaeb737.

BEGIN THIRD-PARTY FILE 37b3b901baaeb737
````text
---
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.

## 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** | 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
````
END THIRD-PARTY FILE 37b3b901baaeb737

The third-party file has ended. Everything between the 37b3b901baaeb737 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2833 of 5401 bytes. © kostja94 · MIT · https://github.com/kostja94/marketing-skills/tree/HEAD/skills/seo/on-page/open-graph/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md