Skip to content

DirectorySkills

Blog link preview images: offline, made in this run
Run 1Blog link preview images“Make OG images for all the posts in my blog folder. Our blog details are in site.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 12 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Blog Link Preview Images

One consistent link preview for every post on a blog in one run, plus the meta tags.

1 view

$9.99once, yours to keep

Makes link preview images (Open Graph cards) for every post on a blog in one run: each post's title and section set in one consistent look, plus the meta tags to add. Comes with 4 looks (docs, newsprint, magazine, swiss) and every common size, saved as PNG one at a time or as a batch. Reads a folder of Markdown posts and writes one batch for all of them. Every word is set in real type and checked to fit; no picture model, no key and no cost. Use when someone wants OG images for a blog, link previews for every post, social cards for all articles, or a consistent set of post thumbnails.

By RecaplyUpdated 12 Nov

Install Blog Link Preview Images

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/blog-og-images/install.md and follow it to install the blog-og-images skill from blog-og-images.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Blog Link Preview Images is for

What you get

  • PNG cards at the size each network wants
  • 4 looks to pick from, the same words in each
  • Every word checked to fit, with a warning when it does not

Good fit

  • OG images for a blog
  • Link previews for every post
  • Social cards for all articles

Not for

  • Photos or drawn illustrations
  • Making a card look like another brand

About this skill

You say

Make OG images for all the posts in my blog folder. Our blog details are in site.md.

It said back

I made one OG image for each of your four posts. I checked each PNG and nothing is cut off. The script printed no warnings or notes.

Your posts were in posts/, not blog/, so I used that folder.

Show more

What it did in run 1

  1. blog-og-images
  2. ls -la && cat site.md && ls blog
  3. ls posts && head -15 posts/* && cat logo.svg && node .claude/skills/blog-og-images/scripts/check.mjs
  4. mkdir -p og && cp logo.svg og/ && cat > og/card.json <<'E' { "defaults":{"look":"docs","layout":"headline","size":"og","name":"Fieldnote","url":"fieldnote.app/blog","logo":"logo.svg","accent":"#0F766E"}, "cards":[ {"kicker":"Product","title":"Offline mode is here","subtitle":"Fieldnote now works with no signal: write on the train, sync when you are back online.","author":"Maya Lin","date":"2026-11-04","out":"offline.png"}, {"kicker":"Company","title":"Why we changed our pricing","subtitle":"One plan, $8 a month, with every feature. Here is why we dropped the tiers.","author":"Tom Avery","date":"2026-10-21","out":"pricing.png"}, {"kicker":"Product","title":"Search that finds the note you half remember","subtitle":"Type what the note was about, not the words in it.","author":"Priya Raman","date":"2026-10-07","out":"search.png"}, {"kicker":"Company","title":"What we learned in our first year","subtitle":"40,000 researchers, 3 million notes and one big mistake.","author":"Maya Lin","date":"2026-09-22","out":"year-one.png"} ]} E node .claude/skills/blog-og-images/scripts/card.mjs og/card.json; ls og
  5. ./og/card.json
  6. cp logo.svg og/logo.svg && node .claude/skills/blog-og-images/scripts/card.mjs og/card.json; ls og
  7. ./og/offline.png
  8. ./og/pricing.png
  9. ./og/search.png
  10. ./og/year-one.png
  11. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 31 s · $0.15 of API use

Questions

Is Blog Link Preview Images free?

No. Blog Link Preview Images costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Blog Link Preview Images?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Blog Link Preview Images?

A ZIP of the whole skill folder (24 KB): the SKILL.md your agent follows and its 7 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Blog Link Preview Images?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./blog-og-images with your agent's flag.

What do I get from Blog Link Preview Images?

PNG cards at the size each network wants. 4 looks to pick from, the same words in each. Every word checked to fit, with a warning when it does not.

What does Blog Link Preview Images need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Blog Link Preview Images?

8 files, about 14,038 tokens in all. The SKILL.md is about 1,638 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 31 s to 31 s and $0.15 to $0.15 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Blog Link Preview Images to use it?

Type /blog-og-images first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.