frontend/containers/Metas/index.tsx (view raw)
1import Head from 'next/head';
2
3type Metas = {
4 title: string;
5 url: string;
6};
7
8interface Props {
9 metas: Metas;
10}
11
12const Meta = (props: Props) => {
13 const {metas} = props;
14
15 const siteName = 'Caroster - Covoiturage de groupe';
16 const title = metas?.title
17 ? `${metas.title} - Caroster`
18 : 'Caroster - Covoiturage de groupe';
19 const description =
20 'Covoiturez à un événement en proposant une voiture ou en prenant une place.';
21 const socialImage = '/assets/Caroster_Octree_Social.jpg';
22
23 return (
24 <Head>
25 {/* General */}
26 <title>{title}</title>
27 <meta itemProp="name" content={siteName} />
28 {metas?.url && <meta itemProp="url" content={metas.url} />}
29 <meta itemProp="thumbnailUrl" content={socialImage} />
30 <link rel="image_src" href={socialImage} />
31 <meta itemProp="image" content={socialImage} />
32 <meta name="description" content={description} />
33
34 {/* OpenGraph */}
35 <meta property="og:site_name" content="Caroster" />
36 <meta property="og:title" content={title} />
37 {metas?.url && <meta property="og:url" content={metas.url} />}
38 <meta property="og:type" content="website" />
39 <meta property="og:description" content={description} />
40 <meta property="og:image" content={socialImage} />
41 <meta property="og:image:width" content="1500" />
42 <meta property="og:image:height" content="843" />
43
44 {/* Twitter */}
45 <meta name="twitter:title" content={title} />
46 <meta name="twitter:image" content={socialImage} />
47 {metas?.url && <meta name="twitter:url" content={metas.url} />}
48 <meta name="twitter:card" content="summary" />
49 <meta name="twitter:description" content={description} />
50 </Head>
51 );
52};
53
54export default Meta;