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