Merge pull request #547 from shibomb/fix/ogp-url-default-img

limzykenneth · web-flow · commit 1a1bb0a67adf · 2024-10-08T15:01:25.000+01:00
Fix: ogp url, ogp image url and default ogp image file.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -17,6 +17,7 @@ if (shouldSkipCompress) {
 
 // https://astro.build/config
 export default defineConfig({
+  site: 'https://p5js.org',
   integrations: [
     preact({
       compat: true,
diff --git a/public/assets/img/p5js.png b/public/assets/img/p5js.png
diff --git a/src/components/Head/index.astro b/src/components/Head/index.astro
@@ -10,7 +10,7 @@ interface Props {
 
 const {
   title,
-  featuredImageSrc = "/favicon.svg",
+  featuredImageSrc = "/assets/img/p5js.png",
   locale,
   description,
 } = Astro.props;
@@ -28,6 +28,9 @@ const t = await getUiTranslator(locale);
 const localizedTitle = t(title) as string;
 const localizedDescription =
   description || (t("briefPageDescriptions", title) as string);
+
+const rootUrl = new URL('/', process.env.NODE_ENV === "production" ? Astro.site : Astro.url.href);
+const ogpImageSrc = new URL(featuredImageSrc, rootUrl);
 ---
 
 <head>
@@ -38,14 +41,14 @@ const localizedDescription =
   <meta name="description" content={localizedDescription} />
   <meta property="og:title" content={title} />
   <meta property="og:description" content={localizedDescription} />
-  <meta property="og:image" content={featuredImageSrc} />
+  <meta property="og:image" content={ogpImageSrc} />
   <meta property="og:url" content={Astro.url.href} />
   <meta property="og:type" content="website" />
   <meta property="og:locale" content={localeContentMap[locale]} />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@p5xjs" />
   <meta name="twitter:title" content={title} />
   <meta name="twitter:description" content={localizedDescription} />
-  <meta name="twitter:image" content={featuredImageSrc} />
+  <meta name="twitter:image" content={ogpImageSrc} />
   <meta name="twitter:url" content={Astro.url.href} />
 </head>
