Skip to content

Add reusable social preview image and metadata #7

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
AlexanderWagnerDev merged 2 commits into from
Jul 26, 2026
Merged

Add reusable social preview image and metadata #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdb164c
Add reusable social preview metadata
AlexanderWagnerDev Jul 26, 2026
fceae22
Add files via upload
AlexanderWagnerDev Jul 26, 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
Binary file added assets/img/social-preview.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.
12 changes: 11 additions & 1 deletion includes/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
$canonicalPath = preg_replace('#/index\.php$#', '/', $canonicalPath);
$canonicalUrl = 'https://openrtmp.org' . $canonicalPath;
$ogType = $ogType ?? 'website';
$socialImage = $socialImage ?? 'https://openrtmp.org/assets/img/social-preview.png';
$socialImageWidth = $socialImageWidth ?? 1200;
$socialImageHeight = $socialImageHeight ?? 630;
$socialImageAlt = $socialImageAlt ?? 'OpenRTMP social preview showing the librtmp2 Rust RTMP/E-RTMP library and the self-hosted RTMP/RTMPS server with web panel.';
?>
<!DOCTYPE html>
<html lang="en">
Expand All @@ -22,9 +26,15 @@
<meta property="og:title" content="<?php echo htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($pageDescription, ENT_QUOTES, 'UTF-8'); ?>">
<meta property="og:url" content="<?php echo htmlspecialchars($canonicalUrl, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:card" content="summary">
<meta property="og:image" content="<?php echo htmlspecialchars($socialImage, ENT_QUOTES, 'UTF-8'); ?>">
<meta property="og:image:width" content="<?php echo (int) $socialImageWidth; ?>">
<meta property="og:image:height" content="<?php echo (int) $socialImageHeight; ?>">
Comment on lines +30 to +31

@qodo-code-review qodo-code-review Bot Jul 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Remediation recommended

1. Invalid og image dimensions 🐞 Bug ≡ Correctness

$socialImageWidth/$socialImageHeight are output as integers without validating they are positive, so
a non-null but invalid override (e.g., empty string) bypasses the ?? defaults and can emit 0/invalid
og:image:width/height metadata. This can cause social parsers to ignore or mis-handle the image
dimensions for pages that override these values incorrectly.
Agent Prompt 
## Issue description
`$socialImageWidth` and `$socialImageHeight` are emitted as integers but are not validated to be positive integers. Because the defaults use `??`, any non-null invalid value (e.g., `''`, `false`, `'abc'`) will bypass the default and then be cast to `0`, producing invalid Open Graph dimension metadata.

## Issue Context
Pages currently don’t override these variables, but the PR explicitly makes them overridable. Defensive validation prevents future callers/config from unintentionally emitting invalid metadata.

## Fix Focus Areas
- includes/header.php[10-13]
- includes/header.php[29-31]

## Suggested change
Before emitting the meta tags, normalize the values to positive ints (fallback to 1200/630 when invalid), e.g.:
- If `!is_int($socialImageWidth)`/`!ctype_digit((string)$socialImageWidth)` or `(int)$socialImageWidth <= 0`, set to `1200`
- Same for height with `630`

Keep the `(int)` cast in output after validation.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

<meta property="og:image:alt" content="<?php echo htmlspecialchars($socialImageAlt, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:description" content="<?php echo htmlspecialchars($pageDescription, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:image" content="<?php echo htmlspecialchars($socialImage, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:image:alt" content="<?php echo htmlspecialchars($socialImageAlt, ENT_QUOTES, 'UTF-8'); ?>">
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/content.css">
Expand Down
Loading