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