examples/blog/src/components/MainHead.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---
// props
export let title: string;
export let description: string;
export let image: string | undefined;
export let type: string | undefined;

// internal data
const OG_TYPES = {
  'movie': 'video.movie',
  'television': 'video.tv_show'
}
---

<!-- Common -->
<meta charset="UTF-8" />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="stylesheet" href="/global.css" />

<!-- OpenGraph -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{image && (<meta property="og:image" content={image} />)}
{OG_TYPES[type] && (<meta property="og:type" content={OG_TYPES[type]} />)}

<!-- Twitter -->
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
<meta name="twitter:site" content="@astro" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{image && (<meta name="twitter:image" content={image} />)}