takazudo/dev-seo-ogp
skills/dev-seo-ogp/SKILL.md
Add Open Graph (OGP) and Twitter Card meta tags for social media link previews. Use when: (1) User says 'add OGP', 'og tags', 'social preview', 'link preview', (2) Setting up SEO meta tags for a new site, (3) User wants og:image or Twitter cards, (4) User mentions 'OGP', 'Open Graph', 'twitter:card', 'social sharing'.
$ install --global
skillsauthnpx skillsauth add takazudo/claude-resources dev-seo-ogpInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 8, 2026, 4:28 AM210.1s1 file scanned
SKILL.md
- name:
- dev-seo-ogp
- description:
- Add Open Graph (OGP) and Twitter Card meta tags for social media link previews. Use when: (1) User says 'add OGP', 'og tags', 'social preview', 'link preview', (2) Setting up SEO meta tags for a new site, (3) User wants og:image or Twitter cards, (4) User mentions 'OGP', 'Open Graph', 'twitter:card', 'social sharing'.
- user-invocable:
- true
- argument-hint:
- [project path or URL]
SEO: Open Graph & Twitter Card Meta Tags
Add proper OGP and Twitter Card meta tags so links display rich previews on social media, chat apps, and search results.
OG Image
Recommended Size
- 1200 x 630 pixels — universal standard for Facebook, Twitter/X, LinkedIn, Discord, Slack
- Aspect ratio: 1.91:1
- Format: PNG or JPG (PNG for logos/graphics, JPG for photos)
- File size: under 5 MB (ideally under 300 KB for fast loading)
- Place in the
public/directory (static assets)
Creating the OG Image
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.
Required Meta Tags
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 Details
| 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 |
Implementation by Framework
Astro
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).
Next.js (App Router)
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"],
},
};
Docusaurus
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" },
],
}
Same OG Image for All Pages
When using one OG image site-wide:
- Place it at
public/img/ogp.png - Reference it with an absolute URL in meta tags
og:titleandog:descriptionshould still be per-page
Validation & Testing
After adding tags, validate with:
- Facebook Sharing Debugger
- Twitter Card Validator
- LinkedIn Post Inspector
- opengraph.xyz — preview across platforms
Common Mistakes
- Relative image URLs — og:image must be absolute (https://...). Relative paths silently fail.
- Missing image dimensions — Without width/height, platforms re-fetch the image to detect size, causing slow or broken previews.
- Image too large — Keep under 5 MB. Platforms may timeout on large files.
- og:url mismatch — Must match the canonical URL. Mismatches cause duplicate content issues.
- Missing twitter:card — Without this, Twitter shows a plain link instead of a rich preview.
Related Skills
takazudo/dev-linkify-cc-resources
development
VerifiedTrustedCommunity
Link Claude Code skill names mentioned in a CodeGrid article (data/{series}/{n}.md) to the author's public claude-resources repo, pinned to the latest commit hash so links don't rot. Use when: (1) user says 'linkify cc resources', 'link the skills', 'link skill names', or invokes /dev-linkify-cc-resources; (2) editing a CodeGrid article that mentions `/commits`, `/pr-complete`, `/skill-creator` or other Claude Code skills and they should point to claude-resources. Only links skills that actually exist in the public repo; skips hypothetical examples and code blocks.
10SKILL.mdUpdated Jun 2, 2026
takazudo/opus-2nd
development
VerifiedTrustedCommunity
Second opinion from Claude Opus on a plan or approach. Use when: (1) Planning phase of /big-plan needs a higher-quality review than /codex-2nd / /gco-2nd / /gcoc-2nd, (2) User says 'opus 2nd' or 'opus opinion', (3) Wanting Anthropic's larger model to critique a plan. Spawns a general-purpose Agent with model: opus that reads the plan file and returns structured feedback. Anthropic quota — not free.
10SKILL.mdUpdated May 29, 2026
takazudo/dev-ai-based-test
tools
VerifiedTrustedCommunity
AI-based testing via subagent + a per-task test-flow skill. Use when the user wants to verify something that mechanical assertions can't fully capture — image recognition, visual size/position comparison, animation smoothness, multi-step manual flows that need AI judgment. Triggers: 'AI-based test', 'AI test', 'visual verify', 'image recognition test', 'manual operation test', 'human-eye check', 'verify visually', 'compare screenshots', 'looks the same', 'looks correct'. The skill's job is to (1) author a focused test-flow skill that captures the exact procedure + verdict criteria, then (2) dispatch a verification subagent via the Agent tool that loads BOTH the test-flow skill AND a browser-driving skill (/verify-ui primary, /headless-browser fallback) so the subagent has clear context and consistent verdicts. NEVER uses `claude -p` — subagent dispatch goes through the Agent tool exclusively.
10SKILL.mdUpdated May 29, 2026
takazudo/cleanup-resources
development
VerifiedTrustedCommunity
End-of-workflow audit of touched GitHub issues, PRs, and branches via a Sonnet subagent. Use when: (1) /big-plan, /x-as-pr, or /x-wt-teams finishes its main work and needs to verify every touched resource is in the right state (closed when done, kept when ongoing, deleted when dead), (2) User says 'cleanup resources', 'audit cleanup', or 'check what should be closed', (3) A long workflow ends and the manager wants a structured paper trail of what it closed/kept/deleted. Auto-execute by default — the Sonnet agent proposes, the manager (you) executes safe actions and prints a final report.
10SKILL.mdUpdated May 29, 2026