fix: prefer branded homepage search image

2 files changed, 32 insertions, 18 deletions

diff --git a/website/css/style.css b/website/css/style.css
index 545b9123..d1751e34 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1586,14 +1586,17 @@ samp {
     border-bottom: 1px solid var(--line);
 }
 
-.community-video-thumb img {
+.community-video-image {
+    display: block;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    background-image: var(--thumbnail);
+    background-position: center;
+    background-size: cover;
     transition: transform 180ms ease;
 }
 
-.community-video-card:hover .community-video-thumb img {
+.community-video-card:hover .community-video-image {
     transform: scale(1.025);
 }
 
diff --git a/website/index.html b/website/index.html
index 5d9c2b9c..021a37e6 100644
--- a/website/index.html
+++ b/website/index.html
@@ -26,6 +26,14 @@
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
         <meta property="og:image:alt" content="Herdr. One terminal. The whole herd." />
+        <script type="application/ld+json">
+            {
+                "@context": "https://schema.org",
+                "@type": "WebPage",
+                "url": "https://herdr.dev/",
+                "primaryImageOfPage": "https://herdr.dev/assets/og-card-v8.png"
+            }
+        </script>
 
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="Herdr: one terminal for the whole herd" />
@@ -411,11 +419,12 @@
                 <div class="community-video-grid" aria-label="Community videos about Herdr">
                     <a class="community-video-card" href="https://www.youtube.com/watch?v=qnIu-Xu64H0" target="_blank" rel="noopener">
                         <span class="community-video-thumb">
-                            <img
-                                src="https://i.ytimg.com/vi/qnIu-Xu64H0/maxresdefault.jpg"
-                                alt="Thumbnail for Jilles' Herdr in about 6 minutes video"
-                                loading="lazy"
-                            />
+                            <span
+                                class="community-video-image"
+                                role="img"
+                                aria-label="Thumbnail for Jilles' Herdr in about 6 minutes video"
+                                style="--thumbnail: url('https://i.ytimg.com/vi/qnIu-Xu64H0/maxresdefault.jpg')"
+                            ></span>
                             <span class="play-badge" aria-hidden="true"></span>
                         </span>
                         <span class="community-video-copy">
@@ -426,11 +435,12 @@
                     </a>
                     <a class="community-video-card" href="https://www.youtube.com/watch?v=5GtkyPvuvbQ" target="_blank" rel="noopener">
                         <span class="community-video-thumb">
-                            <img
-                                src="https://i.ytimg.com/vi/5GtkyPvuvbQ/maxresdefault.jpg"
-                                alt="Thumbnail for DevOps Toolbox's This Tmux Rewrite Is Actually Brilliant video"
-                                loading="lazy"
-                            />
+                            <span
+                                class="community-video-image"
+                                role="img"
+                                aria-label="Thumbnail for DevOps Toolbox's This Tmux Rewrite Is Actually Brilliant video"
+                                style="--thumbnail: url('https://i.ytimg.com/vi/5GtkyPvuvbQ/maxresdefault.jpg')"
+                            ></span>
                             <span class="play-badge" aria-hidden="true"></span>
                         </span>
                         <span class="community-video-copy">
@@ -441,11 +451,12 @@
                     </a>
                     <a class="community-video-card" href="https://www.youtube.com/watch?v=PlN86TvzGy4" target="_blank" rel="noopener">
                         <span class="community-video-thumb">
-                            <img
-                                src="https://i.ytimg.com/vi/PlN86TvzGy4/maxresdefault.jpg"
-                                alt="Thumbnail for Better Stack's Herdr agent multiplexer video"
-                                loading="lazy"
-                            />
+                            <span
+                                class="community-video-image"
+                                role="img"
+                                aria-label="Thumbnail for Better Stack's Herdr agent multiplexer video"
+                                style="--thumbnail: url('https://i.ytimg.com/vi/PlN86TvzGy4/maxresdefault.jpg')"
+                            ></span>
                             <span class="play-badge" aria-hidden="true"></span>
                         </span>
                         <span class="community-video-copy">