A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Emit og:image dimensions only when both are known
author
Jeremy Herve
date
(Jun 9, 2026, 4:07 PM +0200)
commit
a5d7db9f
a5d7db9fff08a2b447152014cdaffb67c0142270
parent
d2e283fa
d2e283fade2d43c822d13917ce8f065be9deb55d
+38
-4
+22
src/lib/seo/meta.test.ts
+22
src/lib/seo/meta.test.ts
···
8
8
image: 'https://skypress.blog/og-default.png',
9
9
siteName: 'SkyPress',
10
10
imageAlt: 'SkyPress',
11
+
imageWidth: 1200,
12
+
imageHeight: 630,
11
13
};
12
14
13
15
const byProperty = ( tags: MetaTag[], property: string ) =>
···
63
65
it( 'omits og:image:alt when no alt is given', () => {
64
66
const tags = buildMetaTags( { ...BASE, imageAlt: undefined } );
65
67
expect( byProperty( tags, 'og:image:alt' ) ).toBeUndefined();
68
+
} );
69
+
70
+
it( 'omits og:image dimensions when width/height are not given', () => {
71
+
const tags = buildMetaTags( {
72
+
...BASE,
73
+
imageWidth: undefined,
74
+
imageHeight: undefined,
75
+
} );
76
+
expect( byProperty( tags, 'og:image:width' ) ).toBeUndefined();
77
+
expect( byProperty( tags, 'og:image:height' ) ).toBeUndefined();
78
+
// The image itself is still present.
79
+
expect( byProperty( tags, 'og:image' )?.content ).toBe(
80
+
'https://skypress.blog/og-default.png'
81
+
);
82
+
} );
83
+
84
+
it( 'omits og:image dimensions when only one of width/height is given', () => {
85
+
const tags = buildMetaTags( { ...BASE, imageHeight: undefined } );
86
+
expect( byProperty( tags, 'og:image:width' ) ).toBeUndefined();
87
+
expect( byProperty( tags, 'og:image:height' ) ).toBeUndefined();
66
88
} );
67
89
} );
+16
-4
src/lib/seo/meta.ts
+16
-4
src/lib/seo/meta.ts
···
19
19
type?: string;
20
20
/** Alt text for the share image. Omitted when absent. */
21
21
imageAlt?: string;
22
+
/** Intrinsic image width in px. Emitted only when both width AND height are given. */
23
+
imageWidth?: number;
24
+
/** Intrinsic image height in px. Emitted only when both width AND height are given. */
25
+
imageHeight?: number;
22
26
}
23
27
24
28
export interface MetaTag {
···
36
40
siteName,
37
41
type = 'website',
38
42
imageAlt,
43
+
imageWidth,
44
+
imageHeight,
39
45
} = input;
40
46
41
47
const tags: MetaTag[] = [
···
44
50
{ property: 'og:url', content: url },
45
51
{ property: 'og:site_name', content: siteName },
46
52
{ property: 'og:image', content: image },
47
-
{ property: 'og:image:width', content: '1200' },
48
-
{ property: 'og:image:height', content: '630' },
53
+
];
54
+
55
+
if ( imageWidth !== undefined && imageHeight !== undefined ) {
56
+
tags.push( { property: 'og:image:width', content: String( imageWidth ) } );
57
+
tags.push( { property: 'og:image:height', content: String( imageHeight ) } );
58
+
}
59
+
60
+
tags.push(
49
61
{ name: 'twitter:card', content: 'summary_large_image' },
50
62
{ name: 'twitter:title', content: title },
51
-
{ name: 'twitter:image', content: image },
52
-
];
63
+
{ name: 'twitter:image', content: image }
64
+
);
53
65
54
66
if ( description ) {
55
67
tags.push( { property: 'og:description', content: description } );