- Added shared Open Graph/Twitter/canonical metadata rendering in [includes/layout.php](/Users/tyemeclifford/Documents/GH/mediaplayer/includes/layout.php).

The main video page now uses the active video’s:title
description
canonical /v/<slug> URL
thumbnail as og:image / twitter:image
image dimensions when available

The standalone embed page also now emits social metadata using the video 
thumbnail.

embed.php

@@ -34,6 +34,13 @@ foreach ($player_sources as $player_source) {
     if (($player_source['kind'] ?? '') !== 'iframe') $native_player_sources[] = $player_source;
 }
 
+$meta_title = $video ? $video['title'] . ' — TyClifford.com' : 'Video Player';
+$meta_description = $video && trim($video['description'] ?? '') !== '' ? trim($video['description']) : 'TyClifford.com media player';
+$meta_url = $video
+    ? public_absolute_url('embed.php?v=' . rawurlencode($video['slug']))
+    : public_absolute_url('embed.php');
+$meta_image = ($video && !empty($video['thumbnail'])) ? public_absolute_url(public_media_url($video['thumbnail'])) : '';
+
 // X-Frame-Options: allow embedding from any origin.
 // If you want to restrict, change ALLOWALL to SAMEORIGIN or remove for CSP header instead.
 header('X-Frame-Options: ALLOWALL');
@@ -45,6 +52,25 @@ header('Content-Security-Policy: frame-ancestors *');
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><?= $video ? htmlspecialchars($video['title'], ENT_QUOTES) . ' — TyClifford.com' : 'Video Player' ?></title>
+  <meta name="description" content="<?= h($meta_description) ?>">
+  <link rel="canonical" href="<?= h($meta_url) ?>">
+  <meta property="og:type" content="<?= $video ? 'video.other' : 'website' ?>">
+  <meta property="og:site_name" content="TyClifford.com">
+  <meta property="og:title" content="<?= h($meta_title) ?>">
+  <meta property="og:description" content="<?= h($meta_description) ?>">
+  <meta property="og:url" content="<?= h($meta_url) ?>">
+  <?php if ($meta_image !== ''): ?>
+    <meta property="og:image" content="<?= h($meta_image) ?>">
+    <meta property="og:image:secure_url" content="<?= h($meta_image) ?>">
+    <meta property="og:image:alt" content="<?= h($video['title']) ?>">
+  <?php endif; ?>
+  <meta name="twitter:card" content="<?= $meta_image !== '' ? 'summary_large_image' : 'summary' ?>">
+  <meta name="twitter:title" content="<?= h($meta_title) ?>">
+  <meta name="twitter:description" content="<?= h($meta_description) ?>">
+  <?php if ($meta_image !== ''): ?>
+    <meta name="twitter:image" content="<?= h($meta_image) ?>">
+    <meta name="twitter:image:alt" content="<?= h($video['title']) ?>">
+  <?php endif; ?>
   <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet"/>
   <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
   <style>

includes/layout.php

@@ -3,13 +3,53 @@
  * layout.php — shared HTML head, header, and footer partials
  */
 
