Merge pull request #12234 from ethereum/og-images

Fix OG page images

public/content/roadmap/index.md

@@ -3,7 +3,7 @@ title: Ethereum roadmap
 description: The path to more scalability, security and sustainability for Ethereum.
 lang: en
 template: roadmap
-image: /roadmap/roadmap-main.png
+image: /heroes/roadmap-hub-hero.jpg
 alt: "Ethereum roadmap"
 summaryPoints:
 buttons:

public/content/translations/id/roadmap/index.md

@@ -3,7 +3,7 @@ title: Peta Perjalanan Ethereum
 description: Jalan menuju peningkatan skalabilitas, keamanan, dan keberlanjutan Ethereum.
 lang: id
 template: roadmap
-image: /roadmap/roadmap-main.png
+image: /heroes/roadmap-hub-hero.jpg
 alt: "Peta Perjalanan Ethereum"
 summaryPoints:
 buttons:

public/content/translations/it/roadmap/index.md

@@ -3,7 +3,7 @@ title: Roadmap di Ethereum
 description: Il percorso verso una maggiore scalabilità, sicurezza e sostenibilità per Ethereum.
 lang: it
 template: roadmap
-image: /roadmap/roadmap-main.png
+image: /heroes/roadmap-hub-hero.jpg
 alt: "Roadmap di Ethereum"
 summaryPoints:
 buttons:

public/content/translations/ru/roadmap/index.md

@@ -3,7 +3,7 @@ title: Дорожная карта Ethereum
 description: Путь к большей масштабируемости, безопасности и экологичности Ethereum.
 lang: ru
 template: roadmap
-image: /roadmap/roadmap-main.png
+image: /heroes/roadmap-hub-hero.jpg
 alt: "Дорожная карта Ethereum"
 summaryPoints:
 buttons:

public/content/translations/tr/roadmap/index.md

@@ -3,7 +3,7 @@ title: Ethereum yol haritası
 description: Ethereum için daha ölçeklenebilir, güvenli ve sürdürülebilir olmanın yolu.
 lang: tr
 template: roadmap
-image: /roadmap/roadmap-main.png
+image: /heroes/roadmap-hub-hero.jpg
 alt: "Ethereum yol haritası"
 summaryPoints:
 buttons:

public/content/translations/zh-tw/roadmap/index.md

@@ -3,7 +3,7 @@ title: 以太坊開發藍圖
 description: 以太坊實現更高可擴容性、安全性和永續性的路徑。
 lang: zh-tw
 template: roadmap
-image: /roadmap/roadmap-main.png
+image: /heroes/roadmap-hub-hero.jpg
 alt: "以太坊開發藍圖"
 summaryPoints:
 buttons:

src/components/PageMetadata.tsx

