Update SocMed Image

tests/seo.test.js

@@ -1,8 +1,12 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import sharp from 'sharp';
 import { feedJson, manifest, renderIndex, sitemapXml } from '../src/seo.js';
 
+const socialPreviewPath = fileURLToPath(new URL('../public/assets/social-preview-v2.78d008df9860.jpg', import.meta.url));
+
 const id = 'a'.repeat(64);
 const meme = {
   id,
@@ -17,6 +21,8 @@ const template = [
   '<meta name="description" content="__SEO_DESCRIPTION__">',
   '<link rel="canonical" href="__SEO_CANONICAL__">',
   '<meta property="og:image" content="__SEO_IMAGE__">',
+  '<meta property="og:image:type" content="__SEO_IMAGE_TYPE__">',
+  '<meta name="twitter:image" content="__SEO_IMAGE__">',
   '<script nonce="__CSP_NONCE__">__SEO_JSON_LD__</script>'
 ].join('');
 
@@ -44,10 +50,24 @@ test('renders the homepage with the dedicated social preview image', () => {
     approvedCount: 12
   });
 
-  assert.match(html, /og:image" content="https:\/\/memes\.example\/assets\/social-preview-v1\.png"/);
+  assert.match(html, /og:image" content="https:\/\/memes\.example\/assets\/social-preview-v2\.78d008df9860\.jpg"/);
+  assert.match(html, /og:image:type" content="image\/jpeg"/);
+  assert.match(html, /twitter:image" content="https:\/\/memes\.example\/assets\/social-preview-v2\.78d008df9860\.jpg"/);
   assert.doesNotMatch(html, /yoonect-logo\.png/);
 });
 
+test('keeps the social preview small and broadly compatible', async () => {
+  const metadata = await sharp(socialPreviewPath).metadata();
+  const stats = fs.statSync(socialPreviewPath);
+
+  assert.equal(metadata.format, 'jpeg');
+  assert.deepEqual([metadata.width, metadata.height], [1200, 630]);
+  assert.equal(metadata.hasAlpha, false);
+  assert.equal(metadata.exif, undefined);
+  assert.equal(metadata.xmp, undefined);
+  assert.ok(stats.size < 300_000, `expected social preview under 300 KB, got ${stats.size}`);
+});
+
 test('uses the supplied favicon suite in the page and web app manifest', () => {
   const index = fs.readFileSync(new URL('../public/index.html', import.meta.url), 'utf8');
   const appManifest = manifest('https://memes.example');
@@ -76,7 +96,7 @@ test('renders a shareable lore page with text-file metadata', () => {
 
   assert.match(html, /<title>Lore \| The Meme Protocol<\/title>/);
   assert.match(html, /canonical" href="https:\/\/memes\.example\/lore"/);
-  assert.match(html, /og:image" content="https:\/\/memes\.example\/assets\/social-preview-v1\.png"/);
+  assert.match(html, /og:image" content="https:\/\/memes\.example\/assets\/social-preview-v2\.78d008df9860\.jpg"/);
   assert.match(html, /"@type":"CreativeWork"/);
   assert.match(html, /https:\/\/memes\.example\/assets\/meme-protocol-lore\.txt/);
 });