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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
---
import smartypants from 'smartypants';
type SEOMetadata = {
name?: string;
title: string;
description: string;
image?: { src: string; alt: string };
canonicalURL?: URL | null;
locale?: string;
};
type OpenGraph = Partial<SEOMetadata> & {
type?: string;
};
type Twitter = Partial<SEOMetadata> & {
handle?: string;
card?: 'summary' | 'summary_large_image';
};
export type Props = SEOMetadata & {
og?: OpenGraph;
twitter?: Twitter;
};
const {
name,
description,
image,
locale = 'en',
canonicalURL = new URL(Astro.url.pathname, Astro.site),
og: _og = {},
twitter: _twitter = {},
} = Astro.props;
const title = [Astro.props.title, name].filter(Boolean).join(' | ');
const og: OpenGraph = { name, title, description, canonicalURL, image, locale, type: 'website', ..._og };
const twitter: Twitter = { name, title, description, canonicalURL, image, locale, card: 'summary_large_image', ..._twitter };
const ensureSlash = (url: string | URL) => `${url.toString().replace(/\/$/, '')}/`;
---
<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="generator" content={Astro.generator} />
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#d2e1f9" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="mask-icon" href="/favicon.svg" color="#d2e1f9" />
<link rel="sitemap" href="/sitemap-index.xml" />
<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
<title set:html={smartypants(title, 1)} />
<!-- Page Metadata -->
<meta name="generator" content={Astro.generator} />
{canonicalURL && <link rel="canonical" href={ensureSlash(canonicalURL)} />}
<title>{title}</title>
<meta name="description" content={description} />
<!-- OpenGraph Tags -->
<meta property="og:title" content={og.title} />
<meta property="og:type" content={og.type} />
{og.canonicalURL && <meta property="og:url" content={ensureSlash(og.canonicalURL)} />}
<meta property="og:locale" content={og.locale} />
<meta property="og:description" content={og.description} />
<meta property="og:site_name" content={og.name} />
{
og.image && (
<>
<meta property="og:image" content={og.image.src} />
<meta property="og:image:alt" content={og.image.alt} />
</>
)
}
<!-- Twitter Tags -->
{twitter.card && <meta name="twitter:card" content={twitter.card} />}
{twitter.handle && <meta name="twitter:site" content={twitter.handle} />}
<meta name="twitter:title" content={twitter.title} />
<meta name="twitter:description" content={twitter.description} />
{
twitter.image && (
<>
<meta name="twitter:image" content={twitter.image.src} />
<meta name="twitter:image:alt" content={twitter.image.alt} />
</>
)
}
|
