Merge pull request #214 from ethereum/pagemetadata-images

Fix PageMetadata/OG images

Author: pettinarip

src/components/PageMetadata.tsx

@@ -4,12 +4,7 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
-import { DEFAULT_LOCALE, SITE_URL } from "@/lib/constants"
-
-import ogImageDapps from "@/public/doge-computer.png"
-import ogImageDevelopers from "@/public/enterprise-eth.png"
-import ogImageDefault from "@/public/home/hero.png"
-import ogImageUpgrades from "@/public/upgrades/upgrade_doge.png"
+import { SITE_URL } from "@/lib/constants"
 
 type NameMeta = {
   name: string
@@ -44,33 +39,38 @@ const PageMetadata: React.FC<IProps> = ({
   const desc = description || t("site-description")
   const siteTitle = t("site-title")
   const fullTitle = `${title} | ${siteTitle}`
+  const origin = process.env.NEXT_PUBLIC_SITE_URL || SITE_URL // TODO: Remove .env var usage after launch
+
+  // Remove any query params (?) or hash links (#)
+  const path = asPath.replace(/[\?\#].*/, "")
+  const slug = path.split("/")
 
   /* Set canonical URL w/ language path to avoid duplicate content */
   /* e.g. set ethereum.org/about/ to ethereum.org/en/about/ */
-  const canonical = canonicalUrl || join(SITE_URL, DEFAULT_LOCALE, asPath)
-  const url = locale ? join(SITE_URL, locale, asPath) : canonical
+  const url = new URL(join(locale!, path), origin).href
+  const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */
-  let ogImage = ogImageDefault.src
+  let ogImage = "/home/hero.png"
 
-  if (asPath.includes("/developers/")) {
-    ogImage = ogImageDevelopers.src
+  if (slug.includes("developers")) {
+    ogImage = "/enterprise-eth.png"
   }
 
-  if (asPath.includes("/dapps/")) {
-    ogImage = ogImageDapps.src
+  if (slug.includes("dapps")) {
+    ogImage = "/doge-computer.png"
   }
 
-  if (asPath.includes("/roadmap/")) {
-    ogImage = ogImageUpgrades.src
+  if (slug.includes("roadmap")) {
+    ogImage = "/upgrades/upgrade_doge.png"
   }
 
   if (image) {
     ogImage = image
   }
 
-  const ogImageUrl = join(SITE_URL, ogImage)
-  const metadata: Array<Meta> = [
+  const ogImageUrl = new URL(ogImage, origin).href
+  const metadata: Meta[] = [
     { name: `description`, content: desc },
     { name: `image`, content: ogImageUrl },
     { property: `og:title`, content: fullTitle },