rich-link-previews

Generate and validate Open Graph and Twitter Card metadata for link previews.

3|1|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/marcus/marcus-skills --skill rich-link-previews
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rich-link-previews
Source: https://github.com/marcus/marcus-skills/tree/main/skills/rich-link-previews
Command: npx skills add https://github.com/marcus/marcus-skills --skill rich-link-previews

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create and debug Open Graph and Twitter Card metadata so your shared links render correctly across iMessage, WhatsApp, Slack/Discord, and social platforms; fix missing or broken previews and ensure consistent presentation.

Core Features & Use Cases

  • Generate and validate og:title, og:description, og:image, og:url, and twitter:image metadata for websites.
  • Debug previews across platforms (iMessage, WhatsApp, Slack/Discord, Twitter/X) and adapt images to platform sizing requirements.
  • Use case: ensure a shared link on a messaging app displays a correct title, description, and image, even after site migrations or dynamic content changes.

Quick Start

Craft the correct meta tags for your page and verify previews in seconds.

Frequently Asked Questions about rich-link-previews

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why are my Open Graph images not showing up when I share links on WhatsApp or iMessage?

Open Graph images may not show due to incorrect metadata tags or inaccessible images. This Skill identifies missing tags, verifies images return 200 OK, and ensures metadata is present in server HTML (SSR) or prerendered output.

How do I debug Twitter Cards metadata to fix broken link previews?

Debug Twitter Cards metadata by validating tags against platform specifications. This Skill checks for required fields like twitter:image, confirms image accessibility, and ensures your server HTML complies with Twitter Card rendering requirements.

What is the best way to generate and validate Open Graph metadata for dynamic websites?

Generate and validate Open Graph metadata by crafting correct tags for dynamic content. This Skill helps create og:title and og:description tags, validates them across social platforms, and ensures they are included in prerendered or SSR HTML.

Does this approach work with server-side rendered (SSR) HTML for social previews?

Yes, server-side rendered (SSR) HTML is required for reliable social previews. This Skill verifies that your Open Graph and Twitter Card tags are included directly in the server HTML or prerendered, ensuring crawlers can access them.

How do I fix link previews not updating after a website migration?

Fix link previews after migration by validating existing metadata and correcting broken references. This Skill identifies incorrect Open Graph tags, checks image URLs return 200 OK, and ensures consistent presentation across messaging and social platforms.

Can I adapt social preview images to meet platform-specific sizing requirements?

Adapt social preview images to platform sizing requirements by debugging metadata across platforms. This Skill helps adjust image tags for iMessage, WhatsApp, Slack/Discord, and Twitter/X to ensure correct rendering everywhere.