Test og:image property

This commit is contained in:
thiloho
2023-05-25 00:35:35 +02:00
parent 029222bb03
commit 99c8bd61d2
3 changed files with 8 additions and 5 deletions

View File

@@ -1,5 +1,7 @@
---
const { title, description } = Astro.props;
const { title, description, ogImage = "" } = Astro.props;
const imageUrl = new URL(ogImage, Astro.url.origin);
---
<head>
@@ -14,4 +16,5 @@ const { title, description } = Astro.props;
const storedTheme = localStorage.getItem("theme");
document.documentElement.className = storedTheme;
</script>
</head>
<meta property="og:image" content={imageUrl} />
</head>

View File

@@ -7,7 +7,7 @@ import TableOfContents from "../components/TableOfContents.svelte";
import PublicationDate from "../components/PublicationDate.astro";
---
<PageLayout {title} {description}>
<PageLayout {title} {description} ogImage={cover.src} >
<TableOfContents slot="nav" client:only="svelte" {headings} />
<Image src={cover} alt={coverAlt} slot="header-before" />
<Fragment slot="header">

View File

@@ -1,5 +1,5 @@
---
const { title, description } = Astro.props;
const { title, description, ogImage } = Astro.props;
import "open-props/style";
import "../styles/global.css";
@@ -13,7 +13,7 @@ import Footer from "../components/Footer.astro";
---
<html lang="en">
<Head {title} {description} />
<Head {title} {description} {ogImage} />
<body>
<Nav>
<slot name="nav" />