Personal Site
Add opengraph and twitter metadata to base and index
+32
-3
+27
-2
src/components/Base.astro
+27
-2
src/components/Base.astro
···
3
3
4
4
interface Props {
5
5
title?: string;
6
+
graph: {
7
+
description: string;
8
+
url: string;
9
+
type?: "website" | "article" | `${"music" | "video"}.${string}`;
10
+
};
6
11
}
12
+
13
+
const { graph } = Astro.props;
14
+
const title = Astro.props.title
15
+
? `${Astro.props.title} | vielle.dev`
16
+
: "vielle.dev";
7
17
---
8
18
9
19
<html lang="en">
···
11
21
<meta charset="utf-8" />
12
22
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13
23
<meta name="viewport" content="width=device-width" />
14
-
<meta name="generator" content={Astro.generator} />
24
+
15
25
<title>
16
-
{Astro.props.title ? `${Astro.props.title} | vielle.dev` : "vielle.dev"}
26
+
{title}
17
27
</title>
28
+
<meta name="description" content={graph.description} />
29
+
<meta name="generator" content={Astro.generator} />
30
+
31
+
<!-- opengraph -->
32
+
<meta property="og:url" content={graph.url.toString()} />
33
+
<meta property="og:type" content={graph.type ?? "website"} />
34
+
<meta property="og:title" content={title} />
35
+
<meta property="og:description" content={graph.description} />
36
+
<meta property="og:image" content="" />
37
+
38
+
<!-- twt card markup -->
39
+
<meta name="twitter:card" content="summary_large_image" />
40
+
<meta name="twitter:title" content={title} />
41
+
<meta name="twitter:description" content={graph.description} />
42
+
<meta name="twitter:image" content="" />
18
43
19
44
<style is:global>
20
45
@layer reset {