-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathBlogPostMeta.astro
More file actions
90 lines (84 loc) · 2.57 KB
/
BlogPostMeta.astro
File metadata and controls
90 lines (84 loc) · 2.57 KB
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
90
---
import { getBlogPostMeta } from "../lib/seo";
import {
SITE_TITLE,
SITE_DESCRIPTION,
SITE_URL,
TWITTER_HANDLE,
MY_NAME,
} from "../config";
export interface Props {
title?: string;
description?: string;
publishDate: string;
pagePath?: string;
ogImageAbsoluteUrl?: string;
ogImageAltText?: string;
ogImageWidth?: number;
ogImageHeight?: number;
}
const {
title,
description,
publishDate,
pagePath,
ogImageAbsoluteUrl,
ogImageAltText,
ogImageWidth,
ogImageHeight,
} = Astro.props;
const { meta, og, twitter } = getBlogPostMeta({
title: title || SITE_TITLE,
description: description || SITE_DESCRIPTION,
pageUrl: pagePath ? new URL(pagePath, SITE_URL).toString() : undefined,
authorName: MY_NAME,
publishDate,
ogImageAbsoluteUrl,
ogImageAltText,
ogImageWidth,
ogImageHeight,
siteOwnerTwitterHandle: TWITTER_HANDLE,
contentAuthorTwitterHandle: TWITTER_HANDLE,
});
---
<!-- Primary Meta Tags -->
<title>{meta.title}</title>
<meta name="title" content={meta.title} />
{meta.description && <meta name="description" content={meta.description} />}
{meta.canonicalUrl && <link rel="canonical" href={meta.canonicalUrl} />}
<!-- Open Graph / Facebook -->
{og.title && <meta property="og:title" content={og.title} />}
{og.description && <meta property="og:description" content={og.description} />}
{og.type && <meta property="og:type" content={og.type} />}
{og.url && <meta property="og:url" content={og.url} />}
{og.author && <meta property="article:author" content={og.author} />}
{
og.publishDate && (
<meta property="article:published_time" content={og.publishDate} />
)
}
{og.image && <meta property="og:image" content={og.image} />}
{og.imageAlt && <meta property="og:image:alt" content={og.imageAlt} />}
{og.imageWidth && <meta property="og:image:width" content={og.imageWidth} />}
{og.imageHeight && <meta property="og:image:height" content={og.imageHeight} />}
<!-- Twitter -->
{twitter.title && <meta property="twitter:title" content={twitter.title} />}
{
twitter.description && (
<meta property="twitter:description" content={twitter.description} />
)
}
{twitter.site && <meta property="twitter:site" content={twitter.site} />}
{
twitter.creator && (
<meta property="twitter:creator" content={twitter.creator} />
)
}
<meta property="twitter:card" content="summary_large_image" />
{twitter.image && <meta property="twitter:image" content={twitter.image} />}
{
twitter.imageAlt && (
<meta property="twitter:image:alt" content={twitter.imageAlt} />
)
}
<!-- {twitter.url && <meta property="twitter:url" content={twitter.url} />} -->