Fixed a bug in the URL of the OGP tags.

1. fixed Site URL was localhost:4321. 2. fixed image URL was not full path. 3. fixed the image was an Astro .SVG file, so fixed it to a PNG file that was created.
processing · Sep 14, 2024 · 2f18896 · 2f18896
1 parent f6565f4
commit 2f18896
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
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/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>