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

View File

@@ -7,7 +7,7 @@ import TableOfContents from "../components/TableOfContents.svelte";
import PublicationDate from "../components/PublicationDate.astro"; import PublicationDate from "../components/PublicationDate.astro";
--- ---
<PageLayout {title} {description}> <PageLayout {title} {description} ogImage={cover.src} >
<TableOfContents slot="nav" client:only="svelte" {headings} /> <TableOfContents slot="nav" client:only="svelte" {headings} />
<Image src={cover} alt={coverAlt} slot="header-before" /> <Image src={cover} alt={coverAlt} slot="header-before" />
<Fragment slot="header"> <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 "open-props/style";
import "../styles/global.css"; import "../styles/global.css";
@@ -13,7 +13,7 @@ import Footer from "../components/Footer.astro";
--- ---
<html lang="en"> <html lang="en">
<Head {title} {description} /> <Head {title} {description} {ogImage} />
<body> <body>
<Nav> <Nav>
<slot name="nav" /> <slot name="nav" />