feat: update social-share image handling to use PNG format and optimize for LinkedIn/X/Facebook

Author: alexandramartinez

public/og-default.png

@@ -24,7 +24,7 @@ interface Props {
 const {
   title,
   description = SITE.description,
-  image = '/og-default.svg',
+  image = '/og-default.png',
   type = 'website',
   canonical,
   noindex = false,

src/components/Seo.astro

@@ -12,7 +12,7 @@ import Icon from '@/components/Icon.astro';
 import SeriesNav from '@/components/SeriesNav.astro';
 import ReaderNotes from '@/components/ReaderNotes.astro';
 import Faqs from '@/components/Faqs.astro';
-import { Image } from 'astro:assets';
+import { Image, getImage } from 'astro:assets';
 import { getPosts, formatDate, readingTime, categoryUrl, getSeriesParts } from '@/lib/content';
 import { getSeriesForPost } from '@/data/series';
 import { getVideoByYoutubeId } from '@/data/videos';
@@ -31,6 +31,13 @@ const { title, description, author, pubDate, updatedDate, category, tags, heroIm
 const url = new URL(`/post/${post.id}`, SITE.url).href;
 const mdUrl = `/post/${post.id}.md`;
 
+// Social-share image: optimize the post's heroImage to a 1200-wide raster and make it absolute,
+// so LinkedIn/X/Facebook render the post's own card (they reject SVG and require absolute URLs).
+// Falls back to the branded /og-default.png in Seo.astro when a post has no heroImage.
+const ogImage = heroImage
+  ? new URL((await getImage({ src: heroImage, width: 1200, format: 'png' })).src, SITE.url).href
+  : undefined;
+
 // Multi-part series navigation (prev/next + jump menu), driven by src/data/series.ts.
 const series = getSeriesForPost(post.id);
 const seriesParts = series ? await getSeriesParts(series, post.id) : null;
@@ -90,6 +97,7 @@ const jsonLd = [
   title={title}
   description={description}
   type="article"
+  image={ogImage}
   contained={false}
   jsonLd={jsonLd}
 >

src/pages/post/[slug].astro

@@ -6,7 +6,7 @@ import DocActions from '@/components/DocActions.astro';
 import TableOfContents from '@/components/TableOfContents.astro';
 import ReportIssue from '@/components/ReportIssue.astro';
 import Icon from '@/components/Icon.astro';
-import { VIDEOS, getPlaylist, watchUrl, videosInPlaylist, playlistNeighbors } from '@/data/videos';
+import { VIDEOS, getPlaylist, watchUrl, videosInPlaylist, playlistNeighbors, thumbnail } from '@/data/videos';
 import { getTranscript } from '@/lib/transcripts';
 import { SITE } from '@/config';
 
@@ -39,13 +39,17 @@ const { prev, next } = primaryPlaylist
 const url = new URL(`/video/${video.slug}`, SITE.url).href;
 const mdUrl = `/video/${video.slug}.md`;
 
+// Social-share image: the YouTube maxres thumbnail (absolute raster URL) so LinkedIn/X/Facebook
+// render the video's own card instead of falling back to the branded /og-default.png.
+const ogImage = thumbnail(video.youtubeId, 'max');
+
 const jsonLd = [
   {
     '@context': 'https://schema.org',
     '@type': 'VideoObject',
     name: video.title,
     description: video.description,
-    thumbnailUrl: `https://i.ytimg.com/vi/${video.youtubeId}/maxresdefault.jpg`,
+    thumbnailUrl: ogImage,
     uploadDate: video.publishedAt ? new Date(video.publishedAt).toISOString() : undefined,
     contentUrl: watchUrl(video.youtubeId),
     embedUrl: `https://www.youtube.com/embed/${video.youtubeId}`,
@@ -68,6 +72,7 @@ const headings = [...baseHeadings, ...transcriptHeadings.filter((h) => h.depth =
   title={video.title}
   description={video.description}
   type="video.other"
+  image={ogImage}
   contained={false}
   jsonLd={jsonLd}
 >