OG Image Size

SkillCommunication

og-image-size is a skill for AI agents that audits Open Graph tags and generates og:image assets. It checks whether web pages have correct Open Graph image sizes so links look right when shared on social networks or messaging platforms.

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

Have a web page that may be shared on social networks or messaging platforms.

Then ask your AI: use the OG Image Size skill

What your AI can do with it

  • Audit Open Graph tags on a web page
  • Generate og:image assets
  • Check that Open Graph image sizes are correct
  • Apply to any page that may be shared on social networks or messaging platforms

Getting started

  1. Have a web page that may be shared on social networks or messaging platforms.
  2. Add the og-image-size skill to the agent's available skills.
  3. Ask the agent to audit the page's Open Graph tags or generate og:image assets.

What this skill tells your AI

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

An incorrectly sized og:image is displayed poorly or not at all on social platforms—Facebook, Twitter/X, LinkedIn each crop or skip images that don't meet their requirements, resulting in blank or distorted link previews.

Quick Reference

  • og:image should be 1200×630 pixels (1.91:1 aspect ratio)
  • Minimum size is 600×315 pixels; smaller images may not display
  • File size should stay under 5 MB; under 1 MB is preferred
  • Use JPEG or PNG; WebP has limited support on older platforms

Check

Find the og:image meta tag in and fetch the image URL. Check the image dimensions and file size. Flag if width < 1200px, height < 630px, aspect ratio differs significantly from 1.91:1, or file size exceeds 5 MB.

Fix

Generate or resize the og:image to exactly 1200×630 pixels. Export as JPEG at 80–85% quality to balance visual quality and file size. Reference the absolute HTTPS URL in the og:image meta tag. Add og:image:width and og:image:height tags to help platforms render the image without downloading it first.

Explain

Social platforms use og:image to construct the visual card shown when a URL is shared. An image too small may be skipped or shown as a thumbnail. An image with the wrong aspect ratio gets cropped, often cutting off important content. The recommended 1200×630 size ensures optimal display across Facebook, LinkedIn, Slack, and iMessage.

Code Review

Check the og:image meta tag value. Fetch the image and verify: (1) dimensions are at least 1200×630 px, (2) aspect ratio is approximately 1.91:1, (3) file size is under 5 MB, (4) URL is absolute HTTPS, (5) og:image:width and og:image:height tags match actual dimensions. Flag relative URLs or images smaller than 600×315 px.


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

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

Signals

GitHub stars
74k
Forks
7k
Last commit
Aug 2026

Questions

When should this skill be used?
Use it when auditing Open Graph tags or generating og:image assets. It applies to any page that may be shared on social networks or messaging platforms.
What does it check?
It checks whether web pages have correct Open Graph image sizes so links look right when shared.
Advanced
Item type
skill
Key
og-image-size
Source
github.com/thedaviddias/front-end-checklist