Fix image meta tags

This commit is contained in:
Mikkel Svartveit 2024-05-29 19:12:25 +02:00
parent 22da734d46
commit 732f38f55b
2 changed files with 6 additions and 3 deletions

View file

@ -22,4 +22,5 @@ export default defineConfig({
experimental: { experimental: {
actions: true, actions: true,
}, },
site: "https://mikkelsvartveit.com",
}); });

View file

@ -10,10 +10,12 @@ interface Props {
const { title, description, image, themeColor } = Astro.props; const { title, description, image, themeColor } = Astro.props;
const origin = import.meta.env.PROD ? Astro.site?.origin : Astro.url.origin;
const fullTitle = title ? `${title} Mikkel Svartveit` : "Mikkel Svartveit"; const fullTitle = title ? `${title} Mikkel Svartveit` : "Mikkel Svartveit";
const defaultDescription = const defaultDescription =
"Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some articles, programming projects, and a small collection of photos I'm proud of."; "Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some articles, programming projects, and a small collection of photos I'm proud of.";
const defaultImage = "/favicon.png"; const fullImageUrl = origin + (image ?? "/favicon.png");
--- ---
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -33,13 +35,13 @@ const defaultImage = "/favicon.png";
<!-- Open Graph meta tags --> <!-- Open Graph meta tags -->
<meta property="og:title" content={fullTitle} /> <meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description ?? defaultDescription} /> <meta property="og:description" content={description ?? defaultDescription} />
<meta property="og:image" content={image ?? defaultImage} /> <meta property="og:image" content={fullImageUrl} />
<!-- Twitter meta tags --> <!-- Twitter meta tags -->
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@mikkelsvartveit" /> <meta name="twitter:site" content="@mikkelsvartveit" />
<meta name="twitter:title" content={fullTitle} /> <meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={description ?? defaultDescription} /> <meta name="twitter:description" content={description ?? defaultDescription} />
<meta name="twitter:image" content={image ?? defaultImage} /> <meta name="twitter:image" content={fullImageUrl} />
<ViewTransitions fallback="none" /> <ViewTransitions fallback="none" />