Skip to content

Commit 2de4319

Browse files
kixelatedclaude
andauthored
Add Open Graph and Twitter Card meta tags for better social sharing (#85)
Co-authored-by: Claude <noreply@anthropic.com>
1 parent 8b317c9 commit 2de4319

3 files changed

Lines changed: 32 additions & 3 deletions

File tree

public/layout/logo.png

61.2 KB
Loading

public/layout/logo.svg

Lines changed: 2 additions & 1 deletion
Loading

src/layouts/global.astro

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,52 @@ interface Props {
1010
title: string;
1111
date: string;
1212
description: string;
13+
cover?: string;
1314
};
1415
}
1516
1617
let { title, frontmatter, description } = Astro.props;
1718
if (frontmatter?.title) title = frontmatter.title;
1819
if (frontmatter?.description) description = frontmatter.description;
20+
21+
const siteUrl = Astro.site?.toString().replace(/\/$/, "") ?? "https://moq.dev";
22+
const pageUrl = new URL(Astro.url.pathname, siteUrl).toString();
23+
const fullTitle = title ? `${title} - Media over QUIC` : "Media over QUIC";
24+
const fullDescription = description
25+
? `Media over QUIC: ${description}`
26+
: "Media over QUIC is a new live media protocol designed for simplicity and scale. It uses new browser technologies like WebTransport and WebCodecs to deliver media with latency that rivals WebRTC.";
27+
const ogImage = new URL(frontmatter?.cover ?? "/layout/logo.png", siteUrl).toString();
1928
---
2029

2130
<!doctype html>
2231
<html lang="en" class="text-slate-100 sl-theme-dark">
2332
<head>
2433
<meta charset="UTF-8" />
25-
<meta name="description" content={description ? `Media over QUIC: ${description}` : "Media over QUIC is a new live media protocol designed for simplicity and scale. It uses new browser technologies like WebTransport and WebCodecs to deliver media (and arbitrary data) with latency that rivals WebRTC. It is being standardized by the IETF." } />
34+
<meta name="description" content={fullDescription} />
2635
<meta name="viewport" content="width=device-width, initial-scale=1" />
2736
<link rel="icon" type="image/svg+xml" href="/layout/favicon.svg" />
2837
<link rel="alternate" type="application/rss+xml" title="moq.dev RSS Feed" href={new URL("rss.xml", Astro.site)} />
2938
<meta name="generator" content={Astro.generator} />
30-
<title>{title ? `${title} - Media over QUIC` : "Media over QUIC"}</title>
39+
<title>{fullTitle}</title>
40+
41+
<!-- Open Graph -->
42+
<meta property="og:type" content={frontmatter?.date ? "article" : "website"} />
43+
<meta property="og:title" content={fullTitle} />
44+
<meta property="og:description" content={fullDescription} />
45+
<meta property="og:url" content={pageUrl} />
46+
<meta property="og:site_name" content="Media over QUIC" />
47+
<meta property="og:image" content={ogImage} />
48+
<meta property="og:image:width" content="1200" />
49+
<meta property="og:image:height" content="630" />
50+
51+
<!-- Twitter Card -->
52+
<meta name="twitter:card" content="summary_large_image" />
53+
<meta name="twitter:title" content={fullTitle} />
54+
<meta name="twitter:description" content={fullDescription} />
55+
<meta name="twitter:image" content={ogImage} />
56+
57+
<!-- Theme color -->
58+
<meta name="theme-color" content="#0f172a" />
3159
</head>
3260
<body class="min-h-screen bg-slate-900 flex justify-center">
3361
<div class="flex flex-col md:flex-row gap-0 bg-slate-900 shadow-2xl max-w-6xl w-full p-4">

0 commit comments

Comments
 (0)