/ src / components / Meta.tsx
Meta.tsx
 1  import Head from 'next/head';
 2  import React from 'react';
 3  
 4  type MetaProps = {
 5    title: string;
 6    description: string;
 7    imageUrl?: string;
 8    timestamp?: string;
 9  };
10  
11  export function Meta({ title, description, imageUrl, timestamp }: MetaProps) {
12    const formattedTitle = `Aave - ${title}`;
13    return (
14      <Head>
15        <title>{formattedTitle}</title>{' '}
16        <meta name="description" content={description} key="description" />
17        <meta property="og:title" content={`Aave - ${title}`} key="title" />
18        <meta property="og:description" content={description} key="ogdescription" />
19        {imageUrl && <meta property="og:image" content={imageUrl} key="ogimage" />}
20        {imageUrl && <meta name="twitter:image" content={imageUrl} key="twitterimage" />}
21        {imageUrl && (
22          <meta name="twitter:image:alt" content={`aave governance image`} key="twitteralt" />
23        )}
24        <meta name="twitter:site" content="@AaveAave" key="twittersite" />
25        <meta
26          property="twitter:card"
27          content={imageUrl ? 'summary_large_image' : 'summary'}
28          key="twittercard"
29        />
30        <meta name="twitter:title" content={title} key="twittertitle" />
31        <meta name="twitter:description" content={description} key="twitterdescription" />
32        {timestamp && <meta name="revised" content={timestamp} key="timestamp" />}
33        <meta
34          name="keywords"
35          key="keywords"
36          content="Decentralized Finance, DeFi, lending, borrowing, stablecoins, Ethereum, assets, erc-20, smart contracts, open finance, trustless"
37        />
38        <link rel="apple-touch-icon" href="/aave_180.png" />
39        <meta name="apple-mobile-web-app-title" content={`Aave`} />
40        <meta name="mobile-web-app-capable" content="yes" />
41        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
42      </Head>
43    );
44  }