open-graphWhen 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.
Independent GitHub snapshot · Automated classification · Original documentation governs
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.
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">
| 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 |
| 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 |
| 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 |
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',
},
};
<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">
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.
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.
article for article/post pages; article-specific tags (published_time, author)