Open Graph Tags

SkillWeb & browsing

og-tags is a skill for auditing a web page's social sharing metadata. It checks whether a page has proper Open Graph tags so links preview correctly when shared on social networks or messaging apps. It applies to any page users might share.

Available today. Use it from your connected AI after setup.

Have an AI agent that can load and use skills.

Then ask your AI: use the Open Graph Tags skill

What your AI can do with it

  • Audit a web page's social sharing metadata
  • Check whether a page has proper Open Graph tags
  • Identify pages whose link previews will not render correctly when shared
  • Apply to any page users might share on social networks or messaging apps

Getting started

  1. Have an AI agent that can load and use skills.
  2. Add the og-tags skill to the agent's available skills.
  3. Ask the agent to audit the social sharing metadata of a web page you want to share.
  4. Review the results to see whether Open Graph tags are present and correct.

What this skill tells your AI

The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/og-tags/SKILL.md and read by ahel’s review.

Open Graph tags control how your pages appear when shared on Facebook, LinkedIn, Slack, and other platforms—missing or incorrect tags result in unappealing link previews that reduce click-through rates.

Quick Reference

  • Include og:title, og:description, og:image, and og:url on every page
  • Use absolute URLs for og:image and og:url
  • og:image should be at least 1200×630 px for optimal display
  • og:type defaults to 'website' if omitted, but setting it explicitly is best practice

Check

Check the for Open Graph meta tags: og:title, og:description, og:image, og:url, and og:type. Verify all values are non-empty and og:image/og:url use absolute HTTPS URLs.

Fix

Add the four required Open Graph meta tags to the : og:title (≤95 chars), og:description (≤200 chars), og:image (absolute HTTPS URL, 1200×630), og:url (canonical absolute URL). Add og:type='website' for standard pages.

Explain

Open Graph tags control how this page is displayed when shared on social platforms like Facebook, LinkedIn, and Slack. Without them, platforms fall back to guessing the title, description, and image, often with poor results.

Code Review

Check the rendered for all five core OG properties: og:title, og:description, og:image, og:url, og:type. Verify og:image and og:url values start with 'https://'. Flag any empty content attributes. Compare og:url against the canonical tag — they must match exactly.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/seo/og-tags

Signals

GitHub stars
74k
Forks
7k
Last commit
Aug 2026

Questions

When should og-tags be used?
Use it when auditing a web page's social sharing metadata. It applies to any page users might share on social networks or messaging apps.
What does og-tags check?
It checks whether a web page has proper Open Graph tags so links preview correctly when shared.
Does it fix missing tags?
The item only describes checking and auditing metadata; fixing tags is not mentioned.
Advanced
Item type
skill
Key
og-tags
Source
github.com/thedaviddias/front-end-checklist