Stats
Actions
Tags
From claude-resources
Adds Open Graph (OGP) and Twitter Card meta tags for social media link previews. Provides tag reference, image sizing guidelines, and required/optional tag documentation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-resources:dev-seo-ogp [project path or URL][project path or URL]The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Add proper OGP and Twitter Card meta tags so links display rich previews on social media, chat apps, and search results.
Add proper OGP and Twitter Card meta tags so links display rich previews on social media, chat apps, and search results.
public/ directory (static assets)If the user provides a screenshot or design:
# Resize to OGP dimensions using sharp-cli
npx --yes sharp-cli -i source.png -o public/img/ogp.png resize 1200 630 --fit cover
If no image tool is available, use the screenshot as-is if it's close to 1200x630.
These are the minimum tags every page needs:
<!-- Open Graph -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:image" content="https://example.com/img/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:site_name" content="Site Name" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/img/ogp.png" />
| Tag | Required | Notes |
|---|---|---|
og:title | Yes | Page title, 60-70 chars max for best display |
og:description | Yes | 155-200 chars. Falls back to <meta name="description"> on some platforms |
og:type | Yes | website for homepage, article for content pages |
og:url | Yes | Canonical URL of the page. Must be absolute |
og:image | Yes | Must be absolute URL (https://...). Relative paths fail on most platforms |
og:image:width | Recommended | Helps platforms render without re-fetching the image |
og:image:height | Recommended | Same as above |
og:image:alt | Recommended | Accessibility. Required if og:image is set |
og:site_name | Optional | Brand name shown above the title on some platforms |
og:locale | Optional | e.g., en_US, ja_JP |
twitter:card | Yes | summary_large_image for full-width preview, summary for small square |
twitter:title | Optional | Falls back to og:title |
twitter:description | Optional | Falls back to og:description |
twitter:image | Optional | Falls back to og:image |
twitter:site | Optional | @username of the site's Twitter account |
Edit the main layout file (usually src/layouts/*.astro). Add tags in <head>:
---
// In the frontmatter, construct the OG image URL
const ogImageUrl = new URL(withBase("/img/ogp.png"), Astro.site || Astro.url).href;
const canonicalUrl = new URL(Astro.url.pathname, Astro.site || Astro.url).href;
---
<head>
<!-- existing tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:image" content={ogImageUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content={description || siteName} />
<meta property="og:site_name" content={siteName} />
<meta name="twitter:card" content="summary_large_image" />
</head>
For Astro, set site in astro.config.mjs to enable Astro.site:
export default defineConfig({
site: "https://example.com",
});
If site is not set, fall back to Astro.url (works for relative but OG image needs absolute).
Use the metadata export or generateMetadata():
export const metadata: Metadata = {
openGraph: {
title: "Page Title",
description: "Description",
url: "https://example.com",
siteName: "Site Name",
images: [{ url: "/img/ogp.png", width: 1200, height: 630, alt: "Description" }],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Page Title",
description: "Description",
images: ["/img/ogp.png"],
},
};
Use themeConfig.metadata in docusaurus.config.js for site-wide defaults:
themeConfig: {
metadata: [
{ property: "og:image", content: "https://example.com/img/ogp.png" },
{ property: "og:image:width", content: "1200" },
{ property: "og:image:height", content: "630" },
{ name: "twitter:card", content: "summary_large_image" },
],
}
When using one OG image site-wide:
public/img/ogp.pngog:title and og:description should still be per-pageAfter adding tags, validate with:
npx claudepluginhub takazudo/claude-resources --plugin claude-resourcesGenerates Open Graph social media preview images by creating a screenshot-optimized page that matches the project's design system, captures it at 1200x630 with Playwright, and configures meta tags.
Fixes social sharing previews so URLs render as rich cards on Facebook, LinkedIn, X/Twitter, WhatsApp, Telegram, and more. Covers OG tags, Twitter cards, absolute image URLs, and debugging stale previews.
Generates favicons, PWA app icons, and Open Graph social images for Facebook/Twitter/WhatsApp/LinkedIn from logos or text. Includes image resizing, text-to-image, and HTML meta tags.