菜单
Use when implementing Open Graph tags, Twitter Card tags, and social sharing metadata — the tags that control how URLs appear when shared on social media, messaging apps, and link previews. Trigger when the user mentions OG tags, Open Graph, Twitter card, social sharing, link preview, or og:image.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.
Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.
Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.
Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.
Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.
Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.
| name | canon-meta-og |
| description | Use when implementing Open Graph tags, Twitter Card tags, and social sharing metadata — the tags that control how URLs appear when shared on social media, messaging apps, and link previews. Trigger when the user mentions OG tags, Open Graph, Twitter card, social sharing, link preview, or og:image. |
When someone shares your URL on Slack, Twitter, LinkedIn, iMessage, or WhatsApp, these tags control what they see. Without them, the preview is a bare URL or a random scraped snippet.
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Concise summary of the page.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Concise summary.">
<meta name="twitter:image" content="https://example.com/og-image.png">
summary_large_image shows a large preview. summary shows a small thumbnail. Large image gets more clicks.
| Property | Value |
|---|---|
| Recommended size | 1200×630px |
| Minimum size | 600×315px |
| Format | PNG or JPEG (PNG for text-heavy, JPEG for photos) |
| File size | ≤ 1MB (smaller is better for fast preview) |
| Text safety zone | Keep text 60px from edges (platforms crop differently) |
Every page should have a unique og:image. Fallback to a site-wide default if page-specific isn't available.
For pages with user-generated content (blog posts, profiles), generate OG images dynamically:
https://example.com/api/og?title=My+Post&author=Deep
Use @vercel/og, Satori, or Puppeteer to render HTML → image server-side.
https://developers.facebook.com/tools/debug/https://cards-dev.twitter.com/validatorhttps://www.linkedin.com/post-inspector/https://www.opengraph.xyz/Test after every change — platforms cache aggressively.
| Anti-pattern | Why it fails |
|---|---|
| No og:image | Preview is text-only, low engagement |
| Same og:image for every page | Every share looks identical |
| og:image with text cut off at edges | Platforms crop differently |
| og:title longer than 60 characters | Truncated in most previews |
| HTTP (not HTTPS) og:image URL | Some platforms reject it |
| Missing og:url (or wrong URL) | Canonical confusion |
og:title, og:description, og:image, og:url on every pagetwitter:card = summary_large_image