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
28 name="viewport"
29 content="minimum-scale=1, initial-scale=1, width=device-width"
30 />
31
32 <meta itemProp="name" content={siteName} />
33 {metas?.url && <meta itemProp="url" content={metas.url} />}
34 <meta itemProp="thumbnailUrl" content={socialImage} />
35 <link rel="image_src" href={socialImage} />
36 <meta itemProp="image" content={socialImage} />
37 <meta name="description" content={description} />
38
39 {/* OpenGraph */}
40 <meta property="og:site_name" content="Caroster" />
41 <meta property="og:title" content={title} />
42 {metas?.url && <meta property="og:url" content={metas.url} />}
43 <meta property="og:type" content="website" />
44 <meta property="og:description" content={description} />
45 <meta property="og:image" content={socialImage} />
46 <meta property="og:image:width" content="1500" />
47 <meta property="og:image:height" content="843" />
48
49 {/* Twitter */}
50 <meta name="twitter:title" content={title} />
51 <meta name="twitter:image" content={socialImage} />
52 {metas?.url && <meta name="twitter:url" content={metas.url} />}
53 <meta name="twitter:card" content="summary" />
54 <meta name="twitter:description" content={description} />
55 </Head>
56 );
57};
58
59export default Meta;