Open Graph image missing width and height

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 Is This Important

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 XeoPix Detects This

XeoPix checks for OG image dimension tags by:

Fetching the page HTML after following all redirects
Parsing the <head> section to extract meta tags with property attributes og:image:width and og:image:height
Validating presence: Checks that both dimension tags exist
Validating values: Ensures values are positive integers representing pixel dimensions
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.

How To Fix

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”)
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
Ensure dimensions match the actual image:
- Verify that the specified dimensions match the real image size
- Update dimensions if you change the OG image
Test your implementation:
- Use Facebook Sharing Debugger to verify dimensions are detected
- Check that images display correctly on multiple platforms

What We Store

Storage Level

Page Level

Database Table / Prisma Model

SocialOpenGraphData

Stored Fields

Field	Type	Description
ogImageWidth	Int?	Open Graph image width in pixels
ogImageHeight	Int?	Open Graph image height in pixels

Detection Dependencies

HTML Document
Meta Tags (og:image)
Image URL (to extract dimensions)

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 -->

Unit Test

Test File

xeopix-crawling-v2/__tests__/seo-audit-checks/socialOpenGraph/issue-119-og-image-width.test.js

Purpose

Validates that the crawler detects pages that have an og:image but are missing the og:image:width or og:image:height dimension attributes.

Tested Function

runSocialOpenGraph()

Issue Information

Issue Number: 119
Issue Code: og_image_width
Toggle Group: socialOpenGraph

Test Scenarios

Positive Test Cases

og:image is present with both og:image:width and og:image:height → no issue detected.
og:image is not present on the page → no issue detected.

Negative Test Cases

og:image is present but og:image:width is missing → issue detected with message containing og:image:width.
og:image is present but og:image:height is missing → issue detected with message containing og:image:height.

Boundary Cases

No boundary cases exist in the test.

Edge Cases

Invalid values: The function handles invalid (non-numeric) width or height values without throwing.

Expected Outcome

Pass

The issue should not be reported when either og:image is absent, or both og:image:width and og:image:height are present alongside og:image.

Fail

The issue should be reported when og:image is present but either og:image:width or og:image:height is missing.

Validation

Correctly detects missing dimension attributes when og:image is present.
Does not report a false positive when og:image is absent.
Handles invalid dimension values gracefully without crashing.

xeopix-crawling-v2/toggleGroups/socialOpenGraph.js
xeopix-crawling-v2/issueCodes.js

Coverage Summary

Covers both missing width and missing height scenarios.
Validates that the check is skipped when og:image is absent.
Includes resilience test for invalid dimension values.

References

Open Graph Protocol - Image Dimensions — Open Graph Protocol
Facebook Sharing Best Practices — Facebook Developers
Meta Open Graph Guide — Facebook Developers