open-graph

Generate Open Graph meta tags for webpages from page metadata.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/irismaker/ai-agent-skills-hub --skill open-graph-irismaker
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: open-graph
Source: https://github.com/irismaker/ai-agent-skills-hub/tree/main/skills/open-graph
Command: npx skills add https://github.com/irismaker/ai-agent-skills-hub --skill open-graph-irismaker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Open Graph metadata helps ensure rich social previews by controlling how a webpage appears when shared on platforms like Facebook, LinkedIn, and X. Without proper OG tags, links can render with generic titles and thumbnails, reducing engagement.

Core Features & Use Cases

  • Generate OG tags: Produce a complete set of meta tags (og:title, og:description, og:image, og:url) tailored to the page content.
  • Best-practice guidance: Include optional tags such as og:type and og:site_name, plus image dimension recommendations for reliable rendering.
  • Use Case: Apply OG tags to blog posts, product pages, or landing pages to boost click-through when shared on social feeds.

Quick Start

Provide a page title, description, canonical URL, and an image URL to generate a ready-to-insert Open Graph meta tag block.

Frequently Asked Questions about open-graph

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

FAQPage Schema
How do I generate Open Graph meta tags for social previews?

Generate Open Graph meta tags by providing your page title, description, canonical URL, and image URL to produce a complete HTML block for social previews. The output includes standard og:title, og:description, og:image, and og:url tags ready for insertion.

Why does my link preview show the wrong image on Facebook and LinkedIn?

Link previews display incorrectly when missing Open Graph metadata like og:image and og:title. Adding a complete set of OG tags ensures platforms like Facebook and LinkedIn fetch the correct thumbnail and description for shared webpages.

What image dimensions should I use for Open Graph social previews?

Open Graph image dimensions require specific best-practice sizing for reliable rendering across social platforms. The generated OG tags include guidance on recommended image dimensions to ensure your og:image displays correctly in feeds.

Which optional Open Graph tags should I include besides the basic ones?

Beyond the basic og:title and og:description, include optional tags like og:type and og:site_name to improve social previews. These additional OG tags provide platforms with more context about your webpage content and site branding.

Can I use this to add OG tags to a blog post or landing page?

You can apply OG tags to blog posts, product pages, or landing pages to boost click-through rates when shared on social feeds. Providing the specific page content generates tailored Open Graph metadata for each URL.