-function render_head(string $title = 'Media — TyClifford.com', string $extra_css = ''): void { ?>
+function render_social_meta(string $title, array $meta = []): void {
+    $site_name = trim((string)($meta['site_name'] ?? setting('site_title', 'Ty Clifford')));
+    $description = trim((string)($meta['description'] ?? setting('site_sub', 'tyclifford.com / media')));
+    $type = trim((string)($meta['type'] ?? 'website'));
+    $url = trim((string)($meta['url'] ?? public_absolute_url($_SERVER['REQUEST_URI'] ?? public_home_url())));
+    $image = trim((string)($meta['image'] ?? ''));
+    $image_alt = trim((string)($meta['image_alt'] ?? $title));
+    $image_width = (int)($meta['image_width'] ?? 0);
+    $image_height = (int)($meta['image_height'] ?? 0);
+    $twitter_card = $image !== '' ? 'summary_large_image' : 'summary';
+
+    $url = public_absolute_url($url);
+    if ($image !== '') $image = public_absolute_url($image);
+?>
+  <meta name="description" content="<?= h($description) ?>">
+  <link rel="canonical" href="<?= h($url) ?>">
+  <meta property="og:type" content="<?= h($type) ?>">
+  <meta property="og:site_name" content="<?= h($site_name) ?>">
+  <meta property="og:title" content="<?= h($title) ?>">
+  <meta property="og:description" content="<?= h($description) ?>">
+  <meta property="og:url" content="<?= h($url) ?>">
+  <?php if ($image !== ''): ?>
+    <meta property="og:image" content="<?= h($image) ?>">
+    <meta property="og:image:secure_url" content="<?= h($image) ?>">
+    <meta property="og:image:alt" content="<?= h($image_alt) ?>">
+    <?php if ($image_width > 0 && $image_height > 0): ?>
+      <meta property="og:image:width" content="<?= $image_width ?>">
+      <meta property="og:image:height" content="<?= $image_height ?>">
+    <?php endif; ?>
+  <?php endif; ?>
+  <meta name="twitter:card" content="<?= h($twitter_card) ?>">
+  <meta name="twitter:title" content="<?= h($title) ?>">
+  <meta name="twitter:description" content="<?= h($description) ?>">
+  <?php if ($image !== ''): ?>
+    <meta name="twitter:image" content="<?= h($image) ?>">
+    <meta name="twitter:image:alt" content="<?= h($image_alt) ?>">
+  <?php endif; ?>
+<?php }
+
+function render_head(string $title = 'Media — TyClifford.com', string $extra_css = '', array $meta = []): void { ?>
 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><?= h($title) ?></title>
+  <?php render_social_meta($title, $meta); ?>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">

index.php

@@ -54,7 +54,36 @@ foreach ($player_sources as $player_source) {
     if (($player_source['kind'] ?? '') !== 'iframe') $native_player_sources[] = $player_source;
 }
 
-render_head('Media — TyClifford.com', '
+$site_title = setting('site_title', 'Ty Clifford');
+$share_title = $video ? $video['title'] . ' — ' . $site_title : 'Media — ' . $site_title;
+$share_description = $video && trim($video['description'] ?? '') !== ''
+    ? trim($video['description'])
+    : setting('site_sub', 'tyclifford.com / media');
+$share_url = $video ? public_absolute_url(public_video_url($video['slug'])) : public_absolute_url(public_home_url());
+$share_image = ($video && !empty($video['thumbnail'])) ? public_absolute_url(public_media_url($video['thumbnail'])) : '';
+$share_image_width = 0;
+$share_image_height = 0;
+if ($video && !empty($video['thumbnail']) && function_exists('getimagesize')) {
+    $share_image_file = MEDIA_DIR . ltrim($video['thumbnail'], '/');
+    if (is_file($share_image_file)) {
+        $share_image_size = @getimagesize($share_image_file);
+        if (is_array($share_image_size)) {
+            $share_image_width = (int)($share_image_size[0] ?? 0);
+            $share_image_height = (int)($share_image_size[1] ?? 0);
+        }
+    }
+}
+$share_meta = [
+    'description' => $share_description,
+    'url' => $share_url,
+    'type' => $video ? 'video.other' : 'website',
+    'image' => $share_image,
+    'image_alt' => $video ? $video['title'] : $site_title,
+    'image_width' => $share_image_width,
+    'image_height' => $share_image_height,
+];
+
+render_head($share_title, '
   /* ── Catalogue grid ── */
   .cat-section { display:flex; flex-direction:column; gap:1rem; }
   .cat-header  { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
@@ -267,7 +296,7 @@ render_head('Media — TyClifford.com', '
   }
   .embed-toggle-btn:hover { color:var(--text-2); border-color:var(--purple); background:rgba(176,96,255,.07); }
   .embed-toggle-btn.active { color:var(--purple); border-color:var(--purple); background:rgba(176,96,255,.1); }
-');
+', $share_meta);
 ?>
 <main class="page" role="main">