Merge pull request #135 from valory-xyz/precious/duplicate-title-tags

chore: added title to Veolas for duplicate title error in SEMrush
valory-xyz · Nov 14, 2024 · 0e0e373 · 0e0e373
2 parents 0d2f5d9 + 87a4e44
commit 0e0e373
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/apps/govern/components/Meta.tsx b/apps/govern/components/Meta.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+
+const SITE_URL = 'https://govern.olas.network';
+const SITE_TITLE = 'Olas Govern';
+const SITE_DESCRIPTION =
+  'View various contracts and join the decision-making process that drives growth in the Olas ecosystem; direct the future of Olas.';
+
+const Meta = ({
+  pageTitle,
+  description,
+  pageUrl,
+}: {
+  pageTitle: string;
+  description: string;
+  pageUrl: string;
+}) => {
+  const title = pageTitle ? `${pageTitle} | ${SITE_TITLE}` : SITE_TITLE;
+  const url = `${SITE_URL}/${pageUrl}`;
+
+  return (
+    <Head>
+      {/* <!-- Primary Meta Tags --> */}
+      <title>{title}</title>
+      <meta name="title" content={title} key="title" />
+      <meta name="description" content={description || SITE_DESCRIPTION} key="description" />
+
+      {/* <!-- Open Graph / Facebook --> */}
+      <meta property="og:type" content="website" key="og:type" />
+      <meta property="og:url" content={url} key="og:url" />
+      <meta property="og:title" content={title} key="og:title" />
+      <meta
+        property="og:description"
+        content={description || SITE_DESCRIPTION}
+        key="og:description"
+      />
+
+      {/* <!-- Twitter --> */}
+      <meta property="twitter:card" content="summary_large_image" key="twitter:card" />
+      <meta property="twitter:url" content={url} key="twitter:url" />
+      <meta property="twitter:title" content={title} key="twitter:title" />
+      <meta
+        property="twitter:description"
+        content={description || SITE_DESCRIPTION}
+        key="twitter:description"
+      />
+    </Head>
+  );
+};
+
+Meta.propTypes = {
+  pageTitle: PropTypes.string,
+  description: PropTypes.string,
+  pageUrl: PropTypes.string,
+};
+Meta.defaultProps = {
+  pageTitle: null,
+  description: SITE_DESCRIPTION,
+  pageUrl: '',
+};
+
+export default Meta;
diff --git a/apps/govern/components/VeOlas/index.tsx b/apps/govern/components/VeOlas/index.tsx
@@ -22,7 +22,7 @@ const Title = styled.h1`
   margin: 0 0 8px;
 `;
 
-export const VeOlasPage = () => {
+export const VeOlas = () => {
   const { isLoading, canWithdrawVeolas, canIncreaseAmountOrUnlock } = useFetchBalances();
 
   const [isCreateLockModalVisible, setIsCreateLockModalVisible] = useState(false);

diff --git a/apps/govern/pages/_app.tsx b/apps/govern/pages/_app.tsx
@@ -1,5 +1,4 @@
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 import { FC, PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 
@@ -11,6 +10,7 @@ import { Web3ModalProvider } from 'context/Web3ModalProvider';
 import { Layout } from '../components/Layout';
 import { useFetchStakingContractsList, useFetchUserVotes } from '../hooks';
 import { wrapper } from '../store';
+import Meta from 'components/Meta';
 
 const DataProvider: FC<PropsWithChildren> = ({ children }) => {
   useFetchStakingContractsList();
@@ -25,9 +25,7 @@ const GovernApp = ({ Component, ...rest }: AppProps) => {
   return (
     <>
       <GlobalStyles />
-      <Head>
-        <title>Govern</title>
-      </Head>
+      <Meta />
 
       <Provider store={store}>
         <AutonolasThemeProvider>

diff --git a/apps/govern/pages/veolas.tsx b/apps/govern/pages/veolas.tsx
@@ -1,3 +1,15 @@
-import { VeOlasPage } from '../components/VeOlas';
+import Meta from 'components/Meta';
+import { VeOlas } from '../components/VeOlas';
+
+const VeOlasPage = () => (
+  <>
+    <Meta
+      pageTitle="veOLAS"
+      description="Easily check, manage, and optimize your veOLAS balance to actively participate in decisions shaping the future of the Olas network."
+      pageUrl="veOlas"
+    />
+    <VeOlas />
+  </>
+);
 
 export default VeOlasPage;