chore(website): switch OG image to PNG and refresh design

SVG OG images aren't reliably rendered by Facebook/LinkedIn/Slack.
Replace with a 1200x630 PNG using the site's brand tokens, and add
og:image:type/width/height meta tags for crawlers.

Author: devalade

website/public/og-image.png

@@ -26,7 +26,7 @@ const basePath = import.meta.env.BASE_URL.endsWith("/")
   : `${import.meta.env.BASE_URL}/`;
 const site = Astro.site ?? new URL("https://shipnode.dev");
 const canonicalUrl = canonical ?? new URL(Astro.url.pathname, site).toString();
-const socialImage = image ?? new URL(`${basePath}og-image.svg`, site).toString();
+const socialImage = image ?? new URL(`${basePath}og-image.png`, site).toString();
 const defaultStructuredData = {
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
@@ -75,6 +75,9 @@ const jsonLd = structuredData ?? defaultStructuredData;
     <meta property="og:site_name" content="ShipNode" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:image" content={socialImage} />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <meta property="og:image:alt" content={imageAlt} />
 
     <!-- Twitter -->