Skip to content

Add Open Graph and Twitter Card meta tags for better social sharing #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kixelated merged 5 commits into from
Mar 11, 2026
Merged

Add Open Graph and Twitter Card meta tags for better social sharing #85

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f6a7095
Add Open Graph and Twitter Card meta tags for social media embeds
claude Mar 11, 2026
bc6dc32
Update bun.lock
claude Mar 11, 2026
67d75cb
Better logo.
kixelated Mar 11, 2026
2fe570f
Better logo.
kixelated Mar 11, 2026
63bf437
coderabbit
kixelated Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/og-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 32 additions & 2 deletions src/layouts/global.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,54 @@ interface Props {
title: string;
date: string;
description: string;
cover?: string;
};
}

let { title, frontmatter, description } = Astro.props;
if (frontmatter?.title) title = frontmatter.title;
if (frontmatter?.description) description = frontmatter.description;

const siteUrl = Astro.site?.toString().replace(/\/$/, "") ?? "https://moq.dev";
const pageUrl = new URL(Astro.url.pathname, siteUrl).toString();
const fullTitle = title ? `${title} - Media over QUIC` : "Media over QUIC";
const fullDescription = 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 with latency that rivals WebRTC.";
const ogImage = frontmatter?.cover
? `${siteUrl}${frontmatter.cover}`
: `${siteUrl}/og-image.png`;
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Resolve cover with new URL() instead of string concatenation.

This breaks as soon as a page passes an absolute image URL or a relative path without a leading /, so the new per-page OG image support can emit invalid og:image / twitter:image values.

Proposed fix 
-const ogImage = frontmatter?.cover
-	? `${siteUrl}${frontmatter.cover}`
-	: `${siteUrl}/og-image.png`;
+const ogImage = new URL(frontmatter?.cover ?? "/og-image.png", siteUrl).toString();
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/layouts/global.astro` around lines 27 - 29, The current ogImage string
concatenation can produce invalid URLs for absolute covers or relative paths
without a leading slash; update the logic that builds ogImage (using
frontmatter.cover and siteUrl) to resolve via new URL(frontmatter.cover,
siteUrl) when frontmatter.cover is present so absolute URLs remain unchanged and
relative paths are correctly resolved, and use new URL('/og-image.png', siteUrl)
as the fallback; ensure you reference the symbols ogImage, frontmatter.cover and
siteUrl in the change.

---

<!doctype html>
<html lang="en" class="text-slate-100 sl-theme-dark">
<head>
<meta charset="UTF-8" />
<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." } />
<meta name="description" content={fullDescription} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/layout/favicon.svg" />
<link rel="alternate" type="application/rss+xml" title="moq.dev RSS Feed" href={new URL("rss.xml", Astro.site)} />
<meta name="generator" content={Astro.generator} />
<title>{title ? `${title} - Media over QUIC` : "Media over QUIC"}</title>
<title>{fullTitle}</title>

<!-- Open Graph -->
<meta property="og:type" content={frontmatter?.date ? "article" : "website"} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={fullDescription} />
<meta property="og:url" content={pageUrl} />
<meta property="og:site_name" content="Media over QUIC" />
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={fullDescription} />
<meta name="twitter:image" content={ogImage} />

<!-- Theme color -->
<meta name="theme-color" content="#0f172a" />
</head>
<body class="min-h-screen bg-slate-900 flex justify-center">
<div class="flex flex-col md:flex-row gap-0 bg-slate-900 shadow-2xl max-w-6xl w-full p-4">
Expand Down
Loading