File size: 2,030 Bytes
6afedde |
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 |
---
interface Props {
title: string;
description?: string;
authors?: string[];
published?: string;
tags?: string[];
image?: string; // Preferred absolute URL
}
const {
title,
description = "",
authors = [],
published,
tags = [],
image,
} = Astro.props as Props;
const url = Astro.url?.toString?.() ?? "";
const site = (Astro.site ? String(Astro.site) : "") as string;
const ogImage =
image && image.length > 0
? image.startsWith("http")
? image
: site
? new URL(image, site).toString()
: image
: undefined;
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
headline: title,
description: description || undefined,
datePublished: published || undefined,
author: authors.map((name) => ({ "@type": "Person", name })),
keywords: tags.length ? tags.join(", ") : undefined,
mainEntityOfPage: url || undefined,
image: ogImage ? [ogImage] : undefined,
};
---
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={url} />
<meta property="og:type" content="article" />
<meta property="og:title" content={title} />
{description && <meta property="og:description" content={description} />}
<meta property="og:url" content={url} />
{
ogImage && (
<meta
property="og:image"
content={
"https://HuggingFaceTB-smol-training-playbook.hf.space/thumb.png"
}
/>
)
}
{published && <meta property="article:published_time" content={published} />}
{authors.map((a) => <meta property="article:author" content={a} />)}
<meta
name="twitter:card"
content={ogImage ? "summary_large_image" : "summary"}
/>
<meta name="twitter:title" content={title} />
{description && <meta name="twitter:description" content={description} />}
{
ogImage && (
<meta
name="twitter:image"
content={
"https://HuggingFaceTB-smol-training-playbook.hf.space/thumb.png"
}
/>
)
}
<script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
|