Social Media Agent Skill
Open Graph meta tags, Twitter cards, share buttons, social embed widgets, and social API patterns.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Open Graph meta tags, Twitter cards, share buttons, social embed widgets, and social API patterns.
homepage: https://yepapi.com/skills/social-media
metadata:
tags: [social, opengraph, twitter, sharing]
---
# Social Media
## Rules
- Open Graph tags on every page: `og:title`, `og:description`, `og:image` (1200x630px), `og:url`, `og:type`
- Twitter Card tags: `twitter:card` (summary_large_image), `twitter:title`, `twitter:description`, `twitter:image`
- Canonical URL in `og:url` — always absolute, never relative
- OG image: 1200x630px, <1MB, include text overlay for context — generate dynamically with `@vercel/og` or Satori
- Share buttons: native Web Share API first (`navigator.share`), fallback to intent URLs (`https://twitter.com/intent/tweet?url=`)
- Social preview testing: use YepAPI `POST /v1/web-scraping/scrape` to fetch and validate how a URL renders its meta tags
- Embed widgets: lazy-load third-party embeds (Twitter, YouTube, Instagram) — use intersection observer, never block initial render
- Structured data: add `article` schema for blog posts, `product` schema for products — enhances rich snippets in social previews
## Meta Tag Template
```html
<meta property="og:title" content="{title}" />
<meta property="og:description" content="{description}" />
<meta property="og:image" content="{absoluteImageUrl}" />
<meta property="og:url" content="{canonicalUrl}" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{title}" />
<meta name="twitter:description" content="{description}" />
<meta name="twitter:image" content="{absoluteImageUrl}" />
```
## Avoid
- Relative URLs in OG tags — social crawlers need absolute URLs
- Missing OG image — posts without images get 2-3x less engagement
- Blocking social crawlers in robots.txt — allow Twitterbot, facebookexternalhit
- Loading social embeds eagerly — they add 500KB+ per embedInstall
Why Use the Social Media Skill?
Without this skill, your AI guesses at social media patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping. This skill also teaches your AI how to call YepAPI endpoints for real data — keyword metrics, SERP results, backlinks, or whatever this workflow needs.
Try These Prompts
These prompts work better with the Social Media skill installed. Your AI knows the context and writes code that fits.
"Add Open Graph and Twitter Card meta tags with dynamic image generation"
"Create social sharing buttons with share counts and platform-specific formatting"
"Build a social media preview tool that shows how links appear on each platform"
Works Great With
Social Media skill — FAQ
It covers Open Graph meta tags, Twitter Cards, share buttons, and social embed widgets. Your AI generates social sharing markup that displays correctly on every platform.
Run `npx skills add YepAPI/skills --skill social-media` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
Yes. Open Graph controls how your links appear on Facebook, LinkedIn, and messaging apps. Twitter Cards control Twitter previews. The skill generates both with proper image dimensions and metadata.