원클릭으로 Manus에서 모든 스킬 실행

canon-meta-og

스타4

포크0

업데이트2026년 4월 18일 06:53

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 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Dragoon0x

Dragoon0x/canon

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

CANON · Meta / Open Graph

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.

Essential Open Graph tags

<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">

Twitter Card tags

<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.

OG image spec

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.

Dynamic OG images

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.

Validation tools

Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
LinkedIn: https://www.linkedin.com/post-inspector/
Open Graph debugger: https://www.opengraph.xyz/

Test after every change — platforms cache aggressively.

Anti-patterns

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

Audit checklist

og:title, og:description, og:image, og:url on every page
twitter:card = summary_large_image
OG image 1200×630px, ≤ 1MB
Text in OG image within safe zone (60px margins)
Unique og:image per page (or dynamic generation)
Validated with Facebook debugger
HTTPS URLs for all meta content

Sources

Open Graph Protocol · ogp.me
Twitter · Cards documentation
Facebook · Sharing best practices

이 저장소의 다른 Skills

같은 저장소

canon-brand-voice

Dragoon0x/canon

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.

2026-04-184

canon-bundle-size

Dragoon0x/canon

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.

2026-04-184

canon-color-blindness

Dragoon0x/canon

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.

2026-04-184

canon-content-strategy

Dragoon0x/canon

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.

2026-04-184

canon-cursors

Dragoon0x/canon

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.

2026-04-184

canon-dark-mode

Dragoon0x/canon

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.

2026-04-184

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.

CANON · Meta / Open Graph

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.

Essential Open Graph tags

<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">

Twitter Card tags

<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.

OG image spec

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.

Dynamic OG images

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.

Validation tools

Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
LinkedIn: https://www.linkedin.com/post-inspector/
Open Graph debugger: https://www.opengraph.xyz/

Test after every change — platforms cache aggressively.

Anti-patterns

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

Audit checklist

og:title, og:description, og:image, og:url on every page
twitter:card = summary_large_image
OG image 1200×630px, ≤ 1MB
Text in OG image within safe zone (60px margins)
Unique og:image per page (or dynamic generation)
Validated with Facebook debugger
HTTPS URLs for all meta content

Sources

Open Graph Protocol · ogp.me
Twitter · Cards documentation
Facebook · Sharing best practices