@@ -4,6 +4,8 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
+import { getOgImage } from "@/lib/utils/metadata"
+
 import { DEFAULT_LOCALE, SITE_URL } from "@/lib/constants"
 
 type NameMeta = {
@@ -49,41 +51,26 @@ const PageMetadata = ({
   const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */
-  let ogImage = "/home/hero.png"
-
-  if (slug.includes("developers")) {
-    ogImage = "/enterprise-eth.png"
-  }
-
-  if (slug.includes("dapps")) {
-    ogImage = "/doge-computer.png"
-  }
-
-  if (slug.includes("roadmap")) {
-    ogImage = "/upgrades/upgrade_doge.png"
-  }
-
-  if (image) {
-    ogImage = image
-  }
+  const ogImage = image || getOgImage(slug)
 
   const ogImageUrl = new URL(ogImage, SITE_URL).href
   const metadata: Meta[] = [
-    { name: `description`, content: desc },
     { name: `image`, content: ogImageUrl },
-    { property: `og:title`, content: fullTitle },
-    { property: `og:description`, content: desc },
-    { property: `og:type`, content: `website` },
+    { name: `description`, content: desc },
+    { name: `docsearch:description`, content: desc },
     { name: `twitter:card`, content: `summary_large_image` },
     { name: `twitter:creator`, content: author || siteTitle },
     { name: `twitter:site`, content: author || siteTitle },
     { name: `twitter:title`, content: fullTitle },
     { name: `twitter:description`, content: desc },
     { name: `twitter:image`, content: ogImageUrl },
+    { property: `og:title`, content: fullTitle },
+    { property: `og:locale`, content: locale! },
+    { property: `og:description`, content: desc },
+    { property: `og:type`, content: `website` },
     { property: `og:url`, content: url },
     { property: `og:image`, content: ogImageUrl },
     { property: `og:site_name`, content: siteTitle },
-    { name: `docsearch:description`, content: desc },
   ]
 
   return (

src/lib/constants.ts

@@ -24,6 +24,7 @@ export const DISCORD_PATH = "/discord/"
 export const EDIT_CONTENT_URL = `https://github.com/ethereum/ethereum-org-website/tree/dev/`
 export const MAIN_CONTENT_ID = "main-content"
 export const WEBSITE_EMAIL = "[email protected]"
+export const DEFAULT_OG_IMAGE = "/home/hero.png"
 
 // Config
 export const CONTENT_IMAGES_MAX_WIDTH = 800

src/lib/utils/metadata.ts

@@ -0,0 +1,27 @@
+import { DEFAULT_OG_IMAGE } from "@/lib/constants"
+
+/**
+ * List of default og images for different sections
+ */
+const imageForSlug = [
+  { section: "developers", image: "/heroes/developers-hub-hero.jpg" },
+  { section: "roadmap", image: "/heroes/roadmap-hub-hero.jpg" },
+  { section: "guides", image: "/heroes/guides-hub-hero.jpg" },
+  { section: "community", image: "/heroes/community-hero.png" },
+  { section: "staking", image: "/upgrades/upgrade_rhino.png" },
+] as const
+
+/**
+ * Get the default OG image for a page based on the slug
+ * @param slug - the slug of the page
+ * @returns relative path of image
+ */
+export const getOgImage = (slug: string[]): string => {
+  let result = DEFAULT_OG_IMAGE
+  for (const item of imageForSlug) {
+    if (slug.includes(item.section)) {
+      result = item.image
+    }
+  }
+  return result
+}

src/pages/dapps.tsx

@@ -115,7 +115,6 @@ import zapper from "@/public/dapps/zapper.png"
 import zerion from "@/public/dapps/zerion.png"
 import developers from "@/public/developers-eth-blocks.png" // Handled inside Callout => height=200
 import doge from "@/public/doge-computer.png" // HERO, full? 624px
-import ogImage from "@/public/doge-computer.png" // PageMetadata, src only
 import oneinch from "@/public/exchanges/1inch.png"
 import magicians from "@/public/magicians.png"
 import wallet from "@/public/wallet.png" // width=300
@@ -1334,8 +1333,8 @@ const DappsPage = () => {
     <Page>
       <PageMetadata
         title={t("common:decentralized-applications-dapps")}
-        description={t("common:page-dapps-desc")}
-        image={ogImage.src}
+        description={t("page-dapps-desc")}
+        image="/doge-computer.png"
       />
       <PageHero content={heroContent} />
       <Divider />

src/pages/eth.tsx

@@ -37,7 +37,6 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import eth from "@/public/eth.png"
-import ogImage from "@/public/eth.png"
 import ethCat from "@/public/eth-gif-cat.png"
 import defi from "@/public/finance_transparent.png"
 import ethereum from "@/public/what-is-ethereum.png"
@@ -385,7 +384,7 @@ const EthPage = () => {
       <PageMetadata
         title={t("page-eth-whats-eth-meta-title")}
         description={t("page-eth-whats-eth-meta-desc")}
-        image={ogImage.src}
+        image="/eth.png"
       />
       <Content>
         <HeroContainer>

src/pages/layer-2.tsx

@@ -253,6 +253,7 @@ const Layer2Page = () => {
       <PageMetadata
         title={t("layer-2-hero-title")}
         description={t("layer-2-metadata-description")}
+        image="/heroes/layer-2-hub-hero.jpg"
       />
       {/* Hero Section */}
       <HubHero {...heroContent} />

src/pages/learn.tsx

@@ -213,6 +213,7 @@ const LearnPage = () => {
       <PageMetadata
         title={t("common:learn-hub")}
         description={t("hero-subtitle")}
+        image="/heroes/learn-hub-hero.png"
       />
 
       <HubHero {...heroContent} />

src/pages/quizzes.tsx

@@ -17,7 +17,6 @@ import QuizzesList from "@/components/Quiz/QuizzesList"
 import QuizzesModal from "@/components/Quiz/QuizzesModal"
 import QuizzesStats from "@/components/Quiz/QuizzesStats"
 import { useLocalQuizData } from "@/components/Quiz/useLocalQuizData"
-import Translation from "@/components/Translation"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -56,7 +55,7 @@ export const getStaticProps = (async ({ locale }) => {
 const QuizzesHubPage: NextPage<
   InferGetStaticPropsType<typeof getStaticProps>
 > = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslation("learn-quizzes")
 
   const [userStats, updateUserStats] = useLocalQuizData()
   const [quizStatus, setQuizStatus] = useState<QuizStatus>("neutral")
@@ -77,11 +76,12 @@ const QuizzesHubPage: NextPage<
       <PageMetadata
         title={t("quizzes-title")}
         description={t("quizzes-subtitle")}
+        image="/heroes/quizzes-hub-hero.png"
       />
       <HubHero
         title={t("quizzes-title")}
-        description={t("learn-quizzes:quizzes-subtitle")}
-        header={t("learn-quizzes:test-your-knowledge")}
+        description={t("quizzes-subtitle")}
+        header={t("test-your-knowledge")}
         heroImg={HeroImage}
       />
       <QuizzesModal isOpen={isOpen} onClose={onClose} quizStatus={quizStatus}>
@@ -98,14 +98,14 @@ const QuizzesHubPage: NextPage<
             <Box>
               <QuizzesList
                 content={ethereumBasicsQuizzes}
-                headingId={t("learn-quizzes:basics")}
-                descriptionId={t("learn-quizzes:basics-description")}
+                headingId={t("basics")}
+                descriptionId={t("basics-description")}
                 {...commonQuizListProps}
               />
               <QuizzesList
                 content={usingEthereumQuizzes}
-                headingId={t("learn-quizzes:using-ethereum")}
-                descriptionId={t("learn-quizzes:using-ethereum-description")}
+                headingId={t("using-ethereum")}
+                descriptionId={t("using-ethereum-description")}
                 {...commonQuizListProps}
               />
             </Box>
@@ -120,11 +120,11 @@ const QuizzesHubPage: NextPage<
             >
               <Box>
                 <Text align={{ base: "center", xl: "left" }} fontWeight="bold">
-                  <Translation id="learn-quizzes:want-more-quizzes" />
+                  {t("want-more-quizzes")}
                 </Text>
 
                 <Text align={{ base: "center", xl: "left" }}>
-                  <Translation id="learn-quizzes:contribute" />
+                  {t("contribute")}
                 </Text>
               </Box>
               <ButtonLink
@@ -135,7 +135,7 @@ const QuizzesHubPage: NextPage<
               >
                 <Flex alignItems="center">
                   <Icon as={FaGithub} color="text" boxSize={6} me={2} />
-                  <Translation id="learn-quizzes:add-quiz" />
+                  {t("add-quiz")}
                 </Flex>
               </ButtonLink>
             </Flex>

src/pages/run-a-node.tsx

@@ -446,6 +446,7 @@ const RunANodePage = () => {
       <PageMetadata
         title={t("page-run-a-node-title")}
         description={t("page-run-a-node-meta-description")}
+        image="/run-a-node/ethereum-inside.png"
       />
       <HeroContainer>
         <Box pb="8">

src/pages/stablecoins.tsx

@@ -404,6 +404,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       <PageMetadata
         title={t("page-stablecoins-title")}
         description={t("page-stablecoins-meta-description")}
+        image="/stablecoins/hero.png"
       />
       <PageHero isReverse content={heroContent} />
       <Divider />

src/pages/staking/index.tsx

@@ -367,6 +367,7 @@ const StakingPage = ({
       <PageMetadata
         title={t("page-staking-meta-title")}
         description={t("page-staking-meta-description")}
+        image="/upgrades/upgrade_rhino.png"
       />
       <HeroStatsWrapper>
         <PageHero content={heroContent} />

src/pages/wallets/find-wallet.tsx

@@ -142,6 +142,7 @@ const FindWalletPage = () => {
       <PageMetadata
         title={t("page-find-wallet-meta-title")}
         description={t("page-find-wallet-meta-description")}
+        image="/wallets/wallet-hero.png"
       />
 
       <BannerNotification shouldShow={true}>

src/pages/wallets/index.tsx

@@ -267,6 +267,7 @@ const WalletsPage = () => {
       <PageMetadata
         title={t("page-wallets-meta-title")}
         description={t("page-wallets-meta-description")}
+        image="/wallets/wallet-hero.png"
       />
       <PageHero content={heroContent} isReverse />
       <GrayContainer>