Skip to content
Browse all guides

Issue #119 · important

Issue 119

What is this issue?

The og:image:width and og:image:height meta tags specify the dimensions of your Open Graph image. These tags help social platforms render your images correctly without having to download and analyze them first.

This issue checks whether your page has OG image dimension tags implemented. A passing implementation must include:

  • og:image:width - The width of the OG image in pixels
  • og:image:height - The height of the OG image in pixels

Example of passing implementation:

<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Why does it matter?

OG image dimension tags improve social media sharing performance and appearance:

  • Faster rendering: Social platforms can reserve the correct space for images immediately
  • Prevents layout shifts: Avoids jarring layout changes as images load
  • Optimal display: Ensures images display at the correct aspect ratio
  • Crawlability: Social crawlers can process your pages more efficiently
  • AI Search / AEO: AI systems use image dimensions to understand content structure

Without these tags, social platforms must:

  • Download the entire image to determine dimensions
  • Potentially display images with incorrect aspect ratios
  • Cause layout shifts that negatively impact user experience

Resolving this issue improves social media sharing performance and contributes to a higher overall SEO health score by optimizing how social platforms process your content.

How to fix it

  1. Add OG image dimension tags to your HTML <head> section:

    • og:image:width - Specify the image width in pixels (e.g., "1200")
    • og:image:height - Specify the image height in pixels (e.g., "630")

  2. Use recommended dimensions:

    • 1200×630 pixels - Ideal for most social platforms (1.91:1 aspect ratio)
    • 600×315 pixels - Minimum recommended size
    • Always maintain at least a 1.91:1 aspect ratio for optimal display

  3. Ensure dimensions match the actual image:

    • Verify that the specified dimensions match the real image size
    • Update dimensions if you change the OG image

  4. Test your implementation:

    • Use Facebook Sharing Debugger to verify dimensions are detected
    • Check that images display correctly on multiple platforms

Examples

Example 1: Missing OG Image Dimensions

Problematic state (what fails):

<meta property="og:image" content="https://example.com/image.jpg" />
<!-- Missing og:image:width and og:image:height -->

Corrected state (what passes):

<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Example 2: Incorrect Dimensions

Problematic state (what fails):

<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<!-- Dimensions don't match actual image size -->

Corrected state (what passes):

<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Dimensions now match the actual image -->

How PixyScan detects this

PixyScan checks for OG image dimension tags by:

  1. Fetching the page HTML after following all redirects
  2. Parsing the <head> section to extract meta tags with property attributes og:image:width and og:image:height
  3. Validating presence: Checks that both dimension tags exist
  4. Validating values: Ensures values are positive integers representing pixel dimensions
  5. Flagging the issue if either dimension tag is missing or contains invalid values

The detection is performed on the raw HTML response without JavaScript execution, matching how social media crawlers see your pages.

References