Fixed a bug in the URL of the OGP tags.

shibomb · shibomb · commit 2f18896af6aa · 2024-09-15T00:53:23.000+09:00
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.
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>
